JQ学习(二):选择器

介绍

通过选择器,你可以指定一系列符合规则的元素来变成什么样式或者进行什么操作.选择器使用的好坏是检验JQ使用好坏的一个基础.

基础选择器1

 1.ID选择器:#yourId

2.元素选择器:element

3.类选择器:.yourClassName

层级选择器

1.父元素 后代元素

2.父元素 > 子元素

3.前元素+后面紧跟的同辈元素

4.前元素+同辈元素

基本选择器2

1.:first 第一个元素

2.:last 最后一个元素

3.:not(条件) 去除满足条件的元素

4.:even 奇元素

5.:odd 偶元素

6.:eq(索引) 取一个索引处的元素,从0计数

7.:gt(索引) 取所有大于索引的元素,从0计数

8.:lt(索引) 取所有小于索引的元素,从0计数

9.:header 取标题元素h1,h2...

10.:animated 取正在执行动画效果的元素

内容选择器

1.:contains("内容") 取包含给定内容的元素

2.:empty 取所有不包含子元素或者是空文本的元素

3.:has(元素) 取所有包含指定元素的元素

4.:parent 取所有包含子元素或者有文本的元素

可见性选择器

1.:hidden 匹配所有的隐藏元素或者input type为hidden的元素

2.:visible 匹配所有的可见元素

属性选择器

1.[attr] 匹配包含指定属性的元素

2.[attr=value] 匹配指定属性,指定属性值的元素

3.[attr!=value] 匹配指定属性不为指定属性值的元素

4.[attr^=value] 匹配指定属性的开头为指定属性值的元素

5.[attr$=value] 匹配指定属性的结尾为指定属性值的元素

6.[attr*=value] 匹配指定属性的属性值中含有value的元素

子元素选择器

1.:nth-child(索引) 取每个父元素下的第索引个元素,当然索引也可以为even,odd,3n,代表着取奇数,取偶数,取3的倍数

2.:first-child 取第一个子元素

3.:last-child 取最后一个子元素

4.:only-child 取元素为其父元素的唯一子元素的元素

表单选择器

1.:input 匹配所有的input,textarea,select,button元素

2.:text 匹配所有的单行文本框,以下类似

3.:password

4.:radio

5.:checkbox

6.:submit

7.:image

8.:reset

9.:file

10:button 匹配所有的input type为button 或 button标签元素

表单属性选择器:注意仅限表单

1.:enabled 匹配所有可用元素

2.:disabled 匹配所有不可用元素

3.:checked 匹配所有被选中元素,不包含option

4.:selected 匹配所有被选中的option元素