目录

1. jQuery 如何获取元素
2. jQuery 的链式操作
3. jQuery 如何创建元素
4. jQuery 如何移动元素
5. jQuery 如何修改元素的属性

一、获取正确的元素

1、 得到一个操作符合条件的数组的api

表达式可以是css选择器：

$(document) // 选择整个文档为对象 
$('#myID') // 选择ID为myId的网页元素

也可以是jQuery特有的表达式：

$('div:first') //选择网页中第一个div元素
$('#myForn:input') //先择表单中的input元素
$('tr:odd') //选择表格的奇数行
$('div:gt(3)') //选择所有的div元素，除了前4个

2、将数组变小，找到要操作的正确元素

jQuery提供了大量的过滤器：

$('div').eq(2) //选择第3个div元素
$('div').has('p') //选择包含p元素的div元素
$('div').filter('.myClass') //选择class为myClass的div元素
$('div').not('#myID') //选择ID不为myID的div元素
$('div').first() //选择第一个div元素

二、jQuery的链式操作

jQuery的特别之处在于，每一步操作之后都是return一个可以继续操作的api，使得操作可以连续，呈链式操作。
如：$('#test).find('.child').addClass('red')
把它拆开来如下：

$('#test') //找到ID为text的元素
.find('.child') //找到其中class为child的元素
.addClass('red') //为所有选定的元素加上class

jQuery还提供了end()方法，使得结果集可以后退一步。

三、创建元素

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了。如下：

$('<div class="text">text</div>')

原理是使用了重载的设计模式，对传入的参数进行了辨别。

四、移动元素

1、把div插入到p后面：

$('div').insertAfter($('p')) //返回操作div的jQuery元素
$('p').after($('div')) //返回操作p的jQuery元素

2、把div插入到p前面：

$('div').insertBefore($('p')) //返回操作div的jQuery元素
$('p').before($('div')) //返回操作p的jQuery元素

3、把p插入到div中，作为div的最后一个子元素

$('p').appendTo($('p')) //返回操作div的jQuery元素
$('div').append($('p')) //返回操作p的jQuery元素
```pre
4、把p插入到div中，作为div的第一个子元素
```js
$('p').preppendTo($('p')) //返回操作div的jQuery元素
$('div').preppend($('p')) //返回操作p的jQuery元素

五、修改元素的属性

jQuery中的属性读取与修改，都是同一个函数，应用了getter/setter设计模式。
当函数传入参数时，表示是修改属性，当不传参数时，是读属性。
常见的取值与赋值函数如下：

.html() // 取出或设置html内容
.text() //取出或设置text内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.heigth() //取出或设置某个元素的高度
.val() //取出某个表单元素的值

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值。.tetx()例外，它取出所有元素的text内容。