JQuery HTML DOM遍历和选择器

JQuery HTML DOM 遍历和选择器

JQuery 的功能很强大，可以包装任何一个 HTML DOM 元素添加强大的功能，那么如何找到需要的元素呢？这就需要 JQuery Selector 来帮慢，原理上讲， JQuery Selector 可以超找到 HTML DOM 里的任何元素

 

JQuery Selector 主要包含三个方面的实现： CSS 方式， XPath 方式，和 JQuery 自定义的方式。

为了逐个讲解这些 Selector ，首先给大家一些基本的例子：

 

隐藏所有包含链接（ a ）的段（ p ）：

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

 

显示一个页面的第一个段（ p ）：

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

 

将所有显示（ visible=true ）的 div 隐藏：

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

 

所有无须列表（ ul ）的项目（ li ）：

$("ul/li")

或者 $("ul > li") */

获得所有 class 类型为 foo ，并且包含链接（ a ）的段：

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

 

获得所有字符内容包含 Register 的项目（ li ）

$("li[a:contains('Register')]");

 

得到 name=bar 的输入项目的值：

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

 

获得所有被选中的 button ：

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

 

CSS 方式

JQuery 的 CSS 方式的 Selector 支持 CSS1-CSS3 标准。

 

与 CSS 中的实现完全一致的：

*

         任何的元素

E

         任何类型为 E 的元素

E:nth-child(n)

         E 元素的第 n 个子元素

E:first-child

         E 的第一个子元素

E:last-child

         E 的最后一个元素

E:only-child

         E 的唯一的子元素

E:empty

         E 没有子元素，也不能包含 text 内容

E:enabled

         E 类型的 UI 元素，并且不是 disabled 的

E:disabled

         E 类型的 UI 元素，并且是 disabled 的

E:checked

         E 类型的 UI 元素（ radio 或者 checkbox ），并且是 checked 的

E:selected

         E 类型的 UI 元素（ option ），并且是选中的（虽然 CSS 中没有支持， JQuery 支持）

E.warning

         Class = warning 的元素（ dot （ . ） 表示 class ）

E#myid

         Id=myid 的元素，最多有一个元素被选中。

E:not(s)

         E 类型的元素，但是与简单 selector   s 不匹配

E F

         E 类型的 F 类型的后代元素

E > F

         E 类型的 F 类型的子元素（ F 在 E 之内）

E + F

         F 类型紧跟着 E 类型（ F 在 E 之后，并且紧挨着）

E ~ F

         F 类型前面连着 E 类型（ F 在 E 之后，不一定紧挨着）

E,F,G

         E ， F ， G 所有类型的元素

 

与 CSS 中实现稍有不同的：

E[@foo]

         包含属性 foo 的 E 类型的元素

E[@foo=bar]

         包含属性 foo ，并且属性 foo 的值为 bar 的 E 类型的元素

E[@foo^=bar]

         包含属性 foo ，并且 foo 的值以 bar 开始的 E 类型的元素

E[@foo$=bar]

         包含属性 foo ，并且 foo 的值以 bar 结尾的 E 类型的元素

E[@foo*=bar]

         包含属性 foo ，并且 foo 的值包含 bar 的 E 类型的元素

E[@foo=bar][@baz=bop]

         属性 foo 值为 bar ，属性 baz 值为 bop 的 E 类型的元素。

 

XPath 方式

 

位置路径

    在 HTML DOM 中查找：

                  $("/html/body//p")

                  $("body//p")

                  $("p/../div")

         在当前上下文中查找：

  $("p/*", this)

                  $("/p//a", this)

 

坐标位置

         子孙节点有一个子孙节点：

  $("//div//p")

         子孙节点有一个子节点：

  $("//div/p")

 

         $("//div ~ form")

$("//div/../p")

 

预言

$("//input[@checked]")

$("//a[@ref='nofollow']")

$("//div[p]")

         $("//div[p/a]")

 

[last()] or [position()=last()] becomes :last

 

         $("p:last")

 

    [0] or [position()=0] becomes :eq(0) or :first

 

$("p:first")

$("p:eq(0)")

 

    [position() < 5] becomes :lt(5)

$("p:lt(5)")

[position() > 2] becomes :gt(2)

$("p:gt(2)")

 

JQuery 自定义的 Selector

:even

         偶数节点选择

:odd

         奇数节点选择

:eq(n) and :nth(n)

         第 n 个元素

:gt(N)

         排序比 N 大的元素

:lt(N)

         排序比 N 小的元素

:first

与 :eq(0) 相同

:last

         最后一个元素

:parent

         包含子元素（文本内容也算）的节点

:contains('test')

         包含 test 文本内容的节点

:visible

         所有显示的元素

:hidden

         所有隐藏的内容

 

例如：

$("p:first").css("fontWeight","bold");

$("div:hidden").show();

$("/div:contains('test')", this).hide();

        

JQueyy 操作 HTML 属性和 CSS

        

JQUery 事件

JQuery 动画效果

JQuery Ajax

JQuery 插件

         JQuery Thickbox plugin

         JQuery Form Plugin

         JQuery Tab Plugin

         JQuery Context Menu Plugin

         JQuery Short Key Plugin

         JQuery Inplace Plugin