JavaWeb学习笔记——jQuery属性操作、标签操作、css样式操作

最新推荐文章于 2021-05-01 23:41:00 发布

MCC莫大大

最新推荐文章于 2021-05-01 23:41:00 发布

阅读量143

点赞数

分类专栏：笔记文章标签： js javaee jquery

本文链接：https://blog.csdn.net/lemon6564562/article/details/111385815

版权

笔记专栏收录该内容

71 篇文章 6 订阅

订阅专栏

jQuery-2

属性操作
- 方法
- 练习
标签操作
- 文档处理
- 练习
CSS样式操作

属性操作

方法

jQuery对象下：

html()：设置和获取起始标签和结束标签中的内容，与 dom对象.innerHTML 相同
text()：设置和获取起始标签和结束标签中的文本，与 dom对象.innerText 相同
val()：设置和获取表单项的 value 属性值，与 dom对象.value 相同
attr()：设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled等，还可以操作非标准的属性，如自定义属性：abc,bbj
prop()：设置和获取属性的值，只推荐操作 checked、readOnly、selected、disabled 等

练习

jQuery实现全选、全不选、反选操作

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			//全选
			$("#checkedAllBtn").click(function(){
				$(":checkbox").prop("checked",true);
			});
			
			//全不选
			$("#checkedNoBtn").click(function(){
				//var $checkbox = $(":checkbox");
				//$checkbox.each(function(){
				//	this.checked = false;
				//});
				$(":checkbox").prop("checked",false);
			});
			
			//反选
			$("#checkedRevBtn").click(function(){
				//反选时不反选#checkedAllBox
				//var $checkbox = $(":checkbox[name='items']");
				var $checkbox = $(":checkbox").not(":#checkedAllBox");
				$checkbox.each(function(){
					this.checked = !this.checked;//this是dom对象
				});
				//判断选中的个数与复选框的个数是否相同，若相同，则代表全选
				//获取复选框的个数
				var $count = $(":checkbox[name='items']").length;
				//获取选中的个数
				var $checkCount = $(":checkbox[name='items']:checked").length;
				/*
				if($count==$checkCount){
					$("#checkedAllBox").prop("checked",true);
				} else {
					$("#checkedAllBox").prop("checked",false);
				}
				*/
				$("#checkedAllBox").prop("checked",$count==$checkCount);
			});
			
			//提交
			$("#sendBtn").click(function(){
				var $check = $(":checkbox[name='items']:checked");
				$check.each(function(){
					alert(this.value);
				});
			});
			
			//点击全选/全不选框时
			$("#checkedAllBox").click(function(){
				var $flag = $("#checkedAllBox").prop("checked");
				/*
				if($flag){
					$(":checkbox[name='items']").prop("checked",true);
				} else {
					$(":checkbox[name='items']").prop("checked",false);
				}
				*/
				$(":checkbox[name='items']").prop("checked",$flag);
			});
			
			//当四个选项都被选中时，全选/全不选框状态同步更新
			//四个复选框都绑定单击事件，因为不知道最后被点击的是哪个复选框
			$(":checkbox[name='items']").click(function(){
				var $checkedCount = $(":checkbox[name='items']:checked").length;
				var $count = $(":checkbox[name='items']").length;
				/*
				if($checkedCount==$count){
					$("#checkedAllBox").prop("checked",true);
				} else {
					$("#checkedAllBox").prop("checked",false);
				}
				*/
				$("#checkedAllBox").prop("checked",$checkedCount==$count);
			});
			
		});
	</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		<br/>
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br/>
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>

标签操作

文档处理

插入操作时，是将代码中的某一个标签a放到另外一个位置，例如div01内有标签span，执行$(“span”).appendTo(“div02”)操作之后，div01内的span标签就不存在了，转移到div02内了=

内部插入（每个b内都会插入，若想在最后一个b内部插入，要追加筛选条件“:last”）
appendTo(content) a.appendTo(b)；把a加到b里面，添加到最后面 <b>…a</b>
prependTo(content) a.prependTo(b)；把a添加到b里面，添加到最前面 <b>a…</b>
外部插入（每个b内都会插入，若想在最后一个b内部插入，要追加筛选条件“:last”）
insertAfter(content) a.insertAfter(b)；把a插入到b的后面 ba
insertBefore(content) a.insertBefore(b)；把a插入到b的前面 ab
替换
replaceWith(content|fn) a.replaceWith(b)；把a替换为b，结果只保留一个b
replaceAll(selector) a.replaceAll(b)；用a替换所有的b，结果有多个a
删除
empty()                     a.empty()；       删除a里面的所有内容，标签a不删除
remove([expr])          a.remove()；     删除标签a（里面的内容当然也删除了）
                                 a.remove(b)；   所有的a，是b的话就会删除

练习

