`

jQuery(2):jQuery选择器

阅读更多

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')

 

选择器:$('prev~siblings')

描述:选取prev元素之后的所有siblings(兄弟)元素

返回:集合元素
示例:$('#two~div')选取id为two的元素后面的所有<div>兄弟元素,即平级的元素

注意:此选择器可以用nextAll方法代替,如$('#two').nextAll('div')

         此外还有一个siblings'方法,它将返回所有前后的兄弟节点,如$('#two').nextAll('div'),上面的方法只返回之

         后的兄弟节点。

 

过滤选择器:

jQuery基本选择器

 

分享到:
评论

相关推荐

    jQuery中:focus选择器用法实例

    本文实例讲述了jQuery中:focus选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够匹配当前获取焦点的元素。 语法结构: 代码如下:$(“:focus”) :focus选择器一般需要和其他选择器配合使用,例如和类...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jquery 城市选择器

    《jQuery城市选择器详解》 在网页开发中,经常需要实现一种功能,即用户可以选择他们的所在省份和城市,这在注册、填写地址等场景中尤为常见。jQuery城市选择器就是解决这一需求的有效工具,它利用JavaScript和...

    RIA应用开发:2-jquery选择器.ppt

    2. jQuery 选择器的类型 jQuery 选择器有多种类型,包括: * Id 选择器:通过元素的 Id 属性来选择元素,例如 $("#id")。 * 类选择器:通过元素的类名来选择元素,例如 $(".class")。 * 元素选择器:通过元素的...

    jQuery中:animated选择器用法实例

    本文实例讲述了jQuery中:animated选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有正在执行动画效果的元素。 可以使用animate()方法创建自定义动画。 语法结构: 代码如下:$(“:animated”) 此...

    jquery选择器入门详解小案例

    本篇文章将深入探讨jQuery选择器的入门知识,并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分,它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器,包括基本选择...

    jquery日期选择器

    3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...

    jquery一些案列和一些选择器

    2. **jQuery选择器** jQuery的选择器与CSS选择器相似,但提供了更丰富的功能。以下是一些常见的jQuery选择器: - **ID选择器**: `$("#elementId")` - 通过元素的ID查找元素,例如:`$("#myDiv")`。 - **类选择器**:...

    Beginning jQuery:From the Basics of jQuery to Writing your Own Plug-ins

    1. **jQuery基础知识**:书中首先介绍了如何引入jQuery库,以及jQuery选择器的基本用法,包括ID选择器、类选择器、属性选择器等,帮助读者理解如何高效地选取和操作网页元素。 2. **DOM操作**:jQuery提供了简洁的...

    jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器

    jQuery选择器类似于CSS选择器,用于选取DOM元素。它们包括: 1. 基本选择器:`$("#id")`(ID选择器)、`$(".class")`(类选择器)、`$("tag")`(标签选择器)和`$("*")`(通配符选择器)。 2. 属性选择器:`$("[attr...

    Applied jQuery: Develop and Design

    - 选择器:介绍如何使用不同的选择器来定位DOM元素。 - DOM操作:讲解如何使用jQuery修改或添加DOM元素。 - 事件处理:教授如何使用jQuery绑定事件监听器和触发事件。 - 动画效果:展示如何使用jQuery实现页面上...

    jQuery商品价格选择器

    首先,我们要理解jQuery选择器的核心概念。jQuery选择器是用于选取HTML元素的工具,它基于CSS选择器,同时添加了一些扩展,使得我们可以更高效地定位和操作DOM元素。例如,`$("#myID")`用于选取ID为"myID"的元素,`$...

    Jquery快速学(一:强悍的选择器)

    教程结构:1:强悍的选择器,2:DOM操作,3:事件和动画,4:Ajax应用。5:插件。 本教程如有不正确之处,请各位大虾多多指正。 本压缩包包含jquery最新的库,jquery文档,jquery学习文档(原创),jquery案例,...

    jquery实现颜色选择器

    2. **初始化插件**:通过 jQuery 的选择器找到需要添加颜色选择器的元素,然后调用 `.colorpicker()` 方法来初始化插件。例如: ```javascript $('#colorInput').colorpicker(); ``` 这里的 `#colorInput` 是一...

    jQuery中:input选择器用法实例

    本文实例讲述了jQuery中:input选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有的input元素。例如:&lt;input type=”text” /&gt;等等 语法结构: 代码如下:$(“:input”) 实例代码: 代码如下:...

    jquery时间选择器

    "jquery时间选择器"是基于jQuery的一个组件,旨在为用户在网页上提供一个直观且易于使用的日期和时间输入界面。这个组件使得用户能够方便地通过下拉菜单或者滑动条选择日期和时间,而不是手动输入,提高了用户体验。...

    城市选择器jquery

    jquery 城市选择器代码

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...

Global site tag (gtag.js) - Google Analytics