您现在的位置：首页 >> 前端 >> 内容

JQuery学习笔记（二）——选择器

时间：2016/8/1 9:15:52 点击：

　　核心提示：JQuery选择器一、基本选择器1)id选择器 #2)class选择器.(点)3)选择所有 *4)多个选择 span,p!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4....

JQuery选择器

一、基本选择器

1)id选择器 #
2)class选择器 .(点)
3)选择所有 *
4)多个选择 span,p 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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">
			p, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			p.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			p.hide {
			    display: none;
			}			
		</style>
		
		<!-- 导入 jQuery 库 -->
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			// 使用id选择器
			$(function(){
				$("#btn1").click(function(){
					//alert("btn1 click...");
					$("#one").css("background","#FF00AA");
				});
				$("#btn2").click(function(){
					//alert("btn1 click...");
					$(".mini").css("background","#FF00AA");
				});
				$("#btn3").click(function(){
					//alert("btn1 click...");
					$("p").css("background","#FF00AA");
				});
				$("#btn4").click(function(){
					//alert("btn1 click...");
					$("*").css("background","#FF00AA");
				});
				$("#btn5").click(function(){
					//alert("btn1 click...");
					$("span,#two").css("background","#FF00AA");
				});
			})
		
		</script>
		
	</head>
	<body>		
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 p 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br><br>
		<p class="one" id="one">
			id 为 one,class 为 one 的p
			<p class="mini">class为mini</p>
		</p>
		<p class="one" id="two" title="test">
			id为two,class为one,title为test的p
			<p class="mini" title="other">class为mini,title为other</p>
			<p class="mini" title="test">class为mini,title为test</p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini"></p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini" title="tesst">class为mini,title为tesst</p>
		</p>
		<p style="display:none;" class="none">style的display为"none"的p</p>
		<p class="hide">class为"hide"的p</p>
		<p>
			包含input的type为"hidden"的p<input type="hidden" size="8">
		</p>
		<span id="span">^^span元素^^</span>
	</body>
</html>

二、层次选择器

1.选择某元素内所有子元素 body p
2.选择某元素内子元素为p body > p
3.选择某元素下一个p元素 body + p （只能选择到紧挨着的p）
4.选择某元素后面所有p兄弟元素 body ~ p
5.选择某元素所有p兄弟元素 $("#two").siblings("p")
6.选择某元素下一个span元素 $("#two").nextAll("span:first")
7.选择某元素前边所有的p兄弟元素 $("#two").prevAll("p")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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">
			p, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			p.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			p.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$("body p").css("background","#F97922");
				});
				$("#btn2").click(function(){
					$("body > p").css("background","#F97922");
				});
				$("#btn3").click(function(){
					$("#one + p").css("background","#F97922");
				});
				$("#btn4").click(function(){
					$("#two ~ p").css("background","#F97922");
				});
				$("#btn5").click(function(){
					$("#two").siblings("p").css("background","#F97922");
				});
				$("#btn6").click(function(){
					// 一下选择器选择的是紧邻#one的span元素，若该span和one不相邻，无效
					$("#one").nextAll("span:first").css("background","#F97922");
				});
				$("#btn7").click(function(){
					$("#two").prevAll("p").css("background","#F97922");
				});
			})
		</script>
	</head>
	<body>		
		<input type="button" value="选择 body 内的所有 p 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择子元素是 p 的." id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 p 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 p 兄弟元素" id="btn4" />
		<input type="button" value="选择 id 为 two 的元素所有 p 兄弟元素" id="btn5" />
		<input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
		<input type="button" value="选择 id 为 two 的元素前边的所有的 p 兄弟元素" id="btn7" />
		
		<br><br>
		<p class="one" id="one">
			id 为 one,class 为 one 的p
			<p class="mini">class为mini</p>
		</p>
		<p class="one" id="two" title="test">
			id为two,class为one,title为test的p
			<p class="mini" title="other">class为mini,title为other</p>
			<p class="mini" title="test">class为mini,title为test</p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini"></p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini" title="tesst">class为mini,title为tesst</p>
		</p>
		<p style="display:none;" class="none">style的display为"none"的p</p>
		<p class="hide">class为"hide"的p</p>
		<p>
			包含input的type为"hidden"的p<input type="hidden" size="8">
		</p>
		<span id="span">^^span元素^^</span>
		<span id="span">--span元素--</span>
	</body>
</html>

三、过滤选择器

通过特定的过滤规则筛选所需的DOM元素，以":"开头

1.基本过滤

