jQuery选择器
-
jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。
1.png
2.png
3.png
4.png
5.png
jQuery还提供了一些方法帮助我们查找当前元素相关元素
JS Bin
1
2
3
4
ok
- 1..eq(index)
对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
$(".child").eq(2)
init [div.child, prevObject: init(8), context: document]
- 2..next / .prev
next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素
$(".child").eq(0).next()
init [div.child, prevObject: init(1), context: document]0: div.childcontext: documentlength: 1prevObject: init [div.child, prevObject: init(8), context: document]__proto__: Object(0)
$(".child").eq(1).prev()
init [div.child, prevObject: init(1), context: document]0: div.childcontext: documentlength: 1prevObject: init [div.child, prevObject: init(8), context: document]__proto__: Object(0)
$(".child").eq(1).prev('ok')
init [prevObject: init(1), context: document]
- 3..nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
$(".child").eq(1).prevAll('')
init [div.child, prevObject: init(1), context: document]0: div.childcontext: documentlength: 1prevObject: init [div.child, prevObject: init(8), context: document]__proto__: Object(0)
$(".child").eq(1).nextAll('')
init(3) [div.child, div.child, p.ok, prevObject: init(1), context: document]
- 4..siblings
.siblings([selectors])
获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器
$(".child").eq(1).siblings('')
init(4) [div.child, div.child, div.child, p.ok, prevObject: init(1), context: document]
- 5..parent([selector])
取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
$(".child").eq(1).parent('.nav')
init [div.nav, prevObject: init(1), context: document]
- .parents([selector])
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数\
$(".child").eq(1).parents('#header')
init [div#header, prevObject: init(1), context: document]
- 6..children / .find
.children([selector])
获得匹配元素集合中每个元素的子元素，选择器选择性筛选
$('.nav').children('.child')
init(4) [div.child, div.child, div.child, div.child, prevObject: init(1), context: document]
- .find([selector])
查找符合选择器的后代元素
$('#header').find('.child')
init(4) [div.child, div.child, div.child, div.child, prevObject: init(1), context: document, selector: "#header .child"]
- 7.filter
.filter(selector), .filter(function(index))
筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数
$('.child').filter(":even")
init(4) [div.child, div.child, div.child, div.child, prevObject: init(8), context: document]
$('.child').filter(function(index) {
return index % 3 === 0;
})
init(3) [div.child, div.child, div.child, prevObject: init(8), context: document]
- 8..has
.has(selector), .has(dom)
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
$('.nav').has("div")
init [div.nav, prevObject: init(1), context: document]
- 9..is
.is(selector), is(function(index)), is(dom/jqObj)
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
$('.nav').is(".nav")
true
范例：
- 使用 jQuery 实现 Tab 切换效果
- 使用 原生 js 实现 Tab 切换效果
function $$(select){
return document.querySelectorAll(select)
}
$$(".main .tab").forEach(function(node){
node.addEventListener('click',function(){
var index;
this.parentElement.querySelectorAll(".tab").forEach(function(e,x){
e.classList.remove('active');
if(node===e){
index=x;
}
});
this.classList.add('active');
this.parentElement.nextElementSibling.querySelectorAll(".theme").forEach(function(e){
e.classList.remove("active")
});
this.parentElement.nextElementSibling.querySelectorAll('.theme')[index].classList.add('active')
})
})
使用使用 jquery能更方便，且简化我们的代码
注意：jQuery 1.x 版本和 2.x 版本有什么区别？
- 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日);(推荐使用)；
- 2.x：不兼容ie678，较少人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 不考虑兼容性的情况下尽量用最新的版本
作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。