學習JQuery，這篇檔案即可入門

標籤：冒泡   dde   事件監聽   color   class   預設   代理   按鈕   val   

JQuery的引用
本地檔案引入：
<script src=‘js/jquery.min.js‘></script>

內容分布式網路CDN
//非壓縮版
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 開發
//壓縮版
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 正式發布

JQuery源碼分析
http://www.cnblogs.com/aaronjs/p/3279314.html

如何判斷是否真正的引入了JQuery
輸入 $.fn.jquery
輸出 "3.2.1"

JQuery的官網https://jquery.com

JQuery的使用
$相當於jQuery，是jquery的別名
$ === jQuery;
JQuery相當於建構函式

$()是jQuery()的簡寫 類數組帶有額外方法

$(string)
$(‘.footer‘); //將類名為footer的元素轉為jQuery對象(相當於selector)
$(‘<div></div>‘); //產生一個div的jQuery對象(相當於html text)

$(dom element)
//擷取所有段落元素DOM
var paragraphs = document.getElementByTagName(‘p‘);
var $paragraphs = $(paragraphs); //將DOM轉換為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) 按標籤選擇 例:$(‘div‘);//尋找div標籤
$(.class) 按類名選擇 例:$(‘.footer‘);//尋找類名為footer的元素
$(#id) 按標籤id選擇 例:$(‘#cat-tab‘);//尋找標籤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()函數擷取相應元素
$(‘#me‘).parents().eq(0); //擷取爸爸
$(‘#me‘).parents().eq(1); //擷取爺爺

//使用.parents(selector)來精確尋找
$(‘#me‘),parents(‘.fat‘);
$(‘#me‘).parents(‘.oldest‘);

//擷取所有的兄弟元素
$(‘#me‘).siblings(); 多個

//使用.siblings(selector)來精確尋找
$(‘#me‘),siblings(‘.tall‘);

目標換為爺爺

//使用.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 在被選元素的結尾插入內容(元素內)
prepend/prependTo 在被選元素的開頭插入內容(元素內)
after/inserAfter 在被選元素之後插入內容(元素外)
before/inserBefore 在被選元素之前插入內容(元素外)

想把自己的後代幹掉
$(‘#father‘).empty()
想把自己以及後代都幹掉
$(‘#father‘).remove()

使用方法
$(document.body).append(‘<div>厲害厲害</div>‘)
$(document.body).prepend(‘<div>厲害厲害</div>‘)
$(‘<div>厲害厲害</div>‘).prependTo(document.body)
$(‘<div>厲害厲害</div>‘).appendTo(document.body)

$(‘h1‘).eq(0).after(‘<h2>呵呵呵</h2>‘)
$(‘h1‘).eq(0).before(‘<h2>呵呵呵</h2>‘)
$(‘<h2>呵呵呵</h2>‘).inserBefore($(‘h1‘).eq(0))
$(‘<h2>呵呵呵</h2>‘).inserAfter($(‘h1‘).eq(0))

增加一個ul來顯示作業系統，類似於js的實現
$(document .body).append(‘<h2>OS 列表</h2><ul><li></li>MAC<li>WIN</li><li>Linux</li><ul>‘)

jQuery事件監聽
1.觸發事件的目標元素
2.觸發的事件名稱
3.事件觸發時的回調
4.事件對象

點擊按鈕改變背景顏色為×××

$(‘#traget‘).on(‘click‘,function(event) {
console.log(‘target‘); //被點擊了
$(‘body‘ ).css(‘background‘,‘#ff0‘);
});
$(‘#target‘)事件目標元素
on 事件監聽函數
‘click‘ 監聽的事件名稱
整個function() 事件觸發執行的回調callback
event jQuery事件對象

jQuery事件對象—>封裝原生事件對象(並且做了瀏覽器安全色，增加好用的屬性和方法)

例：

$(‘a‘)on(‘click‘,function(event){
console.log(event.target);//擷取觸發事件的元素
event.preventDefault(); //阻止預設事件
event.stopPropagation(); //阻止事件冒泡
});
和下面的效果是一樣的

$(‘a‘).on(‘click‘,function(event){
console.log(event.target); //擷取觸發事件的元素
return false; //既阻止預設事件，且阻止事件冒泡
});

點擊按鈕修改背景顏色

$(‘#button‘).on(‘click‘,function(event){
$(‘section‘).css(‘backgroundColor‘,yellow);
});

使用 jQuery 編寫一個事件監聽器，需要完成以下要求：
觸發事件的目標元素為 #target
監聽的是一個 click 事件
當事件觸發時，需要增加類名 disabled 到目標元素上

$(‘#target‘).on(‘click‘, function() {
$(this).addClass(‘disabled‘);
});

toggleClass(‘classname‘) 對設定或移除被選元素的一個或多個類進行切換

事件的委託
事件委託就是利用時間冒泡，只指定一個時間處理常式，就可以管理某一類型的所有事件。
事件委託是利用事件的冒泡原理來實現的，何為事件冒泡呢？就是事件從最深的節點開始，然後逐步向上傳播事件，舉個例子：頁面上有這麼一個節點樹，div>ul>li>a;比如給最裡面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那麼我們給最外面的div加點擊事件，那麼裡面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委託，委託它們父級代為執行事件。
一般來說我們要給某個元素繫結事件，都會直接綁定在該元素上，如下：

// 給 li 元素繫結點擊事件
$(‘li‘).click(function() {
console.log(‘你點擊我了‘);
})
但是這種直接的處理會有以下問題：
——通過 JS 新添加的 li 元素並沒有該事件綁定，所以點擊無效
——元素如果比較多的話，比喻有200個 li ，那每個 li 都綁定一個事件，效能是非常低的
那麼如何解決這些問題呢？這就是我們要說的事件委託（或叫事件代理）。
事件委託簡單來說就是利用事件冒泡，只指定一個事件處理常式，用來管理某一類型的所有事件。
以一個 todo list 為例：

// 要點擊的元素是 todo-item// 但是我們把事件綁定在父元素 todo-list 上，實現事件委託// html 結構為：ul#todo-list>li.todo-item*5

$(‘#todo-list‘).on(‘click‘, ‘.todo-item‘, function() {
$(this).toggleClass(‘done‘);
})
以 jQuery 為例，所以我們看不到背後的本質，下面我們以一個原生的實現來說明下：

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。

學習JQuery，這篇檔案即可入門