前端基础之jQuery
jQuery介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。库就类似于是Python中的模块，简称为jq，就是js、css等的封装版本。
前端最大的问题就是兼容性问题，需要兼容各个浏览器，使用jQuery就不用担心兼容问题，其内部已经做好了。
它的宗旨就是：“Write less, do more.“
jQuery的优势
1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
jQuery内容
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax
jQuery的使用：
官方网站：https://jquery.com/
中文文档：https://jquery.cuishifeng.cn/
jQuery版本
● 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
● 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
● 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
我们主要学习jQuery3.x版本，要想使用jQuery，必须在文档中先引入jQuery库文件：
https://www.bootcdn.cn/------>下载jquery、bootstrap、vue等文件
使用方式：
1. 直接引入外链的js库
2. 把jQuery文件直接下载到本地，通过本地引入, 推荐该方式
CDN： 加快我们的加载文件的速度
jQuery对象
1. jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。如果一个对象是jQuery对象，那么它就使用jQuery提供的很多方法。
2. 标签对象
标签对象：直接就是通过各种选择器得到的标签，标签对象不能直接使用jQuery库提供的很多方法。
eg：
$("#i1").html(); // 拿到id为i1的文本内容，$的含义：$ 就相当于jQuery
jQuery("#i1").html(); // 和上面代码意思一样，jQuery === $
以后的代码里都使用$符号代替jQuery
jQuery基础语法
jQuery("selector").action();
$("selector").action();
jQuery的学习步骤：
1. 先学会如何查找标签
2. 找到标签之后再做相对于的操作
基本选择器
jQuery对象和标签对象之间的相互转换：
jQuery对象转为标签对象----------------->直接通过索引取值得到标签对象标签对象转为jQuery对象----------------->$(document.getElementById('d1')) --->使用jQuery把DOM抱起来--------------->就可以使用jQuery提供的方法了
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
// 在Js中通id查询
// var div = document.getElementById('d1'); //结果：<div id="d1" class="c1"></div>标签
// 当加上$,div就变成了jQuery对象
var div = $(document.getElementById('d1'));
console.log(div);
//jq中的id选择器查询：
var div1 = $("#d1"); //拿到的是一个jQuery对象，可以通过索引取值(结果如图1)
console.log(div1);
</script>
</body>
</html>
结果：
图1：
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
// 标签选择器
var div = $('div');
console.log(div);
</script>
</body>
</html>
结果：
class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
// class选择器
var div = document.getElementsByClassName('c1')[0]; // 在Js中
console.log(div);
var div1 = $('.c1'); // jQuery对象
console.log(div1);
</script>
</body>
</html>
结果：
配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
//配合使用
var div = $("div#d1");// 找到d1 id类的div标签
console.log(div);
var div1 = $("div.c1");// 找到有c1 class类的div标签
console.log(div1);
</script>
</body>
</html>
结果：
通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
// 通用选择器
var div = $("*"); //查询所有的选择器
console.log(div);
</script>
</body>
</html>
结果：
组合选择器
$('#d1,.c1,p') ：并列+混用
$('div span')：后代
$('div>span')：儿子
$('div+span') ： 毗邻
$('div~span') ：弟弟
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1">div
<span>div>span</span>
<p>
<span></span>
</p>
</div>
<span class="c1">span</span>
<p>pppp</p>
<script>
var res = $("#d1, .c1, p").css('color', 'red'); // 并列+混用
console.log(res);
var res1 = $("div span").css('color', 'green'); // div的后代
</script>
</body>
</html>
结果如图：
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
:first // 第一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="c1">5</li>
</ul>
<script>
$("ul li:first").css('color','hotpink'); // 第一个
</script>
</body>
</html>
结果：
:last // 最后一个
$("ul li:last").css('color','hotpink');
:eq(index) // 索引等于index的那个元素
$("ul li:eq(4)").css('color','hotpink');
结果：
:even // 匹配所有索引值为偶数的元素，从 0 开始计数（：odd,匹配所以索引值为奇数的元素，从0开始）
$("ul li:even").css('color','hotpink');
结果：
:gt(index) // 匹配所有大于给定索引值的元素 # gt ---> greater than（:lt(index)，与之相反，lt----> less than）
$("ul li:gt(1)").css('color','hotpink');
结果：
:not(元素选择器) // 移除所有满足not条件的标签
$("ul li:not('.c1')").css('color', 'hotpink');
结果：
属性选择器：
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
eg：
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
结果：
表单筛选器：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性:
:enabled 可用的
:disabled 不可用的
:checked 被选中的
:selected 下拉框
eg：找到input标签
<input type="text">
<input type="password">
<input type="checkbox">
<input name="id" />
console.log($("input[type='checkbox']"));//找到所有的checkbox，相当于：$(":checkbox")
console.log($($(':password') ));
console.log($(":text"));
结果：
eg2：找到被选中的option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女
<script>
console.log($(":checked")) //它会将checked和selected都拿到
console.log($(":selected")); // 找到所有被选中的option
console.log($("input:checked")); //自己加一个限制条件
</script>
</body>
</html>
结果：
筛选器方法
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素：
$("#i1").prev()
$("#i1").prevAll()
$("#i1").prevUntil("#i2")
父亲元素：
$(".ss1").parent().parent()
$(".ss1").parents()
$(".ss1").parentsUntil('#i1') : 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="c1">div
<p>
<span class="ss1"></span>
</p>
</div>
<p class="p1">p</p>
<span class="s1" id="i1">span</span>
<span class="s1">span</span>
<span class="s1" id="i2">span</span>
<span class="s1">span</span>
<script>
// 下一个元素：结果如图1所示
console.log($(".c1").next()); //下一个元素
console.log($(".c1").nextAll()); // 下面所有的元素
console.log($(".c1").nextUntil('#i2')); // .c1 class类下面的元素到id为i2的截止，不包括i2
// 父亲元素：结果如图2
console.log($(".ss1").parent().parent()); //一个parent就是往上找一个父辈,结果是 div标签
console.log($(".ss1").parents());//所有的父辈
console.log($(".ss1").parentsUntil('#i1'));
</script>
</body>
</html>
图1：
图2：
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找(掌握)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")----------------->等价于$("div p")
$("div p").find("a")----------------->等价于$("div p a")
$("#d1 .c1").find("a")----------------->等价于$("#d1 .c1 a")
补充：
.first() // 获取匹配的第一个元素 $('div span:first')-------------->$('div span').first() .last() // 获取匹配的最后一个元素 $('div span:last')----------------->$('div span').last() .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 $('div span:not("#d3")') --------------->$('div span').not('#d3') .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作标签
样式操作
样式类：
在js中：classList.add、remove、containes、toggle
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="c1" id="d1"> div </div>
<script>
// document.getElementById('d1').classList.add("c2"); // 在js中添加
$("#d1").addClass('c2');
$("#d1").removeClass('c1');
console.log($("#d1").hasClass('c1'));
$("#d1").toggleClass('c1');
</script>
</body>
</html>
文本操作
在js中：innerText innerHtml
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容 text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
属性操作（重要）
用于ID等或自定义属性：
attr(attrName)：返回第一个匹配元素的属性值
attr(attrName, attrValue)：为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})：为所有匹配元素设置多个属性值
removeAttr()：从每一个匹配的元素中删除一个属性
用于checkbox和radio：
prop()：获取属性
removeProp()：移除属性
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="c1" username="jack">div</div>
<input type="checkbox" value="1" checked="true" >
<input type="radio" value="2">
<script>
// js：
// console.log(document.getElementsByClassName('c1')[0].getAttribute('username'));
// console.log(document.getElementsByClassName('c1')[0].setAttribute('password', '123'));
// console.log(document.getElementsByClassName('c1')[0].removeAttribute('username'));
console.log($(".c1").attr('username')); // 返回第一个匹配元素的属性值
console.log($(".c1").attr('password', 123)); //为所有匹配元素设置一个属性值,如图2所示
$(".c1").removeAttr('username'); //从每一个匹配的元素中删除一个属性
console.log($(":checkbox[value='1']").prop("checked")); // 获取属性，有该属性就返回true,没有就返回false。
$(":checkbox[value='1']").prop("checked", true); //和上面代码意思一样
console.log($(":radio[value='2']").prop("checked"));// 获取属性，有该属性就返回true,没有就返回false。
</script>
</body>
</html>
结果：
图1：
图2：
图3：
图4：
图5：
prop和attr的区别：
attr全称attribute(属性)：它的作用范围只限于HTML标签内的属性，attr获取一个标签内没有的东西会得到underfined
prop全称property(属性)：prop不支持获取标签的自定义属性。prop获取的是DOM对象的属性，选中返回true，没选中返回false。
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
当设置或者获取单选框和复选框的属性值的时候，就使用prop()。除此之外，获取属性和设置属性都使用attr()。
文档处理
文档处理：添加到指定元素内部的后面
1. 添加到指定元素内部的前面：
$(A).prepend(B)： 把B前置到A
$(A).prependTo(B)：把A前置到B
2. 添加到指定元素外部的后面：
$(A).after(B)：把B放到A的后面
$(A).insertAfter(B)：把A放到B的后面
3. 添加到指定元素外部的前面：
$(A).before(B)： 把B放到A的前面
$(A).insertBefore(B)： 把A放到B的前面
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<script>
// 在js中创建一个节点（标签）：
// var p = document.createElement('p'); // <p></p>
// 在jq中：
var p = $('<p>'); // <p></p>
// 2. 增加属性id
p.attr('id', 'p1');// 3. 增加文本(jq中）
p.text('你好帅');
// 4. 把p标签增加到文档中
$('body').append(p); //将p追加到body中
</script>
</body>
</html>
4. 克隆：clone()
eg：点击复制按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
// clone方法不加参数true，只克隆标签但不克隆标签带的事件，点击克隆出来的按钮不能继续克隆标签
$("#b1").on("click", function () { //绑定点击事件
// $(this).clone().insertAfter(this);
// this：表示的是id为b1的标签，insertAfter：把克隆出来id为b1的标签放到id为b1的标签的后面
});
// clone方法加参数true，克隆标签并且克隆标签带的事件，点击克隆出来的标签也可以继续克隆
$("#b2").on("click", function () {
// clone括号中没有true这个参数，克隆的时候只可能标签样式等，如果加上true这个参数，就会连事件也一块克隆
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
事件
常用事件
click(function(){...}) ： 点击事件
hover(function(){...}) ：
blur(function(){...})：失去焦点
focus(function(){...}) ：获取焦点
change(function(){...})：
keyup(function(){...})：松开键盘
input：监控
eg1：点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<button class="btn">点击</button>
<script>
// 在js中创建节点，及绑定点击事件：
// var btn = document.getElementsByClassName('btn')[0];
// btn.onclick = function () {
// 里面写js代码
// }；
// var btn = $('.btn'); // 给button标签添加btn类
// console.log(btn);
// btn.click(function () {
// alert(123);
// });
// $(".btn").on("click", function () {
// alert(123);
// });
// 事件委托，它的功能更加强大，支持事件委托，
$("body").on("click", '.btn', function () {
alert(123456);
});
</script>
</body>
</html>
eg2：hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p>
<body>
<script>
$('p').hover(
function () {
alert('来啦，老弟')
},
function () {
alert('慢走哦～')
}
)
</script>
</body>
</html>
结果：
eg3：实时监听input输入值变化示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<input type="text" id="i1">
<script>
$("#i1").on("input", function () { //会实时监控input输入框中文本的值的变化
console.log($(this).val());
// 发起ajax请求，朝后盾发起请求，做验证.
})
</script>
</body>
</html>
结果如图：
会实时监控输入框中输入的文本
第一次输入：1
第二次输入:2
第三次输入: 3
事件绑定
.on(events [selector,],function(){});
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
具体例子参考上面的点击事件
具体方法有（如下图所示）：
阻止后续事件执行
1. .return false; // 常见阻止表单提交等
2. e.preventDefault();
eg :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<form action="">
<span class="s1" style="color: hotpink"></span>
<input type="submit" value="点击" id="btn">
</form>
<script>
var span = $(".s1");
var btn = $("#btn");
btn.click(function (e) {
span.text('哈基米');
// return false; // 这句话就可以组织后续事件的提交，页面就不会一直刷新。
e.preventDefault(); // 这句话就可以组织后续事件的提交，和上面代码作用是一样的
})
</script>
</body>
</html>
结果：
点击前：
点击后：框里的内容一直显示着，直到重新刷新页面。
阻止事件冒泡
e.stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script>
$("span").click(function (e) {
alert("span");
// 阻止事件冒泡
e.stopPropagation(); //这行命令放在哪，事件就会执行到哪，结果：alert只会显示到span，如图所示
});
$("p").click(function (e) {
alert("p");
// e.stopPropagation(); // 放在p标签这，alert会执行到p,如图2所示
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
结果：
图1：不管点击几次，弹窗内容只会显示span
图2：
第一次点击：
第二次点击：
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
当页面中的代码全部加载完毕再去执行的代码块
在js中：
window.onload = function () { }
在jq中，两种写法：
// 第一种方式： $(document).ready(function(){ // 在这里写js代码 }); // 第二种方式： $(function(){ // 这里写js代码 });
与window.onload的区别
- window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
eg：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<button class="btn"> 点我</button>
<script>
// $(".btn").click(function () {
// console.log('123');
// });
// 另外一种绑定事件的方式，他支持事件委托
// 语法: 元素集合.on(“事件类型”，选择器，事件处理函数)
// 把事件绑定给body元素，当你在body内的.btn元素触发事件的时候，执行事件处理函数
// 事件委托，把.btn元素的事件委托给了body元素来绑定
$("body").on("click", ".btn", function () {
console.log('123456');
})
</script>
</body>
</html>
结果：
补充：
each方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<script>
$('div').each(function (index, value) { //function中有两个参数：index(索引)，value(具体的元素)
console.log(value, index);
});
// 第二种方式：BBS中要用的
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {
//function中有两个参数：index(索引)，value(具体的元素)
console.log(value,index);
});
</script>
</body>
</html>
结果如图：
data的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div id="d1">5</div>
<div>6</div>
<script>
// data用法：
$('div').data('username', 'jack');
// 可以跟某一个标签设置data属性
$('div').first().data('username','jack');
$('div').eq(3).data('username', 'jack'); // 可以通过索引设置属性
$('#d1').data('username', 'jack');
// 获取值
$('#d1').data('username');
</script>
</body>
</html>
结果：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了