初识jQuery

最新推荐文章于 2024-02-29 14:41:15 发布
最新推荐文章于 2024-02-29 14:41:15 发布
阅读量99 收藏
点赞数 1
分类专栏： JavaWeb 后端学习 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73574147/article/details/128767617
版权

文章目录

jQuery

介绍

jQuery就是JavaScript和查询(Query)，是辅助JavaScript开发的js类库。它的核心思想是write less,do more(写得更少，做的更多)，所以它实现了很多浏览器的兼容问题。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

Hello程序示例：

<!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>Hello程序示例</title>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>//导入jQuery包
	<script type="text/javascript">
		$(function(){//表示页面加载完成之后，相当于window.οnlοad=function(){}
			var $obj = $("#btnId");//表示按id查询标签对象
			$obj.click(function(){//绑定单击事件
				alert("jQuery的单击事件");
			})
		});
	</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

$为一个函数
为按钮添加点击响应函数方式：1.使用jQuery查询到标签对象 2.使用标签对象.dick(function( ){ });

核心函数($)的四个作用：

  1. 传入参数为[函数]时：在文档加载完成后执行这个函数
  2. 传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
  3. 传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
  4. 传入参数为[DOM对象]时：将DOM对象包装为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>核心函数四个作用</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function(){
        alert("页面加载完成...")
        //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
        $("<div>" +
            "    <span>字符串1</span>" +
            "    <span>字符串2</span>" +
            "</div>").appendTo("body");

    });
    //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
    var obj = document.getElementById("button");
    //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
    alert($(obj));//[objet Object]
</script>
</head>
<body>
    <button id="button">按钮1</button>
    <button >按钮2</button>
</body>
</html>

本质

jQuery对象是dom对象的数组+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>jQuery对象的本质</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";
		var array = [123,"abc","小明","李华"];
		var $button = $("button");
		for(var i=0;i<$button.length;i++){
			alert($button[i]);
		}
	});

</script>
</head>
<body>

	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>

</body>
</html>

Dom对象与jQuery对象，两者方法互不通用，不能互用

Dom对象和jQuery对象互转

dom对象转化为jQuery对象(重点)

  1. 先有dom对象
  2. $(DOM对象)就可以转化成为jQuery对象

jQuery对象转化为dom对象(重点)

  1. 先有jQuery对象
  2. jQuery对象通过下标取出相应的DOM对象

基本选择器

代码实现

<!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>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
				$(function(){
					//1.选择 id 为 one 的元素 "background-color","#bbffaa"
						$("#btn1").click(function(){
							//css()方法可以设置和获取样式
							$("#one").css("background-color","#bbffaa")
						});
					//2.选择 class 为 mini 的所有元素
						$("#btn2").click(function(){
							$(".mini").css("background-color","#bbffaa")
						});
					//3.选择 元素名是 div 的所有元素
						$("#btn3").click(function(){
							$("div").css("background-color","#bbffaa");
						});
					//4.选择所有的元素
						$("#btn4").click(function(){
							$("*").css("background-color","#bbffaa");
						});
					//5.选择所有的 span 元素和id为two的元素
						$("#btn5").click(function(){
							$("span,#two").css("background-color","#bbffaa");
						});
				});
		</script>
	</head>
	<body>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="test">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>

层级选择器

常用的选择器有四种：

  1. ancestor(任何有效选择器) descendant(用以匹配元素的选择器，并且它是第一个选择器的后代元素):在给定的祖先元素下匹配所有的后代元素
  2. parent(任何有效的选择器)>child(用以匹配元素的选择器，并且它是第一个选择器的后代元素):在给定的父元素下匹配所有的子元素
  3. prev(任何有效的选择器) + next(一个有效选择器并且紧接着第一个选择器):匹配所有紧接在prev元素后的next元素
  4. prev(任何有效选择器)~siblings(一个选择器，并且它作为第一个选择器的同辈):匹配prev元素之后的所有sinlings

代码演示

<!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>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){//是$(function( ){ })的全写
				//1.选择 body 内的所有 div 元素 
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body>div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>

基本过滤选择器

常用的有十种，分别如下：

  1. :first：获取第一个元素
  2. :last：获取最后一个元素
  3. :not(selector(用于筛选的选择器))：去除所有与给定选择器匹配的元素
  4. :even：匹配所有索引值为偶数的元素，从0开始计数
  5. :odd：匹配所有索引值为奇数的元素，从0开始计数
  6. :eq(index(从0开始计数)):匹配一个给定索引值的元素
  7. :gt(index(从0开始))：匹配所有大于给定索引值的元素
  8. :lt(index)：匹配所有小于给定索引值的元素
  9. :header：匹配标题给其上颜色
  10. :animated：匹配所有正在执行动画效果的元素

代码演示

<!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>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one) ").css("background", "#bbffaa");
				});

				//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});

				//11.选择没有执行动画的最后一个div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background","#bbffaa");
				})
			});
		</script>
	</head>
	<body>		
