JQ节点操作

Study
  • prev()
  • next()
  • prevAll()
  • nextAll()
  • siblings()

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的选择</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //$('span').next().css('background', 'red'); //p, h1
            //$('span').prev().css('background', 'red'); //div, p
            //$('p').nextAll().css('background', 'red'); //p标签下面的所有标签
            //$('p').prevAll().css('background', 'red'); //p标签之前的所有标签
            //$('p').siblings().css('background', 'red'); //找p标签所有的兄弟节点
            //参数筛选功能(可以有参数)
            //$('p').siblings('h2').css('background', 'red'); //找p标签所有的兄弟节点中的h2节点
            //$('span').next('h1').css('background', 'red'); 
            //$('span').next('h2').css('background', 'red'); //两个span的下一个都没有h2的，所以就没有
        });
    </script>
</head>
<body>
    <div>div</div>
    <span>span</span>
    <p>p</p>
    <span>span</span>
    <h1>h1</h1>
    <h2>h2</h2>
    <h2>h2</h2>
    <h3>h3</h3>
    <em>em</em>
</body>
</html>

  • first()
  • last()
  • slice() //截取一部分元素, 起始-结束（不包括结束位置）
  • children()
  • find() //可以找子孙节点，必须得有参数

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
    // eq(0) == first();
    $(function(){
        // $('li').first().css('background', 'red'); //选择第一个
        // $('li').last().css('background', 'red'); //选择最后一个
        // $('li').slice(1, 3).css('background', 'red'); //得到的其实是从eq(1)开始到eq(2)结束
        // $('li').slice(1).css('background', 'red'); //如果在slice里面只写起始位置不写结束位置，那么就是从起始位置开始，一直到最后一个元素
        //$('ul').children().css('background', 'red'); //找到ul的所有子节点，但是孙子节点是找不到的
        // $('ul').children('div').css('background', 'red'); //children()可以过滤筛选
        // $('ul').find('p').css('background', 'red'); //可以用find找ul之下的所有节点中匹配的节点，find查找的范围比children更加广泛
    })
</script>
</head>
<body>
<ul>
    <li>
        1111
        <p>pppp</p>
    </li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <div>div</div>
</ul>
</body>
</html>

  • parent()
  • parents()
  • closest() ★★★★★ //找当前元素的最近的满足条件的祖先节点(只能找到一个元素,也包括自身)