本節內容：
本章主要講解一下jquery，主要是工作中用的前端框架是datetables框架，然后datetables框架又是基於jqeury研發的，所以要想學一個東西，就必須要了解其底層，不然走路都是瘸瘸拐拐
本章借鑒與http://javascript.ruanyifeng.com/
- jquery簡介
- 查找元素
- 事件綁定
Jquery簡介
jQuery是目前使用最廣泛的JavaScript函數庫。據統計，全世界57.5%的網站使用jQuery，在使用JavaScript函數庫的網站中，93.0%使用jQuery。它已經成了開發者必須學會的技能。
jQuery的最大優勢有兩個。首先，它基本是一個DOM操作工具，可以使操作DOM對象變得異常容易。其次，它統一了不同瀏覽器的API接口，使得代碼在所有現代瀏覽器均能運行，開發者不用擔心瀏覽器之間的差異。
jQuery最重要的概念，就是jQuery對象。它是一個全局對象，可以簡寫為美元符號$。也就是說，jQuery和$兩者是等價的。
在網頁中加載jQuery函數庫以后，就可以使用jQuery對象了。jQuery的全部方法，都定義在這個對象上面。
var listItems = jQuery('li'); // or var listItems = $('li');
上面兩行代碼是等價的，表示選中網頁中所有的li元素。
Jqeury查找元素
選擇器選出一組符合條件的網頁元素以后，jQuery提供了許多方法，可以過濾結果集，返回更准確的目標。
1、結果集的過濾方法
（1）first方法，last方法
first方法返回結果集的第一個成員，last方法返回結果集的最后一個成員
$("li").first()
$("li").last()
（2）next方法，prev方法
next方法返回緊鄰的下一個同級元素，prev方法返回緊鄰的上一個同級元素。
$("li").first().next()
$("li").last().prev()
$("li").first().next('.item')
$("li").last().prev('.item')
如果next方法和prev方法帶有參數，表示選擇符合該參數的同級元素。
（3）parent方法，parents方法，children方法
parent方法返回當前元素的父元素，parents方法返回當前元素的所有上級元素（直到html元素）。
$("p").parent()
$("p").parent(".selected")
$("p").parents()
$("p").parents("div")
children方法返回選中元素的所有子元素。
$("div").children()
$("div").children(".selected")
// 下面的寫法結果相同，但是效率較低
$('div > *')
$('div > .selected')
（4）siblings方法，nextAll方法，prevAll方法
siblings方法返回當前元素的所有同級元素。
$('li').first().siblings()
$('li').first().siblings('.item')
nextAll方法返回當前元素其后的所有同級元素，prevAll方法返回當前元素前面的所有同級元素。
$('li').first().nextAll()
$('li').last().prevAll()
（5）closest方法，find方法
closest方法返回當前元素，以及當前元素的所有上級元素之中，第一個符合條件的元素。find方法返回當前元素的所有符合條件的下級元素。
$('li').closest('div')
$('div').find('li')
上面代碼中的find方法，選中所有div元素下面的li元素，等同於$(‘li’, ‘div’)。由於這樣寫縮小了搜索范圍，所以要優於$(‘div li’)的寫法。
（6）find方法，add方法，addBack方法，end方法
add方法用於為結果集添加元素。
$('li').add('p')
addBack方法將當前元素加回原始的結果集。
$('li').parent().addBack()
（7）filter方法，not方法，has方法
filter方法用於過濾結果集，它可以接受多種類型的參數，只返回與參數一致的結果。
// 返回符合CSS選擇器的結果 $('li').filter('.item') // 返回函數返回值為true的結果 $("li").filter(function(index) { return index % 2 === 1; }) // 返回符合特定DOM對象的結果 $("li").filter(document.getElementById("unique")) // 返回符合特定jQuery實例的結果 $("li").filter($("#unique"))
not方法的用法與filter方法完全一致，但是返回相反的結果，即過濾掉匹配項。
$('li').not('.item')
has方法與filter方法作用相同，但是只過濾出子元素符合條件的元素。
$("li").has("ul")
（8）表單選擇器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的單行文本框
$(":password") //所有密碼框
$(":radio") //所有單選按鈕
$(":checkbox") //所有復選框
$(":submit") //所有提交按鈕
$(":reset") //所有重置按鈕
$(":button") //所有button按鈕
$(":file") //所有文件域
$("input:checked") //所有選中的元素
$("select option:selected") //select中所有選中的option元素
2、DOM相關方法
許多方法可以對DOM元素進行處理。
（1）html方法和text方法
html方法返回該元素包含的HTML代碼，text方法返回該元素包含的文本。
假定網頁只含有一個p元素。
<p><em>Hello World!</em></p>
html方法和text方法的返回結果分別如下。
$('p').html()
// <em>Hello World!</em>
$('p').text()
// Hello World!
jQuery的許多方法都是取值器（getter）與賦值器（setter）的合一，即取值和賦值都是同一個方法，不使用參數的時候為取值器，使用參數的時候為賦值器。
上面代碼的html方法和text方法都沒有參數，就會當作取值器使用，取回結果集的第一個元素所包含的內容。如果對這兩個方法提供參數，就是當作賦值器使用，修改結果集所有成員的內容，並返回原來的結果集，以便進行鏈式操作。
$('p').html('<strong>你好</strong>')
// 網頁代碼變為<p><strong>你好</strong></p>
$('p').text('你好')
// 網頁代碼變為<p>你好</p>
下面要講到的jQuery其他許多方法，都采用這種同一個方法既是取值器又是賦值器的模式。
html方法和text方法還可以接受一個函數作為參數，函數的返回值就是網頁元素所要包含的新的代碼和文本。這個函數接受兩個參數，第一個是網頁元素在集合中的位置，第二個參數是網頁元素原來的代碼或文本。
$('li').html(function (i, v){
return (i + ': ' + v);
})
// <li>Hello</li>
// <li>World</li>
// 變為
// <li>0: Hello</li>
// <li>1: World</li>
（2）addClass方法，removeClass方法，toggleClass方法
addClass方法用於添加一個類，removeClass方法用於移除一個類，toggleClass方法用於折疊一個類（如果無就添加，如果有就移除）。
$('li').addClass('special')
$('li').removeClass('special')
$('li').toggleClass('special')
（3）css方法
css方法用於改變CSS設置。
該方法可以作為取值器使用。
$('h1').css('fontSize');
css方法的參數是css屬性名。這里需要注意，CSS屬性名的CSS寫法和DOM寫法，兩者都可以接受，比如font-size和fontSize都行。
css方法也可以作為賦值器使用。
$('li').css('padding-left', '20px')
// 或者
$('li').css({
'padding-left': '20px'
});
上面兩種形式都可以用於賦值，jQuery賦值器基本上都是如此。
（4）val方法
val方法返回結果集第一個元素的值，或者設置當前結果集所有元素的值。
$('input[type="text"]').val()
$('input[type="text"]').val('new value')
（5）prop方法，attr方法
首先，這里要區分兩種屬性。
一種是網頁元素的屬性，比如a元素的href屬性、img元素的src屬性。這要使用attr方法讀寫。
// 讀取屬性值 $('textarea').attr(name) //寫入屬性值 $('textarea').attr(name, val)
下面是通過設置a元素的target屬性，使得網頁上的外部鏈接在新窗口打開的例子。
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
對於checked屬性，attr方法讀到的是checked，prop方法讀到的是true。
$(input[type=checkbox]).attr("checked") // "checked"
$(input[type=checkbox]).prop("checked") // true
（6）removeProp方法，removeAttr方法
removeProp方法移除某個DOM屬性，removeAttr方法移除某個HTML屬性。
$("a").prop("oldValue",1234).removeProp('oldValue')
$('a').removeAttr("title")
（7）data方法
data方法用於在一個DOM對象上儲存數據。
// 儲存數據 $("body").data("foo", 52); // 讀取數據 $("body").data("foo");
3、添加、復制和移動網頁元素的方法
jQuery方法提供一系列方法，可以改變元素在文檔中的位置。
（1）append方法，appendTo方法
append方法將參數中的元素插入當前元素的尾部。
$("div").append("<p>World</p>")
// <div>Hello </div>
// 變為
// <div>Hello <p>World</p></div>
appendTo方法將當前元素插入參數中的元素尾部。
$("<p>World</p>").appendTo("div")
上面代碼返回與前一個例子一樣的結果。
（2）prepend方法，prependTo方法
prepend方法將參數中的元素，變為當前元素的第一個子元素。
$("p").prepend("Hello ")
// <p>World</p>
// 變為
// <p>Hello World</p>
prependTo方法將當前元素變為參數中的元素的第一個子元素。
$("<p></p>").prependTo("div")
// <div></div>
// 變為
// <div><p></p></div>
（3）after方法，insertAfter方法
after方法將參數中的元素插在當前元素后面。
$("div").after("<p></p>")
// <div></div>
// 變為
// <div></div><p></p>
（4）before方法，insertBefore方法
before方法將參數中的元素插在當前元素的前面。
$("div").before("<p></p>")
// <div></div>
// 變為
// <p></p><div></div>
（5）wrap方法，wrapAll方法，unwrap方法，wrapInner方法
wrap方法將參數中的元素變成當前元素的父元素。
$("p").wrap("<div></div>")
// <p></p>
// 變為
// <div><p></p></div>
wrap方法的參數還可以是一個函數。
$("p").wrap(function() {
return "<div></div>";
})
（6）clone方法
clone方法克隆當前元素。
var clones = $('li').clone();
對於那些有id屬性的節點，clone方法會連id屬性一起克隆。所以，要把克隆的節點插入文檔的時候，務必要修改或移除id屬性。
（7）remove方法，detach方法，replaceWith方法
remove方法移除並返回一個元素，取消該元素上所有事件的綁定。detach方法也是移除並返回一個元素，但是不取消該元素上所有事件的綁定。
$('p').remove()
$('p').detach()
replaceWith方法用參數中的元素，替換並返回當前元素，取消當前元素的所有事件的綁定。
$('p').replaceWith('<div></div>')
事件綁定
1、頁面載入
當頁面載入成功后再運行的函數事件
$(document).ready(function(){ do something... }); //簡寫 $(function($) { do something... });
2、頁面處理
//bind 為每個匹配元素綁定事件處理函數，綁定多個用{}。 $("p").bind("click", function(){ alert( $(this).text() ); }); $(menuF).bind({ "mouseover":function () { $(menuS).parent().removeClass("hide"); },"mouseout":function () { $(menuS).parent().addClass("hide"); } }); $("p").one( "click", fun...) //one 綁定一個一次性的事件處理函數 $("p").unbind( "click" ) //解綁一個事件
3、頁面委派
// 與bind 不同的是當時間發生時才去臨時綁定。 $("p").delegate("click",function(){ do something... }); $("p").undelegate(); //p元素刪除由 delegate() 方法添加的所有事件 $("p").undelegate("click") //從p元素刪除由 delegate() 方法添加的所有click事件
4、事件
$("p").click(); //單擊事件
$("p").dblclick(); //雙擊事件
$("input[type=text]").focus() //元素獲得焦點時,觸發 focus 事件
$("input[type=text]").blur() //元素失去焦點時,觸發 blur事件
$("button").mousedown()//當按下鼠標時觸發事件
$("button").mouseup() //元素上放松鼠標按鈕時觸發事件
$("p").mousemove() //當鼠標指針在指定的元素中移動時觸發事件
$("p").mouseover() //當鼠標指針位於元素上方時觸發事件
$("p").mouseout() //當鼠標指針從元素上移開時觸發事件
$(window).keydown() //當鍵盤或按鈕被按下時觸發事件
$(window).keypress() //當鍵盤或按鈕被按下時觸發事件,每輸入一個字符都觸發一次
$("input").keyup() //當按鈕被松開時觸發事件
$(window).scroll() //當用戶滾動時觸發事件
$(window).resize() //當調整瀏覽器窗口的大小時觸發事件
$("input[type='text']").change() //當元素的值發生改變時觸發事件
$("input").select() //當input 元素中的文本被選擇時觸發事件
$("form").submit() //當提交表單時觸發事件
$(window).unload() //用戶離開頁面時