jquery标签操作

# 标签操作之样式

# 样式类

$("div").addClass("box");

表达式	说明
addClass()	添加指定的CSS类名
removeClass()	移除指定的CSS类名
hasClass()	判断样式存不存在
toggleClass()	切换CSS类名. 如果有就移除; 如果没有就添加

PS: DOM操作 $("div")[0].classList.add("box") // add remove contains toggle

# CSS

1> $("p").css("color", "red"); // DOM操作: tag.style.color="red"
2> $("div").css({"background-color": "green", "width": "100px"})

so,我们可以将样式写到事先准备好的class类中,再给标签添加此类名;亦或者通过.css添加...

# 位置

表达式	说明
offset()	获取匹配元素在当前窗口的相对偏移或设置元素位置 `$("#bbb").offset();` // {top: 0, left: 0} `$("#bbb").offset({"top":300,"left":200})` `$("#bbb").offset().left` // 200 ps: 设置定位流也可以达到同样的效果.
position()	获取匹配元素相对父元素的偏移
scrollTop()	获取匹配元素相对右边的滚动条到顶部的距离 `$(window).scrollTop(0);` // 回到顶部
scrollLeft()	获取匹配元素相对下边的滚动条到左侧的距离

小练习: 浏览网页,往下滑动到某一位置时,右下角会出现回到顶部的按钮.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        div {
            width: 200px;
            height: 10000px;
            border: 1px solid red;
        }

        .back {
            display: none;
            position: fixed;
            right: 0;
            bottom: 0;
            width: 80px;
            height: 80px;
            background-color: lightcoral;
            text-align: center;
            line-height: 80px;
        }
    </style>
</head>
<body>
<div></div>
<!-- 不一定要input的button按钮 因为要绑定事件 用div也行,img也行-->
<div class="back">回到顶部</div>
<script>
    // 浏览器窗口滚动时触发滚动事件
    $(window).scroll(function () {
        var v = $(window).scrollTop(); // 获取右侧滚动条当前的位置
        if (v > 2000) {
            // $(".back").css("display", "block")
            $(".back").show()
        } else {
            // $(".back").css("display", "none")
            $(".back").hide()
        }
    })
    // 点击匀速回到顶部
    $(".back").click(function () {
        /* $(window).scrollTop(0); 这种方式一下子就回到顶部啦,不平滑 */
        var top = $(window).scrollTop(); // 先获取一个初始的高度
        // 周期循环的定时器 是异步执行的!
        var t = setInterval(function () {
            top -= 100
            $(window).scrollTop(top);
            if (top <= 0) {
                clearInterval(t)
            }
        }, 10)
        // if (top <= 0) { clearInterval(t) } 若写在这,只会在点击的时候执行一次..踩坑.
    })
</script>
</body>
</html>

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
59

# 尺寸

表达式	说明
width()	设置或返回元素的宽度
height()	设置或返回元素的高度
innerWidth()	返回元素的宽度(包含 padding)
innerHeight()	返回元素的高度(包含 padding)
outerWidth()	返回元素的宽度(包含 padding 和 border)
outerHeight()	返回元素的高度(包含 padding 和 border)

# 标签操作之文本内容

# html

一般用于给选中的元素新增html标签.

html() 是获取选中标签元素中所有的内容.
      若$('.box')选中了多个元素,$('.box').html()输出的是第一个的内容.

html(value) 设置该元素的'所有内容' 注意哦!会替换掉标签中原来的内容.
      敲黑板,不是单指文本内容哦,是此标签包含的所有内容！！
      若$('.box')选中了多个元素,会隐式的循环替换！！

$('ul').html('<a href="#">百度一下</a>')
//可以使用函数来设置所有匹配元素的内容
$('ul').html(function(){
    return '哈哈哈'
})

1
2
3
4
5
6
7
8
9
10
11
12

# text

一般用于给选中的元素增加文本.

text() 获取所有匹配元素包含的文本内容
    若$('.box')匹配的元素有多个,会自动将它们的文本内容进行字符串拼接..

text(val) 设置该所有匹配元素的文本内容
    若$('.box')选中了多个元素,会隐式的循环替换为同一个值！！

注意哦: 值包含标签的时候,不会被渲染为标签元素,只会被当做值渲染到浏览器中

1
2
3
4
5
6
7

html和text的异同点: 1> 同: 都会替换选中标签的所有内容
2> 异: text设置的值包含标签的时候,不会被渲染成标签元素. 而html会.
text()返回的是所有匹配元素的文本内容,会自动进行拼接;html()返回的是第一个匹配元素的所有内容.

# val

主要用于给form表单的input标签添加值.

// 用途: val()用于操作input的value值

// 示范一：
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="radio" name="sex" value="none">
$('input[type=radio]').val(['male',])

// 示范二：
<input type="checkbox" name="hobbies" value="111">
<input type="checkbox" name="hobbies" value="222">
<input type="checkbox" name="hobbies" value="333">
$('input[type=checkbox]').val(['111','222'])

1
2
3
4
5
6
7
8
9
10
11
12
13

# 标签操作之属性

# 通用的方式

