JQuery的引用
本地文件引入：
內(nèi)容分布式網(wǎng)絡(luò)CDN
//非壓縮版
開發(fā)
//壓縮版
正式發(fā)布
JQuery源碼分析
http://www.cnblogs.com/aaronjs/p/3279314.html
如何判斷是否真正的引入了JQuery
輸入 $.fn.jquery
輸出 "3.2.1"
JQuery的官網(wǎng)https://jquery.com
JQuery的使用
$相當(dāng)于jQuery，是jquery的別名
$ === jQuery;
JQuery相當(dāng)于構(gòu)造函數(shù)
$()是jQuery()的簡寫 類數(shù)組帶有額外方法
$(string)
$('.footer'); //將類名為footer的元素轉(zhuǎn)為jQuery對象(相當(dāng)于selector)
$('
$(dom element)
//獲取所有段落元素DOM
var paragraphs = document.getElementByTagName('p');
var $paragraphs = $(paragraphs); //將DOM轉(zhuǎn)換為jQuery對象
//使用eq，get，索引
var $firstParagraph = $paragraphs.eq(0); //jQuery對象
var firstParagraph = $paragraphs[0]; //DOM
var secondParagraph = $paragraphs.get(1); //DOM
JQuery選擇器
jQuery選擇器 —>CSS選擇器
(鏈接coding.imweb.io/demo/p4/jquery-selector.html)
JQuery選擇器分為3大類
1.基本選擇器
$(tag) 按標(biāo)簽選擇 例:$('div');//查找div標(biāo)簽
$(.class) 按類名選擇 例:$('.footer');//查找類名為footer的元素
$(#id) 按標(biāo)簽id選擇 例:$('#cat-tab');//查找標(biāo)簽id為cat-tab的元素
$() 匹配所有元素 例$('');//查找所有元素
2.組合選擇器
$(selector1,selector2) 多元素選擇器 例：$('div.p');
$(selector1 selector2) 后代元素選擇器 例：$('.footer p');
$(selector1 > selector2) 子元素選擇器 例：$('.footer > p');
$(selector1 + selector2) 毗鄰元素選擇器 例：$('.footer + p');
3.其他選擇器
$(selector:first-child) 選取第一個子元素 例：$('.footer:first-child');
$(selector:last-child) 選取最后一個子元素 例：$('.footer:last-child');
$(selector:eq(index)) 選取集合中第index個元素 例：$('.item:eq(2)');
$(attribute=value) 選取屬性值為value的元素 例：$('[value=2]');
遍歷DOM
// 獲取父元素(一個)
$('#me').parent();
// 獲取所有父元素和祖先元素(多個)
$('#me').parents();
// 使用.eq()函數(shù)獲取相應(yīng)元素
$('#me').parents().eq(0); //獲取爸爸
$('#me').parents().eq(1); //獲取爺爺
//使用.parents(selector)來精確查找
$('#me'),parents('.fat');
$('#me').parents('.oldest');
//獲取所有的兄弟元素
$('#me').siblings(); 多個
//使用.siblings(selector)來精確查找
$('#me'),siblings('.tall');
目標(biāo)換為爺爺
//使用.children()獲取子元素
$('#grandPa').children();
// 使用.find('')獲取所有子孫元素
$('#grandPa').find('');
//使用.find(selector)精準獲取子孫元素(前提是該子孫有,youngest選擇器)
$('#grandPa').find('.youngest');
最常見的6種選擇器
.parent()
.parents()
.eq()
.siblings()
.children()
.find()
(鏈接coding.imweb.io/demo/p4/query-traversal.html)
添加和移除DOM元素
append/appendTo 在被選元素的結(jié)尾插入內(nèi)容(元素內(nèi))
prepend/prependTo 在被選元素的開頭插入內(nèi)容(元素內(nèi))
after/inserAfter 在被選元素之后插入內(nèi)容(元素外)
before/inserBefore 在被選元素之前插入內(nèi)容(元素外)
想把自己的后代干掉
$('#father').empty()
想把自己以及后代都干掉
$('#father').remove()
使用方法
$(document.body).append('
$('h2').eq(0).after('
增加一個ul來顯示操作系統(tǒng)，類似于js的實現(xiàn)
$(document .body).append('
jQuery事件監(jiān)聽
1.觸發(fā)事件的目標(biāo)元素
2.觸發(fā)的事件名稱
3.事件觸發(fā)時的回調(diào)
4.事件對象
點擊按鈕改變背景顏色為×××
$('#traget').on('click',function(event) {
console.log('target'); //被點擊了
$('body' ).css('background','#ff0');
});
$('#target')事件目標(biāo)元素
on 事件監(jiān)聽函數(shù)
'click' 監(jiān)聽的事件名稱
整個function() 事件觸發(fā)執(zhí)行的回調(diào)callback
event jQuery事件對象
jQuery事件對象—>封裝原生事件對象(并且做了瀏覽器兼容，增加好用的屬性和方法)
例：
$('a')on('click',function(event){
console.log(event.target);//獲取觸發(fā)事件的元素
event.preventDefault(); //阻止默認事件
event.stopPropagation(); //阻止事件冒泡
});
和下面的效果是一樣的
$('a').on('click',function(event){
console.log(event.target); //獲取觸發(fā)事件的元素
return false; //既阻止默認事件，且阻止事件冒泡
});
點擊按鈕修改背景顏色
$('#button').on('click',function(event){
$('section').css('backgroundColor',yellow);
});
使用 jQuery 編寫一個事件監(jiān)聽器，需要完成以下要求：
觸發(fā)事件的目標(biāo)元素為 #target
監(jiān)聽的是一個 click 事件
當(dāng)事件觸發(fā)時，需要增加類名 disabled 到目標(biāo)元素上
$('#target').on('click', function() {
$(this).addClass('disabled');
});
toggleClass('classname') 對設(shè)置或移除被選元素的一個或多個類進行切換
事件的委托
事件委托就是利用時間冒泡，只指定一個時間處理程序，就可以管理某一類型的所有事件。
事件委托是利用事件的冒泡原理來實現(xiàn)的，何為事件冒泡呢？就是事件從最深的節(jié)點開始，然后逐步向上傳播事件，舉個例子：頁面上有這么一個節(jié)點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div，有這樣一個機制，那么我們給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發(fā)，這就是事件委托，委托它們父級代為執(zhí)行事件。
一般來說我們要給某個元素綁定事件，都會直接綁定在該元素上，如下：
// 給 li 元素綁定點擊事件
$('li').click(function() {
console.log('你點擊我了');
})
但是這種直接的處理會有以下問題：
——通過 JS 新添加的 li 元素并沒有該事件綁定，所以點擊無效
——元素如果比較多的話，比喻有200個 li ，那每個 li 都綁定一個事件，性能是非常低的
那么如何解決這些問題呢？這就是我們要說的事件委托（或叫事件代理）。
事件委托簡單來說就是利用事件冒泡，只指定一個事件處理程序，用來管理某一類型的所有事件。
以一個 todo list 為例：
// 要點擊的元素是 todo-item// 但是我們把事件綁定在父元素 todo-list 上，實現(xiàn)事件委托// html 結(jié)構(gòu)為：ul#todo-list>li.todo-item*5
$('#todo-list').on('click', '.todo-item', function() {
$(this).toggleClass('done');
})
以 jQuery 為例，所以我們看不到背后的本質(zhì)，下面我們以一個原生的實現(xiàn)來說明下：
var todoList = document.getElementById("todo-list");
todoList.addEventListener("click", function (e) {
var target = e.target;
// 檢查事件源 target 是否為 todo-item
if (target && target.nodeName.toUpperCase() == 'LI' && target.classList.contains('todo-item')) {
target.classList.toggle('done')
} else {
console.log('我不是 todo-item ');
}
});
注：因為事件委托是依賴于事件冒泡的，所以沒有事件冒泡的事件是不能使用事件委托的。
適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
