获取节点
- jQuery选择器
- 获取节点
一、jQuery选择器
1.1、基本选择器
-
标签选择器(元素选择器)
- 语法:$(“HTML标签名”),获取所有同标签名匹配的元素对象【数组】
var demo1 = $("div");//获取所有的div元素【数组】
-
ID选择器
- 语法:$("#id的属性值"),获取与指定ID属性匹配的元素对象
var demo2 = $("#div1");//获取id=div1的元素对象
-
类选择器
- 语法:$(".class的属性值"),获取与指定class属性匹配的元素对象【数组】
var demo1 = $(".div");//获取所有class=div的元素对象【数组】
-
并集选择器
- 语法:$(“选择器1,选择器2,…”),获取多个选择器选中的元素对象【数组】
var demo1 = $("div,#div1");//获取所有的div元素和id=div1的元素【数组】
1.2、层级选择器
-
后代选择器
- 语法:$(“A B”),A元素内部的所有B元素
var demo1 = $("div .div");//获取所有的div元素中的class=div的元素【数组】
-
子代选择器
- 语法:$(“A>B”),A元素内部的所有直系B元素
var demo1 = $("div>.div");//获取所有的div元素中的class=div的直系元素【数组】
1.3、属性选择器
-
属性名称选择器
- 语法:$(“A[属性名]”),包含指定属性名的选择器
var attr1 = $("div[border]");//获取所有设置了border属性的div元素【数组】
-
属性选择器
- 语法:$(“A[属性名=‘值’ ]”),包含指定属性名且属性值匹配的选择器
var att2 = $("div[class='div1']");//获取class=div1的div元素【数组】
-
复合属性选择器
- 语法:$(“A[属性名=‘值’ ],B[属性名=‘值’ ],…”),包含多个属性选择器的选择器
var att3 = $("div[width='100px'],span[color='red']");//获取红色字体的span元素和宽100的div元素
1.4、过滤选择器
-
首元素选择器
- 语法:$(“XX:first”),获得选择的元素中的第一个元素
var first = $("div:first");//获取文档中的第一个div元素
-
尾元素选择器
- 语法:$(“XX:last”),获得选择的元素中的最后一个元素
var last = $(".div:last");//获取文档中最后一个class=div的元素
-
非元素选择器
- 语法:$(“XX:not(selectot)”),不包括指定内容的元素
var not = $("div:not(#div1)");//获取class=div且id!=div1的所有元素
-
偶数选择器
- 语法:$(“XX:enve”),获得选择的元素中的偶数个元素(从0开始计数)
var even = $("tr:enve");//获取表格中所有的偶数行元素
-
奇数选择器
- 语法:$(“XX:odd”),获得选择的元素中的奇数个元素(从0开始计数)
var odd = $("tr:odd");//获取表格中所有的奇数行元素
-
等于索引选择器
- 语法:$(“XX:eq(index)”),获得选择的元素中的指定索引位置的元素
var equal = $("div:eq(3)");//获取文档中索引等于3的那个div元素
-
大于索引选择器
- 语法:$(“XX:gt(index)”),获得选择的元素中的大于指定索引位置的元素
var more = $("div:gt(3)");//获取文档中索引大于3的所有div元素
-
小于索引选择器
- 语法:$(“XX:lt(index)”),获得选择的元素中的小于指定索引位置的元素
var less = $("div:lt(3)");//获取文档中索引小于3的所有div元素
-
标题选择器
- 语法:$(":header"),获取所有的标题元素【固定写法】
var less = $(":header");//获取文档中的所有标题元素
1.5、表单过滤选择器
-
可用元素选择器(disabled=”disabled"修饰的表单无法选中,自然也不可用)
- 语法:$(“XX:enabled”)
var text1 = $("input[type='text']:enabled");//获取所有可用的文本框元素
-
不可用元素选择器
- 语法:$(“XX:disabled”)
var text1 = $("input[type='text']:disabled");//获取所有不可用的文本框元素
-
选中选择器
- 语法:$(“XX:cheked”)
var text1 = $("input[type='checkbox']:cheked");//获取所有被选中的复选框元素
-
选中选择器
- 语法:$(“XX:select”)
var text1 = $("select>option:select");//获取所有被选中的复选下拉框元素
二、获取节点
2.1、获取父节点
-
parent():向上遍历,返回直系父节点
<body> <div> <p id="p1">AAA...</p> </div> </body> <script> var div = $("#p1").parent(); console.log(div.prop("tagName")); //运行结果:DIV </script>
2.2、获取子节点
-
children():返回当前节点所有的直系子节点(可以加参数过滤)。【不包含文本节点和注释节点】
<body> <div id="div1"> <p>AAA...</p> <div><p>BBB...</p></div> <p>CCC...</p> </div> </body> <script> var child = $("#div1").children("div"); console.log(child.html()); //运行结果:<p>BBB...</p> </script>
2.3、获取兄弟节点
-
siblings():返回匹配元素集合中的所有元素的所有兄弟节点
-
next():返回匹配元素集合中的所有元素的下一个兄弟节点
-
nextAll():返回匹配元素集合中的所有元素前面的所有兄弟节点
-
prev():返回匹配元素集合中的所有元素的上一个兄弟节点
-
prevAll():返回匹配元素集合中的所有元素的前面的所有兄弟节点
<body> <div id="div1"> <p>AAA...</p> <div><p>BBB...</p></div> <p>CCC...</p> </div> </body> <script> var child = $("#div1>div").next(); console.log(child.text()); //运行结果:BBB... </script>