1)第一个 :first
2)最后一个 :last
3)不包含 :not(.one)
4)索引为奇数 :even
5)索引为偶数 :odd
6)索引大于3 :gt(3)
7)索引等于3 :eq(3)
8)索引小于3 :lt(3)
9)标题元素 :header
10)动画元素 :animated 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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="css/style.css">
		<style type="text/css">
			p, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			p.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			p.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
				
				$("#btn1").click(function(){
					$("p:first").css("background", "#ffbbaa");
				});
				$("#btn2").click(function(){
					$("p:last").css("background", "#ffbbaa");
				});
				$("#btn3").click(function(){
					$("p:not(.one)").css("background", "#ffbbaa");
				});
				
				$("#btn4").click(function(){
					$("p:even").css("background", "#ffbbaa");
				});
				$("#btn5").click(function(){
					$("p:odd").css("background", "#ffbbaa");
				});
				$("#btn6").click(function(){
					$("p:gt(3)").css("background", "#ffbbaa");
				});
				
				$("#btn7").click(function(){
					$("p:eq(3)").css("background", "#ffbbaa");
				});
				$("#btn8").click(function(){
					$("p:lt(3)").css("background", "#ffbbaa");
				});
				$("#btn9").click(function(){
					$(":header").css("background", "#ffbbaa");
				});
				
				$("#btn10").click(function(){
					$(":animated").css("background", "#ffbbaa");
				});
				$("#btn11").click(function(){
					$("#two").nextAll("span:first").css("background", "#ffbbaa");
				});
				
			});
			
			
		</script>
	</head>
	<body>		
		<input type="button" value="选择第一个 p 元素" id="btn1" />
		<input type="button" value="选择最后一个 p 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 p 元素" id="btn3" />
		
		<input type="button" value="选择索引值为偶数的 p 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 p 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 p 元素" id="btn6" />
		
		<input type="button" value="选择索引值为等于 3 的 p 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 p 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
		<input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />
		
		<h3>基本选择器.</h3>
		<br><br>
		<p class="one" id="one">
			id 为 one,class 为 one 的p
			<p class="mini">class为mini</p>
		</p>
		<p class="one" id="two" title="test">
			id为two,class为one,title为test的p
			<p class="mini" title="other">class为mini,title为other</p>
			<p class="mini" title="test">class为mini,title为test</p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini"></p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini" title="tesst">class为mini,title为tesst</p>
		</p>
		<p style="display:none;" class="none">style的display为"none"的p</p>
		<p class="hide">class为"hide"的p</p>
		<p>
			包含input的type为"hidden"的p<input type="hidden" size="8">
		</p>
		<span id="span">^^span元素 111^^</span>
		<span id="span">^^span元素 222^^</span>
		<p id="mover">正在执行动画的p元素.</p>
	</body>
</html>

2.内容过滤:体现在所包含的子元素和文本内容上

1):contains(text) 含有文本text
2):empty 不包含子元素或者文本元素
3):has(selector) 选取含有选择器所匹配的元素的元素
4):parent 选取含有子元素或者文本的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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="css/style.css">
		<style type="text/css">
			p, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			p.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			p.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				$("#btn1").click(function(){
					$("p:contains('di')").css("background", "#ffbbaa");
				});
				$("#btn2").click(function(){
					$("p:empty").css("background", "#ffbbaa");
				});
				$("#btn3").click(function(){
					$("p:has(.mini)").css("background", "#ffbbaa");
				});
				
				$("#btn4").click(function(){
					$("p:parent").css("background", "#ffbbaa");
					//$("p:not(:empty)").css("background", "#ffbbaa");
				});
				
			});
			
		</script>
	</head>
	<body>		
		<input type="button" value="选择 含有文本 'di' 的 p 元素" id="btn1" />
		<input type="button" value="选择不包含子元素(或者文本元素) 的 p 空元素" id="btn2" />
		<input type="button" value="选择含有 class 为 mini 元素的 p 元素" id="btn3" />
		<input type="button" value="选择含有子元素(或者文本元素)的p元素" id="btn4" />
		
		<br><br>
		<p class="one" id="one">
			id 为 one,class 为 one 的p
			<p class="mini">class为mini</p>
		</p>
		<p class="one" id="two" title="test">
			id为two,class为one,title为test的p
			<p class="mini" title="other">class为mini,title为other</p>
			<p class="mini" title="test">class为mini,title为test</p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini"></p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini" title="tesst">class为mini,title为tesst</p>
		</p>
		<p style="display:none;" class="none">style的display为"none"的p</p>
		<p class="hide">class为"hide"的p</p>
		<p>
			包含input的type为"hidden"的p<input type="hidden" size="8">
		</p>
		<p id="mover">正在执行动画的p元素.</p>
	</body>
</html>

3.可见性过滤

1):hidden 选取所有不可见的元素
2):visible 选取所有可见的元素
**show(time)方法返回为当前对象**
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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="css/style.css">
				<style type="text/css">
			p, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			p.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			p.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btn1").click(function(){
					$("p:visible").css("background","#F23432");
				});
				$("#btn2").click(function(){
					// 此处show(time)返回对象依然是当前对象
					$("p:hidden").show(2000).css("background","#F23432");
				});
				$("#btn3").click(function(){
					alert($("input:hidden").val());
				});
			});
			
		</script>
	</head>
	<body>		
		<input type="button" value="选取所有可见的  p 元素" id="btn1">
		<input type="button" value="选择所有不可见的 p 元素" id="btn2" />
		<input type="button" value="选择所有不可见的 input 元素" id="btn3" />
		
		<br><br>
		<p class="one" id="one">
			id 为 one,class 为 one 的p
			<p class="mini">class为mini</p>
		</p>
		<p class="one" id="two" title="test">
			id为two,class为one,title为test的p
			<p class="mini" title="other">class为mini,title为other</p>
			<p class="mini" title="test">class为mini,title为test</p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini"></p>
		</p>
		<p class="one">
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini">class为mini</p>
			<p class="mini" title="tesst">class为mini,title为tesst</p>
		</p>
		<p style="display:none;" class="none">style的display为"none"的p</p>
		<p class="hide">class为"hide"的p</p>
		<p>
			包含input的type为"hidden"的p
			<input type="hidden" value="123456789000" size="8">
		</p>
		<p id="mover">正在执行动画的p元素.</p>
	</body>
</html>


Tags:JQ QU UE ER 
作者：网络　来源：x_k的专栏
  • 上一篇：浏览器缓存机制
  • 下一篇：前端性能优化总结

    • 您可能感兴趣的文章

    相关评论

    发表我的评论

    • 大名：
    • 内容：