jQuery内容选择器

为了方便测试，先将DOM元素写为以下格式：

1
2
3
4
5
<div></div>
<div>我是div</div>
<div>我是div123</div>
<div><span></span></div>
<div><p></p></div>

  1. :empty找到既没有文本内容也没有子元素的指定元素。

    这个选择器对于以上内容只能找到第一个div。

    1
    2
    var $div = $('div:empty')
    console.log($div)

    image-20200615142932500

  2. :parent 找到有文本内容或有子元素的指定元素

    可以找到除第一个意外的四个元素

    1
    2
    var $div = $('div:parent')
    console.log($div)

  3. :contains(text)找到包含指定文本内容的指定元素

    视内容找到包含内容的div

    1
    2
    var $div = $('div:contains("我是div123")')
    console.log($div)

    image-20200615143646748

  4. :has(selector)找到包含指定子元素的指定元素

    视搜索内容找到包含此子元素的元素

    1
    2
    var $div = $('div:has("span")')
    console.log($div)

    image-20200615143837461

属性和属性节点

  1. 什么是属性

    对象身上保存的变量就是属性

    1
    2
    3
    function Person() {}
    var p = new Person()
    p.name = 'tzk'

  2. 如何操作属性

    对象.属性名称 = 值

    对象.属性名称

    对象[‘属性名称’] = 值

    对象[‘属性名称’]

    1
    2
    3
    4
    // 赋值属性
    p['name'] = 'tzk'
    // 获取属性
    console.log(p.name)

  3. 什么是属性节点

    <span name='xiaokang'></span> 在编写HTML代码时，在HTML标签中添加的属性就是属性节点。

    在浏览器中找到span这个DOM元素之后，展开看到的都是属性。

    在attributes属性中保持的所有内容都是属性节点。

  4. 操作属性节点

    1
    2
    3
    4
    5
    var span = document.getElementsByTagName('span')[0]
    // 设置属性
    span.setAttribute('name', 'tzk')
    // 获取属性
    console.log(span.getAttribute('name'))

    image-20200615145341815

  5. 属性和属性节点的区别

    任何对象都有属性，但只有DOM对象才有属性节点

attr方法

  1. attr(name|pro|key,val|fn)方法

    • 获取或者设置属性节点的值

    • 参数

      • 可以传递一个参数，代表获取节点的值

        无论找到多少个元素，只会返回第一个元素指定的属性节点的值。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        <!DOCTYPE html>
        <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
                <script>
                    $(function () {
                        console.log($("span").attr('class')) // span1
                    })
                </script>
            </head>

            <body>
                <span class="span1" name='name1'></span>
                <span class="span2" name='name2'></span>
            </body>

        </html>

      • 也可以传递两个参数，设置属性节点的值

        如果设置值，找到多少个元素就会设置多少个元素。

        如果设置的节点不存在，那么会新增该属性。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        <!DOCTYPE html>
        <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
                <script>
                    $(function () {
                        $('span').attr('class', 'box')
                    })
                </script>
            </head>

            <body>
                <span class="span1" name='name1'></span>
                <span class="span2" name='name2'></span>
            </body>

        </html>

  2. removeAttr(name)节点

    • 删除属性节点

    • 参数

      会删除所有找到元素指定的属性节点

      • 删除一个节点

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        <!DOCTYPE html>
        <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
                <script>
                    $(function () {
                        $('span').removeAttr('class')
                    })
                </script>
            </head>

            <body>
                <span class="span1" name='name1'></span>
                <span class="span2" name='name2'></span>
            </body>

        </html>

        image-20200615151335448

      • 删除多个属性

        只需要在传递参数时用空格隔开即可。

        1
        $('span').removeAttr('class name')

        image-20200615151424496

prop方法

prop方法与attr方法一致。

  1. 设置或新增属性

    1
    2
    $("span").eq(0).prop('demo', 'name1')
    $("span").eq(1).prop('demo', 'tzk')

    image-20200615152658852

  2. 获取属性

    1
    console.log($('span').prop('demo')) //name1

  3. 删除属性

    1
    $("span").removeProp('demo')

  4. 操作属性节点

    官方推荐在操作属性节点时，具有true和false两个属性的属性节点，如checked, selected或者disabled使用prop(),其他的使用attr()

    1
    2
    3
    4
    console.log($('.input1').prop('checked')) //true
    console.log($('.input1').attr('checked')) //checked
    console.log($('.input2').prop('checked')) //false
    console.log($('.input2').attr('checked')) //undefined

图片切换的小案例

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            // 1. 给按钮添加点击事件
            var btn = document.getElementsByTagName('button')[0]
            btn.onclick = function () {
                // 2. 获取输入框输入的内容
                var input = document.getElementsByTagName('input')[0]
                var text = input.value
                // 3. 修改img的src属性节点的值
                $('img').attr('src', text)
                // $('img').prop('src', text)
            }
        })
    </script>
</head>

<body>
    <input type="text">
    <button>切换图片</button><br />
    <img src="https://www.baidu.com/img/dongsc_eb45d000832f8e889ff64951eaf7f381.gif" alt="">
</body>

</html>

jQuery类操作相关方法

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
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .class1 {
                width: 100px;
                height: 100px;
                background: red;
            }

            .class2 {
                border: 5px solid black
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                })
        </script>
    </head>

    <body>
        <button>添加类</button>
        <button>删除类</button>
        <button>切换类</button>
        <div></div>
    </body>

