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