练习1：
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		select {
			width: 100px;
			height: 140px;
		}
		
		div {
			width: 130px;
			float: left;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">	
		$(function(){
			//选中添加到右边
			$("button:eq(0)").click(function(){
				$("select[name=sel01] :selected").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel02]");
				});
			});
			
			//全部添加到右边
			$("button:eq(1)").click(function(){
				$("select[name=sel01] option").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel02]");
				});
			});
			
			//选中删除到左边
			$("button:eq(2)").click(function(){
				$("select[name=sel02] :selected").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel01]");
				});
			});
			//全部删除到左边
			$("button:eq(3)").click(function(){
				$("select[name=sel02] option").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel01]");
				});
			});
		});
	
	</script>
</head>
<body>

	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		
		<button>选中添加到右边</button>
		<button>全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>

</body>
</html>

练习2：
实现添加删除人员信息功能
在这里插入图片描述

confirm：JavaScript 语言提供的确认提示框函数，有确定和取消按钮，点击确定，返回 true，点击取消，返回 false
在响应事件的function函数中，有一个this对象，这个this对象就是当前正在响应事件的dom对象
deleteFunc不要写成deleteFunc()，有()是函数调用，没()是参数，这里只需要传入函数，调用是在执行时自动进行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="styleB/css.css" />
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			//删除操作提取出的函数
			var deleteFunc = function(){
				var $obj = $(this).parent().parent();
				//获取当前用户名
				var $userName = $obj.children("td:first").text();
				/**
				* confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>
				* 当用户点击了确定，就返回 true。当用户点击了取消，就返回 false
				*/
				var flag = confirm("确定删除用户"+$userName+"的信息吗？");
				if(flag){
					$obj.remove();
				}
				//阻止标签的默认行为
				return false;
			}
			
			//添加
			$("#addEmpButton").click(function(){
				//获取基本信息内容
				var $empName = $("[name='empName']").val();
				var $email = $("[name='email']").val();
				var $salary = $("[name='salary']").val();
				//将新标签添加到table中
				var $newTr = $("<tr>"+
								"<td>"+$empName+"</td>"+
								"<td>"+$email+"</td>"+
								"<td>"+$salary+"</td>"+
								"<td><a href=\"deleteEmp?id=001\">Delete</a></td>"+
								"</tr>");
				$newTr.appendTo("#employeeTable")
				/*
				问题：在为a标签绑定单击事件时，查询到的a标签只有初始时的三个，因此只为这三个a标签绑定了单击事件，
				对于用户后期通过submit提交的用户信息，点击delete时无法触发a标签的单击事件，因为页面初始化时没有绑定，
				解决办法是在submit提交信息时，为新的a标签绑定单价事件
				*/
				//为a标签绑定单击事件
				$newTr.find("a").click(deleteFunc);
			}); 
			
			//删除
			/*
			在事件响应的function函数中，有一个this对象，这个this对象就是当前正在响应事件的dom对象
			这里就是正在响应事件的a标签的dom对象
			
			1.deleteFunc不要写成deleteFunc()，有()是函数调用，这里只需要传入函数，调用是在执行时自动进行
			2.this代表当前正在响应事件的function函数内的dom对象，因此将deleteFunc传入click()内，
			     则当响应点击事件时，deleteFunc内部的this就代表了a标签对象
			*/
			$("td a").click(deleteFunc);

		});
	</script>
</head>
<body>
	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>
	<div id="formDiv">
		<h4>添加新员工</h4>
		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

CSS样式操作

addClass()：添加样式
removeClass()：删除样式
toggleClass()：有就删除，没有就添加样式。
offset()：获取和设置标签的坐标，$().offset({key：value，key：value})；

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	div{
		width:100px;
		height:260px;
	}
	
	div.border{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blackDiv{
		border: 5px blue solid;
	}
		
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	

	$(function(){
		/*
CSS
css(name|pro|[,val|fn])       读写匹配元素的样式属性。 
								a.css('color')取出a元素的color
								a.css('color',"red")设置a元素的color为red

CSS 类

addClass(class|fn) 			为元素添加一个class值;<div class="mini big">
removeClass([class|fn]) 	删除元素的class值；传递一个具体的class值，就会删除具体的某个class
							a.removeClass()：移除所有的class值

**/
		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass("redDiv blackDiv");
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass()
		});

		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			//切换就是如果具有该类那么删除，如果没有那么添加上
			$divEle.toggleClass("redDiv");
		});
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var os = $divEle.offset();
			//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
			alert("顶边距："+os.top+" 左边距："+os.left);
			
			//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
			//offset({ top: 10, left: 30 });
			 $divEle.offset({
				 top:50,
				 left:60
			 }); 
		});
		
	})
</script>
</head>
<body>

	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>
			
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	
	<br /> <br />
	
	
	<br /> <br />
	
</body>
</html>

MCC莫大大

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb学习笔记——jQuery属性操作、标签操作、css样式操作

jQuery-2属性操作方法练习标签操作文档处理练习CSS样式操作动画属性操作方法jQuery对象下：html()：设置和获取起始标签和结束标签中的内容，与 dom对象.innerHTML 相同text()：设置和获取起始标签和结束标签中的文本，与 dom对象.innerText 相同val()：设置和获取表单项的 value 属性值，与 dom对象.value 相同attr()：设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled等，还可以操
复制链接

扫一扫