一、选择元素

使用 jQuery 的第一步，就是用构造函数 jQuery()（简写为$），选中特定的元素。

jQuery 接受多种形式的参数，可以是 CSS 选择器，也可以是 jQuery 特有的表达式：

//CSS 选择器
$(document)             //选择整个文档对象
$('#xxx')               //选择 id 为 xxx 的网页元素
$('div.xxx')            //选择 class 为 xxx 的 div 元素

//jQuery 特有的表达式
$('a:first')            //选择网页中第一个 a 元素
$('tr:odd')             //选择表格的奇数行
$('#myForm :input')     //选择表单中的 input 元素
$('div:visible')        //选择可见的 div 元素
$('div:gt(1)')          //选择所有的 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 在选择一个元素之后，并不会返回该元素，而是返回一个对象，这个对象包含了操作该元素的方法，并且多数方法仍会返回一个 jQuery 实例对象。这就表示，在最终选中某个元素之后，就可以对它进行一系列的操作，并且这些操作可以连在一起，以链条的形式写出来，如：

$('div').find('h3').eq(2).addClass('red').end();
复制代码

分解开，就是下面这样：

$('div')                  //找到 div 元素
  .find('h3')             //选择其中所有的 h3 元素
  .eq(2)                  //选中第三个 h3 元素
  .addClass('red')        //给 class 上加个 red
  .end();                  //回到选中所有的 h3 元素
复制代码

三、创建元素

创建元素的方法很简单，只要把新元素传进 jQuery 的构造函数就可以了：

$('<p>Hello World</p>')
$('<div class="hello">你好</div>')
复制代码

四、移动元素

jQuery 提供了两种方法来移动元素的位置。一种是直接移动元素，另一种方法是移动其他元素。

比如，把一个 div 元素移动到 p 元素的后面：

$('div').insertAfter($('p'));     //把 div 元素插入到 p 元素的后面
$('p').after($('div'));           //把 p 元素加到 div 元素的前面
复制代码

两种方法的效果是相同的。区别是返回的对象不同，前者返回 div 元素的 jQuery 对象；后者返回 p 元素的 jQuery 对象。

类似的方法有四对：

.insertAfter()和.after()         //插入到...后面和在后面插入...
.insertBefore()和.before()       //插入到...前面和在前面插入...
.appendTo()和.append()           //插入到...中和在自己内部插入...（从最后一个元素后插入）
.prependTo()和.prepend()         //插入到...中和在自己内部插入...（从第一个元素前插入）
复制代码

五、取值和赋值

jQuery 支持用同一函数对元素进行取值和赋值操作。到底是取值还是赋值，由传入的参数决定，不传就是取值，传参就是赋值。

常用的取值和赋值方法有：

.html()          //取出或设置html内容
.text()          //取出或设置文本内容
.attr()          //取出或设置某个属性的值
.width()         //取出或设置某个元素的宽度
.height()        //取出或设置某个元素的高度
.val()           //取出某个表单元素的值
复制代码

若选中的结果有多个元素，赋值时会对所有元素进行赋值；取值时只取第一个元素的值（.text()除外，它取出元素中所有的 text 内容）