JQuery选择器和DOM操作

JQuery的选择器和DOM操作是其最为核心的功能，这篇笔记我们简单学习如何用JQuery库选择和操作DOM元素。

文档就绪回调函数

在开始一切之前，我们有必要先了解JQuery的文档就绪回调函数。我们都知道浏览器的HTML解析是从上到下进行的，如果你的jQuery代码放在<head>中（这是常见做法），可能出现代码执行但HTML中的元素还不存在的问题，$(document).ready()会监听DOM的就绪状态，DOM树构建完成后再执行代码。

$(document).ready(function(){
    // 我们的JQuery代码
});

JQuery选择器

JQuery选择的基本语法如下。

$(selector).action()

其中，美元符号是JQuery对象的别名，selector是选择器字符串，action()是我们要执行的对元素的操作。

JQuery使用CSS选择器的语法筛选HTML元素，使用XPath表达式语法选择带有给定属性的HTML元素。

常用选择器如下。

选择器示例	描述	类型
`$("#id")`	根据标签id选择元素	基本选择器
`$("div")`	根据标签名选择元素	基本选择器
`$(".classname")`	根据class名选择元素	基本选择器
`$(".classname,.classname1,#id1")`	组合多个选择器（多个选择器并列）	基本选择器
`$("#id > .classname")`	子元素选择器（直接子元素）	层次选择器
`$("li:first")`	选择第一个li元素	过滤选择器
`$("li:last")`	选择最后一个li元素	过滤选择器
`$("li:even")`	选择索引为偶数的li元素（从0开始）	过滤选择器
`$("li:odd")`	选择索引为奇数的li元素	过滤选择器
`$("li:eq(4)")`	选择索引等于4的li元素	过滤选择器
`$("li:gt(2)")`	选择索引大于2的li元素	过滤选择器
`$("li:lt(2)")`	选择索引小于2的li元素	过滤选择器
`$("div:contains('aa')")`	选择包含文本“aa”的div元素	内容过滤选择器
`$("td:empty")`	选择空的td元素（无子元素和文本）	内容过滤选择器
`$("div:has(selector)")`	选择包含指定selector的div元素	内容过滤选择器
`$("td:parent")`	选择有子元素或文本的td元素	内容过滤选择器
`$("div[id]")`	选择所有带有id属性的div元素	属性选择器
`$("div[id='123']")`	选择id属性等于“123”的div	属性选择器
`$("div[id!='123']")`	选择id属性不等于“123”的div	属性选择器
`$("div[id^='qq']")`	选择id属性以“qq”开头的div	属性选择器
`$("div[id$='zz']")`	选择id属性以“zz”结尾的div	属性选择器
`$("div[id*='bb']")`	选择id属性包含“bb”的div	属性选择器
`$("input[id][name$='man']")`	多属性组合选择（同时满足多个属性条件）	属性选择器

DOM操作

JQuery选择器筛选后得到的是JQuery对象，JQuery对象可以看做有JQuery特殊功能的原生DOM对象的数组，因为JQuery对象都可以隐式迭代的，从JQuery对象获得原生DOM对象也和数组很像，写法通常为var div = $("#d1")[0]，原生DOM对象转JQuery对象则写为var jqDiv = $(div)。下面我们简要介绍JQuery对象特有的功能。

获取内容

text()：读取/设置元素的文本内容
html()：读取/设置元素的内容，包括html标记
val()：读取/设置表单字段的值

获取属性

attr()：读取/设置属性

修改css属性

css()：读取/设置css样式，例如：$("#d1").css("background-color", "red");
addClass()：添加class属性
removeClass()：删除class属性

添加元素

append()：在被选元素结尾插入子元素
preappend()：在被选元素开头插入子元素
after()：在被选元素之前插入
before()：在被选元素之后插入

接收参数：可以是文本，这样就插入文本节点，也可以是Element，也可以是JQuery对象

删除元素/内容

remove()：删除被选元素及其子元素，也可以接受一个符合JQuery语法的字符串参数，用于指定删除哪些元素
empty()：删除被选元素的子元素

尺寸处理

width()：读取/设置元素宽度（不包括内边距，边框，外边距）
height()：读取/设置元素高度（不包括内边距，边框，外边距）
innerWidth()：读取/设置元素包括内边距宽度
innerHeight()：读取/设置元素包括内边距高度
outerWidth()：读取/设置元素包括内边距和边框宽度
outerHeight()：读取/设置元素包括内边距和边框高度

遍历

向父节点遍历

parent()返回上一级父元素
parents()返回所有祖先元素
parentsUntil()参数表示向父节点遍历直到（不包括终止条件），返回所有符合结果的元素

向子节点遍历

children()返回向下一级的子元素，接受选择器参数
find()返回所有子元素，接受选择器参数

同胞遍历

siblings()返回所有同胞，接受选择器参数
next()返回被选元素的下一个同胞
nextAll()返回后续所有同胞
nextUtil()后续同胞，接受终止条件
prev() prevAll() prevUtil()同上

元素集合操作

上面已经说过JQuery对象和DOM对象的关系，JQuery对象默认就是类似于数组的，可能包含不止一个html元素。

first()：返回第一个对象
last()：返回最后一个对象
eq()：参数为索引值，注意和直接下标取的区别：这里取的是JQuery对象，直接下标取是DOM对象
filter()：参数为选择器，选择符合条件的对象

作者：Gacfox