jQuery 是 Javascript 的一個(gè)庫，官方網(wǎng)站是 jQuery 蚂会。
jQuery 的好處：
- 兼容性好
- API 友好
- 需要兼容多款瀏覽器
什么時(shí)候用 jQuery
- DOM 操作較多
- 簡(jiǎn)單的AJXA
- 需要兼容多款瀏覽器
什么時(shí)候不用 jQuery
- 頁面交互加大
- 頁面對(duì)流量有苛刻的要求
- 團(tuán)隊(duì)已經(jīng)有 jQuery 代替品
jQuery 版本問題
1.x 和 2.x問題淋样，1.x兼容性更好，2.x性能更好胁住，兼容性相對(duì)較差趁猴。
jQuery 的兩種API
$.noConflict()
$.each()
$('ul').addClass();
$('p').text('h1')
jQuery 選擇器
引入 jQuery
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
常見的 jQuery 選擇器，與 CSS3 選擇器類似
基本選擇器
$('*') 匹配所有元素
$('#id') 匹配 id 選擇器
$('.class') 匹配類選擇器
$('element') 匹配元素選擇器.eq
指定 index 的 jQuery 對(duì)象
$('div').eq(2) // index 為 2 的 div 元素
- .next / .prev
前一個(gè)或者下一個(gè)元素
$('.panel').next() // 第一個(gè)類名為 panel 的下一個(gè)元素
$('.panel').prev() // 第一個(gè)類名為 panel 的上一個(gè)元素
- .nextAll / .prevAll
nextAll獲得每個(gè)匹配元素集合中每個(gè)元素所有后面的同輩元素彪见，選擇性篩選的選擇器儡司，prevAll與之相反，獲取元素前面的同輩元素
$('.panel').nextAll() // 類名為 panel 的所有后面的同輩元素
$('.panel').prevAll() // 類名為 panel 的所有前面的同輩元素
- .siblings
獲得匹配元素中的所有兄弟元素余指，可以二次篩選
$('.panel').siblings('.active') // 類名為 panel 的兄弟元素中類名為 active 的元素
- .parent / .parents
取得匹配元素集合中捕犬，每個(gè)元素的父元素，可以提供一個(gè)可選的選擇器酵镜；
獲得集合中每個(gè)匹配元素的祖先元素碉碉，可以提供一個(gè)可選的選擇器作為參數(shù)
$('li.item').parent() // li 元素中類名為 item 的元素的父元素
$('li.item').parents() // li 元素中類名為 item 的元素的所有祖先元素
- .children / .find
獲得匹配元素集合中每個(gè)元素的子元素，選擇器選擇性篩選
查找符合選擇器的后代元素
$('ul.level-2').children() // 類名為 level-2 的 ul 元素的子元素
$('ul').find('li.current'); // ul 元素后代中類名為 current 的 li 元素
- .filter
篩選當(dāng)前結(jié)果集中符合條件的對(duì)象淮韭，參數(shù)可以是一個(gè)選擇器或者一個(gè)函數(shù)
$('div.tab').fliter('.active') // 類名為 tab 的 div 元素中具有 active 類的元素
.has
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素
$('.content').has('.active') // 類名為 content 的元素中具有 active 類的元素
- .is
判斷當(dāng)前匹配的元素集合中的元素垢粮，是否為一個(gè)選擇器，DOM元素靠粪，或者jQuery對(duì)象蜡吧，如果這些元素至少一個(gè)匹配給定的參數(shù)，那么返回true
if ( $target.is("li") ) {
$target.css("background-color", "red");
} // 如果選擇的 target 對(duì)象是 li 元素庇配，則修改 CSS斩跌。
用jQuery實(shí)現(xiàn)一個(gè) tab 切換
首先畫四個(gè) tab ，分別是 1捞慌，2耀鸦，3，4.每個(gè)對(duì)應(yīng)一個(gè) panel，one,two,three, four,點(diǎn)擊不同的tab時(shí)袖订，tab會(huì)有被點(diǎn)擊的反饋氮帐，相應(yīng)的英文單詞也會(huì)改變。
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');
}
