JavaWeb (四) Jquery ：属性操作、案例联系、dom的增删改、动态增删、css样式、jquery动画、jquery时间操作

墨蓝 2023-06-29 05:53 7阅读 0赞

### 个人博客网：[https://wushaopei.github.io/][https_wushaopei.github.io]    (你想要这里多有) ###

### 1、Jquery 的属性操作 ###

![20200110200952860.png][]

attr()            它可以设置和获取属性的值。

像checked，disabled,readonly,selected这些属性在dom对象中值是true和false。    官方不推荐使用attr方法来进行操作。  
因为当没这个属性的时候，会返回undefined。官方觉得这是一个错误的值。推荐使用prop方法去操作以上类似的属性。

attr方法可以操作非标准（自定义）的属性。

prop()            它可以设置和获取属性的值。

像checked，disabled,readonly,selected这些属性在dom对象中值是true和false。推荐使用prop方法操作。其他属性都使用attr方法操作。

### 2、Jquery 练习 ###

**2.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>
    <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(){
    			// 设置全部选中
    			$(":checkbox").prop("checked",false);
    		});		
    		
    		//反　选
    		$("#checkedRevBtn").click(function(){
    			// 获取全部的球类的复选框
    			// each 方法是遍历的方法
    			$(":checkbox[name='items']").each(function(){
    				// 在each遍历的function中有一个this对象。这个this对象是当前正在遍历到的dom对象
    				this.checked = !this.checked;
    			});
    			
    			// 判断如果全部的球类都选中了。那么【全选/全不选 】也应该被选中
    			// 获取全部选中的球类的个数
    			var checkedCount = $(":checkbox[name='items']:checked").length;
    			// 获取全部的球类的个数
    			var allCount = $(":checkbox[name='items']").length;
    
    // 			if (checkedCount == allCount) {
    // 				$("#checkedAllBox").prop("checked",true);
    // 			} else {
    // 				$("#checkedAllBox").prop("checked",false);
    // 			}
    			$("#checkedAllBox").prop("checked",checkedCount == allCount);
    		});
    		
    		//提交按钮
    		$("#sendBtn").click(function(){
    			// each 是遍历的方法
    			$(":checkbox[name='items']:checked").each(function(){
    				// 在each遍历的function中有一个this对象。这个this对象是当前正在遍历到的dom对象
    				alert( this.value );
    			});
    		});
    		
    		// 【全选/全不选】复选框单击事件 
    		$("#checkedAllBox").click(function(){
    			// 在事件的function函数中也有一个this对象。这个this对象是当前正在响应事件的dom对象。
    // 			alert( this.checked );
    			// 获取全部的球类的复选框
    			$(":checkbox[name='items']").prop("checked",this.checked);
    		});
    		
    		// 给全部的球类绑定单击事件
    		$(":checkbox[name='items']").click(function(){
    			// 在事件的function函数中有一个this对象。这个this对象是当前正在响应事件的dom对象。
    			var checkedCount = $(":checkbox[name='items']:checked").length;
    			var allCount = $(":checkbox[name='items']").length;
    
    			$("#checkedAllBox").prop("checked",checkedCount == allCount);
    		});
    		
    	});
    	
    </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>

### 4、 Dom 的增删改 ###

![20200110201241903.png][]

内部插入：
    appendTo()			a.appendTo(b)			是把a插入到b子元素后面	
    prependTo()			a.prependTo(b)		        是把a插入到b子元素前面
    
    外部插入：						
    insertAfter()			a.insertAfter(b)		把a插到b后面		ba	   	
    insertBefore()			a.insertBefore(b)		把a插到b前面		ab
    
    
    替换:
    replaceWith()			a.replaceWith(b)		把a替换成b
    replaceAll()   		        a.replaceAll(b)			是把a去全部替换b
    
    删除：
    remove()			a.remove()			删除a
    empty()				a.empty()			清空a标签内所有内容

### 5、 Jquery 练习 二 ###

**5.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>选中添加到右边</button>
    			$("button:eq(0)").click(function(){
    				//查找左边下拉列表中选中的option标签对象，appendTo 右边的下拉列表
    				$("select:eq(0) option:selected").appendTo( $("select:eq(1)") );
    			});
    // 			<button>全部添加到右边</button>
    			$("button:eq(1)").click(function(){
    				//查找左边下拉列表中选中的option标签对象，appendTo 右边的下拉列表
    				$("select:eq(0) option").appendTo( $("select:eq(1)") );
    			});
    // 			<button>选中删除到左边</button>
    			$("button:eq(2)").click(function(){
    				//查找右边下拉列表中选中的option标签对象，appendTo 左边的下拉列表
    				$("select:eq(1) option:selected").appendTo( $("select:eq(0)") );
    			});
    // 			<button>全部删除到左边</button>
    			$("button:eq(3)").click(function(){
    				//查找右边下拉列表中选中的option标签对象，appendTo 左边的下拉列表
    				$("select:eq(1) option").appendTo( $("select:eq(0)") );
    			});
    			
    		});
    	</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>