<!-- 	<div>
	:first 			
	:last 			
	:not(selector) 	
	:even 			
	:odd 			
	:eq(index)		 
	:gt(index) 		
	:lt(index) 		
	:header 		
	:animated 		
	</div> -->
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择最后一个 div 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
		<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />		
		<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
		
		<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

内容过滤器

常用的共有三种，分别是：

  1. :contains(text(一个用于查找的字符串))：匹配包含给定文本的元素
  2. :parent：匹配包含子元素或者文本的元素(查找非空元素)
  3. :has(selector(一个用于筛选的选择器))：匹配含有选择器所匹配的元素的元素

代码实现

<!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>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
	
				anmateIt();				
			});
			
			/** 
			:contains(text)   
			:empty 			  
			:has(selector) 	
			:parent 			
			*/
			$(document).ready(function(){
				//1.选择 含有文本 'di' 的 div 元素
				$("#btn1").click(function(){
					$("div:contains('di')").css("background", "#bbffaa");
				});

				//2.选择不包含子元素(或者文本元素) 的 div 空元素
				$("#btn2").click(function(){
					$("div:empty").css("background", "#bbffaa");
				});

				//3.选择含有 class 为 mini 元素的 div 元素
				$("#btn3").click(function(){
					$("div:has(.mini)").css("background", "#bbffaa");
				});

				//4.选择含有子元素(或者文本元素)的div元素
				$("#btn4").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
		<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
		<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
		<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
		<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

属性过滤选择器

常用的共有七种，分别是：

  1. [attribute(属性名)]：匹配包含给定属性的元素。
  2. [attribute(属性名)=value(属性值)]：匹配给定的属性某个特定值的元素
  3. [attribute(属性名)!=value(属性值)]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
  4. [attribute(属性名)^=value(属性值)]：匹配给定的属性是以某些值开始的元素
  5. [attribute$=value]：匹配给定的属性是以某些值结尾的元素
  6. [attribute*=value]：匹配给定的属性是以包含某些值的元素
  7. [][][][][][][selector1] [selector2] [selector3]：复合选择器，需要同时满足多个条件时使用。

代码演示

<!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>
<style type="text/css">
div,span,p {
	width: 140px;
	height: 140px;
	margin: 5px;
	background: #aaa;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Verdana;
}

div.mini {
	width: 55px;
	height: 55px;
	background-color: #aaa;
	font-size: 12px;
}

div.hide {
	display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	/**
[attribute] 			
[attribute=value] 		
[attribute!=value] 		 
[attribute^=value] 		
[attribute$=value] 		
[attribute*=value] 		
[attrSel1][attrSel2][attrSelN]  
	*/
	$(function() {
		//1.选取含有 属性title 的div元素
		$("#btn1").click(function() {
			$("div[title]").css("background", "#bbffaa");
		});
		//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title='test']").css("background", "#bbffaa");
		});
		//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("#btn3").click(function() {
			$("div[title!='test']").css("background", "#bbffaa");
		});
		//4.选取 属性title值 以'te'开始 的div元素
		$("#btn4").click(function() {
			$("div[title^='te']").css("background", "#bbffaa");
		});
		//5.选取 属性title值 以'est'结束 的div元素
		$("#btn5").click(function() {
			$("div[title$='est']").css("background", "#bbffaa");
		});
		//6.选取 属性title值 含有'es'的div元素
		$("#btn6").click(function() {
			$("div[title*='es']").css("background", "#bbffaa");
		});
		
		//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*='es']").css("background", "#bbffaa");
		});
		//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("#btn8").click(function() {
			$("div[title][title!='test']").css("background", "#bbffaa");
		});
	});
</script>
</head>
<body>
	<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
	<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
	<input type="button"
		value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
	<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
	<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
	<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
	<input type="button"
		value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
		id="btn7" />
	<input type="button"
		value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />

	<br>
	<br>
	<div class="one" id="one">
		id 为 one,class 为 one 的div
		<div class="mini">class为mini</div>
	</div>
	<div class="one" id="two" title="test">
		id为two,class为one,title为test的div
		<div class="mini" title="other">class为mini,title为other</div>
		<div class="mini" title="test">class为mini,title为test</div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini"></div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini" title="tesst">class为mini,title为tesst</div>
	</div>
	<div style="display: none;" class="none">style的display为"none"的div</div>
	<div class="hide">class为"hide"的div</div>
	<div>
		包含input的type为"hidden"的div<input type="hidden" value="123456789"
			size="8">
	</div>
	<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

