JavaWeb初级学习 之 JQuery-简介、选择器

其他 2018-08-31 23:39:58 阅读次数: 0

1、JQuery介绍

什么是JQuery ?jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

JQuery核心思想：它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

JQuery流行程度：jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

JQuery好处：jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

2、JQuery 的初体验！！！

1）第一步，先使用script标签引入Jquery源文件。

2）第二步，在文档加载完成之后，给按钮动态绑定事件。

完整的代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 
	每一个script标签。要第用来引js文件，要么用来定义javascript代码

	jquery的使用，第一步，要先把jquery的类库给引进来
 -->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	// 在JQuery中$是Jquery的核心函数
	/*
		$(function(){}) // 跟window.onload事件功能一样
	*/
	$(function(){  // 相当于 javascript window.onload事件 
		/*
		$("#btnId") 相当于document.getElementById("btnId");
			
		$("#btnId").click(function(){}) 相当于
		document.getElementById("btnId").onclick = function(){}
		*/
		
		$("#btnId").click(function(){
			alert("单击事件");
		});
	});
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>


问题？
1、使用jquery一定要引入jquery库吗？ 答案： 是的

2、jquery中的$到底是什么？ 答案： 核心函数，alert($)就知道了

3、怎么为按钮添加点击响应函数的？ 答案： 1）查询元素，2）绑定事件


3、Jquery 核心函数  $()


