jQuery学习笔记

层次选择器

选择后代元素：空格 父元素 后代元素

选择直接子元素：> 父元素>子元素

紧邻的下一个兄弟元素：+ 前元素+后元素 必须是紧邻的

紧邻的后面所有的兄弟元素：~ 前元素~后元素 必须是紧邻的

所有兄弟元素 siblings()这个函数 本身元素.siblings()

选取不相邻的下一个兄弟元素 nextAll(元素名:first)

选取前面的兄弟元素 prev() prevAll()

基本过滤选择器

:first选取第一个元素

:last选取最后一个元素

:not(选择器)选择指定选择器之外的元素

:even 选择索引值为偶数的元素，注意：索引值从0开始

:odd 选择索引值为奇数的元素

:gt(索引值) 选择索引值大于指定索引值的元素

:eq(索引值) 选择索引值等于指定索引值的元素

:lt(索引值) 选择索引值小于指定索引值的元素

:header 选择所有的标题元素

 :animated 选择所有正在执行动画的元素

内容过滤选择器

:contains(text) 选择含有指定文本的选择器

:empty 选择空的元素

:has(选择器) 选择包含匹配指定选择器的元素

:parent 选择有子元素或文本元素的元素（当爹的）

可见性过滤选择器

:visible 选择可见的元素

:hidden 选择所有不可见的元素（注意：选中不等于在页面上显示，要想在页面上显示，需借助show()

表单隐藏域无法使用show()方法在页面上显示，但是选中后，可以获取操作其值

属性过滤选择器

[attribut]含有指定属性的元素

[attribut=value]含有指定属性，且属性值为指定值的元素

[attribut!=value]属性值不等于value的元素，注意：没有指定属性的元素也会被选中，如果想准确指定，需使用组合选择器，例如：[title][title!=test]

[attribut^=value]属性值以value开始的元素

[attribut$=value]属性值以value结尾的元素

[attribut*=value]属性值包含value的元素

[selector1][selector2]注意：[selector2]在[selector1]的选择后的结果的范围内进行选择

子元素过滤选择器

父元素:nth-child(索引值) 每一个父元素下指定索引值的子元素，索引值从1开始

父元素:first-child(索引值) 每一个父元素下第一个子元素

父元素:last-child(索引值) 每一个父元素下最后一个子元素

父元素:only-child(索引值) 如果一个父元素下存在着一个单独的子元素，那么就选择它

表单元素过滤选择器

表单元素:enabled 选择可用的表单元素

表单元素:disabled 选择不可用的表单元素

单选框（或复选框）:checked 匹配单选框或多选框被选中的

对于多选框来说，所有被选中的元素返回值是一个数组，不能直接使用val()返回所有的值，需要使用each()方法进行遍历

"select :selected" 选择被选中的下拉列表项

$("#btn5").click(function(){

$("select :selected").each(function(){

alert($(this).val());

});

});

DOM操作

查找节点

[1]元素节点：jQuery选择器

[2]元素属性：attr()或其他方法

[3]文本节点：text()读写

创建节点

$(html代码) $("<li id='gz'>广州</li>")

注意：HTML代码格式规范

新创建的节点，不会自动添加到文档中

插入节点

[1]根据父子关系插入

父对象.append() 干爹.append(郭美美)

子对象.appendTo(父对象) 郭美美.appendTo(干爹)

append()

$("#city").append($("<li id='gz'>广州</li>"));//相当于 dom对象.appendChild()

appendTo()

$("<li id='sz'>深圳</li>").appendTo("#city");

prepend()

$("#game").prepend("<li>丢沙包</li>");

prependTo()

$("<li>跳房子</li>").prependTo("#game");

[2]根据兄弟关系插入

after() 大哥.after(小弟) 大哥后面跟着一个小弟

$("#bj").after("<li>长春</li>");

insetAfter() 小弟.insertAfter(大哥) 大哥我要跟着你

$("<li>重庆</li>").insertAfter("#bj");

before() 小弟.before(大哥) 大哥请你罩着我

$("#rl").before("<li>跳皮筋</li>");

insertBefore() 大哥.insertBefore 大哥说：我来罩着你

$("<li>弹球</li>").insertBefore("#rl");

删除节点

在JS中，是父元素.removeChild(要删除的节点) 父亲把儿子扫地出门

在jQuery中，要删除的节点.remove() 儿子离家出走

$("#jpfc").remove();

父元素.empty()删除全部子节点和后代节点

$("#city").empty();

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。