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')