**5.2 动态添加、删除表格记录**

<!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 deleteFun = function(){
    			// 在事件的function函数中有一个this对象，这个this对象是当前正在响应事件的dom对象
    			var $trObj = $(this).parent().parent();
    			var name = $trObj.find("td:first").text();
    			// 它是js中的一个确认提示框函数
    			// 这个确认提示框，有两个按钮，一个确认，一个取消，
    			// 当用户点击了取消就返回false，当用户点击 确认就返回true
    			if( confirm("你确认要删除【" + name + "】吗?") ){
    				$trObj.remove();
    			}
    			
    			// return false 可以阻止 元素的默认行为
    			return false;
    		}
    		
    		// submit按钮单击事件
    		$("#addEmpButton").click(function(){
    			var name = $("#empName").val();
    			var email = $("#email").val();
    			var salary = $("#salary").val();
    			
    			var $trObj = $("<tr>"
    							+ "<td>" + name + "</td>"
    							+ "<td>" + email + "</td>"
    							+ "<td>" + salary + "</td>"
    							+ "<td><a href=\"deleteEmp?id=003\">Delete</a></td>"
    							+ "</tr>");
    			
    			
    			$trObj.find("a").click( deleteFun );
    			
    			$trObj.appendTo( $("#employeeTable") );
    			
    		});
    		
    		// 删除的单击事件
    		$("a").click( deleteFun );
    		
    	});
    	
    </script>
    </head>
    <body>
    
    	<table id="employeeTable">
    		<tr>
    			<th>Name</th>
    			<th>Email</th>
    			<th>Salary</th>
    			<th> </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>

### 6、CSS 样式操作 ###

addClass()					添加样式
    removeClass()					删除样式
    toggleClass()					没就添加或就删除样式
    offset()				        获取和设置坐标

### 7、Jquery动画 ###

基本动画
    show()				显示隐藏的元素
    hide()				隐藏可见的元素
    toggle()			可见就隐藏，不可见就显示
    
    
    淡入淡出动画
    fadeIn()		        淡入	
    fadeOut()			淡出
    fadeTo()			在给定的时间内慢慢将透明度修改到指定值。
    fadeToggle()			切换调用fadeIn和fadeOut 方法

**7.1 练习：**

需求：  
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。

2.当显示全部内容的时候，按钮文本为“显示精简品牌”  
然后，小角形向上。所品牌产品为默认颜色。

3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”  
然后小形向下。并且把 佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>品牌展示练习</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-size: 12px;
    	text-align: center;
    }
    
    a {
    	color: #04D;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #F50;
    	text-decoration: underline;
    }
    
    .SubCategoryBox {
    	width: 600px;
    	margin: 0 auto;
    	text-align: center;
    	margin-top: 40px;
    }
    
    .SubCategoryBox ul {
    	list-style: none;
    }
    
    .SubCategoryBox ul li {
    	display: block;
    	float: left;
    	width: 200px;
    	line-height: 20px;
    }
    
    .showmore , .showless{
    	clear: both;
    	text-align: center;
    	padding-top: 10px;
    }
    
    .showmore a , .showless a{
    	display: block;
    	width: 120px;
    	margin: 0 auto;
    	line-height: 24px;
    	border: 1px solid #AAA;
    }
    
    .showmore a span {
    	padding-left: 15px;
    	background: url(img/down.gif) no-repeat 0 0;
    }
    
    .showless a span {
    	padding-left: 15px;
    	background: url(img/up.gif) no-repeat 0 0;
    }
    
    .promoted a {
    	color: #F50;
    }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    	$(function() {
    		// 初始状态
    		$("li:gt(5):not(:last)").hide();
    		
    		//给按钮绑定单击事件
    		$("div div a").click(function(){
    			// 点击了按钮之后，要么合上，要么展开
    			$("li:gt(5):not(:last)").toggle();
    			// 判断，是否是隐藏状态
    			if ( $("li:gt(5):not(:last)").is(":hidden") ) {
    //	 			显示全部品牌====在隐藏状态下
    // 				alert("当前是隐藏");
    				$("div a span").html("显示全部品牌");
    				
    // 				角标向下
    				$("div div").removeClass();
    				$("div div").addClass("showmore");
    				
    				$("li:contains('明基')").add("li:contains('爱国者')").removeClass();
    			} else {
    //	 			显示精简品牌====在显示状态下
    // 				alert("当前是显示");
    				$("div a span").html("显示精简品牌");
    				
    				$("li:contains('明基')").add("li:contains('爱国者')").addClass("promoted");
    				
    // 				角标向上
    				$("div div").removeClass();
    				$("div div").addClass("showless");
    			}
    			return false;
    		});		
    	});
    </script>
    </head>
    <body>
    	<div class="SubCategoryBox">
    		<ul>
    			<li><a href="#">佳能</a><i>(30440) </i></li>
    			<li><a href="#">索尼</a><i>(27220) </i></li>
    			<li><a href="#">星</a><i>(20808) </i></li>
    			<li><a href="#">尼康</a><i>(17821) </i></li>
    			<li><a href="#">松下</a><i>(12289) </i></li>
    			<li><a href="#">卡西欧</a><i>(8242) </i></li>
    			<li><a href="#">富士</a><i>(14894) </i></li>
    			<li><a href="#">柯达</a><i>(9520) </i></li>
    			<li><a href="#">宾得</a><i>(2195) </i></li>
    			<li><a href="#">理光</a><i>(4114) </i></li>
    			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
    			<li><a href="#">明基</a><i>(1466) </i></li>
    			<li><a href="#">爱国者</a><i>(3091) </i></li>
    			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
    		</ul>
    		<div class="showmore">
    			<a href="more.html"><span>显示全部品牌</span></a>
    		</div>
    	</div>
    </body>
    </html>

