jQuery操作DOM

操作元素样式

获取样式属性值

jQuery中通过css()方法获取样式属性值

语法:
//获取单个属性：
$(selector).css(‘property’);
返回结果是字符串形式的属性值

//获取多个属性
$(selector).css([‘property1’, ‘property2’, ‘property3’, …]);
返回结果是对象形式的属性名和属性值

设置样式属性值

jQuery中通过css()方法设置样式属性值

语法：
//设置单个属性
$(selector).css(‘property’, ‘value’);

//设置多个属性
$(selector).css({‘property1’: ‘value1’, ‘property2’: ‘value2’, …});

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
<body>
    <div style="color: red; font-size: 50px; font-family: '宋体'">
        越努力 越幸运
    </div>

    <input id="myBtn" type="button" value="设置样式"/>
    <div id="d1"></div>

    <script>
        //获取样式属性值--单个属性
        var a = $('div').css('color');
        console.log(a);  //结果为rgb(255, 0, 0)

        //获取样式属性值--多个属性
        var obj = $('div').css(['color', 'font-size', 'font-family']);
        console.log(obj);  //结果为{color: "rgb(255, 0, 0)", font-size: "50px", font-family: "宋体"}

        //设置样式属性--单个属性

        //设置样式属性--多个属性
        $('#myBtn').click(function() {
            $('#d1').css({background: 'pink', width: '150px', height: '150px', 'border-radius': '50%'});
        });
    </script>
</body>

通过函数设置样式属性值

使用css()方法设置属性值时，每个样式属性对应的value值还可以替换为函数形式。

语法：
函数调用后，将返回值作为样式属性的值。
index表示匹配元素的索引值，从0开始；value表示匹配元素的样式属性的当前值；newValue表示函数的返回值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//设置单个属性
$(selector).css('property', function(index, value) {
    return newValue;
});

//设置多个属性
$(selector).css({
    'property1': function(index, value1) {
        return newValue;
    },
    'property2': function(index, value2) {
        return newValue;
    }
});
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
<body>
    <input id="myBtn" type="button" value="设置样式"/>
    <div></div>
    <div id="d2"></div>

    <script>
        $('div').css({background: 'pink', width: '150px', height: '50px', 'border-radius': '50%'});

        //通过函数设置样式
        $('#myBtn').click(function() {
            $('div').css({
                width: function(index, value) {
                    return parseFloat(value) * 2;
                },
                height: function(index, value) {
                    if(index === 1){
                        return parseFloat(value) * 2;
                    }
                }
            });
        });
        console.log($('#d2').css('width'));

    </script>
</body>

jQuery操作元素类

方法 描述
addClass() 将指定的类添加到匹配元素中
removeClass() 从所有匹配的元素中删除全部或指定的类
toggleClass() 对设置或移除被选元素的一个或多个类进行切换
hasClass() 判断元素的某个类是否存在

在实际开发中，css()方法与addClass()、removeClass()方法虽然可以改变元素的样式，但使用场景不同。一般来说，为了分离CSS与Javascript代码，建议使用addClass()、removeClass()对类进行操作，通过增加和移动类来实现样式的切换。而css()方法适用CSS样式值不固定的情况，例如为元素随机生成背景色。

toggleClass()方法：
$(selector).toggleClass(‘c’); //参数c表示一个自定义的类，调用toggleClass()方法，指定元素中若没有c，则添加，否则执行移除操作。

方式一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
    <div></div>

    <script>
        $('div').addClass('c');  //添加单个类
        $('div').addClass('c1 c2 c3');  //添加多个类（用空格分开）

        $('div').removeClass();  //移除所有类
        $('div').removeClass('c');  //移除单个类
        $('div').removeClass('c1 c2 c3');  //移除多个类

        var d = $('div');
        d.toggleClass('c');  //第一次调用
        console.log(d[0].outerHTML);  //<div class="c"></div>
        d.toggleClass('c');  //第二次调用
        console.log(d[0].outerHTML);  //<div class=""></div>
        d.toggleClass('c');  //第三次调用
        console.log(d[0].outerHTML);  //<div class="c"></div>
    </script>
</body>

方式二：
toggleClass()的第二个参数，可手动控制类的添加或移除。该参数是布尔值，true表示添加类，false表示移除类。

1
2
$(selector).toggleClass('c', true);  //添加类c
$(selector).toggleClass('c', false);  //删除类c

方式三：
toggleClass()第二个参数可通过条件判断的返回值设置。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作元素类</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        .b {
            background: green;
        }
    </style>
</head>
<body>
    <div>12312313</div>

    <script>
        d.toggleClass('c', true);
        console.log(d[0].outerHTML);

        var count=0;
        $('div').click(function() {  //this表示发生事件的元素
            $(this).toggleClass('b', ++count%3 === 0);
        });
    </script>
