【目录】
- 一、jQuery 如何获取元素
- 二、改变结果集
- 三、jQuery 的链式操作是怎样的
- 四、元素的操作：取值和赋值
- 五、元素的操作：移动
- 六、元素的操作：复制、删除和创建
- 七、工具方法
一、jQuery 如何获取元素
jQuery 的基本设计思想和主要用法，就是 "选择某个网页元素，然后对其进行某种操作"。这是它区别于其他 Javascript 库的根本特点。
使用 jQuery 的第一步，往往就是将一个选择表达式，放进构造函数 jQuery ()（简写为 $），然后得到被选中的元素。
选择表达式可以是 CSS 选择器：
$(document) // 选择整个文档对象
$('#myId') // 选择 ID 为 myId 的网页元素
$('div.myClass') // 选择 class 为 myClass 的 div 元素
$('input [name=first]') // 选择 name 属性等于 first 的 input 元素
也可以是 jQuery 特有的表达式：
$('a:first') // 选择网页中第一个 a 元素
$('tr:odd') // 选择表格的奇数行
$('#myForm :input') // 选择表单中的 input 元素
$('div:visible') // 选择可见的 div 元素
$('div:gt (2)') // 选择所有的 div 元素，除了前三个
$('div:animated') // 选择当前处于动画状态的 div 元素
二.改变结果集
jQuery 设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。
$('div').has ('p'); // 选择包含 p 元素的 div 元素
$('div').not ('.myClass'); // 选择 class 不等于 myClass 的 div 元素
$('div').filter ('.myClass'); // 选择 class 等于 myClass 的 div 元素
$('div').first (); // 选择第 1 个 div 元素
$('div').eq (5); // 选择第 6 个 div 元素
有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery 也提供了在 DOM 树上的移动方法：
$('div').next ('p'); // 选择 div 元素后面的第一个 p 元素
$('div').parent (); // 选择 div 元素的父元素
$('div').closest ('form'); // 选择离 div 最近的那个 form 父元素
$('div').children (); // 选择 div 的所有子元素
$('div').siblings (); // 选择 div 的同级元素
三.jQuery 的链式操作是怎样的
jQuery 设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：
分解开来，就是下面这样：
$('div') // 找到 div 元素
.find ('h3') // 选择其中的 h3 元素
.eq (2) // 选择第 3 个 h3 元素
.html ('Hello'); // 将它的内容改为 Hello
这是 jQuery 最令人称道、最方便的特点。它的原理在于每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作可以连在一起。
jQuery 还提供了.end() 方法，使得结果集可以后退一步：
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end () // 退回到选中所有的 h3 元素的那一步
.eq (0) // 选中第一个 h3 元素
.html ('World'); // 将它的内容改为 World
四、元素的操作：取值和赋值
操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。
jQuery 设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即 "取值器" 与 "赋值器" 合一。到底是取值还是赋值，由函数的参数决定。
$('h1').html (); //html () 没有参数，表示取出 h1 的值
$('h1').html ('Hello'); //html () 有参数 Hello，表示对 h1 进行赋值
常见的取值和赋值函数如下：
.html() 取出或设置 html 内容
.text() 取出或设置 text 内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值
需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text() 例外，它取出所有元素的 text 内容）。
五、元素的操作：移动
jQuery 设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
假定我们选中了一个 div 元素，需要把它移动到 p 元素后面。
第一种方法是使用.insertAfter()，把 div 元素移动 p 元素后面：
$('div').insertAfter($('p'));
第二种方法是使用.after()，把 p 元素加到 div 元素前面：
$('p').after($('div'));
表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回 div 元素，第二种方法返回 p 元素。你可以根据需要，选择到底使用哪一种方法。
使用这种模式的操作方法，一共有四对：
.insertAfter() 和.after()：在现存元素的外部，从后面插入元素
.insertBefore() 和.before()：在现存元素的外部，从前面插入元素
.appendTo() 和.append()：在现存元素的内部，从后面插入元素
.prependTo() 和.prepend()：在现存元素的内部，从前面插入元素
六、元素的操作：复制、删除和创建
除了元素的位置移动之外，jQuery 还提供其他几种操作元素的重要方法。
复制元素使用.clone()。
删除元素使用.remove() 和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
清空元素内容（但是不删除该元素）使用.empty()。
创建新元素的方法非常简单，只要把新元素直接传入 jQuery 的构造函数就行了：
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
七、工具方法
jQuery 设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。
如果你懂得 Javascript 语言的继承原理，那么就能理解工具方法的实质。
它是定义在 jQuery 构造函数上的方法，即 jQuery.method ()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的 prototype 对象上的方法，即 jQuery.prototype.method ()，所以必须生成实例（即选中元素）后使用。
如果不理解这种区别，问题也不大，只要把工具方法理解成，是像 javascript 原生函数那样，可以直接使用的方法就行了。
常用的工具方法有以下几种：
$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回 - 1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象，合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用 "{}" 或 "new Object" 建立的对象。
$.support() 判断浏览器是否支持某个特性。
jQuery API 中文文档：www.jquery123.com/
参考资料： 链接：www.ruanyifeng.com/blog/2011/0…
