一、選擇器
二、選擇器的用法
1、.eq(index),.get([index])
對於一個特定結果集,我們想獲取到指定index的jQuery對象
$('div').eq(3); //獲取結果集中的第四個jQuery對象
通過類數組下標的獲取方式或者get方法獲取指定index的DOM對象,也就是我們說的jQuery對象轉DOM對象
$('div')[2] //獲取第三個dom對象
$('div').get(2) // //獲取第三個dom對象
get()不寫參數把所有對象轉爲DOM對象返回
2、.next([selector]), .prev([selector])
next取得匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。如果提供一個選擇器,那麼只有緊跟着的兄弟元素滿足選擇器時,纔會返回此元素。
prev正好相反,獲取元素之前的同輩元素
$('.child').eq(1).next().addClass('ddd')
$('.child').eq(1).prev().addClass('ddd')
3、.nextAll([selector]), .prevAll([selector])
nextAll獲得每個匹配元素集合中每個元素所有後面的同輩元素,選擇性篩選的選擇器,prevAll與之相反,獲取元素前面的同輩元素
$('.child').eq(5).prevAll().removeClass('ddd')
$('.child').eq(1).nextAll().addClass('ddd')
4、.siblings([selectors])
獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器
$('div').siblings('div')
5、.parent([selector])
取得匹配元素集合中,每個元素的直接父元素,可以提供一個可選的選擇器
$('li.item-a').parent()
6、.parents([selector])
獲得集合中每個匹配元素的祖先元素,可以提供一個可選的選擇器作爲參數
$('.child').parents('.container')
7、.children([selector])
獲得匹配元素集合中每個元素的子元素,選擇器選擇性篩選
8、.find([selector])
查找符合選擇器的後代元素
$('ul').find('li.current');
9、.filter(selector), .filter(function(index))
篩選當前結果集中符合條件的對象,參數可以是一個選擇器或者一個函數
$('li').filter(':even')
$('li').filter(function(index) {
return index % 3 == 2;
})
10、.has(selector), .has(dom)
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的後代元素
$('li').has('span')
11、.is(selector), is(function(index)), is(dom/jqObj)
判斷當前匹配的元素集合中的元素,是否爲一個選擇器,DOM元素,或者jQuery對象,如果這些元素至少一個匹配給定的參數,那麼返回true
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
二、實現tab切換
使用 jQuery 實現 Tab 切換效果
使用 原生 js 實現 Tab 切換效果
document.querySelectorAll('.mod-tab .tab').forEach(function(node){
node.addEventListener('click',function(){
var index
this.parentElement.querySelectorAll('.tab').forEach(function(tab,idx){
tab.classList.remove('active')
if(node === tab){
index=idx
}
})
this.classList.add('active')
this.parentElement.nextElementSibling.querySelectorAll('.panel').forEach(function(panel){
panel.classList.remove('active')
})
this.parentElement.nextElementSibling.querySelectorAll('.panel')[index].classList.add('active')
})
})
$('.mod-tab .tab').on('click',function(e){
// console.log($(this))
$(this).addClass('active')
.siblings().removeClass('active')
console.log($(this).index())
$(this).parents('.mod-tab')
.find('.panel')
.eq($(this).index())
.addClass('active')
.siblings()
.removeClass('active')
})