表单过滤器

常用的共有十种，分别是：

  1. :input：匹配所有input、textarea、select和button元素(范围太大，很少用)
  2. :text：匹配所有的单行文本框
  3. :password：匹配所有的密码文本框
  4. :radio：匹配所有单选按钮
  5. :checkbox：匹配所有复选框
  6. :submit：匹配所有提交按钮
  7. :reset：匹配所有重置按钮
  8. :button：匹配所有按钮
  9. :file：匹配所有文件域
  10. :hidden：匹配所有不可见元素，或者type为hidden的元素

代码演示

<!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>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				
				
		/**
		:input 		
		:text 		
		:password 	
		:radio 		
		:checkbox 	
		:submit 	
		:image 		
		:reset 		
		:button 	
		:file 		
		:hidden 	
		
		表单对象的属性
		:enabled 		
		:disabled 		
		:checked 		
		:selected 		
		*/
					
					
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					//val()可以操作表单项的value属性值，可以设置和获取
					$(":text:enabled").val("New Value");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$(":text:disabled").val("New Value Too");
				});
				//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
				$("#btn3").click(function(){
					alert($(":checkbox:checked").size())
				});
				//4.获取多选框，每个选中的value值
				$("#btn4").click(function(){
					//each是jQuery对象提供用来遍历元素的方法，再遍历的function函数中，有个this对象，就是当前遍历到的dom对象
					var $checkboies = $(":checkbox:checked");
					$checkboies.each(function(){
						alert(this.value);
					});
				});
				//5.获取下拉框选中的内容  
				$("#btn5").click(function(){
					//注意这个选择器的特殊，因为select里面的option是真正的被选择项，
					//所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
					//必须按照基本选择器选择后代的方法选
					var $options = $("select option:selected");
					$options.each(function(){
						alert(this.value);
					});
				});
			})	
		</script>
	</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		 <button id="btn1">对表单内 可用input 赋值操作.</button>
  		 <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
		 <button id="btn3">获取多选框选中的个数.</button>
		 <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文本框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
			<br>
			
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			
			<br><br>
			下拉列表1: <br>
			<select name="test" multiple="multiple" style="height: 100px" id="sele1">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉列表2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>辽宁</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>
</html>

元素的筛选

代码演示