$ 是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数
1、传入参数为  [ 函数 ] 时：$(function(){}) 文档加载完成后执行此方法。 等价于： window.onload = function() {}
2、传入参数为  [ HTML 字符串 ] 时： $("<span>12</span>");  根据字符串创建元素的dom节点对象
3、传入参数为  [ 选择器字符串 ] 时：$(“#id”);  根据选择器查找出元素节点对象
4、传入参数为  [ DOM对象 ] 时： $(this);  将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>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">


	//核心函数的4个作用
	//传入参数为[函数]时：在文档加载完成后执行这个函数
	$(function(){
	// 		alert("这个功能跟window.onload相近");
	// 		alert(document.getElementById("div01"));
		//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
		$("<span>span标签</span>").appendTo("body");
		//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
	// 		alert( $("#div01") ) ;
	// 		$("#div01") // 这得到的是一个JQuery对象
		
		//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
		var div01Obj = document.getElementById("div01");
		// document.getElementById通过原生javascript代码获取到的是Dom对象
	// 	alert(div01Obj);
		// 当我们把dom对象传入到JQuery的$()核心函数中，它会把Dom对象转换成为Jquery对象
		
		// JQuery对象变量在全名的时候，经常$符号打头
		var $div01Obj = $(div01Obj);
		alert($div01Obj);
	});
</script>
</head>
<body>
	<div id="div01">adsf</div>
</body>
</html>

4、JQuery对象和dom对象

1、什么是jquery对象，什么是dom对象?

dom对象
1.通过getElementById()查询出来的标签对象是Dom对象
 2.通过getElementsByName()查询出来的标签对象是Dom对象
 3.通过getElementsByTagName()查询出来的标签对象是Dom对象
 4.通过createElement() 方法创建的对象，是Dom对象


JQuery对象
5.通过JQuery提供的API创建的对象，是JQuery对象。    $(“<span>span标签</span>”)
 6.通过JQuery包装的Dom对象，也是JQuery对象。 $( dom对象 ) 得到的也是jquery对象
 7.通过JQuery提供的API查询到的对象，是JQuery对象。 $(“ #id属性值 ”) 查到的对象 jquery

2、dom对象转化为jquery对象（*重点）

var $Jquery对象 = $(dom对象);

3、jquery对象转为dom对象（*重点）

var dom对象 = $Jquery[0];


5、jQuery选择器（*****重点）

5.1、基本选择器（****重点）

#ID ID选择器 ：     它可以查找指定id属性值的标签对象
.class 类型选择器 ：   它可以查找所有跟class属性值相同标签对象
element 标签名选择器  ：   它可以查找所有指定的标签名的标签对象
* 任意选择器  ： 它可以查找所有的标签对象
selector1，selector2 组合选择器： 它可以查找选择器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>
		<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(){});
			*/
			$(document).ready(function(){
				//1.选择 id 为 one 的元素 
				$("#btn1").click(function(){
	// 				alert(1);
					
					var $oneObj = $("#one");// .css("background-color","#bbffaa");
					// css()方法，当我们传递一个参数的时候，它是获取对应的css样式的值
					// css()方法当我们传递两个值，也就是
					//	第一个值是css的样式名
					// 	第二个值是css的样式值
					$oneObj.css("background-color","#bbffaa") ;
	// 				alert($oneObj[0]);
				});


				//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>
	<!-- 	<div>
			<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="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 class="one" id="span">^^span元素^^</span>
	</body>
</html>

5.2、层级选择器（****重点）

ancestor descendant后代选择器 ：先查找ancestor 选择符合的祖先元素，然后再在后代中查找匹配descendant的后代元素 （后代元素包含子元素，和孙子元素，甚至是曾孙子元素，也就是只要被祖先元素包含起来的元素都称之为后代元素）

parent > child 子元素选择器 在给定的父元素中，查找符合child 选择器的子元素
prev + next 相邻元素选择器  匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 兄弟元素选择器   匹配 prev 元素之后的所有 siblings 元素


扫描二维码关注公众号，回复： 2988143 查看本文章 
<!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(){
				//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>

5.3、过滤选择器

1、基本过滤器：

:first 查找第一个
:last 查找最后一个
:not(selector) 删除符合not（selector）选择器的元素
:even 只要索引为偶数的元素 索引从0开始
:odd 只要索引为奇数的元素 索引从0开始
:eq(index) 只要索引为指定位置的元素
:gt(index) 只要大于给定索引的元素
:lt(index) 只要小于给定索引的元素
:header 查找标题标签 h1 - h6 
: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(){
					})
				*/  
				$(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" 查找所有div
						// div:gt(3) 查找索引大于3的div元素
						$("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查找所有的div
						// div:not(:animated) 是查找没有正在执行动画的div
						// "div:not(:animated):last" 是查找没有正在执行动画的div里的最后一个
						$("div:not(:animated):last").css("background", "#bbffaa");
					});
				});
			</script>
		</head>
		<body>		
			<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>

内容过滤器：

:contains(text)   查找包含有指定的文本的元素
:empty 查找没有包含子元素或者文本的元素
:parent 查找含有子元素或者文本的元素
: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>

可见性过滤器：

:hidden 只返回不可见的元素（不可见是指display:none 或者 input type=hidden的元素）
:visible 可以看见的元素 


<!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();	
				});
				/**
					:hidden   
					:visible  
				*/
				$(document).ready(function(){
					//1.选取所有可见的  div 元素
					$("#btn1").click(function(){
						$("div:visible").css("background", "#bbffaa");
					});


					//2.选择所有不可见的 div 元素
					//不可见：display属性设置为none，或type设置为hidden
					$("#btn2").click(function(){
	// 					alert( $("div:hidden").size() );
	// 					.show(); 显示
	// 					.hide(); 隐藏
	// 					我们可以在show方法里添加一个毫秒的值，表示这个动画执行的时间。


						$("div:hidden").show(1000).css("background", "#bbffaa");
					});


					//3.选择所有不可见的 input 元素
					$("#btn3").click(function(){
						// .size()是返回jquery对象有有几个dom对象
						// attr()方法是设置和获取属性的方法
						// 当传一个参数的时候，是获取指定属性名的值
						// 当传递两个参数的时候，是设置这个属性的值


	// 					alert($("input:hidden").size());
						// 获取value属性值
	// 					alert( $("input:hidden").attr("value") );
						$("input:hidden").attr("value","abc");
					});	
				});
			</script>
		</head>
		<body>		
			<input type="button" value="选取所有可见的  div 元素" id="btn1">
			<input type="button" value="选择所有不可见的 div 元素" id="btn2" />
			<input type="button" value="选择所有不可见的 input 元素" id="btn3" />
		
			<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>

属性过滤器：

[attribute] 返回含特定属性的元素
[attribute=value] 返回含特定属性，并且属性值等于给定value值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 返回 拥有指定属性 属性值以value开头的元素
[attribute$=value] 返回 拥有指定属性 属性值以value结尾的元素
[attribute*=value]     返回 指定属性包含给定value值的元素
[attrSel1][attrSel2][attrSelN]  返回同时 满足 所有选择器的元素 


<!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.选取含有 属性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>

子元素过滤器:

:nth-child 返回给定索引值的孩子元素
:first-child 返回选择器中每个元素的 第一个孩子元素
:last-child 返回选择器中每个元素的 最后一个孩子元素
:only-child 返回选择器中每个元素，只有一个孩子的元素。 


