jQuery笔记（jQuery入门，选择器，设置属性和内容，遍历，事件，动态效果，Ajax，JSON）

jQuery笔记

2019/9/24 周二
学习内容: jQuery入门，选择器，设置属性和内容，遍历，事件，动态效果，Ajax，JSON

---

一、jQuery简介

jQuery是一个快速、简洁的JavaScript框架，它的设计宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

Query的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

二、使用前导入jQuery

1. 首先要有一个jQuery的js文件，可以从官网或Maven Repository仓库下载
2. 下载后一般是把文件放到项目下的js文件夹中
3. 使用时，导入这个js文件

注意：这个引用必须在所有js代码之前

三、jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()，括号里为选择器语法的字符串

因此，为了方便区分jQuery对象和JS对象，我们将所有由选择器获取的jQuery对象也用美元符号来标识，即 var $obj = $(“string”);

1. 基本选择器

语法 和 CSS 选择器语法一致

选择器类型	示例
id选择器	$("#hhh");
元素选择器	$(“div”);
类选择器	$(".myClass");

2. 层级选择器

语法 和 CSS 选择器语法一致

选择器类型	说明	格式	示例
后代选择器	在给定的祖先元素下匹配所有的后代元素	ancestor descendant	$(“form input”);
子选择器	在给定的父元素下匹配所有的子元素	parent > child	$(“form > input”);
相邻兄弟选择器	匹配所有紧接在 prev 元素后的 next 元素	prev + next	$(“label + input”);
通用兄弟选择器	匹配 prev 元素之后的所有 siblings 元素	prev ~ siblings	$(“form ~ input”);

3. : 选择器

具体用法示例详见jQuery官方文档

选择器	说明
:first	获取匹配的第一个元素
:last	获取匹配的最后一个元素
:not(selector)	去除所有与给定选择器匹配的元素，selector 是用于筛选的选择器
:even	匹配所有索引值为偶数的元素，从 0 开始计数
:odd	匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)	匹配一个给定索引值的元素，index 从 0 开始计数
:gt(index)	匹配所有大于给定索引值的元素，index 从 0 开始计数
:lt(index)	匹配所有小于给定索引值的元素，index 从 0 开始计数
:header	匹配如 h1, h2, h3之类的标题元素
:animated	匹配所有正在执行动画效果的元素
:focus	匹配当前获取焦点的元素

4. 内容选择器

具体用法示例详见jQuery官方文档

选择器	说明
:contains(text)	匹配包含给定文本的元素，text为一个需要查找的字符串
:empty	匹配所有不包含子元素或者文本的空元素
:has(selector)	匹配含有选择器所匹配的元素的元素，selector 是用于筛选的选择器
:parent	匹配含有子元素或者文本的元素

5. 可见性选择器

选择器	说明
:hidden	匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有的可见元素

6. 属性选择器

选择器	说明	示例
[attribute]	匹配包含给定属性的元素	查找所有含有 id 属性的 div 元素 $(“div[id]”)
[attribute = value]	匹配给定的属性是个特定值的元素	查找所有 name 属性是 newsletter 的 input 元素 $(“input[name=‘newsletter’]”);
[attribute != value]	匹配给定的属性不是某个特定值的元素	查找所有 name 属性不是 newsletter 的 input 元素 $(“input[name!=‘newsletter’]”);
[attribute^=value]	匹配给定的属性是以某些值开始的元素	查找所有 name 以 ‘news’ 开始的 input 元素 $(“input[name^=‘news’]”);
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	查找所有 name 以 ‘letter’ 结尾的 input 元素 $ (“input[name$=‘letter’]”)
[attribute*=value]	匹配给定的属性是以包含某些值的元素	查找所有 name 包含 ‘man’ 的 input 元素 $(“input[name*=‘man’]”)

7. 表单选择器

匹配所有表单控件，格式为$(":控件类型")，控件类型包括：
:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden

此外，还能匹配相应的表单对象属性：

选择器	说明
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected	匹配所有选中的option元素

四、设置/获取属性和内容

1. 属性：attr(name|properties|key,value|fn)

设置或返回被选元素的属性值（attribute）。

可以带的参数及用法有：

（1）name，即属性名称，可以返回属性值
例：返回文档中所有图像的src属性值

$("img").attr("src");

（2）properties，作为属性的“名/值对”对象，可以设置多个属性值
例：为所有图像设置src和alt属性

$("img").attr({ src: "test.jpg", alt: "Test Image" });

注意在括号 { }中，多个属性的键值对以逗号隔开，但最后一个不要有逗号

（3）key,value 属性名称和属性值，可以设置属性值
例：为所有图像设置src属性

$("img").attr("src","test.jpg");

（4）key,function(index, attr)，可以设置属性值
其中key是属性名称，function为返回属性值的函数,它的第一个参数为当前元素的索引值，第二个参数为原先的属性值。

例：把src属性的值设置为title属性的值

$("img").attr("title", function() { return this.src });

2. removeAttr(name)

从每一个匹配的元素中删除一个属性，参数极为要删除的属性名

如将文档中图像的src属性删除:

$("img").removeAttr("src");

3. 内容：HTML代码/文本/值

方法	作用	对应JS中
html([val/fn])	设置或返回所选元素的内容（包括 HTML 标记）	innerHTML
text([val/fn])	设置或返回所选元素的文本内容	innerText
val([val/fn/arr])	设置或返回表单字段的值	value

与JS中类似，jQuery中的这三个方法在无参数时，作用是获取元素的值或内容，有参数val时则为设置，相当于JS中var xx = xx.innerHTML表示获取元素的内容，xx.innerHTML = xx 则是给它赋值。