</body>
</html>

拓展：操作元素类的addClass()、removeClass()、toggleClass()方法支持使用函数作为参数，通过参数的返回值来操作元素的类。

1
2
3
4
5
6
//addClass()方法
$('div').addClass(function(index, value) {
    console.log('元素的索引：' + index);
    console.log('元素原来的class值' + value);
    return 'item-' + index;  //将返回值作为要添加的class
});

hasClass()方法：
$(selector).hasClass(‘c’); //判断是否含有类名c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//判断是否含有类名c，有则移除，无则添加
<body>
    <div>Huang Zebin</div>

    <script>
        $('div').click(function() {
            if($('div').hasClass('c')) {
                $('div').removeClass('c');
            } else {
                $('div').addClass('c');
            }
            var result = $('div');
            console.log(result[0].outerHTML);
        });
    </script>
</body>

操作元素的尺寸

方法 描述
width() 获取或设置元素的宽度 （没包括内边距？？）
height() 获取或设置元素的高度
innerWidth() 获取元素的宽度（包括内边距）
innerHeight() 获取元素的高度（包括内边距）
outerWidth() 获取元素的宽度（包括内边距和边框）
outerHeight() 获取元素的高度（包括内边距和边框）
outerWidth(true) 获取元素的宽度（包括内边距、边框、外边距）
outerHeight(true) 获取元素的高度（包括内边距、边框、外边距） 
1
2
3
$(selector).width();  //获取宽度
$(selector).width('30px');  //设置宽度
$(selector).width(30);  //设置宽度，不加引号不能添加单位
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>

    <style>
        div {
            width: 200px;  /*元素的宽高（文字）*/
            height: 200px;
            background: yellow;
            color: red;  /*字体颜色*/
            text-align: center;
            border-radius: 25%;
            line-height: 25px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- 获取和设置元素的宽度和高度 -->

    <input type="button" value="按钮"/>
    <div>Huang Zebin</div>

    <script>
        $('input').click(function() {
            $('div').width($('div').width() + 50);
            $('div').height($('div').height() + 50);
        });
    </script>
</body>
</html>

备注：会查看Chrome的盒子模型

操作元素的位置

方法 描述
offset() 获取匹配元素的（第一个元素）的坐标位置，或设置每个元素的坐标
offsetParent() 获取距离匹配元素最近的（含有定位信息）的元素
position() 获取匹配元素相对父元素的偏移
scrollLeft() 获取或设置匹配元素相对滚动条左侧的偏移
scrollTop() 获取或设置匹配元素相对滚动条顶部的偏移

offset()方法：
可以获取到匹配元素中的第一个元素在当前页面的坐标位置。若元素的样式属性display设置为none，则获取到的值为0。
语法： $(selector).offset();
返回值包含两个属性left和top，分别表示元素距离浏览器的左偏移和上偏移。

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <div>offset()</div>

    <script>
        //获取div的top和left值
        console.log($('div').offset().top);
        console.log($('div').offset().left);

        //设置div的top和left值
        //$('div').offset({left: 200, top: 100});
        $('div').offset({left: 100});  //键值对{}  向右偏移
    </script>
</body>

position()方法获取元素相对于父元素（含有定位）的偏移，当父元素没有设置定位时，后者的左右与前者等价.【例子？？】

offsetParent()方法返回距离指定元素最近的“被定位”的祖辈元素对象。“被定位”是指元素的样式属性中position属性的值为relative、absolute、fixed，不包括position属性的默认值static。
语法： $(selector).offsetParent();

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>

    <style>
        div {
            border: 1px solid red;
        }

        #d1 {
            width: 100px;
            height: 100px;
        }

        #d2 {
            width: 200px;
            height: 200px;
        }

        #d3 {
            width: 300px;
            height: 300px;
        }

        #d4 {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2" style="position: relative">
            <div id="d3">
                <div id="d4">test</div>
            </div>
        </div>
    </div>

    <script>
        $('#d4').offsetParent().css('backgroundColor', 'green');
    </script>
</body>
</html>

scrollLeft()与scrollTop()方法可以获取或设置指定元素相对滚动条左侧和顶部的偏移值。
//获取元素相对左侧的偏移值
$(selector).scrollLeft();
//设置元素相对左侧的偏移值
$(selector).scrollLeft(value);

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>

    <style>
        div {
            background: pink;
            height: 100px;
            width: 200px;
            border: 1px solid black;
            overflow: auto;
        }

        p {
            background: yellow;
            height: 1000px;
            width: 1000px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮"/>
    <div>
        <p>行动好过语言</p>
    </div>

    <script>
        $('input').click(function() {
            $('div').scrollTop('500');
            $('div').scrollLeft('50');
        });
    </script>
</body>
</html>