</html>

  1. 添加与删除类

    1
    2
    3
    4
    5
    6
    7
    8
    btns[0].onclick = function () {
        // 添加多个类用空格隔开
        $('div').addClass('class1 class2')
    }
    btns[1].onclick = function () {
        // 删除多个类用空格隔开
        $('div').removeClass('class1 class2')
    }

  2. 切换类

    1
    2
    3
    4
    btns[2].onclick = function () {
        // 多个用空格隔开
        $('div').toggleClass('class1 class2')
    }

文本值相关操作

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
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            div {
                width: 100px;
                height: 100px;
                border: 1px solid #000;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                })
        </script>
    </head>

    <body>
        <button>设置HTML</button>
        <button>获取HTML</button>
        <button>设置text</button>
        <button>获取text</button>
        <button>设置value</button>
        <button>获取text</button>
        <div></div>
        <input type="text">
    </body>

</html>

  1. html([val|fn])，用于设置元素的html元素。

    类似原生js中的innerHTML方法

    • 如果传入参数，则代表将当前元素的html修改为参数输入内容

      1
      2
      3
      btns[0].onclick = function () {
          $('div').html('<p>我是一个段落<span>我是一个span</span></p>')
      }

      image-20200615174005610

    • 如果不传入参数，则代表获取当前元素的HTML代码。

      1
      2
      3
      btns[1].onclick = function () {
          console.log($('div').html())
      }

  2. text([val|fn])

    类似原生js中的innerText方法。参数传入与html()方法一模一样

    1
    2
    3
    4
    5
    6
    btns[2].onclick = function () {
        $('div').text('<p>我是一个段落<span>我是一个span</span></p>')
    }
    btns[3].onclick = function () {
        console.log($('div').text())
    }

  3. val([val|fn|arr])

    与value属性类似。参数传入与前两种一模一样。

    1
    2
    3
    4
    5
    6
    btns[4].onclick = function () {
        $('input').val('请输入内容：')
    }
    btns[5].onclick = function () {
        $('input').val()
    }

操作样式方法

  1. 设置属性值

    • 逐个设置

      1
      2
      3
      $('div').css('width', '100px')
      $('div').css('height', '100px')
      $('div').css('background', 'red')

    • 链式设置

      如果大于3步，建议分开

      1
      $('div').css('width', '100px').css('height', '100px').css('background', 'blue')

    • 批量设置

      参数可以传入一个对象，对象内传入css样式。

      1
      2
      3
      4
      5
      $('div').css({
          width: '100px',
          height: '100px',
          background: 'red'
      })

  2. 获取css样式。

    传入参数即需要获取的样式名称。

    1
    console.log($('div').css('width'))

    image-20200615180236759

尺寸和位置相关

尺寸

以width()方法为例。

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .father {
                width: 200px;
                height: 200px;
                border: 50px solid #000;
                background: red;
                margin-left: 50px;
                position: relative;
            }

            .son {
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 50px;
                top: 50px;

            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                btns[0].onclick = function () {
                    // 获取元素的宽度
                    console.log($('.father').width()) //200
                }
                btns[1].onclick = function () {
                    console.log($('.father').width('500px'))
                }
            })
        </script>
    </head>

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
        <button>获取</button>
        <button>设置</button>
    </body>

</html>

位置

  1. offset()获取距离窗口的偏移位。

    • 获取

      例如获取距离左边的偏移位$('div').offset().left

    • 设置

      参数内传入一个对象，对象内写需要设置的属性

      1
      2
      3
      4
      5
      btns[1].onclick = function () {
          $('.son').offset({
              left: 10
          })
      }
    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!DOCTYPE html>
    <html lang="en">

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }

                .father {
                    width: 200px;
                    height: 200px;
                    border: 50px solid #000;
                    background: red;
                    margin-left: 50px;
                    position: relative;
                }

                .son {
                    width: 100px;
                    height: 100px;
                    background: blue;
                    position: absolute;
                    left: 50px;
                    top: 50px;

                }
            </style>
            <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
            <script>
                $(function () {
                    var btns = document.getElementsByTagName('button')
                    btns[0].onclick = function () {
                        console.log($('.son').offset().left) //150
                    }
                    btns[1].onclick = function () {
                        $('.son').offset({
                            left: 10
                        })
                    }
                })
            </script>
        </head>

        <body>
            <div class="father">
                <div class="son"></div>
            </div>
            <button>获取</button>
            <button>设置</button>
        </body>

    </html>

  2. position获取元素距离定位元素的偏移位

    该方法只有获取不能设置，但可以通过css方式进行设置

    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .father {
                width: 200px;
                height: 200px;
                border: 50px solid #000;
                background: red;
                margin-left: 50px;
                position: relative;
            }

            .son {
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 50px;
                top: 50px;

            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                btns[0].onclick = function () {
                    console.log($('.son').position().left) //50
                }
                btns[1].onclick = function () {
                    // 无法设置，即使设置也不生效
                    $('.son').position({
                        left: 10
                    })
                }
            })
        </script>
    </head>

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
        <button>获取</button>
        <button>设置</button>
    </body>

    </html>

scrollTop方法

  1. 获取滚动偏移量

    • 元素

      1
      2
      3
      btns[0].onclick = function () {
          console.log($('.scroll').scrollTop())
      }

    • 网页

      1
      console.log($('html').scrollTop())

      IE浏览器下可能无法获取，需要将html换成body。常用写法如下：

      1
      console.log($('html').scrollTop()+$('body').scrollTop())

  2. 设置滚动偏移量

    参数传入为整型，而不是字符串类型。

    • 元素

      1
      2
      3
      btns[1].onclick = function () {
          $('.scroll').scrollTop(300)
      }

    • 网页

      1
      $('html').scrollTop(300)

      同样的IE浏览器不可使用，需要对body进行设置。通常写法如下：

      1
      $('html,body').scrollTop(300)