jQuery 选择器的使用

关注

转载最新推荐文章于 2026-05-09 10:01:59 发布 728 阅读 AI 写同款· GEO 优化 ›

jQuery和CSS选择器的使用 replaceWith()的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素，$("p").css({"属性1":"值1","属性2":"值2"....});replaceAll()的作用和replaceWith()相同，只是颠倒了，语法：$(selector).removeClass("class");"jQuery对象"替换节点：replaceWith()和replaceAll()$("p").css("属性1","值1"); 阅读详情

jQuery的选择器是CSS 1-3，XPath的结合物。jQuery提取这二种查询语言最好的部分，融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS（绝大部分WEB开发者都用到的），那么你学起来就很容易了。

同时使用CSS和XPath

看几个例子：

隐藏所有包含有链接的段落：

$("p[a]").hide();

显示页面的第一个段落：

$("p:eq(0)").show();

隐藏所有当前可见的层元素：

$("div:visible").hide();

获取所有无序列表的列表项：

$("ul/li")

/* valid too: $("ul > li") */

取得name值为bar的输入字段的值：

$("input[@name=bar]").val();

所有处于选中状态的单选r按钮：

$("input[@type=radio][@checked]")

如果你对查询语言的工作原理还有疑问，可以订阅这里的邮件列表。

CSS查询器

jQuery完全支持CSS1.3。

关于CSS的一些资料查看下面的连接：

下面列出来的是支持的CSS查询器的列表式语法：

* 任何元素
E 类型为E的元素
E:root 类型为E，并且是文档的根元素
E:nth-child(n) 是其父元素的第n个类型为E的子元素
E:first-child 是其父元素的第1个类型为E的子元素
E:last-child 是其父元素的最后一个类型为E的子元素
E:only-child 且是其父元素的唯一一个类型为E的子元素
E:empty 没有子元素（包括text节点）的类型为E的元素
E:enabled
E:disabled 类型为E，允许或被禁止的用户界面元素
E:checked 类型为E，处于选中状态的用户界面元素（例如单选按钮或复选框）
E.warning 类型为E，且class属性值为warning
E#myid 类型为E，ID为 "myid"。（至多匹配一个元素）
E:not(s) 类型为E，不匹配选择器s
E F 在类型E后面的类型为F的元素
E > F 为E元素子元素的F元素
E + F an F element immediately preceded by an E element
E ~ F an F element preceded by an E element

不同之处

所有的属性选择器都被写成和XPath极其相似（因为所有的属性都以@符号开始）。

E[@foo] 拥有foo属性的E元素
E[@foo=bar] foo属性的值为bar的E元素
E[@foo^=bar] foo属性的值以字符串"bar"开始的E元素
E[@foo$=bar] foo属性的值以字符串"bar"结尾的E元素
E[@foo*=bar] foo属性的值包含有字符串"bar"结尾的E元素

不支持的部分

E:link
E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
E:active
E:hover
E:focus an E element during certain user actions
E:target an E element being the target of the referring URI
E::first-line the first formatted line of an E element
E::first-letter the first formatted letter of an E element
E::selection the portion of an E element that is currently selected/highlighted by the user
E::before generated content before an E element
E::after generated content after an E element

jQuery不支持下列的选择器，因为这些没什么用处。

E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
E:nth-of-type(n) an E element, the n-th sibling of its type
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
E:first-of-type an E element, first sibling of its type
E:last-of-type an E element, last sibling of its type
E:only-of-type an E element, only sibling of its type
E:lang(fr) an element of type E in language "fr"

XPath 查询器

XPath是jQuery内置支持的一种表达式语言。jQuery支持基本的XPath表达式。

定位路径

绝对路径
$("/html/body//p")
$("/*/body//p")
$("//p/../div")
相对路径
$("a",this)
$("p/a",this)

支持的Axis选择器

Descendant Element has a descendant element

 $("//div//p")

Child Element has a child element

 $("//div/p")

Preceding Sibling Element has an element before it, on the same axes

 $("//div ~ form")

Parent Selects the parent element of the element

 $("//div/../p")
支持的谓词

[@*] 拥有一个属性
$("//div[@*]")
[@foo] 拥有foo属性
$("//input[@checked]")
[@foo='test'] 属性foo值为'test'
$("//a[@ref='nofollow']")
[Nodelist] Element contains a node list, for example:
$("//div[p]")
$("//div[p/a]")

支持的谓词，但与XPath和CSS又不同的

[last()] or [position()=last()]改为:last
$("p:last")
[0] or [position()=0] 改为 :eq(0) or :first
$("p:first")
$("p:eq(0)")
[position() < 5] 改为:lt(5)
$("p:lt(5)")
[position() > 2] 改为:gt(2)
$("p:gt(2)")

定制的选择器

jQuery包含一些在CSS和XPath都不用到的表达式，但我们觉得它们使用起来非常方便，所以包含进来了。

下列的列表式语法基于不同的CSS选择器，但又有非常相似的名字。

:even 从匹配的元素集中取序数为偶数的元素
:odd 从匹配的元素集中取序数为奇数的元素
:eq(0) and :nth(0) 从匹配的元素集中取第0个元素
:gt(4) 从匹配的元素集中取序数大于N的元素
:lt(4) 从匹配的元素集中取序数小于N的元素
:first 相当于 :eq(0)
:last 最后一个匹配的元素
:parent 选择包含子元素（包含text节点）的所有元素
:contains('test') 选择所有含有指定文本的元素
:visible 选择所有可见的元素（display值为block 或者visible 、visibility 值为visible的元素，不包括hide域）
:hidden 选择所有隐藏的元素(非Hide域，且display值为block 或者visible 、visibility 值为visible的元素)

例：

 $("p:first").css("fontWeight","bold");
$("div:hidden").show();
$("div:contains('test')").hide();

表单选择器
这是为表单提供的一些选择器：

:input 选择表单元素（input, select, textarea, button）
:text 选择所有文本域(type="text")
:password 选择所有密码域(type="password").
:radio 选择所有单选按钮(type="radio").
:checkbox 选择所有复选框(type="checkbox").
:submit 选择所有提交按钮(type="submit").
:image 选择所有图像域 (type="image").
:reset 选择所有清除域(type="reset").
:button 选择所有按钮(type="button").

同样也可以使用:hidden，详细说明上面已经介绍过。

$('#myForm :input')

如果你需要指定表单：

$('input:radio', myForm)

这将选择myForm表单中所有单选按钮。选择radio通常是用[@type=radio]，但是这样用理精简些。

更多的选择器

jQuery选择器可以用一些第三方部件进行扩充：

More Selectors Plugin
Mike Alsup on Custom Selectors
Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)

标签

#jquery #css #input #hyperlink #button

【jQuery】第四课——掌握jQuery选择器的使用，会使用jQuery选择器获取元素知识点：了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素，比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用，了解使用jQuery选择器的注意事项。页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处... 阅读详情

jQuery 选择器的使用

相关推荐