jQuery（2）:jQuery选择器

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JavaScript #Google #jQuery #Yahoo #ViewUI

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了jQuery中元素选取的基础知识，包括基本的选择器如ID、类名及元素名选择器，并详细解释了层次选择器和过滤选择器的使用方法。

jQuery的元素选取：

     描述			          示例                            返回
根据给定的id匹配一个元素      $(#test)选取id为test的元素               单个元素
根据给定的类名匹配元素        $(".test")选取所有class为test的元素      集合元素
根据给定的元素名匹配元素      $("p")选取所有的<p>元素                集合元素
匹配所有元素                  $("*")选取所有的元素                     集合元素

以下是根据id匹配元素的一个例子

<html>
	<head>
		<script type="text/javascript" src="jquery-1.6.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//下面存在两个同id名的元素，由于根据id名只能返回一个元素，所以jQuery会默认取一个
				alert($("#test1").html());
			});
		</script>
	</head>
	<body>	
		<a id="test1" href="http://www.google.com">google</a>
		<a id="test1" href="http://www.yahoo.com">yahoo</a>
	</body>
</html>

以下是根据类名匹配元素的例子

<html>
	<head>
		<script type="text/javascript" src="jquery-1.6.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//会弹出2
				alert($(".test").length);
			});
		</script>
	</head>
	<body>	
		<a class="test" href="http://www.google.com">google</a>
		<a class="test" href="http://www.yahoo.com">yahoo</a>
	</body>
</html>

层次选择器：以下是四个层次选择器

选择器：$("ancestor descendant")

描述：选取ancestor元素里的所有descendant(后代)元素

返回：集合元素
示例：$("div span")选取<div>里的所有的<span>元素

选择器：$("parent>child")

描述：选取parent元素下的child(子)元素，与$("ancestor descendant")有区别，$("ancestor descendant")取

的是所有后代元素

返回：集合元素
示例：$("div>span")选取<div>元素下元素名是<span>的子元素

选择器：$('prev+next')

描述：选取紧接在prev元素后的next元素

返回：集合元素
示例：$('.one+div')选取class为one的下一个<div>元素

注意：此选择器可以用next方法代替，如$('.one').next('div')