### 8、Jquery事件操作 ###

**$(function()\{\});  
和  
window.onload = function()\{\}  
的区别？**

**8.1 他们分别是在什么时候触发？**

1.  jquery的页面加载完成之后是在浏览器内核解析完标签，创建好dom对象之后就马上执行。
2.  js原生的页面加载完成之后，是在浏览器内核解析完标签，创建好dom对象。还要等dom对象的显示图片加载完成，再执行

**8.2 他们触发的顺序？**

1.  先执行jquery的页面加载完成之后
2.  再执行js的原生的页面加载完成之后

**8.3 他们执行的次数？**

1.  原生js只会执行最后一次赋值的函数。
2.  jquery的页面加载完成之后。会依次全部执行注册的所有函数

**8.4 常用事件方法**

click()				        绑定单击事件（或触发单击事件
    mouseover()				绑定鼠标移入事件
    mouseout()				绑定鼠标移出事件
    bind()					绑定事件
    one()					绑定只消费一次的事件
    live()					可以给匹配的择器的所元素绑定事件，哪怕这个元素是后面创建的也效。
    unbind()				跟bind相反的操作，取消绑定

**8.5 事件的冒泡**

**（1）什么是事件的冒泡？**

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

**（2）那么如何阻止事件冒泡呢？**

在子元素的事件函数体内，直接return false; 可以阻止事件的冒泡传递。

**（3）javaScript事件对象    **

事件对象，是封装触发的事件信息的一个javascript对象。  
我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。

**（4）如何获取呢javascript事件对象呢？**  
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。  
这个event就是javascript传递参事件处理函数的事件对象。

比如：

1.原生javascript获取 事件对象

window.onload = function(){
            document.getElementById("areaDiv").onclick = function(event){
                console.log(event);
            };
        }

2.JQuery代码获取 事件对象

$(function(){
            $("#areaDiv").click(function(event){
                console.log(event);
            });
        });

3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

$("#areaDiv").bind("mouseover mouseout",function(event){
    //             console.log(event);
    //             console.log("bind绑定的事件");
                if (event.type == "mouseout") {
                    console.log("鼠标移出");
                } else if (event.type == "mouseover") {
                    console.log("鼠标移入");
                }
            });

**8.6 练习**

<!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">
    	body {
    		text-align: center;
    	}
    	#small {
    		margin-top: 150px;
    	}
    	#showBig {
    		position: absolute;
    		display: none;
    	}
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#small").bind("mouseover mouseout mousemove",function(event){
    			if (event.type == "mouseover") {
    				$("#showBig").show();
    			} else if (event.type == "mouseout") {
    				$("#showBig").hide();
    			} else if (event.type == "mousemove") {
    				$("#showBig").offset({
    					top: event.pageY + 5,left:event.pageX + 5
    				});
    			}
    		});
    	});
    </script>
    </head>
    <body>
    
    	<img id="small" src="img/small.jpg" />
    	
    	<div id="showBig">
    		<img src="img/big.jpg">
    	</div>
    
    </body>
    </html>

[https_wushaopei.github.io]: https://wushaopei.github.io/
[20200110200952860.png]: https://img-blog.csdnimg.cn/20200110200952860.png
[20200110201241903.png]: https://img-blog.csdnimg.cn/20200110201241903.png