<!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>DOM查询</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
				
	/**
					
	过滤
	eq(index|-index) 	功能与first一样
	first() 					功能与：first一样
	last() 					功能与：last一样
	hasClass(class)
	filter(expr|obj|ele|fn) 	留下匹配的元素
	is(expr|obj|ele|fn)1.6* 	判断是否匹配给定的选择器，只要有一个匹配就返回true
	has(expr|ele) 				功能与：has一样
	not(expr|ele|fn) 			
	slice(start,[end]) 			
	
	查找
	children([expr]) 			
	closest(expr,[con]|obj|ele)1.6*   
	find(expr|obj|ele) 				
	next([expr]) 					
	nextall([expr]) 				
	nextUntil([exp|ele][,fil])1.6* 	返回当前元素到指定匹配的元素为止的前面元素
	parent([expr]) 					
	parents([expr]) 				
	parentsUntil([exp|ele][,fil])1.6*  
	prev([expr]) 					返回当前元素前面的上一个兄弟元素
	prevall([expr]) 				
	prevUntil([exp|ele][,fil])1.6* 	返回当前元素到指定匹配的元素为止的前面元素
	siblings([expr]) 			返回所有兄弟元素
	
	串联
	add(expr|ele|html|obj[,con]) 	把add匹配的选择器的元素添加到当前jquery对象中
							
	
	*/
				
				//(1)eq()  选择索引值为等于 3 的 div 元素
				$("#btn1").click(function(){
					$("div").eq(3).css("background-color","#bfa");
				});
				//(2)first()选择第一个 div 元素
				 $("#btn2").click(function(){
					 //first()   选取第一个元素
					$("div").first().css("background-color","#bfa");
				});
				//(3)last()选择最后一个 div 元素
				$("#btn3").click(function(){
					//last()  选取最后一个元素
					$("div").last().css("background-color","#bfa");
				});
				//(4)filter()在div中选择索引为偶数的
				$("#btn4").click(function(){
					//filter()  过滤   传入的是选择器字符串
					$("div").filter(":even").css("background-color","#bfa");
				});
				 //(5)is()判断#one是否为:empty或:parent
				//is用来检测jq对象是否符合指定的选择器
				$("#btn5").click(function(){
					alert($("#one").is(":empty"));
				});
				
				//(6)has()选择div中包含.mini的
				$("#btn6").click(function(){
					//has(selector)  选择器字符串    是否包含selector
					$("div").has(".mini").css("background-color","#bfa");
				});
				//(7)not()选择div中class不为one的
				$("#btn7").click(function(){
					//not(selector)  选择不是selector的元素
					$("div").not('.one').css("background-color","#bfa");
				});
				//(8)children()在body中选择所有class为one的div子元素
				$("#btn8").click(function(){
					//children()  选出所有的子元素
					$("body").children("div.one").css("background-color","#bfa");
				});
				
				
				//(9)find()在body中选择所有class为mini的div元素
				$("#btn9").click(function(){
					//find()  选出所有的后代元素
					$("body").find("div.mini").css("background-color","#bfa");
				});
				//(10)next() #one的下一个div
				$("#btn10").click(function(){
					//next()  选择下一个兄弟元素
					$("#one").next("div").css("background-color","#bfa");
				});
				//(11)nextAll() #one后面所有的span元素
				$("#btn11").click(function(){
					//nextAll()   选出后面所有的元素
					$("#one").nextAll("span").css("background-color","#bfa");
				});
				//(12)nextUntil() #one和span之间的元素
				$("#btn12").click(function(){
					//
					$("#one").nextUntil("span").css("background-color","#bfa")
				});
				//(13)parent() .mini的父元素
				$("#btn13").click(function(){
					$(".mini").parent().css("background-color","#bfa");
				});
				//(14)prev() #two的上一个div
				$("#btn14").click(function(){
					//prev()  
					$("#two").prev("div").css("background-color","#bfa")
				});
				//(15)prevAll() span前面所有的div
				$("#btn15").prev("").click(function(){
					//prevAll()   选出前面所有的元素
					$("span").preAll("div").css("background-color","#bfa")
				});
				//(16)prevUntil() span向前直到#one的元素
				$("#btn16").click(function(){
					//prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
					$("span").prevUntil("#one").css("background-color","#bfa")
				});
				//(17)siblings() #two的所有兄弟元素
				$("#btn17").click(function(){
					//siblings()    找到所有的兄弟元素，包括前面的和后面的
					$("#two").siblings().css("background-color","#bfa")
				});
				
				
				//(18)add()选择所有的 span 元素和id为two的元素
				$("#btn18").click(function(){
	
					//   $("span,#two,.mini,#one")
					$("span").add("#two").css("background-color","#bfa");
					
				});
				


			});
			
			
		</script>
	</head>
	<body>		
		<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
		<input type="button" value="first()选择第一个 div 元素" id="btn2" />
		<input type="button" value="last()选择最后一个 div 元素" id="btn3" />
		<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
		<input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
		<input type="button" value="has()选择div中包含.mini的" id="btn6" />
		<input type="button" value="not()选择div中class不为one的" id="btn7" />
		<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
		<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
		<input type="button" value="next()#one的下一个div" id="btn10" />
		<input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
		<input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
		<input type="button" value="parent().mini的父元素" id="btn13" />
		<input type="button" value="prev()#two的上一个div" id="btn14" />
		<input type="button" value="prevAll()span前面所有的div" id="btn15" />
		<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
		<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
		<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />

		
		<h3>基本选择器.</h3>
		<br /><br />
		文本框<input type="text" name="account" disabled="disabled" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other"><b>class为mini,title为other</b></div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<span id="span1">^^span元素 111^^</span>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span2">^^span元素 222^^</span>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

jQuery属性操作

html()可以设置和获取起始标签和结束标签中的内容–>跟dom属性innerHTML一样。
text()可以设置和获取起始标签和结束标签中的文本–>跟dom属性innerText一样。
val()可以设置和获取表单项的value属性值–>跟dom属性value()一样。
attr()、prop()可以设置和获取属性的值

代码演示

html()、text()、val()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <script type="text/javascript" src="../Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
      //批量操作单选
      $(":radio").val(["radio1"]);
      //批量操作筛选框选中状态
      $(":checkbox").val(["checkbox1","checkbox2"]);
      //批量操作多选下拉框选中状态
      $("#multiple").val(["mul1","mul2","mul3"]);
      //操作单选下拉框选中状态
      $("#single").val(["single4"]);
    });
    </script>
