jQuery 选择器的使用

超、凢脫俗 2022-08-12 19:59 229阅读 0赞

1.  $ ( " \#checkall " ) . click (
2.  function ()\{ 
3.       if ( this . checked )\{ 
4.          $ ( " input\[name='checkname'\] " ) . each ( function ()\{  this . checked = true ; \}) ;
5.       \} else \{ 
6.          $ ( " input\[name='checkname'\] " ) . each ( function ()\{  this . checked = false ; \}) ;
7.       \}
8.  \}
9.  ) ;

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\]")

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

**CSS查询器**

jQuery完全支持CSS1.3。

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

*  [CSS 1][]
 *  [CSS 2][]
 *  [CSS 3][]

下面列出来的是支持的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表达][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\]")

【例子：】

<div url="http://www.dxiajke.com"></div>  
<div url="http://www.dxiajke.com"></div>  
<div></div>  
<div url="http://www.dxiajke.com"></div>  
<div url="http://www.dxiajke.com"></div>  
 <script type="text/javascript" >  
$("div\[url\]").each(function()\{    $(this).attr("url");\});  
alert($("\*\[url\]"));  
</script>

支持的谓词，但与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)

无常翻译：[http://wuchang.cnblogs.com][http_wuchang.cnblogs.com]

[Link 1]: http://jquery.com/discuss/
[CSS 1]: http://www.w3.org/TR/REC-CSS1#basic-concepts
[CSS 2]: http://www.w3.org/TR/REC-CSS2/selector.html
[CSS 3]: http://www.w3.org/TR/2005/WD-css3-selectors-20051215/
[XPath]: http://www.w3.org/TR/xpath
[More Selectors Plugin]: http://www.softwareunity.com/sandbox/JQueryMoreSelectors/
[Mike Alsup on Custom Selectors]: http://www.malsup.com/jquery/expr/
[Patch]: http://jquery.com/dev/bugs/bug/312/
[http_wuchang.cnblogs.com]: http://wuchang.cnblogs.com/