DC's blog DC's blog
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)

DC

愿我一生欢喜,不为世俗所及.
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)
  • html

  • css

  • javascript

  • jquery

    • jquery基本使用
    • jquery标签操作
      • 标签操作之样式
        • 样式类
        • CSS
        • 位置
        • 尺寸
      • 标签操作之文本内容
        • html
        • text
        • val
      • 标签操作之属性
        • 通用的方式
        • 用于复选框和单选框
        • 练习: 全选反选取消
      • 标签操作之文档
        • 基本用法
        • 案例: 点击复制
    • jquery事件
  • UI库

  • 第一次学vue

  • 第二次学vue

  • 前端
  • jquery
DC
2023-05-05
目录

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事件

← jquery基本使用 jquery事件→

最近更新
01
deepseek本地部署+知识库
02-17
02
实操-微信小程序
02-14
03
教学-cursor深度探讨
02-13
更多文章>
Theme by Vdoing | Copyright © 2023-2025 DC | One Piece
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式