</head>
<body>
  单选：
  <input name="radio" type="radio" value="radio1"/>radio1
  <input name="radio" type="radio" value="radio2"/>radio2
  <input name="radio" type="radio" value="radio3"/>radio3<br/>
  多选：
  <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
  <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
  <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
  <input name="checkbox" type="checkbox" value="checkbox4"/>checkbox4
  <input name="checkbox" type="checkbox" value="checkbox5"/>checkbox5<br/>
  下拉多选：
  <select id="multiple" multiple="multiple" size="5">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
    <option value="mul5">mul5</option>
  </select>
  下拉单选：
  <select id="single">
    <option value="single1">single1</option>
    <option value="single2">single2</option>
    <option value="single3">single3</option>
    <option value="single4">single4</option>
    <option value="single5">single5</option>
  </select>
</body>
</html>

attr()、prop()。attr()不推荐操作checked、readOnly、selected、disabled等等，可以操作一些自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <script type="text/javascript" src="../Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
      //alert($(":checkbox").attr("checked"));//官方认为返回undefined是一个错误
      alert($(":checkbox").prop("checked"));//false
    });
    </script>
</head>
<body>
  单选：
  <input name="radio" type="radio" value="radio1"/>radio1
  <input name="radio" type="radio" value="radio2"/>radio2
  <input name="radio" type="radio" value="radio3"/>radio3<br/>
  多选：
  <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
  <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
  <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
  <input name="checkbox" type="checkbox" value="checkbox4"/>checkbox4
  <input name="checkbox" type="checkbox" value="checkbox5"/>checkbox5<br/>
  下拉多选：
  <select id="multiple" multiple="multiple" size="5">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
    <option value="mul5">mul5</option>
  </select>
  下拉单选：
  <select id="single">
    <option value="single1">single1</option>
    <option value="single2">single2</option>
    <option value="single3">single3</option>
    <option value="single4">single4</option>
    <option value="single5">single5</option>
  </select>
</body>
</html>

练习：全选、全不选、反选(用jQuery实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <script type="text/javascript" src="../Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
      //alert($(":checkbox").attr("checked"));//官方认为返回undefined是一个错误
      alert($(":checkbox").prop("checked"));//false
    });
    </script>
</head>
<body>
  单选：
  <input name="radio" type="radio" value="radio1"/>radio1
  <input name="radio" type="radio" value="radio2"/>radio2
  <input name="radio" type="radio" value="radio3"/>radio3<br/>
  多选：
  <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
  <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
  <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
  <input name="checkbox" type="checkbox" value="checkbox4"/>checkbox4
  <input name="checkbox" type="checkbox" value="checkbox5"/>checkbox5<br/>
  下拉多选：
  <select id="multiple" multiple="multiple" size="5">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
    <option value="mul5">mul5</option>
  </select>
  下拉单选：
  <select id="single">
    <option value="single1">single1</option>
    <option value="single2">single2</option>
    <option value="single3">single3</option>
    <option value="single4">single4</option>
    <option value="single5">single5</option>
  </select>
</body>
</html>

DOM的增删改查

插入方式方法主体使用样例使用说明
内部插入appendTo()a.appendTo(b)把a插入到b子元素末尾，成为最后一个子元素
内部插入prependTo()a.prependTo(b)把a插到b子元素前面，成为第一个元素
外部插入insertAfter()a.insertAfter(b)平级插入，得到ba
外部插入insertBefore()a.insertBefore(b)平级插入，得到ab
替换replaceWith()a.replaceWith(b)用b替换掉a
替换replaceAll()a.replaceAll(b)用a替换掉所有的b
删除remove()a.remove()删除a标签
删除empty()a.empty()清空a标签里的内容

代码演示

<!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:eq(0) option:selected").appendTo($("select:eq(1)"));
			});
		});
		$(function(){
			$("button:eq(1)").click(function(){//第二个按钮
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			});
		});
		$(function(){
			$("button:eq(2)").click(function(){//第三个按钮
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});
		});
		$(function(){
			$("button:eq(3)").click(function(){//第三个按钮
				$("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="right">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>

</body>
</html>

动态添加和删除行为

代码演示

<!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(){
		//创建一个用于删除的function函数
		var deleteFun = function() {
			var $pre = $(this).parent().parent();
			//confirm是javascript语言提供的一个确认提示框函数，传什么值就提示什么，当用户点击确定返回true，否则返回false
			if(confirm("确认删除"+$pre.find("td:first").text()+"此条信息？")){
				$pre.remove();
			}
			//return false可以阻止元素的默认行为。
			return false;
		};
		$("#addEmpButton").click(function(){
			//获取输入框，姓名，邮箱，工资的内容
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();
			//创建一个行标签对象，添加到显示数据的表格中
			var $obj = $("<tr>" +
					"<td>"+ name +"</td>" +
					"<td>"+email+"</td>" +
					"<td>"+salary+"</td>" +
					"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
					"</tr>")
			//添加到显示数据的表格中
			$obj.appendTo($("#employeeTable"));
			//给添加的行的a标签绑上事件
			$obj.find("a").click(deleteFun);
		});
		//给删除的a标签绑定单击事件
		$("a").click(deleteFun);
	});
</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()获取和设置元素坐标

代码演示

<!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.whiteborder{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blueBorder{
		border: 5px blue solid;
	}
	
</style>

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

	$(function(){
		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass(' redDiv blueBorder');
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass('redDiv blueBorder');
		});
	
		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			$divEle.toggleClass('redDiv blueBorder');
		});
		
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var position = $divEle.offset();
			console.log(position);//获取
			$divEle.offset({
				top:200,
				left:300
			})
		});
	})
