jQuery

已于 2024-07-04 15:00:48 修改
阅读量639 收藏 30
点赞数 8
分类专栏： 从零开始的Java学习 文章标签： java-ee
于 2024-06-24 19:48:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67496588/article/details/139936579
版权

Day44

jQuery

简介

集JavaScript、CSS、DOM、Ajax于一体的框架体系，目的是以更少的代码实现更多功能。

基本功能

1.访问和操作DOM元素

2.控制页面样式

3.对页面事件的处理

4.与Ajax技术的完美结合

5.大量插件在页面中的运用

页面加载事件

$(document).ready(function(){})

对比：JS的页面加载事件：window.οnlοad=funciton(){}

jQuery的页面加载事件：不会覆盖，HTML元素加载完毕时调用，而JS会覆盖，且会等全部资源加载完毕才会调用。

简化版：$(function()={})

jQuery选择器

css选择器选择页面上的某些元素，然后给这些元素设计样式，jQuery提供了更多的选择器，也是选择页面上的元素，但是除了设置样式外，可以对这个元素的所有内容进行设置。

面试题:

css的选择器与jQuery选择器的区别？

答：css选择器是选择页面上的HTML元素并设置样式，而jQuery选择器选择页面上的HTML元素，并设置样式、内容、属性，还可以设置各种事件。

通配符选择器：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("*").css("color","red");
			})
		</script>
		
	</head>
	<body>
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>aaa</p>
		<p>bbb</p>
		
		<span>ccc</span>
		<span>ddd</span>
	</body>
</html>
基本选择器：
$(function(){
				//标签选择器
				$("p").css("color","red");
			})
		

$(function(){
				//类选择器
				

			$(".myClass").css("color","red");
			})

$(function(){
				//id选择器
				$("#myID").css("color","red");
			})
群组选择器：
$(function(){
				//群组选择器
				$("h2,h4,h5,p,span").css("color","red");
			})
上下文关系选择器：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//后代选择器
				$("ul a").css("color","red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>


$(function(){
				//子代选择器
				$("li>a").css("color","red");
			})

$(function(){
				//相邻兄弟选择器
				$("a+a").css("color","red");
			})

$(function(){
				//后续选择器
				$("ul~a").css("color","red");
			})
过滤选择器：
简单过滤选择器：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/*
				 * 选择第一个元素
				 * 	$("li:first").css("color","red");
				 * 
				 * 选择最后一个元素
				 * 	$("li:last").css("color","red");
				 * 
				 * 选择不是第几个元素
				 * 	$("li:not(:first)").css("color","red");
				 * 
				 * 选择下标为偶数的元素
				 * 	$("li:even").css("color","red");
				 * 
				 * 选择下标为奇数的元素
				 * 	$("li:odd").css("color","red");
				 * 
				 * 选择指定下标的元素
				 * 	$("li:eq(1)").css("color","red");
				 * 
				 * 选择大于下标的元素
				 * 	$("li:gt(1)").css("color","red");
				 * 
				 * 选择小于下标的元素
				 * 	$("li:lt(1)").css("color","red");
				 */
				
				
			})
		</script>
	</head>
	<body>
		
		<ul>
		    <li>list item 1</li>
		    <li>list item 2</li>
		    <li>list item 3</li>
		    <li>list item 4</li>
		    <li>list item 5</li>
		</ul>
		
	</body>
</html>
内容过滤选择器：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				/*
				 * 选择内容包含'John'的元素
				 * 	$("div:contains('John')").css("color","red");
				 * 
				 * 选择空内容的元素
				 * 	$("div:empty").text("aaa");
				 * 
				 * 选择包含指定内容的元素
				 * 	$("div:has(p)").text("bbb");
				 * 
				 * 选择有内容的元素
				 * 	$("p:parent").text("ccc");
				 */
				
			})
		</script>
	</head>
	<body>
		
		<div>John Resig</div>
		<div>George Martin</div>
		<div>Malcom John Sinclair</div>
		<div>J. Ohn</div>
		<div><p>玛卡巴卡</p></div>
		<div><p></p></div>
		<div></div>
	</body>
</html>
可见性过滤选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				
				  //选择隐藏的元素 
				  	$("tr:hidden").css("display","block");
				  
				 // 选择显示的元素 
				 	$("tr:visible").text("Value3");
				 	$("tr:visible").css("display","none")
				 
				
				
				
			})
		</script>
	</head>
	<body>
		
		<table>
		  <tr style="display:none">
		  	<td>Value 1</td>
		  </tr>
		  <tr>
		  	<td>Value 2</td>
		  </tr>
		</table>
		
	</body>
