前言
在写项目的时候需要动态对某组件的属性进行调整，我看网上的教程都是使用document.getElementById等，但我在eclipse编写.jsp文件的时候，却提示document cannot be resolved。由于我对jsp没有系统的了解以及无人可咨询，网上也没遇到过相关解释，所以至今无解。通过查阅各种资料作出猜测如下：
- 可能是因为document只能写在
.html文件中的<script>下，而不能直接写在.jsp文件里。 - 可能类似
var变量的使用，由于jdk版本太低而无法使用。 - 可能我的tomcat有点问题，或者哪些库没有使用正确。
【ps：如果你能为我解答欢迎留言，非常感谢！】
在查阅资料的过程中，了解到还有一种方法可以实现我的要求：JQuery。简单来说，JQuery的使用方法就是使用特定的语法将java代码嵌入到html中（经我简略测验，也可以写到.jsp文件里），以此来对某标签进行操作。
一、下载安装
jQuery 是一个 JavaScript 函数库，下载地址：http://www.jq22.com/jquery-info122
使用方法：
- 直接将文件下载到项目中去使用（我这里写的不详细，因为我用的是第二种），找到要下载的版本，点击下载。
- 使用网址访问。如上图，下载地址中还给出了引用地址，可以复制代码到
<head>中，例如：
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
可以测试一下：
<head>
<script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js" ></script>
<title>JQuery 练习</title>
<!-- 测试JQuery 是否加载 如果是undefinition 就是没引入。-->
<script>
if(typeof jQuery== "undefined")
{
window.alert("jQuery引用失败!");
}
else
{
window.alert("jQuery引用成功!");
}
</script>
</head>
二、使用工具大全
基础语法
基础语法是：$(selector).action()
其中：
- $：定义 jQuery
- selector：选择符，“查询”和“查找” HTML 元素
- action()：执行对元素的操作。
selector
| 类型 | 选择符 | 含义 |
|---|---|---|
$(this).action() | 对当前元素操作 | |
| 元素选择器 | $("p").action() | 对所有段落（p）操作 |
| 元素选择器 | $("p.intro").action() | 对所有class="intro"的段落（p）操作 |
| 元素选择器 | $("p#demo").action() | 对所有id="demo"段落（p）操作 |
$(".test").action() | 对class="test"的所有元素操作 | |
$("#test").action() | 对所有id="test"的元素操作 | |
| 属性选择器 | $("[href]").action() | 对所有带有href属性的元素操作 |
| 属性选择器 | $("[href='#']").action() | 对所有href值等于"#"的元素操作 |
| 属性选择器 | $("[href!='#']").action() | 对所有href值不等于"#"的元素操作 |
| 属性选择器 | $("[href$='.jpg']").action() | 对所有href值以".jpg"结尾的元素操作 |
$("ul li:first").action() | 对每个<ul>的第一个<li>元素操作 | |
$("div#intro .head").action() | 对id="intro"的<div>元素中的所有class="head"的元素操作 |
完整参考手册：jQuery 参考手册 - 选择器
action()
事件
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。通常会把 jQuery 代码放到
<head>部分的事件处理方法中。
| 事件 | 含义 |
|---|---|
ready(function(){}) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
click(function(){}) | 触发或将函数绑定到被选元素的点击事件 |
dblclick(function(){}) | 触发或将函数绑定到被选元素的双击事件 |
focus(function(){}) | 触发或将函数绑定到被选元素的获得焦点事件 |
mouseover(function(){}) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
完整参考手册：jQuery 参考手册 - 事件
※ ready()
所有jQuery函数需要位于一个document ready函数中：
$(document).ready
(
function()
{
// jQuery functions go here
}
);
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
效果
效果一般配合事件使用，例如当鼠标点击时进行的某种操作，写在function(){}里。
| 效果 | 含义 | 备注 |
|---|---|---|
| css(“background-color”,“red”) | 改变css属性 | |
| hide(speed,callback) | 隐藏 | speed参数（可选）规定隐藏/显示的速度，callback参数（可选）是隐藏或显示完成后所执行的函数名称。 |
| show(speed,callback) | 显示 | |
| toggle(speed,callback) | 切换显示和隐藏 |
参考来源：
JQuery安装与下载教程
jQuery 教程
