jq取第一个子元素为select_jQuery选择器

JQuery

什么是jQuery

jQuery是一个快速，小巧，功能丰富的JavaScript库。 它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。 通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

为什么要使用jQuery

DOM API

难用

存在兼容性问题

功能太少，不能与时俱进

jQuery

兼容性好

API友好

功能强大，与时俱进

什么时候使用jquery

DOM操作较多

简单的Ajax

需要多款浏览器兼容

什么时候不用jquery

页面交互简单

页面对流量又苛刻的要求

上级要求

jQueryAPI库存

jquery选择器详解

.eq(index),.get([index])

$('div').eq(3);结果集中的第四个jQuery对象

兄弟元素获取

.next([selector]),.prev([selector])

next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器的时候，才会返回此元素。prev正好相反，获取之前的同辈元素

sibling

获得所有元素的邻居

父子元素获取

.parent([selector])

获得匹配元素几集合中，每个元素的父亲，可以提供一个可选择的选择器

.parents([selector])

.children([selector])

.find([selector])

筛选当前结果集合

.first()

获取当前集合的第一个对象

.last()

获取当前结果集的最后一个对象

.filter(selector),.filter(function(index))

筛选当前结果集重符合条件的对象，参数可以是一个选择器或者是一个函数

.not(selector),not(function(index))

从匹配的元素集合中一处指定的元素，和filter相反

.is(selector),is(function(index)),is(dom/jqObj)

判断当前匹配的元素集合中的元素，是否是一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配固定的参数，那么返回true

.has(selector),.has(dom)

匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$

选择的不是原声js对象，而是经过jQuery对象选择的

.完之后又可以再.

这是一个链式的调用

jQuey实现tab切换

removeClass

里面的()内容不可以加.

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

介绍 jQuery 常见的选择器，以及以下 api 的用法，给出范例

.eq

.next / .prev

.nextAll / .prevAll

.siblings

.parent / .parents

.children / .find

.filter

.has

.is

1

1

2 hello

3

4

ok

使用 jQuery 实现 Tab 切换效果

Document

.mod-tab .header .tab {

float: left;

border-left: 1px solid #ccc;

border-top: 1px solid #ccc;

background: #ddd;

padding: 5px 20px;

cursor: pointer;

}

.mod-tab .header:after{

content: '';

display: block;

clear: both;

}

.mod-tab .header .tab.active{

background: #fff;

}

.mod-tab .header .tab:last-child{

border-right: 1px solid #ccc;

}

.mod-tab .content {

border: 1px solid #ccc;

width: 300px;

height: 200px;

background: #fff;

}

.mod-tab .panel {

padding: 30px;

background: #fff;

display: none;

}

.mod-tab .panel.active{

display: block;

}

1

2

3

4

panel1

panel2

panel3

panel4

1

2

3

4

panel1

panel2

panel3

panel4

$('.mod-tab .tab').on('click',function(){

$(this).addClass('active')

.siblings()

.removeClass('active')

console.log($(this).index())

$(this).parents('.mod-tab')

.find('.panel')

.eq($(this).index())

.addClass('active')

.siblings()

.removeClass('active')

})

使用 原生 js 实现 Tab 切换效果

Document

.mod-tab .header .tab {

float: left;

border-left: 1px solid #ccc;

border-top: 1px solid #ccc;

background: #ddd;

padding: 5px 20px;

cursor: pointer;

}

.mod-tab .header:after{

content: '';

display: block;

clear: both;

}

.mod-tab .header .tab.active{

background: #fff;

}

.mod-tab .header .tab:last-child{

border-right: 1px solid #ccc;

}

.mod-tab .content {

border: 1px solid #ccc;

width: 300px;

height: 200px;

background: #fff;

}

.mod-tab .panel {

padding: 30px;

background: #fff;

display: none;

}

.mod-tab .panel.active{

display: block;

}

1

2

3

4

panel1

panel2

panel3

panel4

1

2

3

4

panel1

panel2

panel3

panel4

// $('.mod-tab .tab').on('click',function(){

// $(this).addClass('active')

// .siblings()

// .removeClass('active')

// console.log($(this).index())

// $(this).parents('.mod-tab')

// .find('.panel')

// .eq($(this).index())

// .addClass('active')

// .siblings()

// .removeClass('active')

// })

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

})

})

标签：jQuery,index,元素,header,tab,active,选择器,mod

来源： https://blog.csdn.net/KaisonYi/article/details/89737504