</html>
属性过滤选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				
				//选择有指定属性的元素
				  	$("input[name]").attr("checked",true);
				  
				//选择有指定属性+值的元素
				  	$("input[name='newsletter']").attr("checked", true);
				  
				//选择除了属性+值的元素
				  	$("input[name!='newsletter']").attr("checked", true);
				  
				//选择属性值以某个开头的元素
				  	$("input[name^='news']").attr("checked", true);
				  
				//选择属性值以某个结尾的元素
				  	$("input[name$='ter']").attr("checked", true);
				  
				//选择属性值包含某个字符串的元素
				  	$("input[name*='e']").attr("checked", true);
				  
				//选择指定多个属性的元素
				  	$("input[id][name='newsletter']").attr("checked", true);
				 
				
				
			})
		</script>
	</head>
	<body>
		
		<input type="checkbox" name="newsletter" value="Hot Fuzz" id="box01"/>
		<input type="checkbox" name="newsletter" value="Cold Fusion" />
		<input type="checkbox" name="accept" value="Evil Plans" />
		
	</body>
</html>
子元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				
				 // 选择第几个元素（从1开始）
				  	$("ul li:nth-child(2)").css("color","red");
				  
				 // 选择第一个子元素的元素
				  	$("ul li:first-child").css("color","red");
				  
				 // 选择最后一个子元素的元素
				  	$("ul li:last-child").css("color","red");
				  
				 // 选择仅有一个子元素的元素
				  	$("ul li:only-child").css("color","red");
				 
				
				
			})
		</script>
	</head>
	<body>
		
		<ul>
		  <li>John</li>
		  <li>Karl</li>
		  <li>Brandon</li>
		</ul>
		
		<ul>
		  <li>Glen</li>
		  <li>Tane</li>
		  <li>Ralph</li>
		</ul>
		
		<ul>
		  <li>玛卡巴卡</li>
		</ul>
		
	</body>
</html>
表单选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				/*
				 * :input获取表单里所有的表单组件（输入框、密码框、单选框、多选框、文本域、下拉列表、文件组件、提交按钮、重置按钮、普通按钮...）
				 * 		$(":input").css("display","none");
				 */
				
				$(":text").css("display","none");
				$(":password").css("display","none");
				$(":checkbox").css("display","none");
				$(":button").css("display","none");
				$(":image").css("display","none");
				$(":radio").css("display","none");
				$(":file").css("display","none");
				$(":submit").css("display","none");
				$(":reset").css("display","none");
				
			})
		</script>
	</head>
	<body>
		
		<form>
		    <input type="button" value="Input Button"/>
		    <input type="checkbox" />
		
		    <input type="file" />
		    <input type="hidden" />
		    <input type="image" />
		
		    <input type="password" />
		    <input type="radio" />
		    <input type="reset" />
		
		    <input type="submit" />
		    <input type="text" />
		    
		    <select><option>Option</option></select>
		    <textarea>文本域</textarea>
		    <button>Button</button>

		</form>
		
		
	</body>
</html>
表单对象属性过滤选择器
$(function(){
				
				
				  //获取不可用的元素
				  	$("input:disabled").attr("value","aaaaa");
				  
				  //获取可用的元素
				  	$("input:enabled").attr("value","bbbbb");
					$("input[type='button']").click(function(){
					
               //获取选中状态的单选框
               var v = $(":radio:checked").attr("value");
               alert(v);
				})
				  //获取选中状态的下拉列表
					var v = $("select option:selected").attr("value");
					alert(v);
				})
				 
			})
扩展：

