Jquery学习（retrieving 检索）

于 2014-06-27 21:33:54 发布
阅读量758 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/melinda23096/article/details/35288435
本文详细介绍了jQuery中的选择器使用方法，包括基本的选择器、过滤器、层级选择器、子元素选择器及属性过滤器等，并通过实例展示了如何精确地选取DOM元素。

selector （选择器） 的三种方式：

<!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>
<title>1.BasicSelectors - 曹鹏Jquery(Javascript)</title>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        //$("p").css("border", "5px solid pink");
        //$(".a").css("border", "6px outset purple");
        $("#domain").css("border", "5px groove darkviolet");
    });
</script>

<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>

</head>

<body>
	<ul id="domain">
		<li class="a">www.caopeng.ORG</li>
		<li class="a">www.caopeng.COM</li>
		<li class="b">www.caopeng.NET</li>
		<li class="a">www.caopeng.BIZ</li>
	</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="a">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>

</html>


<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        //$("p").css("border", "5px solid pink");
        //$(".a").css("border", "6px outset purple");
        $("#domain").css("border", "5px groove darkviolet");
    });
</script>

filter（进一步的 select）：

<!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>
<title>2.basicFilters - 曹鹏Jquery(Javascript)</title>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//last:最后一个；fist:第一个。
		//$("p:last").css("border", "3px dashed chocolate");
		
		//even:偶数。数组脚标是从0开始的，所以是第一行和第三行是0和2。
		// $("p:even").css("border", "3px dashed chocolate");
		
		//odd:奇数。
		//$("p:odd").css("border", "2px solid gray");
		
		//gt: greater than. gt(1): 大于1。
		$("p:gt(1)").css("border","2px dotted fuchsia");
		
    });
</script>

<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>

</head>

<body>
	<ul id="domain">
		<li class="a">www.caopeng.ORG</li>
		<li class="a">www.caopeng.COM</li>
		<li class="b">www.caopeng.NET</li>
		<li class="b">www.caopeng.BIZ</li>
	</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>

</html>



<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//last:最后一个；fist:第一个。
		//$("p:last").css("border", "3px dashed chocolate");
		
		//even:偶数。数组脚标是从0开始的，所以是第一行和第三行是0和2。
		// $("p:even").css("border", "3px dashed chocolate");
		
		//odd:奇数。
		//$("p:odd").css("border", "2px solid gray");
		
		//gt: greater than. gt(1): 大于1。
		$("p:gt(1)").css("border","2px dotted fuchsia");
		
    });
</script>


hierarchy（层级）：

<!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>
<title>3.HierCombo - 曹鹏Jquery(Javascript)</title>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//,的意思是：都要选。
		//$("p,li.b").css("background-color", "#ffebcd");
		
		//空格的意思是：li.a 是属于 ul 的。
		//$("ul li.a").css("background-color", "#8fbc8f");
		
		//+的意思是：紧邻着 ul 的 p 元素。
		//$("ul + p").css("background-color", "#483d8b");
		
		//~的意思是：（sibling）兄弟姊妹，同级同辈的。
		//与 #domin 这个 id 同级的 p 元素。
		$("#domain ~ p").css("background-color", "#8b008b");
		
    });
</script>

<style type="text/css">
p{ font-size:22px; }
.a { color: #F33;}
.b { color: #9C6;}
</style>

</head>

<body>
	<ul id="domain">
		<li class="a">www.caopeng.ORG</li>
		<li class="a">www.caopeng.COM</li>
		<li class="b">www.caopeng.NET</li>
		<li class="b">www.caopeng.BIZ</li>
	</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>

</html>



<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//,的意思是：都要选。
		//$("p,li.b").css("background-color", "#ffebcd");
		
		//空格的意思是：li.a 是属于 ul 的。
		//$("ul li.a").css("background-color", "#8fbc8f");
		
		//+的意思是：紧邻着 ul 的 p 元素。
		//$("ul + p").css("background-color", "#483d8b");
		
		//~的意思是：（sibling）兄弟姊妹，同级同辈的。
		//与 #domin 这个 id 同级的 p 元素。
		$("#domain ~ p").css("background-color", "#8b008b");
		
    });
</script>


child（还是限定条件的 select）：

和 filter 一样都用了 ":" 。

<!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>
<title>4.ChildVisCont - 曹鹏Jquery(Javascript)</title>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//包含 "文" 这个字的段落(p)。
		//$("p:contains(文)").css("background-color", "#1e90ff");
		
		//ul 中第 "3" 个 li 。
		$("ul li:nth-child(3)").css("border", "3px dotted #b8860b");
		
    });
</script>

<style type="text/css">
p{ font-size:22px; border:}
.a { color: #F33;}
.b { color: #9C6;}
</style>

</head>

<body>
	<ul id="domain">
		<li class="a">www.caopeng.ORG</li>
		<li class="a">www.caopeng.COM</li>
		<li class="b">www.caopeng.NET</li>
		<li class="b">www.caopeng.BIZ</li>
	</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>

</html>


<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//包含 "文" 这个字的段落(p)。
		//$("p:contains(文)").css("background-color", "#1e90ff");
		
		//ul 中第 "3" 个 li 。
		$("ul li:nth-child(3)").css("border", "3px dotted #b8860b");
		
    });
