【锋利的JQuery】0x02 JQuery选择器

最新推荐文章于 2023-03-31 10:56:11 发布

混乱之治

最新推荐文章于 2023-03-31 10:56:11 发布

阅读量456

点赞数

分类专栏： Web前端文章标签： jquery

本文链接：https://blog.csdn.net/WCG_BOY/article/details/7727621

版权

Web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="js/assist.js"></script>
		<script type="text/javascript">
			//基本选择器
			$(document).ready(function() {
				//选择 id为 one 的元素
				$("#btn1-1").click(function() {
					$("#one").css("background", "#368E01");
				});
				//选择 class 为 mini 的所有元素.
				$("#btn1-2").click(function() {
					$(".mini").css("background", "#368E01");
				});
				//选择 元素名是 div 的所有元素.
				$("#btn1-3").click(function() {
					$("div").css("background", "#368E01");
				});
				//选择 所有的元素.
				$("#btn1-4").click(function() {
					$("*").css("background", "#368E01");
				});
				//选择 所有的span元素和id为two的元素.
				$("#btn1-5").click(function() {
					$("span,#two").css("background", "#368E01");
				});
			});
			//层次选择器
			$(document).ready(function() {
				//选择 body内的所有div元素.
				$("#btn2-1").click(function() {
					$("body div").css("background", "#368E01");
				});
				//在body内,选择子元素是div的。
				$("#btn2-2").click(function() {
					$("body>div").css("background", "#368E01");
				});
				//选择 所有class为one 的下一个div元素.
				$("#btn2-3").click(function() {
					$(".one+div").css("background", "#368E01");
				});
				//选择 id为two的元素后面的所有div兄弟元素.
				$("#btn2-4").click(function() {
					$("#two~div").css("background", "#368E01");
				});
			});
			//基本过滤选择器
			$(document).ready(function() {
				//选择第一个div元素.
				$("#btn3-1").click(function() {
					$("div:first").css("background", "#368E01")
				});
				//选择最后一个div元素.
				$("#btn3-2").click(function() {
					$("div:last").css("background", "#368E01")
				});
				//选择class不为one的 所有div元素.
				$("#btn3-3").click(function() {
					$("div:not('.one')").css("background", "#368E01")
				});
				//选择索引值为偶数 的div元素.
				$("#btn3-4").click(function() {
					$("div:even").css("background", "#368E01")
				});
				//选择索引值为奇数 的div元素.
				$("#btn3-5").click(function() {
					$("div:odd").css("background", "#368E01")
				});
				//选取索引值等于3的元素
				$("#btn3-6").click(function() {
					$("div:eq(3)").css("background", "#368E01")
				});
				//选择索引值大于3的元素.
				$("#btn3-7").click(function() {
					$("div:gt(3)").css("background", "#368E01")
				});
				//选择索引值小于3的元素.
				$("#btn3-8").click(function() {
					$("div:lt(3)").css("background", "#368E01")
				});
				//选择所有的标题元素.
				$("#btn3-9").click(function() {
					$(":header").css("background", "#368E01")
				});
				//选择当前正在执行动画的所有元素.
				$("#btn3-10").click(function() {
					$(":animated").css("background", "#368E01")
				});
			});
			//内容过滤选择器
			$(document).ready(function() {
				//选取含有文本“di”的div元素.
				$("#btn4-1").click(function() {
					$("div:contains('di')").css("background", "#368E01");
				});
				//选取不包含子元素(或者文本元素)的div空元素.
				$("#btn4-2").click(function() {
					$("div:empty").css("background", "#368E01");
				});
				//选取含有class为mini元素 的div元素.
				$("#btn4-3").click(function() {
					$("div:has('.mini')").css("background", "#368E01");
				});
				//选取含有子元素(或者文本元素)的div元素.
				$("#btn4-4").click(function() {
					$("div:parent").css("background", "#368E01");
				});
			});
			//可见性过滤选择器
			$(document).ready(function() {
				//选取所有可见的div元素.
				$("#btn_visible").click(function() {
					$("div:visible").css("background", "#368E01");
				});
				//选取所有不可见的元素.
				$("#btn_hidden").click(function() {
					$("div:hidden").show(2000).css("background", "#368E01");
				});
			});
			//属性选择器
			$(document).ready(function() {
				//选取含有 属性title 的div元素.
				$("#btn6-1").click(function() {
					$("div[title]").css("background", "#368E01");
				});
				//选取 属性title值等于“test”的div元素.
				$("#btn6-2").click(function() {
					$("div[title='test']").css("background", "#368E01");
				});
				//选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).
				$("#btn6-3").click(function() {
					$("div[title!='test']").css("background", "#368E01");
				});
				//选取 属性title值 以“te”开始 的div元素.
				$("#btn6-4").click(function() {
					$("div[title^='test']").css("background", "#368E01");
				});
				//选取 属性title值 以“est”结束 的div元素.
				$("#btn6-5").click(function() {
					$("div[title$='test']").css("background", "#368E01");
				});
				//选取 属性title值 含有“es”的div元素.
				$("#btn6-6").click(function() {
					$("div[title*='test']").css("background", "#368E01");
				});
				//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素.
				$("#btn6-7").click(function() {
					$("div[id][title*='es']").css("background", "#368E01");
				});
			});
			//子元素过滤选择器.
			$(document).ready(function() {
				//选取每个class为one的div父元素下的第2个子元素.
				$("#btn7-1").click(function() {
					//div.one :nth-child(2)中间添加空格  若未添加则无法显示
					$("div.one :nth-child(2)").css("background", "#368E01");
				});
				//选取每个class为one的div父元素下的第一个子元素.
				
				$("#btn7-2").click(function() {
					$("div.one :first-child").css("background", "#368E01");
				});
				//选取每个class为one的div父元素下的最后一个子元素.
				$("#btn7-3").click(function() {
					$("div.one :last-child").css("background", "#368E01");
				});
				//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.
				$("#btn7-4").click(function() {
					$("div.one :only-child").css("background", "#368E01");
				});
			});

		</script>
	</head>
	<body>
		<!--
		<h3>基本选择器</h3>
		<input type="button" value="选择 id为 one 的元素." id="btn1-1"/>
		<input type="button" value="选择 class 为 mini 的所有元素." id="btn1-2"/>
		<input type="button" value="选择 元素名是 div 的所有元素." id="btn1-3"/>
		<input type="button" value="选择 所有的元素." id="btn1-4"/>
		<input type="button" value="选择 所有的span元素和id为two的元素." id="btn1-5"/>
		<br/>
		<br/>

		<h3>层次选择器</h3>
		<input type="button" value="选择 body内的所有div元素." id="btn2-1"/>
		<input type="button" value="在body内,选择子元素是div的。" id="btn2-2"/>
		<input type="button" value="选择 所有class为one 的下一个div元素." id="btn2-3"/>
		<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn2-4"/>
		<br/>
		<br/>

		<h3>基本过滤选择器</h3>
		<input type="button" value="选择第一个div元素." id="btn3-1"/>
		<input type="button" value="选择最后一个div元素." id="btn3-2"/>
		<input type="button" value="选择class不为one的 所有div元素." id="btn3-3"/>
		<input type="button" value="选择索引值为偶数 的div元素." id="btn3-4"/>
		<input type="button" value="选择索引值为奇数 的div元素." id="btn3-5"/>
		<input type="button" value="选择索引值等于3的元素." id="btn3-6"/>
		<input type="button" value="选择索引值大于3的元素." id="btn3-7"/>
		<input type="button" value="选择索引值小于3的元素." id="btn3-8"/>
		<input type="button" value="选择所有的标题元素." id="btn3-9"/>
		<input type="button" value="选择当前正在执行动画的所有元素." id="btn3-10"/>
		<br/>
		<br/>

		<h3>内容过滤选择器</h3>
		<input type="button" value="选取含有文本“di”的div元素." id="btn4-1"/>
		<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn4-2"/>
		<input type="button" value="选取含有class为mini元素 的div元素." id="btn4-3"/>
		<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4-4"/>
		<br/>
		<br/>

		<h3>可见性过滤选择器</h3>
		<input type="button" value="选取所有可见的div元素." id="btn_visible"/>
		<input type="button" value="选取所有不可见的元素.包括<input type='hidden'/>和<div style='display:none;'>." id="btn_hidden"/>
		<br/>
		<br/>

		<h3> 属性选择器.</h3>
		<input type="button" value="选取含有 属性title 的div元素." id="btn6-1"/>
		<input type="button" value="选取 属性title值等于“test”的div元素." id="btn6-2"/>
		<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn6-3"/>
		<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn6-4"/>
		<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn6-5"/>
		<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6-6"/>
		<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn6-7"/>
		<br/>
		<br/>
		-->

		<h3>子元素过滤选择器.</h3>
		<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn7-1"/>
		<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn7-2"/>
		<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn7-3"/>
		<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn7-4"/>
		<br/>
		<br/>
		<!---->
		<!--1号元素开始-->
		<div class="one" id="one" >
			id为one,class为one的div
			<div class="mini">
				class为mini
			</div>
		</div>
		<!--1号元素结束-->
		<!--2号元素开始-->
		<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>
		<!--2号元素结束-->
		<!--3号元素开始-->
		<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>
		<!--3号元素结束-->
		<!--4号元素开始-->
		<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>
		<!--4号元素结束-->
		<!--5号元素开始  元素隐含-->
		<div style="display:none;"  class="none">
			style的display为"none"的div
		</div>
		<!--5号元素结束  元素隐含-->
		<!--6号元素开始  元素隐藏-->
		<div class="hide">
			class为"hide"的div
		</div>
		<!--6号元素结束  元素隐藏-->
		<!--7号元素开始-->
		<div>
			包含input的type为"hidden"的div
			<input type="hidden" size="8"/>
		</div>
		<!--7号元素结束-->
		<!--8号元素开始-->
		<span id="mover">正在执行动画的span元素.</span>
		<!--8号元素结束-->
	</body>
</html>

附：assist.js

$(document).ready(function() {
	//给id为mover的元素添加动画
	function animateIt() {
		$("#mover").slideToggle("slow", animateIt);
	}

	animateIt();
})

style.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;
  }

JQuery选择器：

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素