By anjia

更新日期:

文章目录
  1. 1. 基础选择器
  2. 2. 属性选择器
  3. 3. 基础过滤
  4. 4. 层级
  5. 5. 子元素过滤
  6. 6. 表单
  7. 7. 内容过滤
  8. 8. 可见性过滤
  9. 9. jQuery扩展
  10. 10. 参考

基础选择器

1
2
3
4
5
6
7
$('*')    //通配符
	
$('.class')
$('#id')
$('tag')
	
$('selector1, selector2, selector2')  //多个选择器

属性选择器

首先，在 jQuery 中使用属性选择器（attribute selector）不用考虑浏览器的兼容性问题。
再次，选择器表达式中的属性值必须符合 W3C 的 CSS 选择器的规定。
最后，括号包裹时注意，可以这么组合：单双、双单、单单（转义）、双双（转义）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('a[href]')   //拥有指定属性，属性可以是任何值
	
$('input[name="id"]')   //属性等于给定值
$('input[name!="id"]')   //属性不定与给定值 or 不存在指定属性
	
$('input[class|="item"]')   //属性等于给定值 or 以它为前缀(后跟连字符-)的元素
	
$('input[class^="item"]')   //属性以给定值开始的元素
$('input[class$="item"]')   //属性以给定值结尾的元素 (区分大小写)
	
$('input[class*="item"]')   //属性包含指定子串的元素 【字符串的包含】 eg. class="list-item"
$('input[class~="item"]')   //用空格分隔的值中包含这指定子串 【空格分隔的，包含完整的一个】 eg. class="item name"
	
$('a[href][name="more"]')   //多个属性选择器的并集

jQuery 中的属性选择器和 CSS 中的属性选择器，有相似之处，但不完全相同。点击查看 CSS中的属性选择器。

基础过滤

此处，举例说明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//可放心用~
$('tr:not()')    //排除法，去除选择器匹配到的
$('input:focus')  //当前获取焦点的元素
	
//位置类 [扩展的]
$('li:first')  //仅一个
$('li:last')   //仅一个
$('tr:even')
$('tr:odd')
	
//索引值相关的选择器 [扩展的]  0->
$('td:eq(2)')    //延伸的。所以建议用 $().eq(1) 替代以提高性能
$('td:lt(2)')    //小于指定索引
$('td:gt(2)')    //大于指定索引
		
//其他
$(':target')      //如果文档的URI包含一个格式化的标识符，或hash（哈希） 这个不寻常的用法
$(':root')      //选择该文档的根元素，永远是<html>元素
$(':lang()')
	
$('div:animated') //[扩展的]
$(':header')    //所有标题元素

层级

1
2
3
4
$('ul.list>li') //直接子，<
$('ul li')      //所有后代--包括子&子子孙孙等，空格
$('lable+input')  //同父，与lable相邻的input【相邻兄弟 +】
$('lable~input')  //同父，跟随lable的所有同级input

关键嘛，就在于区分这4个就ok了。
1.直接子 <
2.子子孙孙 空格
3.兄弟 ~
4.相邻兄弟 +

子元素过滤

1
2
3
4
5
6
7
//较常用的	
$(':first-child')   //父元素的第一个子 【~~太惊悚了--子子孙孙无穷匮也的选择呀！！~~】
$(':last-child')    //父元素的最后一个子
$(':nth-child(1)')  //父元素的第n个子，1->
	
//eg.
$('ul:first-child')  //意思是：选取ul元素，且它是父的第一个子

jQuery 实现的 nth- 是严格遵守 CSS 规范的，下标从1开始。对于其他的选择器 eg. :eq() :even 则是遵循 JS 中的“0索引”技术。

1
2
3
4
5
6
7
8
9
10
11
//更多详情，可点击“参考”里的链接
:only-child    //选择是独生子的元素
:only-of-type  //没有兄弟的元素，且元素名称相同
	
:first-of-type
:last-of-type
	
:nth-last-child()
:nth-last-of-type()
:nth-of-type() //同一个父，且标签名字相同 的 第n个子元素
// jQuery 1.9 新增的选择器，它是遵循 CSS3 中结构性伪类选择符 :nth-of-type(n)

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:input  //选择所有 input, textarea, select 和 button 元素.
	
//--按类型来 【简写-语法糖，么么哒】
:text
:button //所有按钮元素和类型为按钮的元素
:password
:file
:radio
:checkbox
:reset
:submit
:image
	
//--按属性来：选中 【这个用的较多】
:checked   //被勾选的，radio和checkbox
:selected  //被选中的，select中的
	
//--按属性来：普通 4
:disabled //被禁用
:enabled  //未被禁用，可用的
:focus  //当前获取焦点的

内容过滤

1
2
3
4
5
6
:contains()   //包含指定文本的元素
	
:empty    //没有子的元素（包括文本节点）
:parent   //有子or文本的父元素 
	
:has()   // 至少包含指定选择器匹配的一种元素

可见性过滤

1
2
:hidden   //所有隐藏的元素
:visible  //所有可见的元素

什么是“可见元素”？即占据文档中的一定空间就ok了。
所以，可见元素不包括display:none，不包括 width=0 height=0
所以，visibility:hidden; opacity:0 是可见的（因为他们依然占位）

什么是“隐藏的元素”？包括以下这几种情况：
1.display:none
2.type=hidden 的表单元素
3.height=0 width=0
4.祖先元素是隐藏的

jQuery扩展

jQuery 扩展出来的选择器，并不是的 CSS 规范的一部分，使用它并不能充分利用原生 DOM 提供的 querySelectorAll() 方法来提高性能。为了现代浏览器上获得更佳的性能，都不建议使用。来看看都有谁，25个。

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
//这2个，用的挺多
[name!="value"]  //属性不存在 or 值不等于。 等同于 .not([attr=value])
:selected        //针对select选中的项。等同于 .find('select option').filter(':selected')
	
//9个，基础过滤...
:first  //等同于 :eq(0) 只能匹配一个单独元素。而 :first-child可以匹配多个（多个父的各自的第一个子）。可以用 .filter(':first')
:last   //似上
:even   //建议 .filter(':even')
:odd    //建议 .filter(':odd')
:eq()   //建议用 .eq(0)
:gt()   //建议 .slice(index)
:lt()   //建议 .slice(0,index)
	
:header   
:animated
	
//4个，不怎么用的
:parent //内容过滤
:has()  //内容过滤
	
:hidden  //可见性
:visible //可见性
		
//10个，表单类型类，建议直接用 'input[type=""]'
:input
:text
:password
:radio
:checkbox
:button
:file
:image
:submit
:reset

参考

http://www.jquery123.com/category/selectors/

文章目录
  1. 1. 基础选择器
  2. 2. 属性选择器
  3. 3. 基础过滤
  4. 4. 层级
  5. 5. 子元素过滤
  6. 6. 表单
  7. 7. 内容过滤
  8. 8. 可见性过滤
  9. 9. jQuery扩展
  10. 10. 参考