五、案例：使用jQuery完成省市联动效果

最新推荐文章于 2020-09-05 17:08:29 发布

岩流

最新推荐文章于 2020-09-05 17:08:29 发布

阅读量333

点赞数

分类专栏： jQuery 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43470419/article/details/89296755

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 知识点

创建结点（不需要
添加结点：JQ对象.append(String);（在字符串中写入要添加的内容即可）
在JQ对象的内容后添加内容：append();
- e.g $("#div1").append("点你大爷呢点？");
将内容添加到JQ对象的内容中去：appendTo();
- e.g$("点你大爷呢点？").appendTo("#div1");
在JQ对象的内容前添加内容：JQ对象：prepend(String);
在JQ对象的后面添加一个兄弟：JQ对象：after();
遍历
- $(js数组对象).each(function(i,n){});
- $.each(js数组对象，function(i,n){});
清空子结点：empty();
select的改变事件：JQ对象.change();

2. JQ的DOM操作

<html>
	<head>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//文档加载完成事件
			$(function(){
				//按钮绑定点击事件
				$("#btn1").click(function(){
					//在div1中添加结点
					$("#div1").append("<font color='red' size='7'>点你大爷呢点？</font>");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="点击我!" />
		<div id="div1">
			这里一会儿要添加内容。
		</div>
	</body>
</html>

3.JQ的遍历操作

<!DOCTYPE html>
<html>
	<head>
		<script src="../js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			var cities = ["杭州市","湖州市","嘉兴市","绍兴市"];
			$(cities).each(function(i,n){
				console.log(i+"..."+n);
			});
			$.each(cities,function(i,n){
				console.log(i+">>>"+n);
			});
		</script>
		
	</head>
	<body>
	</body>
</html>

4.实现

<html>
	<head>
		<script src="../js/jquery-1.11.0.js"></script>
		<script>
			var provinces = [
				["杭州市","湖州市","嘉兴市","绍兴市"],
				["厦门市","福州市","莆田市","漳州市"],
				["西安市","咸阳市","延安市","渭南市"]
				];
			$(function(){
				$("#province").change(function(){
					var cities = provinces[this.value];
					$("#city").empty();
					$("#city").append("<option>--请选择--</option>");
					$(cities).each(function(i,n){
						$("#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">
			<option>--请选择--</option>
		</select>
		
	</body>
</html>

岩流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五、案例：使用jQuery完成省市联动效果

1. 知识点创建结点（不需要添加结点：JQ对象.append(String);（在字符串中写入要添加的内容即可）在JQ对象的内容后添加内容：append();e.g $("#div1").append("点你大爷呢点？");将内容添加到JQ对象的内容中去：appendTo();e.g$...
复制链接

扫一扫

专栏目录