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
