搜索:
首页 >> JavaScript >> Js高级编程 >> jQuery 选择器的使用

jQuery 选择器的使用

2008-1-21 作者:无常 来源:无常的blog 投递文章

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

相关文章推荐:jQuery中文入门教程

同时使用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)

1   2 下一页 尾 页
Tags:jquery  选择器  XPath 
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号