选择器

例子

例子描述

CSS

.class

.intro

选择 class="intro" 的所有元素。

1

#id

#firstname

选择 id="firstname" 的所有元素。

1

*

*

选择所有元素。

2

element

p

选择所有

元素。

1

element,element

p,p

选择所有 元素和所有

元素。

1

element element

p p

选择 元素内部的所有

元素。

1

element>element

p>p

选择父元素为 元素的所有

元素。

2

element+element

p+p

选择紧接在 元素之后的所有

元素。

2

[attribute]

[target]

选择带有 target 属性所有元素。

2

[attribute=value]

[target=_blank]

选择 target="_blank" 的所有元素。

2

[attribute~=value]

[title~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

2

[attribute|=value]

[lang|=en]

选择 lang 属性值以 "en" 开头的所有元素。

2

:link

a:link

选择所有未被访问的链接。

1

:visited

a:visited

选择所有已被访问的链接。

1

:active

a:active

选择活动链接。

1

:hover

a:hover

选择鼠标指针位于其上的链接。

1

:focus

input:focus

选择获得焦点的 input 元素。

2

:first-letter

p:first-letter

选择每个

元素的首字母。

1

:first-line

p:first-line

选择每个

元素的首行。

1

:first-child

p:first-child

选择属于父元素的第一个子元素的每个

元素。

2

:before

p:before

在每个

元素的内容之前插入内容。

2

:after

p:after

在每个

元素的内容之后插入内容。

2

:lang(language)

p:lang(it)

选择带有以 "it" 开头的 lang 属性值的每个

元素。

2

element1~element2

p~ul

选择前面有

元素的每个

元素。

3

[attribute^=value]

a[src^="https"]

选择其 src 属性值以 "https" 开头的每个 元素。

3

[attribute$=value]

a[src$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有 元素。

3

[attribute*=value]

a[src*="abc"]

选择其 src 属性中包含 "abc" 子串的每个 元素。

3

:first-of-type

p:first-of-type

选择属于其父元素的首个

元素的每个

元素。

3

:last-of-type

p:last-of-type

选择属于其父元素的最后

元素的每个

元素。

3

:only-of-type

p:only-of-type

选择属于其父元素唯一的

元素的每个

元素。

3

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个

元素。

3

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个

元素。

3

:nth-last-child(n)

p:nth-last-child(2)

同上，从最后一个子元素开始计数。

3

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个

元素的每个

元素。

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上，但是从最后一个子元素开始计数。

3

:last-child

p:last-child

选择属于其父元素最后一个子元素每个

元素。

3

:root

:root

选择文档的根元素。

3

:empty

p:empty

选择没有子元素的每个

元素（包括文本节点）。

3

:target

#news:target

选择当前活动的 #news 元素。

3

:enabled

input:enabled

选择每个启用的 元素。

3

:disabled

input:disabled

选择每个禁用的 元素

3

:checked

input:checked

选择每个被选中的 元素。

3

:not(selector)

:not(p)

选择非

元素的每个元素。

3

::selection

::selection

选择被用户选取的元素部分。

3

选择器

实例

选取

*

$("*")

所有元素

#id

$("#lastname")

id="lastname" 的元素

.class

$(".intro")

所有 class="intro" 的元素

element

$("p")

所有

元素

.class.class

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

:first

$("p:first")

第一个

元素

:last

$("p:last")

最后一个

元素

:even

$("tr:even")

所有偶数

:odd

$("tr:odd")

所有奇数

:eq(index)

$("ul li:eq(3)")

列表中的第四个元素（index 从 0 开始）

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不为空的 input 元素

:header

$(":header")

所有标题元素

-

:animated

所有动画元素

:contains(text)

$(":contains('W3School')")

包含指定字符串的所有元素

:empty

$(":empty")

无子（元素）节点的所有元素

:hidden

$("p:hidden")

所有隐藏的

元素

:visible

$("table:visible")

所有可见的表格

s1,s2,s3

$("th,td,.intro")

所有带有匹配选择的元素

[attribute]

$("[href]")

所有带有 href 属性的元素

[attribute=value]

$("[href='#']")

所有 href 属性的值等于 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 属性的值不等于 "#" 的元素

[attribute$=value]

$("[href$='.jpg']")

所有 href 属性的值包含以 ".jpg" 结尾的元素

:input

$(":input")

所有 元素

:text

$(":text")

所有 type="text" 的 元素

:password

$(":password")

所有 type="password" 的 元素

:radio

$(":radio")

所有 type="radio" 的 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 元素

:submit

$(":submit")

所有 type="submit" 的 元素

:reset

$(":reset")

所有 type="reset" 的 元素

:button

$(":button")

所有 type="button" 的 元素

:image

$(":image")

所有 type="image" 的 元素

:file

$(":file")

所有 type="file" 的 元素

:enabled

$(":enabled")

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被选取的 input 元素

:checked

$(":checked")

所有被选中的 input 元素

CSS 属性

描述

css()

设置或返回匹配元素的样式属性。

height()

设置或返回匹配元素的高度。

offset()

返回第一个匹配元素相对于文档的位置。

offsetParent()

返回最近的定位祖先元素。

position()

返回第一个匹配元素相对于父元素的位置。

scrollLeft()

设置或返回匹配元素相对滚动条左侧的偏移。

scrollTop()

设置或返回匹配元素相对滚动条顶部的偏移。

width()

设置或返回匹配元素的宽度。

方法

描述

addClass()

向匹配的元素添加指定的类名。

after()

在匹配的元素之后插入内容。

append()

向匹配元素集合中的每个元素结尾插入由参数指定的内容。

appendTo()

向目标结尾插入匹配元素集合中的每个元素。

attr()

设置或返回匹配元素的属性和值。

before()

在每个匹配的元素之前插入内容。

clone()

创建匹配元素集合的副本。

detach()

从 DOM 中移除匹配元素集合。

empty()

删除匹配的元素集合中所有的子节点。

hasClass()

检查匹配的元素是否拥有指定的类。

html()

设置或返回匹配的元素集合中的 HTML 内容。

insertAfter()

把匹配的元素插入到另一个指定的元素集合的后面。

insertBefore()

把匹配的元素插入到另一个指定的元素集合的前面。

prepend()

向匹配元素集合中的每个元素开头插入由参数指定的内容。

prependTo()

向目标开头插入匹配元素集合中的每个元素。

remove()

移除所有匹配的元素。

removeAttr()

从所有匹配的元素中移除指定的属性。

removeClass()

从所有匹配的元素中删除全部或者指定的类。

replaceAll()

用匹配的元素替换所有匹配到的元素。

replaceWith()

用新内容替换匹配的元素。

text()

设置或返回匹配元素的内容。

toggleClass()

从匹配的元素中添加或删除一个类。

unwrap()

移除并替换指定元素的父元素。

val()

设置或返回匹配元素的值。

wrap()

把匹配的元素用指定的内容或元素包裹起来。

wrapAll()

把所有匹配的元素用指定的内容或元素包裹起来。

wrapinner()

将每一个匹配的元素的子内容用指定的内容或元素包裹起来。