监听器：$(“#head”).click(function() {})

设置CSS样式：$(“#content”).css(“display”, “none”);

获取到CSS 内key 的value: $(“#content”).css(“display”)

设置属性：$(“#head span img”).attr(“src”, “…/img/open.gif”);

获取到属性值：$(“#head span img”).attr(“src”);

设置内容：$(this).html(“更多”); $(this).text(“更多”);

获取内容：$(this).html(); $(this).text();

选择器综合案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择</title>
		<style type="text/css">
			body{font-size:13px}
      	#all{border:solid 1px #666;width:320px;overflow:hidden}
      	#all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}
      	#all #head h3{padding:0px;margin:0px;float:left}
      	#all #head span{float:right;margin-top:3px}
      	#all #content{padding:8px}
      	#all #content ul {list-style-type:none;margin:0px;padding:0px}
      	#all #content ul li{ float:left;width:95px;height:23px;line-height:23px}
      	#all #btn{float:right;padding-top:5px;padding-bottom:5px}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function(){
				
				$("img").click(function(){
					if($(this).attr("src") == "../img/up.bmp"){
						
						$(this).attr("src","../img/down.bmp");
						$("#content").css("display","none");
						
					}else if($(this).attr("src") == "../img/down.bmp"){
						
						$(this).attr("src","../img/up.bmp");
						$("#content").css("display","block");
					}
				})
				
				$("#btn>a").click(function(){
					if($(this).text() == "简化"){
						
						$(this).text("更多");
						$("ul>li:gt(5):not(:last)").css("display","none");
						
					}else if($(this).text() == "更多"){
						
						$(this).text("简化");
						$("ul>li:gt(5):not(:last)").css("display","block");
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="all">
			<div id="head">
				<h3>学科分类</h3>
				<span><img src="../img/up.bmp"/></span>
			</div>
			<div id="content">
				<ul>
					<li>
						<a href="#">JavaEE</a><i> (1110) </i></li>
					<li>
						<a href="#">PHP</a><i> (230) </i></li>
					<li>
						<a href="#">BIG</a><i> (1430) </i></li>
					<li>
						<a href="#">Android</a><i> (1560) </i></li>
					<li>
						<a href="#">IOS</a><i> (870) </i></li>
					<li>
						<a href="#">H5</a><i> (1460) </i></li>
					<li>
						<a href="#">VR</a><i> (1450) </i></li>
					<li>
						<a href="#">小程序</a><i> (1780) </i></li>
					<li>
						<a href="#">演讲</a><i> (930) </i></li>
					<li>
						<a href="#">PPT</a><i> (3450) </i></li>
					<li>
						<a href="#">Word</a><i> (980) </i></li>
					<li>
						<a href="#">其他</a><i> (3230) </i></li>
				</ul>
				<div id="btn">
					<a href="#">简化</a>
				</div>
			</div>
		</div>
	</body>
</html>

jQuery对象与JS对象互换

JS->jQuery

设置监听器，点击后切换内容。

				//JS对象
				var jsObj = document.getElementsByTagName("p")[0];
				
				//jQuery对象
				$(jsObj).click(function(){
					$(this).text("xxx");
				})
jQuery->JS

获取到对象数组。

//jQuery对象 转 JS数组（jQuery获取到的都是数组）
				var jsArr = $("#p1");
				
				var jsObj = jsArr[0];
				jsObj.onclick = function(){
					this.innerText = "xxx";
				}

jQuery操作DOM

操作内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//操作内容
				$("#btn01").click(function(){
					console.log($("p").text());
				});
				
				$("#btn03").click(function(){
					$("p").text("<h1>合口合口合口</h1>");
				});
				$("#btn02").click(function(){
					console.log($("p").html());
				});
				$("#btn04").click(function(){
					$("p").html("<h1>合口合口合口</h1>");
				});
			})
		</script>
	</head>
	<body>
		<button id="btn01">获取内容-text</button>
		<button id="btn02">获取内容-html</button>
		<button id="btn03">设置内容-text</button>
		<button id="btn04">设置内容-html</button>
		<p>口合口合口合</p>
	</body>
</html>
操作属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#username").blur(function(){
					if($(this).attr("value").trim()==""){
						$("#username+span").text("账号不能为空");
						$("#username+span").css("color","red");
					}else{
						$("#username+span").text("");
					}
				});
				$("#password").blur(function(){
					if($(this).val().trim()==""){
						$("#password+span").text("密码不能为空");
						$("#password+span").css("color","red");
					}else{
						$("#password+span").text("");
					}
				});
				$("#repassword").blur(function(){
					if($(this).val().trim()==""){
						$("#repassword+span").text("密码不能为空");
						$("#repassword+span").css("color","red");
					}else if($(this).val().trim()!=$("#password").val().trim()){
						$("#repassword+span").text("和密码不一致");
					}else{
						$("#repassword+span").text("");
					}
				});
			})
		</script>
		</script>
	</head>
	<body>
		<form>
			账号：<input type="text" id="username" name="username" /><span></span><br />
			密码：<input type="password" id="password" name="password" /><span></span><br />
			确认密码：<input type="password" id="repassword" name="repassword" /><span></span><br />
			提交：<input type="submit" value="提交" /><br />
		</form>
	</body>
</html>
操作样式

需求：点击图片，使图片自动变大，再次点击变小

方法一：

通过css设置类样式，利用jQuery判断是否有class属性，没有添加，有去除。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.big{
				width: 100px;
				height: 100px;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("img").click(function(){
					if($("img[class='big']").length==0){
						
						$(this).addClass("big");
					}else{
						
						$(this).removeClass("big");
					}
				})
			})
		</script>
	</head>
	<body>
		<img src="../img/森林.jpg" width="50px" height="50px" />
	</body>
</html>

方法二：

同理，但是使用hasClass（）方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.big{
				width: 100px;
				height: 100px;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("img").click(function(){
					if(!$("img").hasClass("big")){
						
						$(this).addClass("big");
					}else{
						
						$(this).removeClass("big");
					}
				})
			})
		</script>
	</head>
	<body>
		<img src="../img/森林.jpg" width="50px" height="50px" />
	</body>
