學習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)

$('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-itemif (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。