一.Jquery 选择器
1. 基本CSS选择器
a:匹配所有的链接(<a>)元素
#specialID:匹配id为specialID的元素
.specialClass:匹配拥有CSS类specialClass的元素
a#specialID.specialClass:匹配id为specialID,拥有CSS类specialClass的链接(<a>)元素
p a.specialClass:匹配拥有CSS类specialClass,在<p>元素内声明的链接(<a>)元素
例如:$(“p a.specialClass”)
2. 子选择器 :父节点与直接子节点以右尖括号(>)隔开
例如:
p > a :匹配作为<p>元素的直接子节点的链接,如链接被嵌套在更深一层,比如在<p>之内的<span>之内,则链接不会被选中。
3. 特性选择器
a[href ^ = http://]:匹配以http://开头的链接
form[method] :匹配拥有显式method特性的任何<form>元素
input[type = text] :匹配type特性值为text的所有<input>元素
div[title ^ = my]:匹配title特性值以my开头的<div>元素
a[href$ = .pdf]:匹配以.pdf结束的所有链接
a[href8 = jquery.com]:匹配包含jquery.com的链接
3. 容器选择器
li:has(a) :匹配包含<a>元素的所有<li>元素
jQury只支持一层嵌套.
例如:foo:not(bar:has(baz))但是不支持fon:not(bar:has(baz:eq(2)))
4. jQuery所支持的基本CSS选择器
选择器
|
描述
|
*
|
匹配任何元素
|
E
|
匹配标签名称为E的所有元素
|
E F
|
匹配标签名称为F,作为E的后代节点的所有元素
|
E>F
|
匹配标签名称为F,作为E的直接子节点的所有元素
|
E+F
|
匹配前面是邻近兄弟节点E的所有元素F(E和F紧挨着)
|
E~F
|
匹配前面是任何兄弟节点E的所有元素F(E和F不可以紧挨着)
|
E:has(F)
|
匹配标签名称为E,至少一个标签名称为F的后代节点的所有元素
|
E.C
|
匹配带有Class类C的所有元素E。.C等效于*.C
|
E#I
|
匹配id特性值为I的元素E. #I等效于*#I
|
E[A]
|
匹配带有特性A的所有元素E(不管特性A的值是什么)
|
E[A=V]
|
匹配所有元素E,其特性A的值正好是V
|
E[A^=V]
|
匹配所有元素E,其特性A的值以V开头
|
E[A$= V]
|
匹配所有元素E,其特性A的值以V结束
|
E[A*= V]
|
匹配所有元素E,其特性A的值包含V
|
5. Jquery位置选择器:根据在DOM里的位置来选择元素
选择器
|
描述
|
:first
|
页面的最先的匹配。li a:first 返回最先的、并且在列表(<li>)项下的链接
|
:last
|
页面的最后的匹配:li a:last 返回最后的、并且在列表(<li>)项下的链接
|
:first-child
|
最先的子元素.li:first-child 返回每个列表的最先项
|
:last-child
|
最后的子元素.li:last-child 返回每个列表的最后的项
|
:only- child
|
返回没有兄弟节点的所有元素
|
:nth-chld(n)
|
第n个子节点(n从1开始).li:nth-child(2)返回每个列表的第二个<li>项
|
:nth-child(even|odd)
|
偶数或奇数的子节点.li:nth-child(even)返回每个序列的偶数子节点
|
:nth-child(Xn+Y)
|
根据传入的公式计算的第n个子节点。如果y为0,则忽略y,n从0开始,且x != 0 .li: nth-child(3n)返回3的倍数的项,而li:nth-child(5n+
1)返回5的倍数的项的下一项
|
:even 或 :odd
|
页面范围内偶数或奇数的匹配元素。li:even返回全部偶数<li>项
|
:eq(n)
|
第n个匹配元素(n从0开始)
|
:gt(n)
|
第n个匹配元素(不包括)之后的元素
|
|
分享到:
相关推荐
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
JQuery选择器总结 把左右选择器总结在一张图片上,很好的查询工具
本文将对jQuery选择器进行深入的总结。 ### 1. 基本选择器 基本选择器包括ID选择器、类选择器、标签选择器和通用选择器。 - **ID选择器**: 使用`#`符号选取具有特定ID的元素,例如`$("#myID")`。 - **类选择器**:...
**jQuery选择器总结(3)** 在Web开发中,jQuery是一个强大的JavaScript库,极大地简化了DOM操作、事件处理以及动画效果。本篇文章将重点聚焦于jQuery的选择器,这是jQuery库中的核心部分,它使得我们能够高效地选取...
总结,jQuery选择器是提升JavaScript编程效率的关键工具,理解和熟练运用各种选择器可以让你在网页开发中游刃有余。通过阅读提供的源代码和PPT,你将进一步加深对jQuery选择器的理解,更好地应用于实际项目。
这篇文章将对jQuery选择器进行全面总结,帮助开发者更好地理解和运用这些工具。 首先,我们要了解基本选择器,这是jQuery选择器的基础。包括: 1. **ID选择器**: 使用`#`符号后跟元素的ID,如`jQuery("#ID")`,它...
**jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $(“#myELement”) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(“div”) 选择...
通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...
jQuery选择器是jQuery库的核心功能之一,它极大地简化了DOM操作,使得开发者能够高效地选取网页中的特定元素。本文将详细介绍jQuery中常见的选择器类型及其用法。 首先,jQuery的基本选择器包括ID选择器、标签选择...
《jQuery城市选择器详解》 在网页开发中,经常需要实现一种功能,即用户可以选择他们的所在省份和城市,这在注册、填写地址等场景中尤为常见。jQuery城市选择器就是解决这一需求的有效工具,它利用JavaScript和...
总结,jQuery城市选择器以其便捷的查询功能和良好的用户体验,成为网页开发中的得力助手。理解其工作原理和使用方法,可以帮助开发者更好地服务于用户,提升网站的可用性和满意度。在实际开发中,灵活运用并不断优化...
jQuery选择器是jQuery库中最为核心的部分之一,它们允许开发者以非常高效的方式定位和操作DOM元素。 首先,我们来详细了解一下jQuery选择器中的通配符使用方法。通配符在jQuery选择器中用于匹配元素的属性值。例如...
在JavaScript的世界里...总结来说,jQuery的动态选择器为开发者提供了强大而灵活的方式来选取和操作DOM元素,大大提升了JavaScript编程的效率。通过熟练掌握这些选择器,开发者可以更轻松地实现复杂的交互和动态效果。
总结来说,基于jQuery实现的地址选择器是前端开发中常用的一个实用工具,它简化了用户输入多级地址的流程,提高了用户界面的交互性和易用性。通过理解和掌握其工作原理及使用方法,开发者可以更好地集成到自己的项目...