</html>

方法三：
使用toggleClass（）方法，判断是否有class属性，没有就添加，有则移除。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.big{
				width: 100px;
				height: 100px;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("img").click(function(){
					//判断元素是否有big的class属性，如果没有就添加，如果有就删除
					$(this).toggleClass("big");
				})
			})
		</script>
	</head>
	<body>
		<img src="../img/森林.jpg" width="50px" height="50px" />
	</body>
</html>

操作节点

添加元素

append(), appendTo(), prepend(), prependTo(), after(), insertAfter(), before(), insertBefore()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn01").click(function(){
					
					var newImg = $("<img src='../img/湖泊黄昏.jpg' width='50px' height='50px' />");
//					//添加到头部
//					$("#manager").prepend($(newImg));
					$(newImg).prependTo($("#manager"));
//					//添加到尾部
//					$("#manager").append($(newImg));
					$(newImg).appendTo($("#manager"));
//					//添加到div的前面（并列关系）
//					$("#manager").before($(newImg));
					$(newImg).insertBefore($("#manager"));
					//添加到div的后面（并列关系）
//					$("#manager").after($(newImg));
					$(newImg).insertAfter($("#manager"));
					
				})
			})
		</script>
	</head>
	<body>
		<button type="button" id="btn01">添加节点</button>
		<button type="button" id="btn02">删除节点</button>
		<div id="manager">
			<img src="../img/森林.jpg"/>
		</div>
		
	</body>
</html>
遍历元素

each()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("img").each(function(index){
					console.log(index);
					$(this).click(function(){
						$(this).attr("src","../img/蛋糕.jpg")
					})
				})
			})
		</script>
	</head>
	<body>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		<img src="../img/森林.jpg"/>
		
	</body>
</html>
节点案例

全选影响单个选项：全选点击事件->遍历选中/取消单个选项

单选影响全选：遍历单个选项，设置点击事件->判断选中数组长度是否和选项数组长度相同，相同选中全选，没选中取消选项。

删除：删除按钮设置点击事件->遍历选中的选项，删除整行；并将全选取消选中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//全选影响其他单选
				$("#chkAll").click(function(){
					if($(this).attr("checked")){
						$("td>input[type='checkbox']").attr("checked","checked");
					}else{
						$("td>input[type='checkbox']").removeAttr("checked");
					}
				})
				//单选影响全选
				$("td>input[type='checkbox']").each(function(){
					$(this).click(function(){
						if($("td>input[type='checkbox']").length==$("td>input[type='checkbox']:checked").length){
							$("#chkAll").attr("checked","checked");
						}else{
							$("#chkAll").removeAttr("checked");
						}
					})
				})
				//删除
				$("#btnDel").click(function(){
					$("td>input[type=checkbox]:checked").each(function(){
						var value = $(this).val();
						$("tr[id='"+value+"']").remove();
					})
					//删除之后取消全选
					$("#chkAll").removeAttr("checked");
				})
				
				
			})
		</script>
	</head>
	<body>
		<table border="1">
	        <tr>
	           <th>选项</th>
	           <th>编号</th>
	           <th>姓名</th>
	           <th>性别</th>
	        </tr>
	        <tr id="1">
	           <td><input type="checkbox" value="1"/></td>
	           <td>1001</td>
	           <td>小明</td>
	           <td>男</td>
	        </tr>
	        <tr id="2">
	           <td><input type="checkbox" value="2"/></td>
	           <td>1002</td>
	           <td>明明</td>
	           <td>女</td>
	        </tr>
	        <tr id="3">
	           <td><input type="checkbox" value="3"/></td>
	           <td>1003</td>
	           <td>小红</td>
	           <td>女</td>
	        </tr>
	        <tr>
	           <td colspan="4">
	           	<span><input id="chkAll" type="checkbox" />全选</span>
            	<span><input id="btnDel" type="button" value="删除"/></span>
	           </td>
	        </tr>
		</table>
	</body>
</html>

jQuery事件

JS中有的事件jQuery中都有，但jQuery还有其他的事件

冒泡事件

