jq：遍历（each遍历、数组遍历）、添加（append、appendTo）、清除（emp。。。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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){
if(val==i){//i为下标，n为当前的省份
$.each(cities[i], function(j,m) {
var textNode = document.createTextNode(m);
var opEle = document.createElement("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 = document.createTextNode(m);
var opEle = document.createElement("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>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px" id="username"></input>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="⼥"/>⼥
</td>
</tr>
<tr>
<td>
出⽣⽇期
</td>
<td>
<input type="text" name="birthday" size="34px" id="birthday"></input>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province">
<option>--请选择--</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">天津</option>
<option value="3">重庆</option>
<option value="4">⿊龙江</option>
<option value="5">吉林</option>
<option value="6">辽宁</option>
<option value="7">河南</option>
<option value="8">湖北</option>
<option value="9">湖南</option>
<option value="10">台湾</option>
<option value="11">澳门</option>
</select>
<select id="city">
</select>
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="注册"/>
</center>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>。