JQ联动技术分析

最新推荐文章于 2021-03-22 19:15:53 发布

万万没想到2022

最新推荐文章于 2021-03-22 19:15:53 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/w2019424/article/details/96966736

版权

在这里插入图片描述

JQ中的联动代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		var fruits = [
			["芒果", "蓝莓", "榴莲", "椰子"],
			["红提", "樱桃", "猕猴桃", "车厘子"],
			["草莓", "苹果", "荔枝", "龙眼"]
		];
		
		function selectFruit() {
			var fruit = document.getElementById("fruit");
			//得到当前选中的是哪个水果分类
			var value = fruit.value;
			//从数组中取出对应的水果分类信息
			var foods = fruits[value];
			var foodSelect = document.getElementById("food");
			foodSelect.options.length = 0;
			for (var i = 0; i < foods.length; i++) {
				//	   alert(cities[i]);
				var foodText = foods[i];
				//动态创建水果元素节点 <option>榴莲</option>
				
				//创建option节点
				var option1 = document.createElement("option");
				//创建水果分类节点
				var textNode = document.createTextNode(foodText);
				//将option节点和水果分类内容关联起来
				option1.appendChild(textNode);
				//添加到水果select中
				foodSelect.appendChild(option1);
			}
		}
	</script>
</head>
<body>
	<!--选择水果分类-->
	<select id="fruit">
		<option value="-1">--请选择--</option>
		<option value="0">--热带水果--</option>
		<option value="1">--进口水果--</option>
		<option value="2">--国产水果--</option>
	</select>
	<!--选择水果-->
	<select id="food"></select>
</body>
</html>

JQ中DOM操作

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script>
		//文档加载完成事件
		$(function(){
			//绑定点击事件
			$("#btn1").click(function(){
		//		$("#div1").append("<font color='red' size='7'>这里有不可描述的事情！</font>")
		//		$("#div1").prepend("<font color='red' size='7'>这里有不可描述的事情！</font>");
				$("#div1").after("<font color='red' size='7'>这里有不可描述的事情！</font>");
		//		$("<font color='red' size='7'>这里有不可描述的事情！</font>").appendTo("#div1");
			});
		});
	</script>
</head>
<body>
	<input type="button" id="btn1" value="点我,有惊喜!" /><br />
	
	<div id="div1">
		这里一会要添加内容
	</div>
</body>
</html>

JQ遍历

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<!--导入JQ文件-->
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script>
		var fruits = ["芒果", "蓝莓", "榴莲", "椰子"];
		
		//如何遍历
		//JQ对象调用遍历
		/*$(fruits).each(function(i,n){
			console.log(i + " === " +n);
		})；*/
		
		function aaa(i,n){
			console.log(i+"   "+n);
		}
		
		//JQ的函数调用
//		$.each(fruits,function(i,n){
//			console.log(i + " >>> " +n);
//		})
//		var ddd = aaa();
//		$.each(fruits,aaa);


		var fruits = ["芒果", "蓝莓", "榴莲", "椰子"];
		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(fruits,callback1);


	</script>
</head>
<body>
</body>
</html>