`
烟的傀儡
  • 浏览: 27660 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jquery选择器总结

阅读更多

一.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个匹配元素(不包括)之后的元素

分享到:
评论
3 楼 xbyy123 2011-06-30  
      
2 楼 烟的傀儡 2011-06-01  
嘿什么时候给排版整好嘞哈哈!
1 楼 烟的傀儡 2011-05-28  
怎么有点问题了那?

相关推荐

    jQuery选择器总结

    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。

    JQuery选择器总结

    JQuery选择器总结 把左右选择器总结在一张图片上,很好的查询工具

    Jquery选择器总结

    本文将对jQuery选择器进行深入的总结。 ### 1. 基本选择器 基本选择器包括ID选择器、类选择器、标签选择器和通用选择器。 - **ID选择器**: 使用`#`符号选取具有特定ID的元素,例如`$("#myID")`。 - **类选择器**:...

    JQuery选择器总结(3)

    **jQuery选择器总结(3)** 在Web开发中,jQuery是一个强大的JavaScript库,极大地简化了DOM操作、事件处理以及动画效果。本篇文章将重点聚焦于jQuery的选择器,这是jQuery库中的核心部分,它使得我们能够高效地选取...

    jQuery选择器基础知识

    总结,jQuery选择器是提升JavaScript编程效率的关键工具,理解和熟练运用各种选择器可以让你在网页开发中游刃有余。通过阅读提供的源代码和PPT,你将进一步加深对jQuery选择器的理解,更好地应用于实际项目。

    jQuery选择器全面总结

    这篇文章将对jQuery选择器进行全面总结,帮助开发者更好地理解和运用这些工具。 首先,我们要了解基本选择器,这是jQuery选择器的基础。包括: 1. **ID选择器**: 使用`#`符号后跟元素的ID,如`jQuery("#ID")`,它...

    jQuery颜色选择器ColorPicker

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

    jQuery选择器总结之常用元素查找方法

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $(“#myELement”) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(“div”) 选择...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    常用jQuery选择器总结

    jQuery选择器是jQuery库的核心功能之一,它极大地简化了DOM操作,使得开发者能够高效地选取网页中的特定元素。本文将详细介绍jQuery中常见的选择器类型及其用法。 首先,jQuery的基本选择器包括ID选择器、标签选择...

    jquery 城市选择器

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

    jquery城市选择器

    总结,jQuery城市选择器以其便捷的查询功能和良好的用户体验,成为网页开发中的得力助手。理解其工作原理和使用方法,可以帮助开发者更好地服务于用户,提升网站的可用性和满意度。在实际开发中,灵活运用并不断优化...

    jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结

    jQuery选择器是jQuery库中最为核心的部分之一,它们允许开发者以非常高效的方式定位和操作DOM元素。 首先,我们来详细了解一下jQuery选择器中的通配符使用方法。通配符在jQuery选择器中用于匹配元素的属性值。例如...

    jquery 动态选择器

    在JavaScript的世界里...总结来说,jQuery的动态选择器为开发者提供了强大而灵活的方式来选取和操作DOM元素,大大提升了JavaScript编程的效率。通过熟练掌握这些选择器,开发者可以更轻松地实现复杂的交互和动态效果。

    基于jquery实现的地址选择器

    总结来说,基于jQuery实现的地址选择器是前端开发中常用的一个实用工具,它简化了用户输入多级地址的流程,提高了用户界面的交互性和易用性。通过理解和掌握其工作原理及使用方法,开发者可以更好地集成到自己的项目...

Global site tag (gtag.js) - Google Analytics