一、向被选元素中添加数据或移除数据
（1）、data()
实例：添加、取回数据
向 <div> 元素附加数据，然后取回该数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
});
</script>
</head>
<body>
<button id="btn1">将数据附加到div元素</button><br>
<button id="btn2">获取数据附加到div元素</button>
<div></div>
</body>
</html>如果没有在形参里写返回哪条数据默认就返回所有数据（以对象的形式返回）
（2）、removeData()
实例：移除数据
从 <div> 元素中移除之前附加的数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
alert("问候: " + $("div").data("greeting"));
});
$("#btn2").click(function(){
$("div").removeData("greeting");
alert("问候: " + $("div").data("greeting"));
});
});
</script>
</head>
<body>
<button id="btn1">附加数据到div元素</button><br>
<button id="btn2">移除附加到div元素的数据</button>
<div></div>
</body>
</html>如果没有在形参里写移除哪条数据默认就移除所有数据
二、为每个匹配元素执行函数
语法
$(selector).each(function(index,element))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(index,$this){//也可以不要形参
console.log(index);//下标
console.log($this);//执行函数的标签
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>三、获取 DOM 元素
语法
$(selector).get(index)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
x=$("p").get(0);//形参可选。规定要获取哪个匹配的元素（通过 index 编号）。
$("div").text(x.nodeName + ": " + x.innerHTML);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>获取P的DOM元素</button>
<div></div>
</body>
</html>
四、返回元素下标
语法
$(selector).index()//没有参数表名返回所选元素的下标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
x = $("li").get($(".hot").index($("#favorite")));
console.log(x.nodeName)//LI
console.log(x.innerHTML) //Tea
alert($(".hot").index($("#favorite")));//从类为hot的标签开始 距离类为hot并且id为favorit的这个标签的索引为2.
});
});
</script>
</head>
<body>
<p>单击按钮来获得id =“favorite”的元素的索引,相对于jQuery选择器(类=“hot”):</p>
<button>获取下标</button>
<ul>
<li>Milk1</li>
<li>Milk2</li>
<li class="hot">Tea</li>
<li class="hot">Orange</li>
<li>Milk3</li>
<li class="hot" id="favorite">Coffee</li>
</ul>
</body>
</html>五、创建数组或对象的序列化表示形式
语法
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
$.param(object,trad)
| 参数 | 描述 |
|---|---|
| object | 必需。规定要序列化的数组或对象。 |
| trad | 可选。布尔值，指定是否使用参数序列化的传统样式。 |
六、返回被 jQuery 选择器匹配的 DOM 元素的数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("li").length);
});
});
</script>
</head>
<body>
<button>输出li的数量</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>七、以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});
});
</script>
</head>
<body>
<button>输出每个li的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>八、遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$(function () {
$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});
})
</script>
</body>
</html>