月亮代表我的心

个人博客,跟月亮无关,跟代表无关,无关谁的心

笔记:jQuery选择器

jQuery选择器分为基本选择器、层次选择器、过滤选择器(其中包括基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器)、表单选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<strong>基本选择器</strong>

//选择id为one的元素
$('#one')
//选择class为mini的所有元素
$('.mini')
//选择元素名是div的所有元素
$('div')
//选择所有的元素
$('*')
//选择所有的span元素和id为two的元素
$('span,#two')

<strong>层次选择器</strong>

//选择body内的所有div元素
$('body div')
//选择body内的元素名是div的子元素
$('body > div')
//选择所有class为one的下一个div元素
$('.one + div')
//选择id为two的元素后面的所有div兄弟元素
$('#two ~ div')

<strong>基本过滤选择器</strong>

//选择第一个div元素
$('div:first')
//选择最后一个div元素
$('div:last')
//选择class不为one的所有div元素
$('div:not(.one)')
//选择索引值为偶数的div元素
$('div:even')
//选择 索引值为奇数的div元素
$('div:odd')
//选择索引等于3的元素,索引从0开始
$('div:eq(3)')
//选择索引大于3的元素
$('div:gt(3)')
//选择索引小于3的元素
$('div:lt(3)')
//选择所有的标题元素,比如h1, h2, h3
$(':header')
//选择当前正在执行动画的所有元素
$(':animated')

<strong>内容过滤选择器</strong>

//选取含有文本"di"的div元素
$('div:contains(di)')
//选取不包含子元素(或者文本元素)的div空元素
$('div:empty')
//选取含有class为mini元素的div元素
$('div:has(.mini)')
//选取含有子元素(或者文本元素)的div元素
$('div:parent')

<strong>可见性过滤选择器</strong>

//选取所有不可见的元素,包括<input type="hidden"/>
$('body :hidden')
//选取所有可见的元素
$('div:visible')

<strong>属性过滤选择器</strong>

//选取含有属性title的div元素
$('div[title]')
//选取属性title值等于test的div元素
$('div[title=test]')
//选取属性title值不等于test的div元素
$('div[title!=test]')
//选取属性title值以te开始的div元素
$('div[title^=te]')
//选取属性title值以est结束 的div元素
$("div[title$=est]")
//选取属性title值含有es的div元素
$("div[title*=es]")
//组合属性选择器,首先选取有属性id的div元素,然后在结果中选取属性title值含有es的元素
$("div[id][title*=es]")

<strong>子元素过滤选择器</strong>

//选取每个父元素下的第2个子元素,索引从1开始
$('div.one :nth-child(2)')
//选取每个父元素下的第一个子元素
$('div.one :first-child')
//选取每个父元素下的最后一个子元素
$('div.one :last-child')
//如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$('div.one 冒号only-child')

<strong>表单对象属性过滤选择器</strong>

//选择表单内可用input元素
$("#form1 input:enabled")
//选择表单内不可用input元素
$("#form1 input:disabled")
//选择表单内被选中的元素
$("#form1 input:checked")
$("#form1 select:selected")

<strong>表单选择器</strong>

//选择表单内所有的input/textarea/select/button元素
$("#form1 :input")
//选择表单内所有的单行文本框元素
$("#form1 :text")
//其他表单选择器
$("#form1 :password")
$("#form1 :radio")
$("#form1 :checkbox")
$("#form1 :submit")
$("#form1 :image")
$("#form1 :reset")
$("#form1 :button")
$("#form1 :file")
$("#form1 :hidden")

<strong>选择器中含有空格的注意事项</strong>

//选取class为test的元素内的隐藏元素
$('.test :hidden')//带空格
//选取隐藏的class为test的元素
$('.test:hidden')//不带空格
点赞
  1. 小黄说道:

    你也开始玩这个了。。。

  2. 七七说道:

    嗯,关注了解,顶一个!

  3. Frantic说道:

    原来是做note用滴

  4. 阎栋博客说道:

    完全看不懂,哈哈。

  5. 博主吃饱了撑着。怎么可以拿出这么好的东西跟大家分享呢。?哈哈。

发表评论

电子邮件地址不会被公开。 必填项已用*标注