<!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();	
				
					//1.选取每个class为one的div元素，下的第2个子元素
					//	解释：也就是这个div必须class为one，并且这个div下的第二个元素
					// 好像 ul li:nth(2) 是ul元素下的第2个li元素一样
					$("#btn1").click(function(){
						$("div.one :nth-child(2)").css("background","#bbffaa");
					});
					//2.选取每个class为one的div父元素下的第一个子元素
					$("#btn2").click(function(){
						/*
						:first 返回选择器集合中第一个元素
						:first-child	返回选择器集合中所有元素的第一个孩子元素
						*/
					
						$("div.one :first-child").css("background","#bbffaa");
					});
	
				
					//3.选取每个class为one的div父元素下的最后一个子元素
					$("#btn3").click(function(){
						$("div.one :last-child").css("background","#bbffaa");
					});
					//4.如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
					$("#btn4").click(function(){
						$("div.one :only-child").css("background","#bbffaa");
					});
				});
			</script>
		</head>
		<body>		
			<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
			<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
			<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
			<input type="button" value="如果class为one的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" value="123456789" size="8">
			</div>
			<div id="mover">正在执行动画的div元素.</div>
		</body>
	</html>

表单过滤器:

:input 获取表单input textarea select button标签对象
:text    获取表单中 input type =text 元素对象
:password 获取表单中 input type = password 的元素对象
:radio 获取表单中 input type = radio 的元素对象
:checkbox 获取表单中 input type=checkbox 的元素对象
:submit 获取表单中 input type =submit 的元素对象
:image 获取表单中 input type=image的元素对象
:reset 获取表单中 input type=reset的元素对象
:button 获取表单中 input type=button 以及 button的标签对象
:file 获取表单中 input type=file 的元素对象
:hidden 获取不可见的元素，或者input type=hidden 的元素对象

表单对象属性过滤器：

:enabled 获取可用的元素对象
:disabled 获取不可用的元素对象
:checked 获取单选，复选，select中选中的option元素对象
:selected 获取 select中选中的option元素对象 


<!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(){
					//1.对表单内 可用input 赋值操作
					$("#btn1").click(function(){
						// .length返回匹配的元素个数
	// 					alert( $(":text:enabled").length );
						// val() 如果不传递参数值，它可以获取Jquery对象里的value属性值
	// 					alert( $(":text:enabled:eq(1)").val() );
						// val()如果传递参数值，它可以设置Jquery对象里的value属性值
						$(":text:enabled").val("今天萌一天！");
					
					});
					//2.对表单内 不可用input 赋值操作
					$("#btn2").click(function(){
						$(":text:disabled").val("不可用的input也萌了");
					});
					//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
					$("#btn3").click(function(){
						// :checked返回的不仅仅复选中和单选框选中的元素
						// 并且包含select 里选中的option元素
						alert($("input:checked").size());
					});
					//4.获取多选框，每个选中的value值
					$("#btn4").click(function(){
						// 获取所有 选中的复选框
					 	var $inputCheckedObjs = $("input:checked");
						// 遍历获取每一个选中的值
						// 使用for 循环遍历 
	// 					for (var i = 0; i < $inputCheckedObjs.size(); i++) {
	// 						var inputCheckedObj = $inputCheckedObjs[i];
	// // 						alert(inputCheckedObj);
	// // 						alert(inputCheckedObj.value);
	// 						// dom对象不能调用 JQuery对象的方法
	// // 						inputCheckedObj.val("abc");
	// 						var $inputCheckedObj = $(inputCheckedObj);
	// 						// Jquery对象 也没能调用dom对象的方法或者属性
	// // 						$inputCheckedObj.value
	// 						alert($inputCheckedObj.val());
	// 					}
						// 使用JQuery的.each方法进行遍历 
					 	$inputCheckedObjs.each(function(){
					 		// 在each方法中，传入 的function函数，里面有一个this对象
					 		// 这个this对象，就是当前正遍历到的dom对象
					 		alert(this.value);
					 		
	// 				 		alert( $(this) );
					 	});
					
					});
					//5.获取下拉框选中的内容  
					$("#btn5").click(function(){
	// 					alert( $(":selected").size() );
						$(":selected").each( function(){
							// 在each遍历的function中，有一个this对象
							// 这个this对象就是当前正遍历到的dom对象
							alert(this.innerHTML);
						} );
					});
				})	
			</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>



猜你喜欢

转载自blog.csdn.net/OnlyLove_longshao/article/details/52976326
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022