javaee之JQuery练习二_.hasclass('fold')-优快云博客

本文链接：https://blog.youkuaiyun.com/css1223mjf/article/details/52481291

本文介绍jQuery在样式管理、事件处理、动画效果及Ajax应用方面的强大功能，并通过具体案例展示其在网页开发中的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

query的事件样式和动画效果

query除了有强大的选择器之外，它的事件管理也是相当不错的。比如说对样式的管理，动画的淡入淡出等，同时使用jQuery来对
AJAX的实现也方便了不少

①、样式

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>样式</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei"
    	}
    	.cGreen{color: #4CA902}
    	.cPink{color: #ED4A9F}
    	.cBlue{color: #0092E7}
    	.cCyan{color: #01A6A2}
    	.cYellow{color: #DCA112}
    	.cRed{color: #B7103B}
    	.cPurple{color: #792F7C}
    	.cBlack{color: #110F10}
    	.cOrange{color: #FF4500}
    	.cGray{color: #A9A9A9}
    	.hide{display: none;}
    	span {
    		float:left;
    	}
    	ul li {
    		width:120px;
    		float: left;
    		margin-left: 10px;
    	}
    	.fBold{font-weight: bold;}
    </style>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		$("#btn1").click(function(){
    			$("#usa").addClass("cBalck");
    		});
    		
    		$("#btn2").click(function(){
    			$("#usa").removeClass("cBalck");
    		});
    		
    		$("#btn3").click(function(){
    			$("#usa").toggleClass("cBalck");
    		});
    		
    		$("#btn4").click(function(){
    			alert($("#chn").hasClass("cBalck"));
    		});
    		
    		$("#btn5").click(function(){
    			$("#usa").css({"font-weight":"bold","color":"red"});
    		});
    		
    		$("#btn6").click(function(){
    			console.log("城市原来的高度：" + $("li").height());
    			$("li").height("35px");
    			console.log("修改的城市的高度：" + $("li").height());
    		});
    		
    		$("#btn7").click(function(){
    			console.log("城市原来的宽度为：" + $("li").width());
    			$("li").width("135px");
    			console.log("城市修改后的宽度为：" + $("li").width());
    		});
    		
    		$("#btn8").click(function(){
    			var gz = $("#gz").offset();
    			console.log("广州的left：" + gz.left + ",top:" + gz.top);
    		
    			var la = $("#la").offset();
    			console.log("洛杉矶的left：" + la.left + ",top:" + la.top);
    		});
    		
    		$("#btn8").click(function(){
    			var $gzOffset = $("#gz").offset();
    			console.log("广州的left：" + $gzOffset.left +"，top：" + $gzOffset.top);
    			
    			var $laOffset = $("#la").offset();
    			console.log("洛杉矶的left：" + $laOffset.left +"，top：" + $laOffset.top);
    		});
    	});
    </script>
    
  </head>
  
  <body>
  	<span>中国城市</span>：<br>
    <ul id="chn" class="fBold cOrange">
    	<li id="bj">北京</li>
    	<li id="sh">上海</li>
    	<li id="gz">广州</li>
    	<li id="sz">深圳</li>
    	<li id="hk">香港</li>
    </ul>
    <br><br>
    <span>美国城市</span>：<br>
    <ul id="usa">
    	<li id="wst">华盛顿特区</li>
    	<li id="ny">纽约</li>
    	<li id="la">洛杉矶</li>
    	<li id="scg">芝加哥</li>
    </ul>
    <br><br>
    <span>德国城市</span>：<br>
    <ul id="ger">
    	<li id="mnh">慕尼黑</li>
    </ul>
    <div style="clear:both;"></div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value="addClass()为美国城市添加cOrange类">
    <input type="button" id="btn2" value="removeClass()为美国城市去除cOrange类">
    <input type="button" id="btn3" value="toggleClass()为美国城市添加或去除cOrange类">
    <input type="button" id="btn4" value="hasClass()判断是否中国城市(ul元素)是否有fBold类">
    <input type="button" id="btn5" value="css()将美国的城市字体加粗和颜色设置为蓝色">
    <input type="button" id="btn6" value="height()查看城市(li元素)的高度并设置高度后再查看设置后值 ">
    <input type="button" id="btn7" value="width()查看城市(li元素)的宽度并设置宽度后再查看设置后值">
    <input type="button" id="btn8" value="offset()查看广州和洛杉矶的相对位置">
  </body>
</html>

②、事件


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>事件</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei"
    	}
    	.cGreen{color: #4CA902}
    	.cPink{color: #ED4A9F}
    	.cBlue{color: #0092E7}
    	.cCyan{color: #01A6A2}
    	.cYellow{color: #DCA112}
    	.cRed{color: #B7103B}
    	.cPurple{color: #792F7C}
    	.cBlack{color: #110F10}
    	.cOrange{color: #FF4500}
    	.cGray{color: #A9A9A9}
    	.hide{display: none;}
    	div {
    		width:100%;
    		text-align: center;
    	}
    	span {
    		border:solid 1px #A9A9A9;
    		padding:10px;
    		text-align: center;
    	}
    	.hoverCls{
    		color:#FF4500;
    		border:solid 1px #FF4500;
    	}
    </style>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		$("#btn1").click(function(){
    			$("img").on("click",function(){
    				alert("sd");
    			});
    		});
    		
    		$("#btn2").click(function(){
    			$("img").off("click");
    		});
    		
    		$("#btn3").click(function(){
    			$(document).bind("mousemove",function(ex){
    				$("span:eq(1)").html(ex.pageX + "," + ex.pageY);
    			});
    		});
    	
    		$("#btn4").click(function(){
    			$(document).unbind("mousemove");
    		});
    	
    		$("#btn5").click(function(){
    			$("img").one("click",function(){
    				alert("谈一次");
    			});
    		});
    	
    		$("#btn6").click(function(){
    			$("span:first").hover(function(){
    				$(this).addClass("hoverCls");
    				$("img").hide();
    			},function(){
    				$(this).removeClass("hoverCls");
    				$("img").show();
    			});
    		});
    		
    		$("#btn7").click(function(){
    			$(document).on("mousemove",function(e){
    				$("img").offset({"left":e.pageX ,"top":e.pageY});
    			});
    		});
    		
    		$("#btn8").click(function(){
    			$("span:first").on("click",function(){
    				alert("span被点击了");
    				return false;
    			});
    		});
    		
			$("div").on("click", function(){
				alert("div 被点击了。");
			});
			
    	});
    </script>
    
  </head>
  
  <body>
  	<div>
  		<br>
  		<span>鼠标放上来图片不显示，鼠标移开图片再次显示</span>
  		<br><br>
  		<img alt="itcast" src="logo.png">
  		<br><br>
  		鼠标的相对位置为：<span style="border:0px;"></span>
  	</div>
    <div style="clear:both;"></div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value="on()点击图片弹出信息">
    <input type="button" id="btn2" value="off()取消图片的点击事件">
    <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
    <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
    <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
    <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
    <input type="button" id="btn7" value="如影随形">
    <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
  </body>
</html>

③、动画

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>效果</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei";
    		text-align: center;
    	}
    	#mainDiv {
    		width: 100%;
    		text-align: center;
    		margin-top:10px;
    	}
    	.div1 {
    		width:320px;
    		height:120px;
    		color: white;
    		background-color: #0092E7;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	.div2 {
    		width:320px;
    		height:120px;
    		margin-top:10px;
    		margin-left: auto;
    		margin-right: auto;
    		
    	}
    	.div2_1 {
    		width:155px;
    		height:100%;
    		color: white;
    		float: left;
    		text-align: center;
    	}
    	
    	.cGreen{background-color: #4CA902}
    	.cPink{background-color: #ED4A9F}
    	.cBlue{background-color: #0092E7}
    	.cCyan{background-color: #01A6A2}
    	.cYellow{background-color: #DCA112}
    	.cRed{background-color: #B7103B}
    	.cPurple{background-color: #792F7C}
    	.cBlack{background-color: #110F10}
    	.cOrange{background-color: #FF4500}
    	.cGray{background-color: #A9A9A9}
    	.hide{display: none;}
    </style>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		$("#btn1").click(function(){
    			$(".div1").hide();
    		});
    		
    		$("#btn2").click(function(){
    			$(".div1").show();
    		});
    		
    		$("#btn3").click(function(){
    			$(".div2_1:first").slideUp("slow","linear");
    		});
    		
    		$("#btn4").click(function(){
    			$(".div2_1:first").slideDown("slow");
    		});
    		
    		$("#btn5").click(function(){
    			$(".div2_1:first").slideToggle(1900);
    		});
    		
    		$("#btn6").click(function(){
    			$(".div2_1:last").fadeOut("slow");
    		});
    		
    		$("#btn7").click(function(){
    			$(".div2_1:last").fadeIn("slow");
    		});
    		
    		$("#btn8").click(function(){
    			$(".div2_1:lasr").fadeToggle("slow");
    		});
    		
    		$("#btn9").click(function(){
    			$(".div1").fadeTo("slow",0.4);
    		});
    		
    		$("#btn10").click(function(){
				$(".div2_1").animate(
				{width:'toggle',opacity:'toggle'},
				"slow"
				);    		
    		});
    		
    		
    	});
    </script>
  </head>
  
  <body>
    <div id="mainDiv">
    	<div class="div1">①</div>
    	<div class="div2">
    		<div class="div2_1 cPink" style="margin-right:5px;">②</div>
    		<div class="div2_1 cGreen" style="margin-left:5px;">③</div>
    	</div>
   	</div>
    <p style="clear:both;"></p>
    <br>
    <hr>
    <input type="button" id="btn1" value="hide()隐藏蓝色区域块">
    <input type="button" id="btn2" value="show()隐藏蓝色区域块">
    <input type="button" id="btn3" value="slideUp()通过高度变化（向上减小）来动态地隐藏粉色区域块">
    <input type="button" id="btn4" value="slideDown()通过高度变化（向下增大）来动态地显示粉色区域块">
    <input type="button" id="btn5" value="slideToggle()通过高度变化来切换粉色区域块的可见性">
    <input type="button" id="btn6" value="fadeOut()通过不透明度的变化来实现淡出绿色块">
    <input type="button" id="btn7" value="fadeIn()通过不透明度的变化来实现淡入绿色块">
    <input type="button" id="btn8" value="fadeToggle()通过不透明度的变化淡入和淡出绿色块">
    <input type="button" id="btn9" value="fadeTo()通过不透明度以渐进方式调整蓝色块到指定的不透明度（0.4）">
    <input type="button" id="btn10" value="animate()通过制定自定义动画操作粉、绿色块">
  </body>
</html>

④、AJax

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  	<script type="text/javascript">
  		$(document).ready(function(){
		/*
		1.get() : 以get方法提交异步请求 ：  open("GET")
		2.post(): 以post方式提交异步请求： opeon("POST")  setRequestHeader("content-type")
		3.ajax(): 发出异步请求（返回任何类型的数据，普通字符串，xml，json）
		4.getJSON()：  发出异步请求（返回json数据）
		*/
		
		
			//1.get()
			/*
			  参数一：请求的路径 (不可省)
			 参数二： 提交到服务器的参数（可以省）(注意：参数格式是json对象格式)
			 参数三：指定接收服务器返回数据的函数,  该函数需要指定一个参数，该参数用于接收服务器的数据(可以省)
			 参数四：指定接收服务器返回数据的格式：  字符串，xml, json  (可以省)
			 		//html（默认）,text,xml,json(最常用) 
			*/
			
			/*
			$.get(
				"<c:url value='/GetDataServlet'/>",
				{name:"eric",email:"eric@qq.com"},
				function(data){// data: 服务器回传的数据
						//把字符串转换为json可执行格式
						//data = eval("("+data+")");
						
						alert(data);	
						
						alert(data.id);	
						alert(data.city);	
				}
				,"json");
				*/
				
			/*	
			$.post(
				"<c:url value='/GetDataServlet'/>",
				{name:"jack",email:"jack@qq.com"},
				function(data){
					alert(data.id);
					alert(data.city);
				}
				,"json"
			);
			*/
			
			/*
			ajax(): 
			参数一：请求路径
			参数二：设置传递到服务器参数： data
			参数三： 设置回传数据的函数： success
			参数四：设置请求错误的函数： error
			参数五： 设置返回数据的类型： dataType    html,text,json
			参数六： 设置请求方式 ： type : get(默认) / post
			*/
			/*
			$.ajax(
				"<c:url value='/GetDataServlet'/>",
				{
				//参数
					data:{name:"jack",email:"jack@qq.com"},
					success:function(data){
						alert("请求成功");
						alert(data);
					},
					error:function(){
						alert("请求失败！");
					},
					dataType: "html",
					type:"get"
				}	
				);
				*/
				
			  //getJSON(): 只能接收json格式数据
			  $.getJSON(
				  "<c:url value='/GetDataServlet'/>",
				  {name:"jack",email:"jack@qq.com"},
				  function(data){
				  	alert(data);
				  }
			  );
				
		});
	</script>	
  
  </head>
  
  <body>
  
  </body>
</html>

接下来做了一个综合的动画案例和事件案例
一、动画案例

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
    <title>案例-品牌选择</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei";
    		text-align: center;
    	}
    	#mainDiv {
    		width: 100%;
    		text-align: center;
    		margin-top:10px;
    	}
    	
    	.divRow {
    		text-align: center;
    		margin-left: auto;
    		margin-right: auto;
    		width:736px;
    	}
    	
    	.divColumn {
    		width:104px;
    		height:38px;
    		color: #005aa0;
    		border: solid 1px #b9b9b9;
    		font-size:14px;
    		float:left;
    		margin: 0 -1 -1 0;
    		text-align: center;
    		cursor: pointer;
    	}
    	
    	.divColumn a {
    		height: 36px;
    		line-height: 36px;
    		overflow: hidden;
    		padding: 0;
    		position: relative;
    		white-space: nowrap;
    		width: 102px;
    		display: inline-block;
    	}
    	
    	.divColumn img {
    		display: block;
    		height: 36px;
    		position: absolute;
    		width:102px;
    		z-index:1;
    		left:0;
    		top:0;
    	}
    	
    	.hover {
			color: #e4393c;
    		border: solid 1px #e4393c; 
    		position: relative;
    	}
    	.more,.fold {
    		font-size: 12px;
    		color: #005aa0;
    		cursor: pointer;
    	}
    	.more b{
    		background: rgba(0,0,0,0) url("images/down.gif") no-repeat;
    		height: 5px;
    		overflow: hidden;
    		position: absolute;
    		width: 7px;
    		margin:6 0 0 3;
    	}
    	.fold b{
    		background: url("images/up.gif");
    	}
    	.cGreen{background-color: #4CA902}
    	.cPink{background-color: #ED4A9F}
    	.cBlue{background-color: #0092E7}
    	.cCyan{background-color: #01A6A2}
    	.cYellow{background-color: #DCA112}
    	.cRed{background-color: #B7103B}
    	.cPurple{background-color: #792F7C}
    	.cBlack{background-color: #110F10}
    	.cOrange{background-color: #FF4500}
    	.cGray{background-color: #A9A9A9}
    	.hide{display: none;}
    </style>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		//1、页面初始化时需要隐藏第二行
    		$(".divColumn:gt(6)").hide();
    		
    		$(".more").on("click",function(){
    			var $moreDiv = $(this);
    			if($moreDiv.hasClass("fold")){//当前显示的是 收起
    				//3、点击 收起
            		//3.1、收起 修改为 更多；并且图标发生变化
            		$moreDiv.find("span").html("更多<b></b>");
            		$moreDiv.removeClass("fold");
            		//3.2、隐藏第二行数据
            		$(".divColumn:gt(6)").hide();
    			} else {//当前显示的是 更多
	    			//2、点击 更多
	        		//2.1、更多 修改为 收起；并且图标发生变化
	        		$moreDiv.find("span").html("收起<b></b>");
	        		$moreDiv.addClass("fold");
	        		//2.2、显示第二行数据
	        		$(".divColumn:gt(6)").show();
    			}
    		});
    		
    		
    		//4、样式
    		$(".divColumn").hover(function(){
    			//4.1、当鼠标在品牌上面时：
        		//4.1.1、隐藏品牌图片
        		$(this).find("img").hide();
        		//4.1.2、品牌样式被修改
        		$(this).addClass("hover");
    		}, function(){
    			//4.2、当鼠标离开品牌时：
        		//4.2.1、显示品牌图片
        		$(this).find("img").show();
        		//4.2.2、品牌样式被修改
        		$(this).removeClass("hover");
    		});
    		
    	});
    </script>
  </head>
  
  <body>
    <div id="mainDiv">
    	<div class="divRow">
    		<div class="divColumn">
    			<a><img alt="华为" src="images/huawei.jpg">华为</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="小米" src="images/xiaomi.jpg">小米</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="三星" src="images/samsung.jpg">三星</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="苹果" src="images/apple.jpg">苹果</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="魅族" src="images/meizu.jpg">魅族</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="诺基亚" src="images/nokia.png">诺基亚</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="vivo" src="images/vivo.png">vivo</a>
    		</div>
    		<div class="divColumn">
    			<a>OPPO</a>
    		</div>
    		<div class="divColumn">
    			<a>BlackBerry</a>
    		</div>
    		<div class="divColumn">
    			<a>努比亚</a>
    		</div>
    		<div class="divColumn">
    			<a>联想</a>
    		</div>
    		<div class="divColumn">
    			<a>索尼</a>
    		</div>
    		<div class="divColumn">
    			<a>酷派</a>
    		</div>
    		<div class="divColumn">
    			<a>HTC</a>
    		</div>
    	</div>
    	<div class="more"><span>更多<b></b></span></div>
   	</div>
  </body>
</html>

二、事件案例

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title></title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//在页面上填写所有的数据
			var id = $("input[name=id]").val();
			var userName = $("input[name=userName]").val();
			var userPass = $(":password[name=userPass]").val();
			var age = $("input[name=age]").val();
			var address = $("input[name=address]").val();
			//得到所有的数据点击添加按钮
			$("#addBtn").click(function(){
				//在第一个table中添加tr，里面是数据还有一个删除的操作
				$("table:first").append("<tr><td><input type='checkbox' /></td><td>"+id+"</td><td>"+userName+"</td><td>"+userPass+"</td><td>"+age+"</td><td>"+address+"</td><td><a href='javascript:void(0)' name='item' οnclick='delone(this)'>删除</a></td></tr>");
			});
			//点击全部删除可以全部删除
			$("#delAllID").click(function(){
				$(":checkbox[name=item]:checked").parent().parent().remove();
			});
			//点击全部的全选框则全选中
			$("input[name=allCheck]").click(function(){
				var status = this.checked;
				$(":checkbox").attr("checked", status);
			});
			//点击删除的操作，对该数据进行删除
			function delone(aobjet){
				$(aobject).parent().parent().remove();
			}
		});
	</script>
	
	
  </head>
  
  <body>
    <table border="1" width="600px">
    	<tr>
    		<th>选择</th>
    		<th>编号</th>
    		<th>用户名</th>
    		<th>密码</th>
    		<th>年龄</th>
    		<th>住址</th>
    		<th>操作</th>
    	</tr>
    	<tr>
    		<td><input type="checkbox" name="allCheck"/></td>
    		<td colspan="6"><a href="javascript:void(0)" id="delAllID">全部删除</a></td>
    	</tr>
    </table>
    
    <hr/>
    <form>
    <table border="1" width="300px">
    	<tr>
    		<td>编号</td>
    		<td><input type="text" name="id"/></td>
    	</tr>
    	<tr>
    		<td>用户名</td>
    		<td><input type="text" name="userName"/></td>
    	</tr>
    	<tr>
    		<td>密码</td>
    		<td><input type="password" name="userPass"/></td>
    	</tr>
    	<tr>
    		<td>年龄</td>
    		<td><input type="text" name="age"/></td>
    	</tr>
    	<tr>
    		<td>住址</td>
    		<td><input type="text" name="address"/></td>
    	</tr>
    	<tr>
    		<td colspan="2" align="center">
    		<input type="button" value="添加" id="addBtn"/>
    		<input type="reset" value="重置"/>
    		</td>
    	</tr>
    </table>
    </form>
  </body>
</html>

通过学习jQuery和ajax这三天来我又掌握多了一项技能，在web开发中，前端的大多数都是采用jQuery和ajax来制作，所以学习这些有必要