jQuery中的这三个方法，参数还可以是fn，即回调函数，它有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。带fn参数可以设置希望返回的字符串格式，在当中包括获取到的元素的值

另外，val()方法如果带arr参数，即一个数组，可以设置 check/select 的值

五、遍历获取元素

each(callback) 是jQuery的对象访问方法（对象访问的更多方法详见官方文档），以每一个匹配的元素作为上下文来执行一个函数。

其中，参数callback，表示一个回调函数，即最后执行的函数（在这里则是指遍历到某元素时所执行的函数）

回调函数接收两个参数（index,element），第一个参数是匹配到的元素在集合中的下标，第二个参数为匹配到的对应元素

var $lis = $("ul>li"); // 获取所有li标签的jQuery对象集合
$lis.each(function(index,ele){ // 遍历该集合
	console.log(index)); // 获取下标
	console.log(ele); // 获取对应的元素
	// 这里得到的是JS对象，因此可以通过innerHTML属性获取它的内容
	console.log(ele.innerHTML);
 });

注意：遍历获得的元素ele为JS对象，如果需要得到jQuery对象来进行操作，可以使用"$(this)“或” $(element)"

$(this).val=("12345");
$(ele).val=("12345"); // 名字与回调函数中参数的声明一样

六、事件

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。如JS中的onclick单击事件，在jQuery中对应的就是click事件

但在JS中事件调用函数的写法为"οnclick=function(){要执行的代码};"，而在jQuery中的写法为 “click(funtion(){要执行的代码})” ，其中的function也称为回调函数，即该事件发生以后要执行的函数。

1. blur()

如 表单中 第一个input标签 失去焦点(blur) 时 的事件可以这样表示：

$(":input:first").blur(function(){
	console.log(this);
})

2. submit()

再如JS表单提交时，在JS中写好check检查函数后，需要在form标签中指出

onsubmit="return check()"

而使用jQuery则可以直接在submit事件的回调函数中写检查的代码并返回，返回false表单就不会提交

$("form").submit( function () {
  return false;
} );

3. live()事件委派

在JS中如果要给元素绑定事件，这个元素必须是已经存在的。但有时给某些元素绑定了事件之后，再添加了同样能匹配这个选择器的元素，这个元素就不能触发同样的事件。为了优化这个问题，jQuery 给所有匹配的元素附加一个事件处理函数live，即使这个元素是以后再添加进来的也有效。

一个简单的例子：先给"clickme"类的元素绑定click事件

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

再添加一个新的"clickme"类元素

$('body').append('
Another target
');

点击新增的元素，他依然能够触发事件处理函数。

这里的 append() 是文档处理方法，可以向每个匹配的元素内部追加内容。

官方文档中对事件委派作了很详细的说明，可以仔细去阅读一下。

4. 其他

jQuery有完整的与 DOM 事件对应的事件，如表单、键盘、鼠标等，每一个动作都分得很详细，以及封装了一些新的功能，在这里不一一细说，可参考jQuery官方文档

七、动态效果

jQuery提供了一系列二点效果函数，可以实现页面的动态效果，下面这篇博客对jQuery效果做了详细的介绍：
jQuery动画效果大全

八、Ajax、JSON

jQuery的底层Ajax由"$.ajax()“实现，但一般不直接使用这个方法，而是用由它再次封装的” $.get()“和” $.post()"，这两个方法除了请求方式不同外，基本上是一样的。下面就以POST请求为例

1. 参数解读：

（1）url:发送请求地址。

（2）data:待发送 Key/value 参数，其格式与上面第四部分设置被选元素的属性值中properties的格式相同。

（3）callback:发送成功时的回调函数。

（4）type:指定Servlet返回内容的格式，xml, html, script, json, text, _default。

2. 关于JSON

（1）JSON介绍

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式，可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候将它还原为各编程语言所支持的数据格式。

简单来说，JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串，它的格式与上面第四部分设置被选元素的属性值中properties的格式相同。

使用JSON前要先去Maven仓库下载一个JSON的jar包，这里推荐阿里的fastjson

（2）JSON使用

在我们的案例中只要用到JSON.toJSONString()把集合转换成JSON对象，它的参数就是需要转换的集合

其他JSON的用法可参考：超详细JSON解析步骤

3. 实例

以之前笔记中的ishopn案例为例，当页面加载完成后，将commoditytype(简称ct)表填充进select标签中

（1）LoadCommoditytypeListServlet中，doGet和doPost方法代码：

// 从数据库中获取所有Commoditytype的集合
List ctList = new CommoditytypeControllerImpl().getCommoditytypeList(); 
// 获取向前台的输出流
PrintWriter writer = resp.getWriter();
// 把获取到的数据转换成JSON对象，并以字符串形式写入输出流中
writer.write(JSON.toJSONString(ctList));

（2）jQuery代码，$.post用到的参数：url、回调函数、返回内容的格式，因为这个案例是获取数据库中所有数据，不需要发送参数，所以省略data

$.post("/web05/loadCommoditytypeListServlet",function(data){ 
	// 遍历所有数据
	for(var i=0;i").attr("value",data[i].ct_id).html(data[i].ct_name));
	}
},"json") // type，指定请求返回的内容为JSON对象

在回调函数function()中，可以接收3个参数data、status和xhr，data是发送post请求后服务器返回的数据（在本案例中即ctList），status是服务器状态码，xhr为Ajax对象，其中data和status其实都是xhr的属性，但由于它们比较重要，所以在jQuery中被单独拿出来。

在本案例中，只要拿到data就可以了，所以省略了status和xhr参数