5.8 jq-02Dom操作

最新推荐文章于 2024-09-14 18:52:56 发布

杵意

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量566

点赞数

分类专栏： java基础（前后端）文章标签： jquery javascript 前端

王锡豪

本文链接：https://blog.csdn.net/wang121213145/article/details/122208145

版权

java基础（前后端）专栏收录该内容

61 篇文章 5 订阅

订阅专栏

文章目录

- - jq-02Dom操作

jq-02Dom操作

1 jquery事件

js事件on jquery事件去掉on
在这里插入图片描述

1.ready表示文档结构已经加载完成（不包含图片等非文字媒体文件），
2.onload指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)

2 事件绑定的两种形式

对象.事件名
jquery的event对象的属性：
在这里插入图片描述

3 on事件绑定$(selector).on(event,【childSelector,data】,function)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<!-- <a>测试</a>
		<div id="con"></div> -->
		<button id="btn">测试</button>
		<script>
		let i=1;
		  $(function(){
			  
			  $("#btn").click(function(){
				  // 生成一个按钮
				  // jq创建节点
				let btn1= $("<button class='test' οnclick='aaa(this)'>测试按钮"+i+"</button>");
				// 加到body标签里面
				$("body").append(btn1);
				i++;
				  
			  })
			  // 绑定事件  on
			  // $(".test").click(function(){
				 //  alert("llll");
			  // })
			  // .test  body
			  // 动态标签绑定事件
			  // 父jq对象。on("事件名字"，“子元素”，函数)；
			  // $("body").on("click",".test",function(){
				 //  //
				 //  alert($(this).text());
			  // })
			  
			  
			  // 静态页面   动态生成的标签
			 // $("a").on("click",function(e){
				//  alert(e.type);
			 // }) 
			 // // jq对象。事件名  绑定静态页面里面的内容
			 // // js生成的标签  绑定事件不行
			 // $("a").click(funciton(){
				 
			 // })
			  // $("a").on("mousedown",function(e){
				 //  alert(e.which);// 1  鼠标的左边的按键   2 中间  滚轮  3 右键
			  // })
			  // 鼠标移动的时候  div里面显示当前的鼠标的坐标
			  // $(document).on("mousemove",function(e){
				 //  $("#con").html("x轴的坐标是:"+e.pageX+"==y轴的坐标是:"+e.pageY);
			  // })
			  
		  })
		
		//
		function aaa(obj){
		   alert($(obj).text());
		}
		</script>
	</body>
</html>

4 jQuery合成事件

hover：mouseenter 和 mouseleave
在这里插入图片描述

4.1 jQuery属性操作

在这里插入图片描述

5 DOM操作

1创建

在这里插入图片描述

2 追加节点

在这里插入图片描述

3 节点操作——删除节点

在这里插入图片描述

4 节点操作——复制节点

在这里插入图片描述
includeEvents：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

5 工具函数

在这里插入图片描述

6 JSON

java语言 js语言交互，数据类型都不一样，——完全没法沟通
所有语言：字符串——字符串交互。
JSON：规范，字符串的规范——固定格式的字符串。字符串 json对象——两者可以转换。
JSON对象：可以用对象.属性名取值对象.属性=？赋值{“属性名”：“属性值”,“age”:11 }JSON字符串还是字符串，只不过这个字符串有规则：’{“属性名”：“属性值”,“age”:11 }’
在这里插入图片描述

省市县级联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../jquery/jquery-3.4.1.js">

		</script>
	</head>
	<body>
		省：
		<select name="" id="sheng">
			<option value="">请选择</option>
			<option value="">sdcs</option>
		</select>
		市：
		<select name="" id="shi">
			<option value="">请选择</option>
		</select>
		县：
		<select name="" id="qu">
			<option value="">请选择</option>
		</select>



		<script type="text/javascript">
			$(function() {
				china = {
					"地址": [{
							"省名": "河南省",
							"city": [{
								"市名": "郑州市",
								"区名": ["中原区", "金水区"]
							}, {
								"市名": "新乡市",
								"区名": ["红旗区", "高新区"]
							}]
						}, {
							"省名": "河北省",
							"city": [{
								"市名": "河北1市",
								"区名": ["河北11区", "河北12区"]
							}, {
								"市名": "河北2市",
								"区名": ["河北21区", "河北22区"]
							}]
						}


					]
				}

				let all = china.地址;
				for (var i = 0; i < all.length; i++) {
					let shengming = all[i].省名;
					let newshneg = $("<option>" + shengming + "</option>");
					$("#sheng").append(newshneg);
				}

				$("#sheng").on("change", function() {
					$("#shi").empty()
					$("#qu").empty()
					let shengdian = $(this).val();
					let all = china.地址;
					for (var i = 0; i < all.length; i++) {
						let shengming = all[i].省名;

						if (shengdian == shengming) {
							let shis = all[i].city;
							for (var j = 0; j < shis.length; j++) {
								let shiming = shis[j].市名;
								let newshneg = $("<option>" + shiming + "</option>");
								$("#shi").append(newshneg);
							}
						}
					}
				})

				$("#shi").on("change", function() {
					$("#qu").empty()

					let shengdian = $(this).val();


					let all = china.地址;
					for (var i = 0; i < all.length; i++) {
						let statu = false;
						let shis = all[i].city;
						for (var j = 0; j < shis.length; j++) {
							let shiming = shis[j].市名;
							let quming = shis[j].区名;

							for (var k = 0; k < quming.length; k++) {
								if (shiming == shengdian) {
									// alert("sdc")
									let newshneg = $("<option>" + quming[k] + "</option>");
									$("#qu").append(newshneg);
									statu = true;
								}
							}
						}
						if (statu) {
							return;
						}
					}
				})
			})
		</script>
	</body>
</html>