`
默糖糖
  • 浏览: 14971 次
  • 性别: Icon_minigender_2
  • 来自: 西安
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

JQurey选择器小结

阅读更多
一. 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 或dd 页面范围内偶数或奇数的匹配元素。li:even返回全部偶数<li>项
:eq(n) 第n个匹配元素(n从0开始)
:gt(n) 第n个匹配元素(不包括)之后的元素(n从0开始)
:lt(n) 第n个匹配元素(不包括)之前的元素(n从0开始)
6. Jquery自定义的筛选选择器
选择器 描述
:animated 选择当前处于动态控制之下的元素
:button 选择任何按钮(input[type=submit]、input[type=reset]、input[type=button])
:checkbox 只选择复选框元素(input[type=checkbox])
:checked 只选择已选中的复选框或单选按钮
:contains(foo) 只选择包含文本foo的元素
:disabled 只选择在界面上已经禁用的表单元素
:enabled 只选择在界面上已经启用的表单元素
:file 选择所有文件元素(input[type=file])
:header 只选择标题元素(<hn>,n代表数字1~6)
:hidden 只选择隐藏元素
:image 选择表单图像元素(input[type= image])
:input 只选择表单元素(<input><select><textarea><button>)
:not(file) 根据制定的筛选器进行求反
:parent 只选择拥有后代节点(包括文本)的元素,而排除空元素
:password 自选择口令元素(input[type= password])
:radio 只选择单选按钮元素
:reset 选族服务按钮元素(intpu[type=radio])
:selected 选择已经被选中的选项元素
:text 只选择文本字段元素(input[type=text])
:visible 只选择可见元素



分享到:
评论

相关推荐

    jqurey选择器练习

    首先,jQuery提供了多种基础选择器,如ID选择器(`#id`)、类选择器(`.class`)、元素选择器(`element`)以及组合选择器(如`$("#id .class")`,选取ID为id内所有类为class的元素)。这些基本选择器可以让你快速...

    jqurey使用方法总结

    写了一些jqurey的使用方法,比如给页面控件赋值,清空,获取值等书写格式。

    jqurey API

    它支持CSS1到CSS3的选择器,甚至包括一些特有的jQuery选择器,如`:first`、`:last`、`:even`、`:odd`、`:gt(index)`、`:lt(index)`等,这些选择器可以帮助开发者高效地选取DOM元素。例如,`$("div")`会选择所有的`...

    jqurey最新版本

    5. **选择器**:jQuery基于CSS选择器,支持大部分CSS3选择器,如类选择器、ID选择器、属性选择器等,还提供了如`:first`、`:last`、`:even`等特有的伪类选择器。 6. **插件生态**:jQuery拥有庞大的插件生态系统,...

    JQurey学习 Jquery特效

    通过这些选择器,开发者可以快速定位到页面上的任何元素,进行后续操作。 接下来,jQuery提供了丰富的DOM操作方法。例如,`html()`、`text()`和`val()`分别用于获取或设置元素的HTML内容、文本内容和表单字段值。`...

    jqurey例子

    这是个应用到struts2.0,freemarker,jqurey的ajax部分做的一个简单的小例子.发现jqurey是个很强大的东西.很好的封装了javascript可以更好的取元素,和做特效.我感觉应该是个算是个插件吧.应用很灵活就引入一个js...

    Jqurey&Ajax

    - **基础选择器**:jQuery的选择器类似于CSS选择器,支持基本的选择器如`#id`, `.class`, `element`等。 - **组合选择器**:可以将多个选择器组合起来使用,如`#external_links a`表示选择ID为`external_links`元素...

    jqurey学习

    jQuery还支持更复杂的选择,如属性选择器、子元素选择器等。 三、DOM操作 jQuery提供了丰富的DOM操作方法,如`$(selector).html()`用于获取或设置元素的HTML内容,`$(selector).append()`和`$(selector).prepend()`...

    常用的jQurey代码

    在示例中,使用了类选择器(.topLink、#anchor)来选取具有特定类名或ID的元素。这使得操作特定的DOM元素变得异常简单。 通过上述知识点,可以看出jQuery在简化JavaScript编程方面的巨大优势。它允许开发者利用少量...

    Jqurey 源码分析

    在分析jQuery源码时,还会遇到正则表达式的使用,例如在选择器引擎Sizzle中,正则表达式被用来解析和验证CSS选择器。这些正则表达式可以帮助优化和提升选择器的性能。 例如,一个常见的数字正则表达式用于匹配正...

    jqurey鼠标经过例子

    在本文中,我们将深入探讨jQuery中的“鼠标经过”(mouseover和mouseout)事件,以及如何利用它们来实现一些实用的交互效果。在这个特定的例子中,我们关注的是“鼠标经过显示图片”和“淘宝分类隐藏显示更多分类...

    jqurey 弹出框插件

    在实现原理上,ExfJsPopup1.4主要是通过jQuery的选择器定位到需要触发弹出的元素,然后结合CSS和JavaScript来控制弹出框的显示和隐藏。它利用jQuery的事件监听机制,当用户触发特定行为(如点击按钮)时,弹出框会...

    6小时玩转jqurey

    理解jQuery的选择器是关键,它们允许我们根据元素ID、类名、属性等快速选取页面中的特定元素。 2. **DOM操作**:jQuery提供了简单易用的方法来操作DOM(文档对象模型)。这包括添加、删除和修改HTML元素。例如,`....

    HTML+CSS + Jqurey 导航网

    ...通常,我们会使用`&lt;nav&gt;`标签来定义导航区域,`&lt;ul&gt;`和`&lt;li&gt;`来组织菜单项,而`&lt;a&gt;`标签则用来定义可点击的链接。... 接下来,CSS(Cascading Style Sheets)用于控制网页的外观和布局。在导航网的设计中,CSS发挥着...

    jqurey-1.2.6

    1. **选择器**:jQuery借鉴了CSS的选择器语法,使得通过JavaScript选取DOM元素变得非常直观。例如,`$("#id")`用于选取ID为"id"的元素,`$(".class")`则选取所有class为"class"的元素。 2. **链式操作**:jQuery...

    jqurey 插件-很好的树和tab效果

    这里提到的"jqurey 插件-很好的树和tab效果"是针对jQuery的一些特定插件,旨在增强网站的用户体验,提供美观且功能丰富的树形视图和选项卡组件。 1. **simpleTree**:这是一个jQuery插件,用于创建可折叠的树状结构...

    jqurey源码+jquery中文参考手册

    阅读jQuery源码可以帮助你理解其内部的工作机制,例如事件委托、选择器引擎Sizzle、优化的DOM操作和性能提升策略等。源码中包含了许多优秀的编程实践,如模块化设计、代码的可读性和可维护性,对于提高你的...

    jqurey手机版触屏滑动效果

    如果不想使用整个jQuery Mobile框架,也可以仅依赖jQuery核心库,通过添加自定义的触屏事件监听器来实现滑动效果。 以下是一些关键的jQuery方法和事件,用于实现触屏滑动: 1. `swipe` 和 `swipeleft` / `...

    jquery层次选择器的介绍

    jquery层次选择器 jquery层次选择器,包括空格、&gt;、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 &gt;表示获取一级子元素 3、next函数获取紧接在之后的同辈...

Global site tag (gtag.js) - Google Analytics