JQuery常用API整理

整理了一些JQuery中自己常用的API，目前主要包括DOM操作相关API，其他以后再补充。

Core

JQuery()

接收一个CSS选择器字符串，返回一个可以操作DOM元素的对象。此方法可以简写成$()。

$(document) //选择整个文档对象
$('#myId') //选择id为myId的元素
$('div.myClass') //选择class为myClass的div元素

这个对象包含了根据选择器查找到的DOM元素的集合，以及一些JQuery提供的方法和属性。

选择器

借鉴CSS选择器，JQuery自己发明了一些功能更强的选择器。使用JQuery()方法时，除了可以传CSS选择器字符串作为参数，还可以传递JQuery自己发明的选择器。例如：

$('input[value="Hot Fuzz"]') //选择value为Hot Fuzz的input元素
$('a[hreflang|="en"]') //选择hreflang是以en为前缀的所有a标签
$('input[name*="man"]') //选择name属性中含有man文本的input元素
$('tr:odd') //选择表格的奇数行
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('a:first') //选择网页中第一个a元素

过滤器

JQuery提供了一些过滤器，可以对JQuery()方法查找到的结果集进行过滤。例如：

$('div').has('p'); // 选择包含p元素的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素

链式操作

链式操作是JQuery设计的巧思之一。一个链式操作的代码示例长这样：

// 选择div里的所有h3元素，再找到第3个h3元素
$('div').find('h3').eq(2)

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

DOM操作

操作元素属性

JQuery设计的另一个巧妙之处，就是使用同一个函数完成取值和赋值操作。具体实现是在函数体里判断参数类型和参数个数，来判断走取值逻辑还是赋值逻辑。

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

常用的函数如下：

.html()
.text()
.css() 
.attr() // 取出或设置某个属性的值
.val() // 取出或设置表单元素的值

移动元素

.append() 在每个匹配元素末尾插入参数内容。

.appendTo() 将匹配的元素插入到目标元素的最后面（内部插入）。

.prepend() 将参数内容插入到每个匹配元素的前面（元素内部）。

.prependTo() 将匹配到的所有元素插入到目标前面（元素内）。

.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

.before() 在匹配元素的前面插入参数所指定的内容（外部插入）。

.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

复制、删除和创建元素

复制

复制元素，使用.clone()方法。它会返回一个深拷贝副本。

删除

.detach() //从DOM中去掉所有匹配的元素。
.empty() //清空元素内容，但不删除该元素。
.remove() //将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
.unwrap() //将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

值得注意的是.detach()方法保留了被删除元素的事件，有利于重新插入文档时使用。