最近看了《jQuery实战第二版》有所得，写下这篇随笔，这篇随笔主要介绍jQuery中的常用功能。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
1.CSS3 选择器
| 选择器 | 例子 | 例子描述 |
| * | * | 选择所有元素 |
| element | p | 选择所有 <p> 元素 |
| element element | div p | 选择 <div> 元素内部的所有 <p> 元素 |
| element>element | div>p | 选择父元素为 <div> 元素的直接子元素为 <p>的所有 元素，隔一层的都不是 |
| element+element | div+p | 选择紧接在 <div> 元素之后的第一个兄弟 <p> 元素 |
| element~element | div~p | 选择紧接在 <div> 元素之后的所有兄弟 <p> 元素 |
| .class | .hua | 选择 class="hua" 的所有元素 |
| #id | #hua | 选择 id="hua" 的所有元素 |
| [attribute] | a[src] | 选择带有src 属性所有a元素 |
| [attribute=value] | a[src="hua"] | 选择带有src="hua" 属性所有a元素 |
| [attribute!=value] | a[src!="hua"] | 选择带有src 属性不等于 "hua" 所有a元素 |
| [attribute^=value] | a[src^="hua"] | 选择带有src 属性以 "hua" 开头所有a元素 |
| [attribute$=value] | a[src$="hua"] | 选择带有src 属性以 "hua" 结尾所有a元素 |
| [attribute*=value] | a[src*="hua"] | 选择带有src 属性包含单词 "hua" 所有a元素 |
2.jQuery支持的位置选择器
| 选择器 | 例子 | 例子描述 |
| :first | li a:first | 返回列表后代子节点的第一个a元素 |
| :last | li a:last | 返回列表后代子节点的最后一个a元素 |
| :first-child | li:first-child | 返回列表的第一个li列表项 |
| :last-child | li:last-child | 返回列表的最后一个li列表项 |
| :only-child | li:only-child | 返回所有没有兄弟节点的li元素 |
| :nth-child(n) | li:nth-child(2) | 返回列表中的第二个列表项 |
| :nth-child(even|odd) | li:nth-child(even) | 返回列表中偶数项 |
| :nth-child(Xn+Y) | li:nth-child(2n+1) | 返回列表中能被五整除的下一项 |
| :even | li:even | 返回列表的偶数项 |
| :odd | li:odd | 返回列表的基数项 |
| :eq(n) | li:eq(n) | 返回列表的第n个元素，（n 从 0 开始） |
| :gt(n) | li:gt(n) | 返回列表的第n个之后的元素 |
| :lt(n) | li:lt(n) | 返回列表的第n个之前的元素 |
3.jQuery支持的自定义选择器
| 选择器 | 描述 |
| :animated | 选择处于动画的元素 |
| :button | 选择按钮元素 |
| :checkbox | 选择复选框元素 |
| :checked | 选择处于选择状态的复选框或者单选按钮 |
| :contains(text) | 选择包文本text的元素 |
| :disabled | 选择禁用的元素 |
| :enabled | 选择启用的元素 |
| :file | 选择文件输入元素 |
| :has(selector) | 选择至少包含一个指定选择元素的元素 |
| :header | 选择标题元素 |
| :hidden | 选择隐藏的元素 |
| :image | 选择图片元素 |
| :input | 选择表单元素 |
| :not(selector) | 选择不匹配指定选择器的元素 |
| :parent | 选择有子节点的元素 |
| :password | 选择口令元素 |
| :radio | 选择单选框元素 |
| :reset | 选择重置按钮元素 |
| :selected | 选择处于选择状态的元素 |
| :submit | 选择提交按钮元素 |
| :text | 选择文本输入框元素 |
| :visible | 选择可见元素 |
4.jQuery中常用的功能
4.1隐藏、显示、切换
hide() 和 show() 方法来隐藏和显示 HTML 元素， toggle() 方法来切换 hide() 和 show() 方法
$("p").hide();
$("p").show();
$("p").toggle();
4.2获取内容html(),text(),val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
$("#test").html()
$("#test").text()
$("input").val()
4.3获取属性---attr()
$("#ahref").attr("href")
4.4给元素添加内容
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("div").append("important");
$("div").prepend("important");
$("div").before("important");
$("div").after("important");
4.5删除元素
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
$("div").remove()
$("div").empty()
4.6CSS 操作
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性$("div").addClass("important");
$("div").removeClass("important"); $("div").toggleClass("important");
$("div").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
4.7尺寸元素
- width()- 设置或返回元素的宽度（不包括内边距、边框或外边距）
- height()- 设置或返回元素的高度（不包括内边距、边框或外边距）
- innerWidth()- 返回元素的宽度（包括内边距）
- innerHeight()- 返回元素的高度（包括内边距）
- outerWidth()- 返回元素的宽度（包括内边距和边框）
- outerHeight()- 返回元素的高度（包括内边距和边框）
4.8遍历
jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。
这种移动被称为对 DOM 进行遍历。
4.8.1祖先的遍历：祖先是父、祖父或曾祖父等等
- parent() - 返回被选元素的直接父元素。
- parents()- 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>
- parentsUntil()- 返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div"); - closest([selector])- 返回指定元素最近的祖先元素，有可能是祖先的祖先元素
4.8.2后代的遍历：后代是子、孙、曾孙等等
- children() - 返回被选元素的所有直接子元素
- find() - 回被选元素的后代元素，一路向下直到最后一个后代
4.8.3同袍的遍历：同胞拥有相同的父元素。
- siblings() - 返回被选元素的所有同胞元素
- next() - 返回被选元素的下一个同胞元素。
- nextAll() - 返回被选元素的所有跟随的同胞元素。
- nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。
- prev() - 返回的是前面的同胞元素
- prevAll()
- prevUntil()
4.8.4遍历方法
- map() - 转换包装集中的元素，.map(callback(index,domElement))
-
var allIds=$("div").map(function(){ return (this.id=underfined) ? null : this.id }).get();//页面上所有的div元素的id值收集到一个数组中
- each() - 遍历包装集中的元素。
$("div").each(function(){ alert(this.id) }); - grep() - 按照某种条件来过滤数组
var nums = [1,2,3,4,"jasonhua",5] nums = $.grep(nums, function (num, index) { // num = 数组元素的当前值 // index = 当前值的下标 return isNaN(num); }); console.log(nums); //结果为： ["jasonhua"] nums = $.map(nums, function (num, index) { //和$.grep() 的区别 //return isNaN,得到结果为：[true, true] return isNaN(num) ? num : null; });
4.9基本的过滤器
- first() - 返回被选元素的首个元素。
- last() - 返回被选元素的最后一个元素。
- eq() - 返回被选元素中带有指定索引号的元素。索引号从 0 开始
- filter() - 匹配的元素会被返回
- not() - 返回不匹配标准的所有元素。与 filter() 相反。
$("div p").first();
$("div p").last();
$("p").eq(1);
$("p").filter(".intro");
$("p").not(".intro");
4.10ajax
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
$.ajax({ type: 'POST', contentType: "application/json", //必须有 dataType: "json", //表示返回值类型，不必须 url: $("#form1").data("post-url"), data: JSON.stringify(param), //{ name: "JasonHua", location: "上海" } success: function (data) { alert(data.message); } });
4.11绑定事件
$("#postButton").on("click", function () {
alert("hello!");
});
4.12数组和对象
var aArray = []; aArray.push(1); aArray.push(2); aArray.push(3); console.log(aArray) //输出 [1, 2, 3] aArray.pop(2); //按索引弹出数据 console.log(aArray) //输出 [1, 2] var aDic = new Object(); aDic["a"] = "a"; aDic["a"] = "a1"; console.log(aDic) //输出 Object {a: "a1"}
4.13JSON的转换
var aArray = []; aArray.push(1); aArray.push(2); aArray.push(3); JSON.stringify(aArray); //输出 "[1,2,3]" JSON.parse("[1,2,3]") //输出 [1, 2, 3] var aDic = new Object(); aDic["a"] = "a"; aDic["a1"] = "a1"; JSON.stringify(aDic); //输出 "{"a":"a","a1":"a1"}" JSON.parse('{"a":"a","a1":"a1"}') //输出 Object {a: "a", a1: "a1"}