學習JQuery，這篇文件即可入門

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)

$('h2').eq(0).after('<h3>呵呵呵</h3>')
$('h2').eq(0).before('<h3>呵呵呵</h3>')
$('<h3>呵呵呵</h3>').inserBefore($('h2').eq(0))
$('<h3>呵呵呵</h3>').inserAfter($('h2').eq(0))

增加一個ul來顯示操作系統，類似于js的實現
$(document .body).append('<h3>OS 列表</h3><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。