</script>


attribute_filter（属性匹配器）：

<!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>
<title>5.AttrFilters - 曹鹏Jquery(Javascript)</title>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//所有包含 class 属性的 p 。
		//$("p[class]").css("background-color", "#fffaf0");
		
		//id=bczb1 的 p 。
		//$("p[id=bczb1]").css("color", "#1e90ff");
		
		//id 是以 bczd 开始的 p 。
		//$("p[id^=bczb]").css("background-color", "firebrick");
		
		//同时符合[id以bczd开始]、[lang包含en-]这两个条件的p。
		$("p[id^=bczb][lang*=en-]").css("border", "5px solid darkorange");
		
    });
</script>

<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>

</head>

<body>
	<ul id="domain">
		<li class="a">www.caopeng.ORG</li>
		<li class="a">www.caopeng.COM</li>
		<li class="b">www.caopeng.NET</li>
		<li class="b">www.caopeng.BIZ</li>
	</ul>
<p class="a">曹鹏· 编程之邦</p>
<p id="bczb1">曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p id="bczb4" lang="en-us">曹鹏· 创意商城</p>
</body>

</html>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//所有包含 class 属性的 p 。
		//$("p[class]").css("background-color", "#fffaf0");
		
		//id=bczb1 的 p 。
		//$("p[id=bczb1]").css("color", "#1e90ff");
		
		//id 是以 bczd 开始的 p 。
		//$("p[id^=bczb]").css("background-color", "firebrick");
		
		//同时符合[id以bczd开始]、[lang包含en-]这两个条件的p。
		$("p[id^=bczb][lang*=en-]").css("border", "5px solid darkorange");
		
    });
</script>

traverse（拿到网页里面一些element、object的信息，然后再使用一些函数，对它进行一些适当的折腾）

<!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>
<title>6.traversing - 曹鹏Jquery(Javascript)</title>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//弹出警示窗口，内容是："There are n(p段落的个数) <p> elements"。
		//alert("There are " + $("p").length + " <p> elements");
		
		//找 ul 里面 class 值是 b 的 li，给它加上css的一些规则。
		$("ul").find("li.b").css("background-color", "#CF6");
		
    });
</script>

<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>

</head>

<body>
	<ul id="domain">
		<li class="a">www.caopeng.ORG</li>
		<li class="a">www.caopeng.COM</li>
		<li class="b">www.caopeng.NET</li>
		<li class="b">www.caopeng.BIZ</li>
	</ul>
<p class="a">曹鹏· 编程之邦</p>
<p id="bczb1">曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p id="bczb2">曹鹏· 创意商城</p>
<p id="bczb2">曹鹏· 创意商城</p>
<p id="bczb2">曹鹏· 创意商城</p>
</body>

</html>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
		
		//弹出警示窗口，内容是："There are n(p段落的个数) <p> elements"。
		//alert("There are " + $("p").length + " <p> elements");
		
		//找 ul 里面 class 值是 b 的 li，给它加上css的一些规则。
		$("ul").find("li.b").css("background-color", "#CF6");
		
    });
</script>
第一个警示窗口：



auto_icon（自动添加图标）：

<!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" />
    <span style="white-space:pre">	</span><title>7.AutoIcons - 曹鹏Jquery(Javascript)</title>

<span style="white-space:pre">	</span><script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<span style="white-space:pre">	</span><script type="text/javascript">
	<span style="white-space:pre">	</span>$("document").ready(function() {
		<span style="white-space:pre">	</span>$("a[href$=pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
    <span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span></script>
   
<span style="white-space:pre">	</span><style type="text/css">
<span style="white-space:pre">	</span>li {
	<span style="white-space:pre">	</span>margin: 5pt 0 0 5pt;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span></style>

</head>

<body>
<h1>Example</h1>
<p></p>
<ul class="navlist" id="navlinks">
	<li><a href="http://www.caopeng.ws">链接 #1</a></li>
	<li><a name="#ws">链接名称</a></li>
	<li><a href="http://www.caopeng.org">链接 #2</a></li>
	<li><a href="http://www.caopeng.com.pdf">链接 #3</a></li>
	<li><a href="http://www.caopeng.info">链接 #4</a></li>
	<li><a href="http://www.caopeng.biz">链接 #5</a></li>
	<li><a href="http://www.caopeng.net.pdf">链接 #6</a></li>
	<li><a href="http://www.caopeng.tv.">链接 #7</a></li>
	<li><a href="mailto:ccaopengg@hotmail.com">Email</a></li>
</ul>
</body>

</html>



<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$("document").ready(function() {
		$("a[href$=pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
    <span>	</span>});
</script>


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值