一、JQ中增加节点操作
append：添加子元素
$("#div1").append("娘俩!");
appendTo：给自己找个爹，将自己添加到别人家里
$("啊哈哈哈").appendTo("#div1");
prepend：在子元素前面添加
("#div1").prepend("娘俩!");
after：在自己的后面添加一个兄弟
$("#div1").after("来,互相伤害呀!");
代码具体如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--1.外部引入jq文件-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
//文档加载完成时间
$(function(){
$("#btn1").click(function(){
//$("#div1").append("娘俩!");
//$("啊哈哈哈").appendTo("#div1");
//("#div1").prepend("娘俩!");
});
});
</script>
</head>
<body>
<input type="button" value="点我" id="btn1"><br>
<div id="div1">
这里添加内容
</div>
</body>
</html>
|
二、JQ遍历
1
2
3
| $(数组名).each(function(下标,数组值){
console.log(下标+"==="+数组值); //控制台输出
});
|
1
2
3
| $.each(数组名,function(下标,数组值){
console.log(下标+"==="+数组值); //控制台输出
});
|
具体实现如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--1.外部引入jq文件-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
//1.先准备好每个市
var cities = ["深圳市","东莞市","惠州市","广州市"];
//2.如何遍历
//JQ对象调用
$(cities).each(function(i,n){
console.log(i+"==="+n); //控制台输出
});
//JQ函数调用
$.each(cities,function(i,n){
console.log(i+">>>"+n); //控制台输出
});
</script>
</head>
<body>
</body>
</html>
|
举例结果如下：
JQ遍历原理介绍：
具体实现如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--1.外部引入jq文件-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
/*
//1.先准备好每个市
var cities = ["深圳市","东莞市","惠州市","广州市"];
//2.如何遍历
//JQ对象调用
$(cities).each(function(i,n){
console.log(i+"==="+n);
});
//JQ函数调用
$.each(cities,function(i,n){
console.log(i+">>>"+n);
});
*/
//1.先准备好每个市
var cities = ["深圳市","东莞市","惠州市","广州市"];
function callback1(i,n){
console.log("123"+"---"+i+"---"+n);
}
//遍历数据
function bianli(arr,callback1){
for(var i=0;i<arr.length;i++)
{
var item=arr[i]; //存入
callback1(i,item);
}
}
//调用
bianli(cities,callback1);
</script>
</head>
<body>
</body>
</html>
|
JQ遍历原理如下：
三、省市联动
在JS实现省市联动之后进行优化
技术分析：
1
2
3
4
|
1.准备工作：城市信息(把JS的代码拿过来用)
2.添加节点：append()等
3.JQ遍历:$.each(数组名,function(下标,数字值){});
|
步骤分析：
1
2
3
4
5
6
| 1.导入JQ文件
2.文档加载事件：页面初始化 $(function(){});
3.确定事件：change事件
4.触发函数：得到选中的省份 $("#province").change(function(){});
5.得到城市，遍历城市 $("#province").change(function(){});
6.将便利的城市+++省份 $("#city").append("<option>"+n+"</option>");
|
具体代码实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
//1.先准备好每个市
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"],
];
//2.文档加载事件
$(function(){
//4.选中省份
$("#province").change(function(){
//5.得到城市
var cities=provinces[this.value];
$("#city").empty(); //采用JQ的方式清空!!!!!!!!!!!!!!!!!!!
//5.遍历城市数据
$("#province").change(function(){
$("#city").append("<option>"+n+"</option>");
});
});
});
</script>
</head>
<body>
<!--选择省份-->
<select id="province">
<option value="-1">---选择省份</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city">
</select>
</body>
</html>
|
页面结果如下：
