jQuery选择器
-
jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。
1.png
2.png
3.png
4.png
5.png
jQuery还提供了一些方法帮助我们查找当前元素相关元素
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="header">
<div class="nav">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<p class="ok">ok</p>
</div>
</div>
<div class="main">
<div class="content">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<p class="ok">ok</p>
</div>
</body>
</html>
- 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 切换效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<title></title>
<style>
*{
box-sizing: border-box;
}
.main{
margin-top: 50px;
}
.main .header:after{
content: '';
display: block;
clear: both;
}
.main .header .tab{
float: left;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px 20px;
background-color: #dddddd;
cursor: pointer;
}
.main .header .tab:last-child{
border-right: 1px solid #ccc;
}
.main .header .tab.active{
background-color: #fff;
}
.main .content{
border: 1px solid #ccc;
background-color: #fff;
height: 200px;
width: 400px;
}
.main .theme{
display: none;
background-color: #fff;
padding: 100px;
}
.main .theme.active{
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<div class="tab active">1</div>
<div class="tab ">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
</div>
<div class="content">
<div class="theme active">one</div>
<div class="theme ">two</div>
<div class="theme">three</div>
<div class="theme">four</div>
</div>
</div>
<script>
$(".main .tab").on('click',function(){
console.log(this);
$(this).addClass('active')
.siblings()
.removeClass('active')
$(this).parents('.main')
.find('.theme')
.eq($(this).index())
.addClass('active')
.siblings()
.removeClass('active')
})
</script>
</body>
</html>
- 使用 原生 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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