</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>

jQuery动画

动画类型方法主体使用(作用)说明
基本动画show()将隐藏的元素显示
基本动画hide()将可见的元素隐藏
基本动画toggle()可见就隐藏，不可见就显示
淡入淡出动画fadeIn()淡入(慢慢可见)
淡入淡出动画fadeOut()淡出(慢慢消失)
淡入淡出动画fadeTo()在指定时长内慢慢的将透明度修改到指定的值
淡入淡出动画fadeToggle()淡入/淡出切换

动画方法都可以添加参数：

  1. 动画的执行时长，以毫秒为单位
  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 href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	
<script type="text/javascript">
	/* 	
		基本
		show([speed,[easing],[fn]]) 
		hide([speed,[easing],[fn]]) 
		toggle([speed],[easing],[fn]) 
		滑动
		slideDown([spe],[eas],[fn]) 
		slideUp([speed,[easing],[fn]]) 
		slideToggle([speed],[easing],[fn]) 
		淡入淡出
		fadeIn([speed],[eas],[fn]) 
		fadeOut([speed],[eas],[fn]) 
		fadeTo([[spe],opa,[eas],[fn]]) 
		fadeToggle([speed,[eas],[fn]])
		*/
		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(1000,function(){
					alert("show动画完成")
				});
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(1000,function(){
					alert("hide动画完成")
				});
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000,function(){
					alert("toggle动画完成")
				});
			});	
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(1000,function(){
					alert("fadeIn动画完成")
				});
			});
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(1000,function(){
					alert("fadeOut动画完成")
				});
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo(1000,0.5,function(){
					alert("fateTo动画完成")
				});
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle(1000,function(){
					alert("fadeToggle动画完成")
				});
			});	
		})
</script>
	
	</head>
	<body>
		<table style="float: left;">
			<tr>
				<td><button id="btn1">显示show()</button></td>
			</tr>
			<tr>
				<td><button id="btn2">隐藏hide()</button></td>
			</tr>
			<tr>
				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn4">淡入fadeIn()</button></td>
			</tr>
			<tr>
				<td><button id="btn5">淡出fadeOut()</button></td>
			</tr>
			<tr>
				<td><button id="btn6">淡化到fadeTo()</button></td>
			</tr>
			<tr>
				<td><button id="btn7">淡化切换fadeToggle()</button></td>
			</tr>
		</table>
		
		<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
			jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
		</div>
	</body>
</html>

练习：品牌展示

代码实现

