jq ：遍历（each 遍历、数组遍历）、添加（append 、appendTo ）、清除（emp 。。。jQuery 的隐式迭代是对同⼀类型的元素做了相同的操作，如果想要给同⼀元素做不同的操作，就要⽤到遍历
1、each
实现遍历操作：
2、遍历数组：
函数中，index 代表⾓标，value 代表遍历的每⼀个元素。
<!DOCTYPE html >
<html >
<head >
<meta charset ="UTF-8">
<title >each 实现的遍历</title >
<script type ="text/javascript" src ="../js/jquery-1.8.3.js" ></script > <script >
$(function (){
$("button").click(function (){
$("li").each(function (){
alert($(this ).text())
});
});
});
</script >
</head >
<body >
<button >点击按键，each 实现遍历操作</button >
<ul >
<li >2020</li >
<li >新年好！</li >
<li >武汉加油！</li >
</ul >
</body >
</html >
<!DOCTYPE html >
<html >
<head >
<meta charset ="UTF-8">
<title >数组遍历</title >
<script type ="text/javascript" src ="../js/jquery-1.8.3.js" ></script > <script >
$(function () {
$.each([213,37,34,567,2020], function (index, value) {
alert(index + ': ' + value);
});
})
</script >
</head >
<body >
</body >
</html >
... ...
3、append
实现添加操作（在被选元素的末尾添加）
4、appendTo 实现添加操作：
<!DOCTYPE html >
<html >
<head >
<meta charset ="UTF-8">
<title >append 实现添加操作</title >
<script type ="text/javascript" src ="../js/jquery-1.8.3.js" ></script > <script >
$(function (){
$("#button").click(function (){
$("ul").append("<li>武汉加油！</li>");
});
});
</script >
</head >
<body >
<button id ="button">append 添加</button >
<ul >
<li >2020</li >
<li >新年好！</li >
<li >武汉加油！</li >
</ul >
</body >
</html >
<!DOCTYPE html >
<html >
<head >
<meta charset ="UTF-8">
<title >appendTo 实现添加操作</title >
<script type ="text/javascript" src ="../js/jquery-1.8.3.js" ></script > <script >
$(function (){
$("#button").click(function (){
$("<li>武汉加油！</li>").appendTo("ul");
});
});
</script >
</head >
<body >
<button id ="button">append 添加</button >
<ul >
<li >2020</li >
<li >新年好！</li >
<li >武汉加油！</li >
</ul >
</body >
</html >
5、empty() ⽅法：移除被选元素内部的的所有⼦节点和内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty实现移除操作</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script>
$(function(){
$("#button").click(function(){
$("ul").empty();
});
});
</script>
</head>
<body>
<button id="button">empty移除</button>
<ul>
<li>2020</li>
<li>新年好！</li>
<li>武汉加油！</li>
<ol>新年快乐！</ol>
</ul>
</body>
</html>
点击按键前：
点击按键后：
ul内部的所有元素被移除，⽂字部分消失了。
6、remove() ⽅法：移除相匹配的元素所有的⽂本和⼦节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove实现移除操作</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script>
$(function(){
$("#button").click(function(){
$("li").remove();
});
});
</script>
</head>
<body>
<button id="button">remove移除</button>
<ul>
<li>2020</li>
<li>新年好！</li>
<li>武汉加油！</li>
<ol>新年快乐！</ol>
</ul>
</body>
</html>
点击按键前：
点击按键执⾏移除操作后：
只剩下ol元素内部的内容，li内部的内容已被移除。
7、案例（省市⼆级联动）：
（1）核⼼代码：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
var cities = new Array(11);
cities[0] = new Array("东城区","西城区" ,"崇⽂区", "宣武区" ,"朝阳区" ,"丰台区","⽯景⼭区" ,"海淀区门" ,"头沟区"); cities[1] = new Array();
cities[2] = new Array();
cities[3] = new Array();
cities[4] = new Array();
cities[5] = new Array();
cities[6] = new Array();
cities[7] = new Array();
cities[8] = new Array();
cities[9] = new Array();
cities[10] = new Array();
cities[11] = new Array();
$("#province").change(function(){
$("#city").empty();
var val = this.value;
$.each(cities,function(i,n){jquery在一个元素后追加标签
if(val==i){//i为下标，n为当前的省份
$.each(cities[i], function(j,m) {
var textNode = ateTextNode(m);
var opEle = ateElement("option");
$(opEle).append(textNode);//对象的转换
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
此函数⽤到了⽤JQ的函数对⼆维数组进⾏遍历（each）、DOM操作、DOM对象向JQ对象的转化、清除（empty）。
（2）完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市⼆级联动</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
var cities =new Array(11);
cities[0] =new Array("东城区","西城区" ,"崇⽂区", "宣武区" ,"朝阳区" ,"丰台区","⽯景⼭区" ,"海淀区门" ,"头沟区"); cities[1] =new Array();
cities[2] =new Array();
cities[3] =new Array();
cities[4] =new Array();
cities[5] =new Array();
cities[6] =new Array();
cities[7] =new Array();
cities[8] =new Array();
cities[9] =new Array();
cities[10] =new Array();
cities[11] =new Array();
$("#province").change(function(){
$("#city").empty();
var val =this.value;
$.each(cities,function(i,n){
if(val==i){//i为下标，n为当前的省份
$.each(cities[i], function(j,m) {
var textNode = ateTextNode(m);
var opEle = ateElement("option");
$(opEle).append(textNode);//对象的转换
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<tr>
<td height="600px" ">
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td>
⽤户名
</td>
<td>
<input type="text" name="user" size="34px" id="user"
onfocus="showTips('user','⽤户名必填！')"
onblur="check('user','⽤户名不能为空！')"/>
<span id="userspan"></span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"
onfocus="showTips('password','密码必填')"
onblur="check('password','密码不能为空!')"/>
<span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论