1> 返回 第一个 匹配元素的属性值: $(".bbb").attr("class")
2> 为所有匹配元素设置一个属性值: $(".bbb").attr("x","111")
3> 为所有匹配元素设置多个属性值: $(".bbb").attr({"x":"111","y":"222"})
4> 从 每一个 匹配的元素中删除一个属性: $(".bbb").removeAttr("x")

ps: 设置属性时,此属性有,替换;没有则添加. 当然可以自定义属性.

# 用于复选框和单选框

复选框checkbox 单选框radio

1> 获取value属性的值: prop('value')
2> 设置属性值: prop('checked',true)
3> 移除value属性: removeProp('value')

<h3>爱好</h3>
<input type="checkbox" name="hobbies" value="basketball">篮球
<input type="checkbox" name="hobbies" value="football">足球
<input type="checkbox" name="hobbies" value="coding">编程

<h3>性别</h3>
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="radio" name="sex" value="none">

<script>
  	$(':checkbox.eq(1)').prop('checked'); // false
    $(':checkbox[value=football]').prop('checked',true);
    $(':radio[value=male]').prop('checked',true);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ps: 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug; 在3.x版本的jQuery中则没有这个问题.

为了兼容性, 在处理checkbox和radio的时候尽量使用特定的prop().不要使用attr("checked", "checked")

# 练习: 全选反选取消

效果: 点击全选,全部勾选上;点击取消,全部取消勾选;点击反选,勾选上的取消,未勾选的勾选上..
[点睛之笔] $(this).prop('checked', !$(this).prop('checked'));

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<h3>菜单</h3>
<input type="button" value="全选" id="all">
<input type="button" value="反选" id="reverse">
<input type="button" value="取消" id="cancel">
<p>
    蒸羊羔<input type="checkbox" name="menu">

</p>
<p>
    蒸鹿茸<input type="checkbox" name="menu">

</p>
<p>
    蒸熊掌<input type="checkbox" name="menu">

</p>
<p>
    烧花鸭<input type="checkbox" name="menu">

</p>
<p>
    烧雏鸡<input type="checkbox" name="menu">

</p>
<p>
    烧子鹅<input type="checkbox" name="menu">

</p>

<script>
    // -- 全选
    $('#all').click(function () {
        // $(":checkbox")
        // 简单理解,jq是一个数组对象.匹配到的元素都会放到此数组里.会做一个隐式的迭代.
        $('p input').prop('checked', true);
    });

    // -- 反选
    // 思考一个事: 全选和反选隐式迭代的功能都是同一个.而反选不是按照同一个标准去处理的,就不能用隐式迭代了.
    $('#reverse').click(function () {
        // so,反选需要一个个显式的循环出来,每一个加以单独的处理.
        $('p input').each(function () {
            // 需要注意的是,显式循环出来的是js对象.
            // $(this)将this这一个js对象转换成了jq对象
            // !$(this).prop('checked') 获取值,并取反,true false互转.
            $(this).prop('checked', !$(this).prop('checked'));
        })
    });

    // -- 取消
    $('#cancel').click(function () {
        $('p input').prop('checked', false);
    });

</script>
</body>
</html>

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
59
60
61
62
63
64
65

# 标签操作之文档

# 基本用法

// -- 内部 作为儿子
$(A).appendTo(B)    // 把A追加到B内部的最后面
$(A).prependTo(B)   // 把A前置到B内部的最前面

// -- 外部 作为兄弟
$(A).insertAfter(B)		// 把A放到B外部的后面
$(A).insertBefore(B)	// 把A放到B外部的前面
/*
    var p = document.createElement("p")
    p.innerText = "666"
    $(p).insertBefore($(".box1"));
*/

// -- 移除和清空元素
$('.p1').remove()  // 从DOM中删除所有匹配的元素
$('.p1').empty()   // 删除所有匹配的元素的'所有内容'(只剩一个元素标签啦)

// -- 替换
$(A).replaceWith(B) // A是被替换者,B是替换者
$(A).replaceAll(B)  // B是被替换者,A是替换者

// -- 克隆
// clone方法不加参数true,克隆标签但不克隆标签带的事件
// clone方法加参数true,克隆标签并且克隆标签带的事件
clone()

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

# 案例: 点击复制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>克隆</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        #b1 {
            background-color: deeppink;
            padding: 5px;
            color: white;
            margin: 5px;
        }

        #b2 {
            background-color: dodgerblue;
            padding: 5px;
            color: white;
            margin: 5px;
        }
    </style>
</head>
<body>

<!-- 提一嘴: 这是HTML5新增的button标签!! 可以直接写内容做成一个按钮. -->
<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script>
    // clone方法不加参数true,克隆标签但不克隆标签绑定的事件
    $("#b1").on("click", function () {
        // $(this).clone().insertAfter($(this)); 这样写也一样..
        $(this).clone().insertAfter(this);
    });
    // clone方法加参数true,克隆标签并且克隆标签绑定的事件
    $("#b2").on("click", function () {
        $(this).clone(true).insertAfter(this);
    });
</script>
</body>
</html>

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

← jquery基本使用 jquery事件→