<!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(4):not(:last)").hide();
		//给功能按钮绑定单击事件
		$("div div a").click(function(){
			$("li:gt(4):not(:last)").toggle();
			//判断品牌是否可见
			if($("li:gt(4):not(:last)").is(":hidden")){
				//品牌处于隐藏状态：应当显示全部品牌，角标向下
					$("div div a span").text("显示全部品牌");

					$("div div").removeClass();
					$("div div").addClass("showmore");
					//去掉高亮样式
					$("li:contains('')").removeClass();
			}else{
				//品牌处于可见状态：应当显示精选品牌，角标向上
				$("div div a span").text("显示精选品牌");
				$("div div").removeClass();
				$("div div").addClass("showless");
				//加高亮样式
				$("li:contains('索尼')").addClass("promoted");
				$("li:contains('卡西欧')").addClass("promoted");
			}
			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>

jQuery事件操作

//原生js页面加载
window.onload = function(){}

//jQuery页面加载
$(function(){});

原生js页面加载与jQuery页面加载的区别:

  1. ==触发顺序不同：==页面加载完成之后先执行jQuery页面加载，后执行原生js页面加载
  2. 触发时间不同：
    • 浏览器的内核解析完页面的标签创建好DOM对象之后就马上执行jQuery的页面加载
    • 浏览器内核解析完标签创建好DOM对象并且标签显示时需要的内容加载完成之后才会执行原生js的页面加载
  3. 执行次数不同：
    • 原生js的页面加载完成之后，只会执行最后一次的赋值函数。
    • jQuery的页面加载完成之后是全部把注册的function函数，依次按顺序全部执行。

jQuery中其他的事件处理方法

代码准备

<!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 href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
            //代码实现部分
        </script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
	<button>按钮</button>
	</body>

</html>

click() 绑定和触发单击事件

// 1.通常绑定事件的方式
$("h5").click(function(){//传入function是绑定事件
    alert("Please enter");
});
$("button").click(function(){//不传入为触发事件
    $("h5").click();
});

mouseover() 鼠标移入事件

$("h5").mouseover(function(){
    alert("鼠标移入事件");
});

mouseout() 鼠标移出事件

$("h5").mouseout(function(){
   alert("鼠标移出事件");
});

bind() 可以给元素一次性绑定一个或多个事件

$("h5").bind("mouseover mouseout",function() {
    alert("鼠标移入移出事件");
});

one() 使用方法与bind一样，但其绑定事件只会响应一次

$("h5").one(function(){
    alert("Please enter");
});

live() 可以用来绑定选择器匹配的所有元素的事件(即使该元素是后续动态创建出来的也有效)

$("h5").live(function(){
    alert("Please enter");
});

unbind() 解除事件的绑定，与bind方法相反

$("h5").one(function(){
    alert("Don't enter");
});

事件的冒泡

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

实际生活中，我们仅仅响应子事件即可满足需求，此时就需要阻止事件的冒泡，即在子元素事件函数体内，使用return false语句便可以阻止事件的冒泡传递。

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>
<style type="text/css">

	#areaDiv {
		border: 1px solid black;
		width: 300px;
		height: 50px;
		margin-bottom: 10px;
	}
	
	#showMsg {
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

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

	//1.原生javascript获取 事件对象
	window.onload = function(){
		document.getElementById("areaDiv").onclick = function(event){
			console.log(event);
		}
	}
	//2.JQuery代码获取 事件对象
	$(function(){
		$("#showMsg").click(function(event){
			console.log(event);
		});
	});
	//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
	$(function(){
		$("#showMsg").bind("mouseover mouseout",function(event){
			if(event.type == "mouseover"){
				alert("鼠标移入事件");
			}else{
				alert("鼠标移出事件");
			}
		});
	});

</script>
</head>
<body>

	<div id="areaDiv"></div>
	<div id="showMsg"></div>

</body>
</html>

练习：图片跟随

代码实现

<!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 == "mousemove"){
				$("#showBig").offset({
					left: event.pageX+5,
					top: event.pageY+5
				});
			}else{
				$("#showBig").hide();
            }
		});
	});
</script>
</head>
<body>

	<img id="small" src="img/small.jpg" /> <!--src中放入缩略图路径-->
	
	<div id="showBig">
		<img src="img/big.jpg"> <!--src中放入清晰图路径-->
	</div>

