jQuery选择器 和用jQuery 实现 Tab 切换效果（1）
jQuery选择器 和用jQuery 实现 Tab 切换效果（1）
一、选择器
二、选择器的用法
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')
})腾讯云开发者
