jQuery 选择器

jQuery 1.x 版本和 2.x 版本有什么区别

• 2.x版本不在支持IE6\7\8，如果在IE9/10版本中使用“兼容性视图”模式也将会受到影响。
• jQuery2.x的体积减少12%

jQuery 常见的选择器

jQuery选择器返回的是一个jQuery类数组的封装对象。

jQuery对象

• 基本选择器

$('#id')  //  id选择器。
$('div') //  标签选择器，
$('.class') // 类选择器，
$('*') // 选取文档中所有的元素

• 组合选择器

$('div,ul') // 多元素选择器，同时匹配多个元素
$('div ul') // 后代选择器，匹配div元素中后代元素ul
$('div>ul') // 子元素选择器，匹配div元素中素有的子元素ul
$('div+ul') // 直接相邻选择器，匹配div元素之后的直接相邻的同级元素ul
$('div~ul') // 普通相邻先选择器，匹配div元素之后的同级元素ul
$('.class1.class2') // 匹配同时包含class1和class2的元素

• 基本过滤选择器

$('div:first') // 选择页面中所有div中第一
$('div:last') // 选择页面中所欲div中的最后一个
$('div:not(:empty)') //选择页面中不为空的div，括号内为选择器可以填#id,.class等
$('div:even') // 所有div中index是偶数的div
$('div:odd') // 所有div中index是奇数的div
$('div:eq(n)') //所有div中index为n的div
$('div:agt(n)') // 所有div中index大于n的元素
$('div:lt(n)') //所有div中index小雨n的元素
$(':header') // 选择好h1~h6元素
$('div:animated') // 选择正在执行动画效果的元素

• 内容过滤器

$('div:contains(text)') // 内容中包含text的div元素
$('div:empty') //所有 内容为空的元素
$('div:has(ul)') //子元素中有ul的div元素
$('div:parent') // 所有不为空的div元素

• 可视化选择器

$('div:hidden') // 所有被隐藏的div
$('div:visible') //所有可见的div

• 属性过滤选择器

$('div[attr]') // 含有属性attr的div元素
$('div[attr=value]') //属性attr=value的元素
$('div[attr!=value]') //属性attr!=value的元素
$('div[attr^=value]') //属性attr以value开头的div
$('div[attr$=value]') //属性attr以value结尾的div
$('div[attr \*=value]') // 属性attr包含value的div

• 子元素过滤器

$('ul li:nth-child(n)') //ul中第n个li子节点
$('ul li:nth-child(3n+1)') //ul中index符合3n+1的li节点
$('ul li:nth-child(even)') // ul中index为偶数的li子元素
$('ul li:nth-child(odd)') // ul中index为奇数的li子元素
$(‘ul li:first-child’) //ul中第一个li子节点
$('ul li:last-child') //ul中最后一个li子节点
$('ul li:only-child') //ul中只包含一个li元素的ul中的li

• 表单元素选择器

$('input:text') // 含有中type=text的input
$(':checked') //被选中的radio/checkbox/option

选择相关的函数

• .eq(index)，.get([index])

$('div').eq(2) // 获取结果中index为2的jQuery对象
$('div').get(2) //获取结果中index为2的jQuery对象后转化为DOM对象,get()中不写入参数则把所有jQuery对象转换为DOM对象

• .next([selector])，.prev([selectro])

$('div').next() //返回每个div紧邻的后面的同辈元素。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。
$('div').prev() // 返回每个div紧邻的前面的同辈元素。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。

• .nextAll([selector]), .prevAll([selector])

$('div').nextAll() //获得每个div元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素

• .siblings([selector])

$('div').siblings() // 获得每个div元素的兄弟元素。

• .parent([selector])

$('li').parent() //获取每个li的父元素

• .parents([selector])

$('li').parents([selector]) // 获取每个li元素的祖先元素

• .children([selector])

$('ul').children() // 获得每个ul元素的子元素

• .find([selector])

$('ul').find('li.active') // 查找每个子元素中 class为active的li子元素

• .first()

$('div').first(); //获取所有div元素中的第一个

• .last()

$('div').last() //获取所有div元素中最后一个

• .filter(selector), .filter(function(index))

\\筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('li').filter(':even')

$('li').filter(function(index) {
  return index % 3 == 2;
})

• .not(selector), .not(function(index))

\\从匹配的元素集合中移除指定的元素，和filter相反

• .is(String/Element/jQuery/Function类型)

is()函数实际上是判断当前jQuery对象所匹配的元素与指定表达式expr所表示的元素是否存在交集，如果存在交集就返回true，否则返回false。
如果expr参数为字符串，则将其视作jQuery选择器，用以表示该选择器所匹配的元素。
如果expr参数为函数，is()函数将根据匹配的所有元素遍历执行该函数，函数中的this将指向当前迭代的元素。is()还会为函数传入一个参数：即该元素在匹配元素中的索引。
函数expr的返回值应该为true或者false。该函数的返回值将决定is()的返回值。循环执行时，只要该函数的返回值有一次为true，is()函数就立即返回true，否则返回false。

• .has(selector), .has(dom)
  筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('li').has('span')