第二章 JQuery事件和DOM操作 ① 笔记

小丫头爱打盹

已于 2022-07-07 20:31:10 修改

阅读量198

点赞数

分类专栏： # JQuery 文章标签： jquery javascript 前端

于 2022-06-24 17:41:08 首次发布

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125449531

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第二章 JQuery事件和DOM操作 ① 笔记

本章目标

jQuery操作html节点
jQuery属性操作
DOM节点操作

第一节：jQuery事件操作

1.jQuery事件

在这里插入图片描述

2.jQuery事件对象event/e属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8“>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
		$("div").click(function(e){
			console.log(window.event);
		}).width(200).height(200).css("border","1px solid red");
		</script>
	</body>
</html>

事件对象：e<===>window.event 表示事件对象，其中包含事件发生时周围的各种信息。

3. 事件绑定

在这里插入图片描述

$(document).on("click","div",function(){
	//this：触发事件的当前元素
	//alert($(this).html());
	$("div").css("background-color","white");
	$(this).css("background-color","red");
})

第二节：DOM操作

模板法。
增：创建，美化，添加
document.createElement(“标签名”)；
删: 自已.remove() 父.removeChild(“子节点”);
改：父.replace（新节点，老节点）；

1.jq创建节点

在这里插入图片描述
js: document.creatElement(“标签名”);
jq:$(“<标签名></标签名>”)

2.添加节点

js添加节点：对象.appendChild(要添加的标签);
jq:
在这里插入图片描述

3.删除节点

在这里插入图片描述

4.复制节点

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

第三节:节点方法

请添加图片描述

案例1：省市级联

分析：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
	</head>
	<body>
		省份:
		<select id="pro">
		<!-- <option value="河南">河南</option>
		<option value="河北">河北</option> -->
		<option value="">请选择</option>
		</select>
		市:
		<select id="city">
		</select>
		
		<!--引入jquery文件-->
		<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
		
		<script type="text/javascript">
			//定义省份数组
			var proAry = ["河南","河北"];
			//页面加载事件
			$(function(){
				//遍历数组数据
				$(proAry).each(function(){
				//alert(this);
				//将遍历的每项数据添加到省份下拉框中
				$("#pro").append("<option value='"+this+"'>"+this+"</option>")
			})
			//省份切换选择市，绑定下拉框的切换事件
			$("#pro").change(function(){
				//先清空市的选项
				$("#city").empty();
				//获取当前下拉框选中项的值
				var sf = $("#pro").val();
				//alert(sf)
				switch(sf){
					case "河南":
						//添加河南的市:郑州，焦作，开封，驻马店
						$("#city").append("<option value='郑州'>郑州</option>");
						$("#city").append("<option value='焦作'>焦作</option>");
						break;
					case "河北":
						//添加河北的市选项
						$("#city").append("<option value='石家庄'>石家庄</option>
						$("#city").append("<option value='唐山'>唐山</option>");
						break;
				}
			})
		</script>
	</body>
</html>

案例2：JQ完成购物车

//新增功能

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
	</head>
	<body>
		<table border="1" width="500" align="center">
			<thead>
				<tr>
					<th>编号</th>
					<th>名字</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="fbody">
			</tbody>
		</table>
		
		<!--引入jquery文件-->
		<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
		
		<script type="text/javascript">
			var fruitAry = [
				{"id":1001,"name":"苹果","price":2.5},
				{"id":1002,"name":"香蕉","price":5.5},
				{"id":1003,"name":"橘子","price":10}
			];
			//页面加载事件
			$(function(){
				$(fruitAry).each(function(){
					//this:遍历的每个json对象
					//alert(this.id+" "+this.name+" "+this.price);
					//$("<tr></tr>"):创建tr元素
					$("#fbody").append(
						$("<tr></tr>").append(
							$("<td></td>").html(this.id),
							$("<td></td>").html(this.name),
							$("<td></td>").html(this.price),
							$("<td></td>").html("<input type='button' value='添加'/>
						)
					)
				})
			})
		</script>
	</body>
</html>

第四节:工具函数(了解)
在这里插入图片描述