jQuery笔记jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他J

　　一、选择网页元素

　　二、改变结果集

　　三、链式操作

　　四、元素的操作：取值和赋值

　　五、元素的操作：移动

　　六、元素的操作：复制、删除和创建

选择网页元素

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

//一些基础选择器
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$("div,span,p.myClass") //将每个选择器匹配到元素后一并返回

//部分属性选择器
$('div[id]')//选择所有具有指定属性的元素，该属性可以是任何值。
$('input[value="Hot"]')//选择指定属性是给定值的元素。
$('input[name*="man"]')//查找所有 input的name属性中带有'man'的元素
$('input[name$="letter"]')//查找所有 name的属性名称以“letter”结束 的元素

改变结果集

//一些基础过滤
$("div:animated")//所有正在执行动画的
$("td:eq(2)")//第三个
$("tr:even")//index为偶数
$("tr:first")//第一个
$( "*:focus" )//获取焦点的
$("input:not(:checked) + span")//查找所有没有被选中的复选框，后面的span

//一些子元素的过滤
$("div span:first-child")//第一个子元素
$("span:first-of-type")//找span元素中的第一个
$("ul li:nth-child(2)")//第n个子元素

//过滤方法
$('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的同级元素

链式操作

$('div').find('h3').eq(2).html('Hello');

它的原理在于每一步的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元素后面。

$('div').insertAfter($('p'))//途径一
$('p').after($('div'))//途径二

两种途径的区别在于返回的元素，这将影响后面链式操作的对象。

.insertAfter()和.after()//在现存元素的外部，从后面插入元素
.insertBefore()和.before()//在现存元素的外部，从前面插入元素
.appendTo()和.append()//在现存元素的内部，从后面插入元素
.prependTo()和.prepend()//在现存元素的内部，从前面插入元素

元素的操作：复制、删除和创建

除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。复制元素使用.clone()

删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容（但是不删除该元素）使用.empty()。