将事件对象向上（父级元素）传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/*
				 * 冒泡事件：将事件对象向上(父级元素)传递
				 */
				
				$("#manager").click(function(){
					alert("div被点击了");
				})
				
				$("#btn").click(function(event){
					alert("按钮被点击了");
					
					//阻止冒泡现象 -- 方式一
					//event.stopPropagation();
					
					//阻止冒泡现象 -- 方式二
					return false;
				})
				
			})
		</script>
	</head>
	<body>
		
		<div id="manager">
			<button id="btn">普通按钮</button>
		</div>
		
	</body>
</html>
绑定及解绑事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
//				$("img").click(function(){
//					console.log("图片被点击了");
//				})
//				$("img").mouseout(function(){
//					console.log("鼠标移出了图片");
//				})

				//绑定事件：多个事件功能不一致
//				$("img").bind({
//					"click":function(){
//						console.log("图片被点击了");
//					},
//					"mouseout":function(){
//						console.log("鼠标移出了图片");
//					}
//				})
				
				//绑定事件：多个事件功能一致
				$("img").bind("click mouseout",function(){
					console.log("用良心做教育");
				})
				
				$("#btn").click(function(){
					//解绑所有事件
					//$("img").unbind();
					
					//解绑指定事件
					$("img").unbind("mouseout");
				})
			})
		</script>
	</head>
	<body>
		
		<button id="btn">解绑事件</button>
		<img src="../img/..jpg" width="100px" height="100px" />
		
	</body>
</html>
切换事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("img").hover(
					//设置鼠标移入移出的切换事件
					function(){
						console.log("aaa");
					},function(){
						console.log("bbb");
					}
				)
			})
		</script>
		
	</head>
	<body>
		<img src="../img/石像.jpg"width="100px" height="100px" />
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("img").toggle(
					//设置鼠标移入移出的切换事件
					function(){
						console.log("aaa");
					},function(){
						console.log("bbb");
					}
				)
			})
		</script>
		
	</head>
	<body>
		<img src="../img/石像.jpg"width="100px" height="100px" />
	</body>
</html>
事件案例-表单提交
     //提交事件
     $("#registerForm").submit(function(){

         bool = true;

         //触发指定事件
         $("#username").trigger("blur");
         $("#password").trigger("blur");
         $("#repassword").trigger("blur");

         return bool;
     })
事件案例-选项卡
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#tab li {
				text-align: center;
				float: left;
				padding: 5px;
				margin-right: 2px;
				width: 50px;
				cursor: pointer
			}
			
			#tab li.tabFocus {
				width: 50px;
				font-weight: bold;
				background-color: powderblue;
				border: solid 1px #666;
				border-bottom: 0;
				z-index: 100;
				position: relative
			}
			
			#content {
				width: 260px;
				height: 80px;
				padding: 10px;
				background-color: powderblue;
				clear: left;
				border: solid 1px #666;
				position: relative;
				top: -1px
			}
			
			#content li {
				display: none
			}
			
			#content li.contentFocus {
				display: block
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function() {

				$("#tab>li").each(function(index){
					$(this).click(function(){
						
						$("#tab>li[class='tabFocus']").removeClass("tabFocus");
						$(this).addClass("tabFocus");
						
						$("#content>li[class='contentFocus']").removeClass("contentFocus");
						$("#content>li:eq("+index+")").addClass("contentFocus");
					})
				})

			})
		</script>
	</head>

	<body>
		<ul id="tab">
			<li class="tabFocus">javaee</li>
			<li>php</li>
			<li>.NET</li>
		</ul>
		<ul id="content">
			<li class="contentFocus">企业级应用占据领导地位</li>
			<li>中小型网站首选</li>
			<li>微软出品</li>
		</ul>
	</body>

</html>
求学小火龙
关注
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4614
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
JQuery的引用
zwjl1017的博客
04-01 4004
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3371
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4188
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3660
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5015
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5146
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5283
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3113
jQuery的两种引入方式
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
4. 小迪安全v2023笔记 javaEE应用
google20的博客
07-07 733
eclipse,tomcat,servlet,JDBC,Filter,Listener,Java反射，Java反序列化初识，Dnslog，maven，log4j，JNDI，fastjson
【Java EE】验证码案例
这个人很勤快，但还是什么也没有。
07-03 472
即便有多个页面（多进程）访问，也可以根据SessionID获取到不同的验证码和用户输入的验证码。很长的变量名可以声明为常量类中的成员变量，也可以写入配置文件，然后根据model进行获取。从HuTool官方文档中找到验证码的案例，然后进行演示，结合注释推断出自己需要的代码。需要交互的时候需要使用HTTP的session进行通信。
2024年公关服务行业分析报告.pptx
07-09
行业报告
惠州市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值