2、获取节点

最新推荐文章于 2022-07-14 17:09:51 发布

原创最新推荐文章于 2022-07-14 17:09:51 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

jQuery 专栏收录该内容

5 篇文章

订阅专栏

获取节点

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>