</body>
</html>
Onism_DreamBoat
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初步认识jQuery
jronzhang的博客
03-14 388
今天复习时，发现一个javaScript的库jquery，就是以前老师堂上讲，但没有留心的东西，想想现在真是追悔莫及，事后也没去查询相关资料，这么方便的工具包，真是相见恨晚的感觉，基本现在想认真再爱一回，以前碰到的验证和动态效果，数据交互，我今后就拜托jQuery啦！ 首先在jQuery官网下载一个工具包：https://jquery.com/download/；下个jQuery.min.js或
史上最全语音播报模块资料（型号JQ8400+JQ8900）+51，stm32和Arduino源码例程+配套上位机，没有之一！
03-17
这几天一直在做语音识别模块相关的项目，因此收集到了很多资料，但大多资源都比较零散，因此答主打包收集到的全部相关资料，并且内附所有相关例程，希望能帮助到大家！ 说明： 1.答主单片机型号是stm32f103c8t6，并且已经亲测，可参考答主文章进行相关内容的学习
JQ8900开发记录
最新发布
Chinalihuanyu的博客
02-29 893
仅用于开发记录，写的不详细，后续可能会补充。
【语音模块】串口调试方法
jiushiguang11的博客
12-11 1305
按照以上接线进行串口调试语音模块。
JQ8X00_Arduino.rar
04-18
JQ8X00伴随Arduino开发相关控制实例（串口控制四线，单线控制三线），还有语音合成转MP3，WAV格式
语音芯片JQ8400的使用心得
热门推荐
meaning2的博客
12-04 1万+
@[语音芯片JQ8400的使用心得] 语音芯片介绍 模块特征（简要介绍） 1、支持MP3 WAV硬件解码 2、支持FAT文件系统 3、两线串口模式、一线串口模式 4、支持普通音乐播放器具有的功能如上一曲、下一曲、播放、暂停、停止、选曲等常用功能 5、支持智能组合播放，特定的文件夹里的歌曲组合，发送曲目名即可 6、30级音量调节 7、官方带有配套上位机，可以生成实现所需功能的传输指令 更新语音内容说明 JQ8400 语音模块选用的是 SOC 方案，集成了一个 16 位的 MCU，以及一个专门针对音频解码的 A
初识JQuery 实例一(first)
10-28
标题"初识JQuery 实例一(first)"暗示这是一个关于入门级jQuery操作的示例，重点在于`first()`和`next()`方法的使用。 首先，jQuery库通过引入`<script>`标签加载，这里使用的版本是`...
初识JQuery-DOM操作（Demo实战详解）
01-08
我是辰兮，很高兴你能来阅读，本章初识jQuery，用案例详细的讲解了jQuery的DOM操作，每一个操作都有详细的案例以及截图，希望对你有帮助，分享获取新知，大家一起进步。 下一篇请参考：JQuery-DOM进阶 文章目录一、...
JQ8X00例程STM32F1_HAL库版本.zip
07-14
JQ8X00芯片实例HAL库版的，移植方便，代码注释很多，容易上手。实测好用，切换歌曲，循环播放，调节音量都可以
JQ8400+stm32.zip
03-20
1.JQ8400-FL语音模块，带3W功放，有4M的存储空间，可通过USB拷贝声音文件，通过单片机串口控制 2.听说可以一线串口通信，我没试过，也不知道行不行，我才用的是二线串口通信 3.使用的是stm32板子上串口2的GPIO，分别是PA2RX，PA3TX，代码是没问题的，已经运行过的 4.stm32f103vet6的板子是野火的，语音模块是在淘宝上买的
【JavaScript】4.初识 jQuery
01-08
本来这一篇要写JavaScript的事件处理的，但是内容好多啊，这一套那一套的，看得有点晕……查资料的时候发现好些东西大家都是用 jQuery 实现的，据说挺好上手的，那我就先看看 jQuery，之后和JS对照着学吧。...
RIA应用开发：1-初识Jquery.ppt
06-23
【jQuery 概述】 jQuery 是一个广泛应用于现代Web开发的JavaScript库，由John Resig于2006年创建。它的主要目标是简化JavaScript编程，让开发者能够“Write Less, Do More”。jQuery 提供了一种高效的方式来处理...
学习前端的第六天，对jQuery的初识
10-16
学习前端的第六天，对jQuery的初识
单片机语音模块JQ8900-16P的几种触发方式与源码配置
爱吃炸鸡的小猪's blog
05-02 1万+
我先来讲一下这个模块方便在什么地方： （我没有做广告哈，有一说一） 1，有SPI-flash，USB的接口直接连电脑显示U盘，替换音频很方便 2，默认情况下有IO口按键触发，很方便播放指定的曲目，说白了你把那个接口用手捏着就可以播放，方便吧； 3，IO口的触发的功能还可以自定义 4，支持单线串口，与双线串口通讯（UART） 还有一个原因就是引脚是焊接好的，对于新手而言，焊接排针还是有点点难度的 端口定义与参数 和单片机或者说是串口助手连线的时候，TX，RX交替连接。VPP是一线串口的引脚 接的喇叭功放要
day20 jquery01.zip
11-18
在“day20 jquery01.zip”这个压缩包中，我们很可能会找到一系列关于初识jQuery以及循环语句使用的教程或示例代码。 首先，jQuery的核心理念是“写得更少，做得更多”。它通过简洁的API（应用程序接口）让开发者...
jQuery实战代码
03-01
在初识jQuery的过程中，了解其核心理念、基本语法和如何在项目中引入是至关重要的。jQuery的核心在于简化DOM操作，事件处理和动画效果。要开始使用jQuery，你需要在HTML文件中引入jQuery库，通常通过CDN链接或本地...
jQuery移动开发
05-24
#### 一、初识jQuery Mobile ##### 概览：jQuery Mobile库 jQuery Mobile是基于jQuery框架的一种扩展，它专门为移动设备设计，旨在为移动网页开发提供一套完整的响应式设计解决方案。通过利用HTML5、CSS3以及...
精通jQuery：提升Web开发效率的利器
"jQuery学习指南" 本文档是一本关于jQuery学习的指南，旨在帮助Java程序员和其他Web开发者快速理解和掌握jQuery这...无论你是初识jQuery的新手，还是寻求进阶学习的开发者，都能从这本书中获得丰富的知识和实践经验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值