您的位置:首页 > Web前端 > JQuery

jQuery的选择器

2016-02-20 20:08 477 查看
1、例子:$("div",$("#id"))这种为选择id为id的元素中所有的div元素。$("div",$("#id"));
2、专一和保留字符,如果要使用# &

, .+ * ~ ' !
:^ [ ]()=>|/等字符的话需要用两个反斜杠进行转移,而不是像是js中使用一个反斜杠进行转义。
3、掌握jquery选择器:

以下为jQuery支持的CSS选择符:
*匹配任何HTML元素;
E
选择元素E;
E F
悬着E后代的F元素;
E>F选择E的子元素F;
E+F选择跟在E元素后面的兄弟元素;
E~F选择E元素后的兄弟元素,
直到出现另一个E元素
E,F,G
选择任何EFG元素;
E.bar等同于E[class~=bar"]
E#myid
选择id是myid的元素;
E:first-child选择元素E为其父节点的第一个节点;
E:last-child
选择元素E,并且E是其父节点的最后一个节点;
E:nth-child(n)查找E,并且E是其父元素的第n个子节点;
E:only-child
查找E,并且E是其父节点的唯一的子节点;
E:empty
查找E,并且E没有子节点。
E:enabled
查找E并且E必须处于激活状态。
E:disable
查找E并且E处于没有被激活状态。
E:checked
查找E并且E处于别选中状态
E:not(s)
查找任何的E,但是必须不可以匹配选择符s;
E:[foo]
选择E,E必须有foo这个属性;
E[foo~="bar"]选择E,E属性foo中可以包含空字符串,但是字符串中两个空白之间必须包含bar字符串。
E[foo|="bar"]选择E,foo属性值要么是bar要么以bar开头的字符;
E[foo="bar"]查找E,其有foo属性并且其属性为bar;
E[foo^="bar"]
查找E,并且foo属性值以bar开始;
E[foo$="bar"]查找E,并且其foo属性以bar结尾;
E[foo*="bar"]查找E,并且foo属性中中包含bar字符串;

以下为jqeuery
不支持的CSS选择符:
E:link
或者E:visiited查找E如果E用来定义一个超链接,那么就可以用来设置范文过的(:link)和已经访问过的(:visited)超链接来定义样式。

E:active
E:hover E:focus
查找E,必须为特定的用户行为。
E:target
查找E,并且E是引用URI的目标。
E::first-line
查找E的第一行
E::first-letter查找E的第一个字符
E::selection
查找E被用户选择和突出显示,该选择付在2009年被CSS3草案中删除了。
E::before
查找E之前动态生成的内容;
E::after
查找E之后动态生成的内容;
E:nth-last-child(n)查找E,的第n个子元素,重最后一个开始反向计算;
E:nth-of-type(n)查找E的同辈中的第n个元素;
E:nth-last-of-type(n)查找同辈中第n个元素,反向开始查找。
E:first-of-type
查找E同辈元素中的第一个元素;
E:last-of-type
查找E同辈元素中最后一个元素;
E:only-of-type
查找E,同辈集合中仅包含一个元素时;
E:lang(c)查找使用c所指定任何语言的HTML元素E;
E:root
匹配HTML文档的根元素

以下为jQuery中扩展的选择器,CSS中没有定义:
E[foo!="bar"]查找E,要么E没有可执行的属性foo要么其foo属性不是bar;
E[foo=“bar”][foo2="bar2"]
查找E,其有foo属性为bar并且有foo2属性为bar2,选择符可以是任意数量的[foo="bar"]形式的。
E:animated
查找任意正在执行动画效果的HTML元素。
:button匹配任何的HTML元素button和type属性值为button的input元素;
:checkbox匹配任何的input元素,该元素的type属性值为button的input元素;
E:contains(str)选择任何自定文本的HTML元素E,在CSS3草案中出现过,但是在正式建议中被删除了;
E:eq(index)
匹配任何给定索引值index的HTML元素E;
E:even
匹配任何索引值为偶数的HTML元素E,从0开始计数。
:file
匹配任何input元素,该元素的typ属性值为file;

E:first
匹配找到的第一个HTML元素E;
E:gt(index)匹配任何一个索引大于给定索引值index的HTML元素。
E:has(s)
匹配任何含有选择器s的元素E;
:header
匹配任何标题元素,如:h1,h2,h3等。
E:hidden
匹配任何不可视的HTML元素E;
:image匹配任何input元素,该元素的type属性值为image;
:input匹配任何表单控件元素包括input、textarea、select和butto等。
E:last选择最后一个匹配的E元素;
E:lt(index)匹配任何一个索引小于给定index的HTML元素E;
E:odd匹配索引值为奇数的元素E;
E:patent
匹配含有子节点的任何元素E,文本节点也被是为子节点。
:parent
匹配任何input元素,该元素的type属性值为password;
:radio同上,
:reset
同上;
E:selected匹配人额好HTML元素E该元素option,被选中。
:submit匹配任何input的button元素,type属性值为submit;
:text匹配任何的input元素,该元素的type属性值为text;
E:visible匹配任何可视的HTML元素E;

4、基本选择器的使用

可以使用("div~p).css("background-color","green");设置样式;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: