jQuery 是 Javascript 的一个库，官方网站是 jQuery 。
jQuery 的好处：
- 兼容性好
- API 友好
- 需要兼容多款浏览器
什么时候用 jQuery
- DOM 操作较多
- 简单的AJXA
- 需要兼容多款浏览器
什么时候不用 jQuery
- 页面交互加大
- 页面对流量有苛刻的要求
- 团队已经有 jQuery 代替品
jQuery 版本问题
1.x 和 2.x问题，1.x兼容性更好，2.x性能更好，兼容性相对较差。
jQuery 的两种API
$.noConflict()
$.each()
$('ul').addClass();
$('p').text('h1')
jQuery 选择器
引入 jQuery
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
常见的 jQuery 选择器，与 CSS3 选择器类似
基本选择器
$('*') 匹配所有元素
$('#id') 匹配 id 选择器
$('.class') 匹配类选择器
$('element') 匹配元素选择器.eq
指定 index 的 jQuery 对象
$('div').eq(2) // index 为 2 的 div 元素
- .next / .prev
前一个或者下一个元素
$('.panel').next() // 第一个类名为 panel 的下一个元素
$('.panel').prev() // 第一个类名为 panel 的上一个元素
- .nextAll / .prevAll
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
$('.panel').nextAll() // 类名为 panel 的所有后面的同辈元素
$('.panel').prevAll() // 类名为 panel 的所有前面的同辈元素
- .siblings
获得匹配元素中的所有兄弟元素，可以二次筛选
$('.panel').siblings('.active') // 类名为 panel 的兄弟元素中类名为 active 的元素
- .parent / .parents
取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器；
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
$('li.item').parent() // li 元素中类名为 item 的元素的父元素
$('li.item').parents() // li 元素中类名为 item 的元素的所有祖先元素
- .children / .find
获得匹配元素集合中每个元素的子元素，选择器选择性筛选
查找符合选择器的后代元素
$('ul.level-2').children() // 类名为 level-2 的 ul 元素的子元素
$('ul').find('li.current'); // ul 元素后代中类名为 current 的 li 元素
- .filter
筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数
$('div.tab').fliter('.active') // 类名为 tab 的 div 元素中具有 active 类的元素
.has
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
$('.content').has('.active') // 类名为 content 的元素中具有 active 类的元素
- .is
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
if ( $target.is("li") ) {
$target.css("background-color", "red");
} // 如果选择的 target 对象是 li 元素，则修改 CSS。
用jQuery实现一个 tab 切换
首先画四个 tab ，分别是 1，2，3，4.每个对应一个 panel，one,two,three, four,点击不同的tab时，tab会有被点击的反馈，相应的英文单词也会改变。
html , CSS 如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab change</title>
<style>
.clear:after {
content:'';
clear:both;
display:block;
}
.tab {
float:left;
background: #ccc;
padding: 5px 30px;
border-left:1px solid #aaa;
border-top:1px solid #aaa;
}
.tab:last-child {
border-right:1px solid #aaa;
}
.tab:hover {
cursor: pointer;
}
.header .active {
background: #fff;
}
.content {
margin-bottom: 50px;
}
.panel {
display: none;
width:70%;
border:1px #ccc solid;
background: #fff;
padding: 50px 20px;
}
.panel.active {
display: block;
}
</style>
</head>
<body>
<div class="mod-tab">
<div class="header clear">
<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="panel active">one</div>
<div class="panel">two</div>
<div class="panel">three</div>
<div class="panel">four</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</body>
</html>
jQuery 如下
$('.mod-tab .tab').on('click', function() {
// tab change
$(this).siblings().removeClass('active');
$(this).addClass('active');
// panel change
$(this).parents('.mod-tab').find('.panel')
.eq($(this).index()).addClass('active')
.siblings().removeClass('active');
});
原生 JS 如下
document.querySelector('.header').addEventListener('click', function(e){
var tabItem = document.querySelector('.active');
var contentItem = document.querySelector('.content');
var currentIndex = 0;
// tab change
if(tabItem.classList.contains('tab')){
tabItem.classList.remove('active');
e.target.classList.add('active');
}
// panel change
if(e.target.classList.contains('tab')){
for(var i=0;i<this.children.length;i++){
if(this.children[i] === e.target)
currentIndex = i;
}
document.querySelectorAll('.active')[1].classList.remove('active');
contentItem.children[currentIndex].classList.add('active');
}
