前端（五）jQuery
目录
a.基础语法是：$("selector").action()
a.元素选择器 b.id选择器 c.类选择器 d.组合使用 e.筛选器 f.筛选器方法
a.样式操作 b.CSS c.位置操作 d.属性操作 e.标签内外部添加 f.文本操作
a.常用事件 b.事件绑定 c.移除事件 d.阻止后续事件执行 e.阻止事件冒泡 f.事件委托
a.hide()，show()，toggle() b.fade() c.Sliding() d.stop() e.Callback回调函数 f.animate()自定义动画
5.1jQuery对象与DOM对象
a.区别与联系
联系：jQuery对象就是用jQuery包装的DOM对象。
区别：两者分别有各自的方法不可以混用
b.相互转化
1.jQuery对象转化为DOM对象：jQuery对象本身是数组对象，可以通过[index]方法或者是使用自身方法.get[index]得到DOM对象。
var $a = $("ID值");//jQuery对象
var a = $a[0];//DOM对象
var a = $v.get(0);//使用.get[index]
2.DOM对象转化为jQuery对象:只需要用$()包起来。
var a = document.getElementById("ID名");//DOM对象
var $a = $(a);注意：jQuery命名时前面以$开头，方便区分DOM对象。
5.2jQuery的安装
1.打开官网：https://jquery.com/ 或https://www.bootcdn.cn/
2.点击下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
3.打开第一个，右键另存为即可。
5.3jQuery语法
a.基础语法是：$("selector").action()
1.美元符号=== jQuery
2.选择符（selector）“查询”和“查找” HTML 元素
3.jQuery 的 action() 执行对元素的操作
b.引入下载好的jquery-3.4.1.min文件
入口函数：
方法一：必须放在<body>标签最后：因为程序是从上到下执行
<body>
<script src="jquery-3.2.1.min.js"></script>
</body>
方法二：所有 jQuery 函数位于一个 document ready 函数中
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
$(document).ready(function(){
--- jQuery functions go here ----
});
</body>
简写：
$(function(){
// 开始写 jQuery 代码...
});5.4jQuery 选择器
a.元素选择器
$("p")b.id选择器
$("#id")c.类选择器
$(".class")d.组合使用
$("#id, .className, tagName")//逗号分隔是找所有满足条件的元素
$("div.c1") // 找到有c1(class类)的div标签,找的是div，<div class="c1">.c1</div>
$("*")//找所有e.筛选器
| 选择 | 例子 | 注解 |
| :first | $("p:first") | 第一个<p>元素 |
| :last | $("p:last") | 最后一个<p>元素 |
| :even | $("tr:even") | 所有<tr>的偶数元素 |
| :odd | $("tr:odd") | 所有<tr>的奇数元素 |
| :not(selector) | $("input:not(:empty)") | 所有非空的输入元素 |
| :has(selector) | $("div:has(p)") | 具有<p>元素的所有<div>元素 |
| :first-child | $("p:first-child") | 父元素的第一个子元素 |
| :last-child | $("p:last-child") | 父元素的最后一个子元素 |
| :eq(index) | $("ul li:eq(3)") | 一个列表中的第四个元素 |
| :gt(index) | $("ul li:gt(3)") | 匹配一个列表中所有大于索引3的元素 |
| :lt(index) | $("ul li:lt(3)") | 匹配一个列表中所有小于索引3的元素 |
| parent > child | $("div > p") | 所有<p>元素是<div>元素的直接子元素 |
| parent descendant | $("div p") | 所有<p>元素都是<div>元素的后代 |
| element + next | $("div + p") | 每个<div>元素旁边的<p>元素 |
| element ~siblings | $("div ~ p") | 所有<p>元素都是<div>元素的兄弟元素 |
| [attribute] | $("[href]") | 具有href属性的所有元素 |
| [attribute = value] | $("[href='default.htm']") | href属性值等于“default.htm”的所有元素 |
| [attribute != value] | $("[href!='default.htm']") | href属性值不等于“default.htm”的所有元素 |
| [attribute $= value] | $("[href$='.jpg']") | href属性值以“.jpg”结尾的所有元素 |
| [attribute |= value] | $("[title|='Tomorrow']") | title属性值等于'Tomorrow'的所有元素，或者以'Tomorrow'开头，后跟连字符 |
| [attribute ^= value] | $("[title^='Tom']") | 标题属性值以“Tom”开头的所有元素 |
| [attribute ~= value] | $("[title~='hello']") | 具有title属性值的所有元素包含特定单词“hello” |
| [attribute *= value] | $("[title*='hello']") | 标题属性值包含单词“hello”的所有元素 |
| :input | $(":input") | 所有输入元素 |
:input $(":input") 所有输入元素
:text $(":text") type =“text”的所有输入元素
:password $(":password")
:radio $(":radio")
:checkbox $(":checkbox")
:submit $(":submit")
:reset $(":reset")
:button $(":button")
:image $(":image")
:file $(":file")
:enabled $(":enabled") 所有启用的输入元素
:disabled $(":disabled") 所有禁用的输入元素
:selected $(":selected") 所有select中选定的输入元素
:checked $(":checked") 所有选中的输入元素f.筛选器方法
下一个元素：
$("#id").next()
$("#id").nextAll() //下面所有
$("#id").nextUntil("#i2") //不包含#i2
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")
示例：jQuery版自定义模态框
<!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>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
z-index: 999;
}
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="弹" id="i0">
<div class="cover hide"></div>
<div class="modal hide">
<label for="i1">姓名</label>
<input id="i1" type="text">
<label for="i2">爱好</label>
<input id="i2" type="text">
<input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var tButton = $("#i0")[0];
tButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
};
var cButton = $("#i3")[0];
cButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).addClass("hide");
$(modalEle).addClass("hide");
}
</script>
</body>
</html>示例：左侧菜单
<!DOCTYPE html>
<html lang="en">
<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>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
width: 80%;
height: 100%;
}
.menu {
color: white;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid #23282e;
}
.items {
background-color: #181c20;
}
.item {
padding: 5px 10px;
border-bottom: 1px solid #23282e;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜单一</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜单二</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜单三</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".title").click(function (){ // jQuery绑定事件
// 隐藏所有class里有.items的标签
$(".items").addClass("hide"); //批量操作
$(this).next().removeClass("hide");
});
</script>
左侧菜单示例5.5jQuery HTML/CSS 方法
a.样式操作
addClass() 向选定元素添加一个或多个类名
removeClass() 移除指定的CSS类名
hasClass() 判断样式存不存在
toggleClass() 切换CSS类名，如果有就移除，如果没有就添加b.CSS
css('color','red') //DOM操作：tag.style.color='red'
$('p').css('color','red') //将所有标签设置为红色c.位置操作
offset() 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() 获取匹配元素相对父元素的偏移
scrollTop() 获取匹配元素相对滚动条顶部的偏移
scrollLeft() 获取匹配元素相对滚动条左侧的偏移
height() 设置或返回所选元素的高度
width()
innerHeight() 返回元素的高度(includes padding, but not border)
innerWidth()
outerHeight() (includes padding and border)
outerWidth()
$(".c1").offset() //查询标签所在位置
$(".c1").offset({top: 20, left: 20}) //设置位置示例：返回顶部
<!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>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
...
<div class="c3">100</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top:200});
});
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
d.属性操作
attr()和prop()：
attr() 设置或返回所选元素的属性/值
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
prop() // 获取属性
removeProp() // 移除属性
$('img').attr('src','图片地址')
$('img').attr({'src':'图片地址','title':'hh'})
$('img').removeAttr('title')prop和attr的区别：
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop
<input type="checkbox" id="i1" value="1">
$("#i1").attr("checked"); // undefined
$("#i1").prop("checked"); //未被选中 false
$(":checkbox[value='1']").prop("checked",true); //设置选中
$("input[type = 'checkbox']").prop("checked",false);
$("input[name='l1']").prop("checked",false);选项卡（全选，反选，取消）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李五</td>
<td>23</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
</label>
</td>
<td>李五</td>
<td>23</td>
</tr>
</tbody>
</table>
<input type="button" value="全选" id="b1">
<input type="button" value="反选" id="b2">
<input type="button" value="取消" id="b3">
<script src="jquery-3.4.1.min.js"></script>
<script>
//全选
$('#b1').click(function () {
$box = $("input[type = 'checkbox']");
console.log($box);
$box.prop('checked', true);
});
//反选
$('#b2').click(function () {
//找到所有的checkbox，保存在$boxEle
var $boxEle = $(':checkbox');
//遍历checkbox，根据每一个元素的状态做操作
for (var i; i < $boxEle.length; i++) {
$tmp = $boxEle[i];
//如果选中，设置为FALSE
if ($tmp.prop('checked')) {
$tmp.prop('checked', false);
} else {
$tmp.prop('checked', true);
}
}
});
//取消
$('#b3').click(function () {
$(':checkbox').prop('checked', false)
});
</script>
</body>
</html>e.标签内外部添加
标签外部
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面标签内部
添加到指定元素内部的后面
$(A).append(B) // 在A的后面加B
$('#ul').append(liEle) //0 1 后加 2
$(A).appendTo(B)
$(liEle).appendTo($(''#ul'')) //2 放在 0 1 后
添加到指定元素内部的前面
$(A).prepend(B) //在A的前面加B
$('#ul').prepend(liEle) // 在 1 2 前调添加 0
$(A).prependTo(B)
$(liEle).prependTo($(''#ul'')) // 0 放在 1 2 前移除，清空，替换，克隆
remove() 从DOM中删除所有匹配的元素，如找到ul，即全删
empty() 删除匹配的元素集合中所有的子节点，如找到ul，只删除li
replaceWith()
$("p").replaceWith("a") 用a标签替换成所选p标签
replaceAll()
$("p").replaceWith("a") 用p标签替换成所选a标签
clone()
$(selector).clone(true|false) true指定还应复制事件处理程序f.文本操作
HTML代码：
html()// 取得第一个匹配元素的html内容（含标签）
html(val)// 设置所有匹配元素的html内容
文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
示例：
获取被选中的checkbox或radio的值：
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
可以使用：
$("input[name='gender']:checked").val()示例：自定义登录校验
<!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>
.error {
color: red;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#btn").click(function () {
var username = $("#input-name").val();
var password = $("#input-password").val();
if (username.length === 0) {
$("#input-name").siblings(".error").text("用户名不能为空");
}
if (password.length === 0) {
$("#input-password").siblings(".error").text("密码不能为空");
}
})
</script>
</body>
</html>5.6jQuery 事件方法
https://www.w3schools.com/jquery/jquery_ref_events.asp
a.常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})b.事件绑定
适用于给未来的元素（页面生成的时候还没有的标签）绑定事件（事件委托）
.on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数键盘相关事件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>键盘相关事件</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小黑</td>
<td>跑步</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小白</td>
<td>游泳</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 确保绑定事件的时候DOM树是生成好的
$(document).ready(function () {
var mode = false;
var $bodyEle = $("body");
// 给文档绑定 监听键盘按键被按下去的事件
$bodyEle.on("keydown", function (event) {
//
console.log(event.keyCode);
if (event.keyCode === 17) {
// 进入批量操作模式
mode = true;
}
});
// 按键抬起来的时候,退出批量操作模式
$bodyEle.on("keyup", function (event) {
//
console.log(event.keyCode);
if (event.keyCode === 17) {
// 进入批量操作模式
mode = false;
}
});
$("select").on("change", function () {
// 取到当前select的值
var value = $(this).val();
var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
// 判断checkbox有没有被选中
if ($thisCheckbox.prop("checked") && mode) {
// 真正进入批量操作模式
var $checkedEles = $("input[type='checkbox']:checked");
for (var i = 0; i < $checkedEles.length; i++) {
// 找到同一行的select
$($checkedEles[i]).parent().siblings().last().find("select").val(value);
}
}
})
});
</script>
</body>
</html>c.移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
阻止后续事d.阻止后续事件执行
1.阻止后续事件的发生：
return false;//阻止表单提交2.for循环，退出循环用break
e.阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>f.事件委托
事件冒泡和事件捕获 ：利用父标签去捕获子标签的事件（添加，删除元素）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>23</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>李五</td>
<td>23</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
</tbody>
</table>
<button id='b1' class="add">添加</button>
<script src="jquery-3.4.1.min.js"></script>
<script>
$('#b1').on('click', function () {
var newEle = document.createElement('tr');
$(newEle).html('<td>李六</td>\n' +
'<td>23</td>\n' +
'<td>\n' +
'<button class="delete">删除</button>\n' +
'</td>');
$('#t1').find('tbody').append(newEle);
});
$('tbody').on('click','.delete',function () {
$(this).parent().parent().remove();
})
</script>
</body>
</html>5.7动画效果
a.hide()，show()，toggle()
隐藏和显示：
$(selector).hide(speed,callback);
$('img').hide(5000);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
values: "slow", "fast", or 毫秒$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("button").click(function(){
$("p").toggle();
});b.fade()
淡入淡出：fadeIn()，fadeOut()，fadeToggle()，fadeTo()
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);//如果元素淡出，fadeToggle()将淡入它们。
//如果元素淡入，fadeToggle()将淡出它们
$(selector).fadeTo(speed,opacity,callback);//fadeTo()方法允许淡入给定的不透明度（0到1之间的值）。
values: "slow", "fast", or 毫秒$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});c.Sliding()
卷帘门：slideDown()，slideUp()，slideToggle()
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);$("#flip").click(function(){
$("#panel").slideDown();
});
$("#flip").click(function(){
$("#panel").slideToggle();
});d.stop()
$(selector).stop(stopAll,goToEnd);
可选的stopAll参数指定是否还应清除动画队列。默认值为false，这意味着只会停止活动动画，允许之后执行任何排队的动画。
可选的goToEnd参数指定是否立即完成当前动画。默认值为false。$("#stop").click(function(){
$("#panel").stop();
});e.Callback回调函数
当前效果结束后执行回调函数。
$（selector）.hide（speed，callback）;下面的示例有一个回调参数，该参数是在隐藏效果完成后执行的函数：
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});f.animate()自定义动画
$(selector).animate({params},speed,callback);
必需的params参数定义要设置动画的CSS属性。
可选的speed参数指定效果的持续时间。它可以采用以下值：“slow”，“fast”或毫秒。
可选的回调参数是动画完成后要执行的函数将<div>元素向右移动，直到它达到250px的left属性：
$("button").click(function(){
$("div").animate({left: '250px'});
})5.8补充
a. each()
循环；退出循环用return false；
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
==================================
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i +':' + v);//index是索引，ele是每次循环的具体元素。
})
0:10
1:20
2:30
3:40b. data()
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为1005.9插件
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
