一篇文章教會你jQuery應用

 

一　　認識jQuery

　　jQuery是JavaScript Query的縮寫形式。jQuery是一款很是優秀的JavaScript庫，即使是MVVM框架盛行的今天，也有超過半數的網頁及應用直接或間接的使用了jQuery。jQuery的設計理念是「Write Less, Do More「，即寫的更少，作的更多！使用jQuery能夠大大簡化咱們的JS代碼，從而提升開發效率。

　　jQuery如今有3個大的版本，分別是1.x，2.x，3.x。你能夠從jQuery官方網站下載須要的版本，而後從本地引入到本身的項目，也可使用CDN引入。在你下載jQuery時通常有兩個可選的版本，一個是壓縮版（不包含換行和空格，體積更小，多用於實際項目開發），另外一個是未壓縮版（包含換行和空格，體積稍大，多用於學習和測試）。

1 <script src="jquery-1.12.4.js"></script> 2 <!--本地引入--> 3 <script src="//code.jquery.com/jquery-1.12.4.js"></script> 4 <!--CDN引入-->

　　另外，jQuery從第二個大的版本開始，爲了優化網絡響應和使語法更加簡潔，拋棄了對IE六、七、8的支持，而且從2.1.0開始，壓縮版本的文件中也再也不包含註釋信息了。爲了得到更好的兼容性，咱們這裏使用的jQuery文件版本號是1.12.4。

 

二　　jQuery核心

 

　　1，$符號

　　jQuery其實是一個函數對象。事實上，jQuery經過全局變量jQuery引用該函數對象，$符號是jQuery變量的一個別名，爲了寫的更少，咱們一般都使用$符號表示該對象。

1 window.jQuery === window.$; //true 2 jQuery === $;// true 3 typeof($);// 'function'

　　若是你還使用了其餘框架，或自定義了$變量，那麼有可能和jQuery的$符號形成衝突。

1 jQuery.noConflict();

　　在使用jQuery編程以前，首先調用noConflict()方法，解除jQuery對$符號的佔用，這樣就能夠解決這一問題了。但日後就只能經過變量jQuery來使用jQuery的全部功能了。

　　

　　2，參數

　　$核心函數能夠接收3種類型的參數，分別是函數引用、字符串、DOM對象。

　　　　a) 接收一個函數　　

1 $(function(){ 2 //some code 3 }); 4 //這種方式的完整寫法應該是： 5 //$(document).ready(function(){some code});

　　　　這種方式相似原生JS的window.DOMContentLoaded方法，只要HTML文檔解析完畢並生成DOM tree就會觸發該事件。可是在jQuery中能夠同時存在多個該方法。

　　　　b) 接收字符串

1 var box1 = $('div'); 2 //接收css選擇器字符串，能夠拿到DOM tree中相應的DOM元素，並把它包裝成jQuery對象 3 var box2 = $('<div></div>'); 4 //接收HTML代碼片斷，能夠建立相應的DOM元素，並把它包裝秤jQuery對象

　　　　c) 接收DOM元素　　　　

1 var box = document.getElementById('#box'); 2 var jBox = $(box);//jQuery obj

　　　　若是核心函數接收一個DOM元素，那麼它會把該DOM元素包裝成一個jQuery對象，並返回。

　　jQuery對象事實上是一個類數組，保存了獲取到的DOM元素。只有經過jQuery對象才能夠訪問jQuery提供的屬性和方法。

　　

　　3，靜態方法

　　jQuery提供了一些靜態方法，例如遍歷數組，字符串去空格，判斷數據類型等等，這些方法在ES5以前都是很實用的方法，但ES5以後，原生JS就已經實現了這相似的方法，因此這裏就再也不詳細講解了，有興趣能夠自行查看官方文檔。jQuery把ajax相關操做也封裝爲靜態方法，稍後會專門講解。這裏要講的只有holdReady方法。

1 $.holdReady(true); 2 $(function(){ 3 //some code 4 }); 5 $.joldReady(false); 6 //參數true，暫停ready方法的執行，參數false，恢復ready方法的執行

 

三　　jQuery 屬性和節點

　　

　　1，選擇器

　　選擇器是jQuery的核心功能。絕大多數css支持的選擇器均可以在jQuery獲得支持。

1 $('p');//標籤選擇器 2 $('.class');//類選擇器 3 $('#id');//id選擇器 4 $('[type=text]');//屬性選擇器 5 $('input[type=email]');//組合選擇器 6 $(#id p);//後代選擇器 7 $(#id p:first-child);//篩選選擇器 8 //...

　　經過核心函數獲取到的DOM元素都被包裝成jQuery對象，以類數組的形式存儲。咱們能夠經過eq方法獲取其中某一個，還能夠經過get方法獲取DOM對象。

1 var divList = $('div');//獲取全部div 2 var domDiv = divList.get(0);//獲取第一個Dom元素，若是有的話 3 var jqDiv = divList.eq(0);//獲取第一個jq對象，若是有的話 4 var another = $(domDiv);//把Dom元素轉化成jq對象

 　　另外jQuery還提供了一些經過層級結構查找元素的方法。

1 $('div').find('span');//查找div內部的span，等同於$('div span') 2 $('li').first();//獲取匹配的元素中的第一個 3 $('li').last();//獲取匹配的元素中的最後一個 4 $('div').next();//獲取全部匹配到的div的下一個兄弟元素的集合 5 $('div').prev();//獲取所欲匹配到的div的上一個兄弟元素的集合 6 $('div').parent();//獲取匹配到的div的共同父元素 7 $('div').children();//獲取div的子元素集合 8 $('div').siblings();//獲取div的兄弟元素集合 9 //...

 

　　2，屬性操做

　　獲取DOM元素以後，jQuery把它們包裝成jq對象，而後你就能夠經過jQuery提供的方法修改相應的DOM元素了，包括CSS，文本，屬性節點，HTML結構等等。

　　屬性及屬性節點相關：

 1 $('div').attr('name','test');//設置屬性名：name，屬性值：test  2 $('div').attr('name');//獲取屬性name的值  3 $('div').removeAttr('name');//刪除屬性name  4  5 ******************************  6  7 $('div').prop('name','test');  8 $('div').prop('name');  9 $('div').removeProp('name'); 10 //prop的用法和attr如出一轍，惟一不一樣的是prop既能夠操做DOM元素的屬性，也能夠操做它的屬性節點

　　當屬性沒有被顯示的設置時，經過attr()方法獲取將返回undefined，而prop()方法能夠返回true或者false，因此，若是你要檢索和更改DOM屬性，好比元素的checked，selected，或disabled狀態，推薦使用prop()方法，其餘時候都使用attr方法。

　　注意，使用上訴方法獲取屬性值時，返回的只是第一個匹配的DOM元素的相應屬性值。可是設置的時候倒是爲全部匹配的DOM元素都添加該屬性。

　　class類相關：

1 $('div').addClass('test');//添加類，如需添加多個類，使用空格隔開便可 2 $('div').removeClass('test');//刪除類，如需刪除多個類，也用空格隔開便可 3 $('div').toggleClass('test');//切換類，若是DOM元素已經有該類了，那麼就刪除，若是沒有則添加

　　文本及結構相關：

1 $('div').html();//獲取第一個匹配到的div的內容 2 $('div').html('<p>我是段落</p>');//設置全部匹配到的div的內容 3 $('div').text();//獲取全部匹配元素的文本內容 4 $('div').text('hello');//設置全部匹配到的div的文本內容 5 $('input').val();//獲取匹配元素value值 6 $('input').val('hello');//獲取匹配元素value值

　　css相關：

1 $('div').css('background-color','red');//設置元素的單個css屬性 2 $('div').css({ 3  width:'200px', 4  height:'200px', 5 background-color:'red' 6 });//經過對象設置多個css屬性

　　尺寸及位置相關：

1 $('div').width();//獲取div的內容區寬度，可傳參設置 2 $('div').height();//獲取div的內容區高度，可傳參設置 3 //innerWidth，innerHeight表示content+padding的寬高 4 //outerWidth，outerHeight表示content+padding+border的寬高 5 $('div').offset();//獲取div相對視口的偏移量，返回值是一個包含top和left屬性，且值爲數字的對象 6 $('div').position();//獲取div相對父元素的偏移量，返回值是一個包含top和left屬性，且值爲數字的對象 7 //offset和position都以像素計，而且只對可見的元素起做用

　　

　　3，節點

　　jQuery也提供了節點的增、刪、改、查相關方法。

1 $("div").append("<p>Hello</p>");//在div內部的末尾插入元素 2 $("div").prepend("<p>Hello</p>");//在div內部的開頭插入元素 3 $("div").after("<p>Hello</p>");//緊挨着div的後面插入元素 4 $("div").before("<p>Hello</p>");//緊挨着div的前面插入元素 5 $("div").remove();//刪除div元素，可是會保留文本 6 $("div").empty();//清空div中的全部內容

 

四　　jQuery 事件

 

　　1，事件綁定和移除

　　jQuery提供了兩種綁定事件的方式，第一種是on+事件名稱的具體事件方法，第二種是直接使用on方法。

1 $('div').onclick(function(){}); 2 $('div').on('click',function(){}); 3 //事件處理函數能夠是匿名函數，也能夠是函數引用，若是涉及到解除事件綁定，建議使用函數引用的方式

　　jQuery的事件綁定相似原生JS的addEventListener方法，能夠同時綁定同一類型的多個事件，而不會相互覆蓋。

　　jQuery經過off方法解除事件綁定。

1 function test(){}; 2 $('div').on('click',test); 3 $('div').off();//移除div綁定的全部事件 4 $('div').off('click');//移除div綁定的全部click事件 5 $('div').off('click',test);//移除div綁定的具體事件

 　　

　　2，阻止事件冒泡和默認行爲

　　使用jQuery阻止事件冒泡和默認行爲與原生JS同樣。不太清楚的能夠查看個人《DOM之事件（一）》。

 1 $('div').on('click',function(e){  2 //some code  3  e.stopPropagation();  4 });  5 //阻止事件冒泡  6 $('a').on('click',function(e){  7 //some code  8 return false；//簡單方式  9 //e.preventDefault();//W3C標準方式 10 }); 11 //阻止默認行爲

　　

　　3，一次性事件和自動觸發事件

　　一般咱們給元素綁定的事件處理程序須要特定的事件才能觸發，好比click，mouseover等等，jQuery提供了triggerHandler方法，你能夠經過該方法手動觸發元素綁定的事件處理程序，而不用等到特定事件發生。

1 $('div').on('click',function(){ 2 //some code 3 }); 4 //通常須要等到用戶點擊div，函數纔會被執行 5 $('div').triggerHandler('click'); 6 //自動觸發div的click事件，不用等到用戶點擊

　　jQuery還提供了另外一個方法：trigger。它的功能和triggerHandler方法同樣。他們的不一樣之處在於triggerHandler不會觸發事件的默認行爲和冒泡。

1 $('div').one('click',function(){ 2 //some code 3 }); 4 //jQuery經過one方法綁定一個只會被觸發一次的事件處理程序

　　

　　4，事件委託

　　jQuery經過delegate方法實現事件委託。該方法使用上和原生JS有一些區別，原生JS實現事件委託也請移步《DOM之事件（一）》。

1 $("ul").delegate("li", "click", function(){ 2 $(this).toggleClass("test"); 3 }); 4 //把li的點擊事件委託給ul，被委託元素通常是委託元素的父元素

 

五　　jQuery 動畫

　　

　　1，顯示和隱藏

　　jQuery經過show方法和hide方法實現元素的顯示和隱藏。它的原理是修改元素的display和寬高及opacity屬性。

1 $('div').show(1000); 2 //使div顯示，1000表示整個過程持續時間，單位是ms 3 $('div').hide(1000); 4 //使div隱藏

　　這兩個方法還能夠接受一個回調函數做爲第二個參數，用於設置動畫完成後須要執行的操做。

　　

　　2，展開和收起

　　jQuery經過slideDown，slideUp實現平緩的展開和收起元素。該方法是經過高度變化（向下增大或減少）來動態地顯示元素，在顯示完成後可選地觸發一個回調函數。

1 $("p").slideDown(1000); 2 //展開，能夠設置一個時間，表示整個過程持續時間，單位ms 3 $("p").slideUp(1000); 4 //收起 5 $("p").slideToggle(1000); 6 //切換

　　展開後收起動畫經常使用來作下拉菜單。

　　

　　3，淡入淡出

　　jQuery經過fadeIn和fadeOut實現淡入淡出效果。該方法的原理是修改元素的opacity屬性，不會改變元素的寬高。也可接收一個回調函數。

1 $("div").fadeIn(1000); 2 //淡入，可一接收一個數字做爲參數，表示過程持續時間，單位ms 3 $("div").fadeOut(1000); 4 //淡出 5 $("div").fadeTo(1000,0.5); 6 //調整到指定值 7 $("div").fadeToggle(1000); 8 //切換

　　

　　4，自定義動畫

　　jQuery經過animate方法實現自定義動畫效果。

1 $('div').animate({ 2  width:500px, 3 opacity:0.8 4 },1000); 5 //該方法接收一個對象，表示動畫結束時元素的狀態，第二參數是一個數字，表示持續時長，單位ms，也能夠接收一個回調函數做爲第三個參數

　　注意，jQuery的動畫採用隊列形式，每編寫一個動畫，就向動畫隊列中插入一個，只能等前面的執行完後才執行後面的。

　　

　　5，中止和延遲

　　jQuery的stop方法能夠暫停正在執行的動畫。

1 $('div').stop(); 2 //當即中止當前動畫，直接開始執行隊列中後續的動畫，若是有的話 3 $('div').stop(true,true); 4 //stop方法能夠接收兩個blloean值做爲參數。第一個規定在中止當前動畫的同時是否清除隊列中的其餘動畫，第二個規定在中止當前動畫的同時是否要直接完成隊列中其餘動畫。

　　介於jQuery經過隊列形式控制動畫執行，咱們建議在調用jQuery動畫以前都先調用一次stop方法，以避免形成動畫混亂。

1 $('div').stop(); 2 $('div').animate({ 3 //some code 4 },1000);

　　jQuery經過delay延遲動畫的執行。

1 $('div').animate({ 2  width:200px; 3  height:200px; 4 },1000).delay(1000).animate({ 5 background-color:red; 6 },1000); 7 //在改變寬高後等待1000ms再改變背景顏色

 

六　　jQuery Ajax

　　jQuery封裝了功能完整的Ajax方法，咱們經常使用的jQuery方法有3個，分別是$.ajax()、$.get()、$.post()。

　　

　　1，ajax()方法

　　ajax方法接收一個對象做爲參數，對象的屬性名爲ajax的設置參數，屬性值爲ajax的設置值。

 1 $.ajax({  2 type: "POST",  3 url: "some.php",  4 data: "name=ren&age=12",  5 cache: false;  6 dataType:"text",  7 success: function(msg){  8 //some code  9  }, 10 error:function(msg){ 11 //some code 12  } 13 });

　　經常使用的參數有：

　　　　type：請求類型，可選值有post和get。

　　　　url：發送請求的地址。

　　　　data：發送到服務器的數據。必須是「key0=value0&key1=value1「或鍵值對的形式（對象）。

　　　　cache：規定是否讀取緩存數據，true表示讀取，false表示不讀取，直接從服務器獲取。

　　　　dataType：指望服務器返回的數據類型，可選值有xml，html，script，json，text。

　　　　success：ajax請求成功回調函數。

　　　　error：ajax請求失敗回調函數。

　　使用ajax()方法時，全部的設置參數都是可選的，除了上訴參數外，還有不少其餘的參數可選，這讓咱們在經過jQuery實現ajax時有了更大的靈活性。若是你想了解更多相關參數的信息，請到jQuery官網查詢。

　　

　　2，get()方法

　　若是你以爲ajax()方法發送簡單get請求仍是太麻煩，那麼你能夠直接使用$.get()方法。

1 $.get( 2 "url", 3 { name: "ren", age: "12" }, 4 function(msg){ 5 //some code 6  }, 7 "text" 8 );

　　該方法只須要4個參數，發送請求的url，發送的數據，請求成功的回調函數，指望的返回值類型。

　　

　　3，post()方法

　　使用$.post()方法和$.get()同樣，他們都只須要4個參數。

1 $.post( 2 "url", 3 { name: "ren", age: "12" }, 4 function(msg){ 5 //some code 6  }, 7 "text" 8 );

　　

　　4，load()方法

　　load()方法能夠直接請求服務器的數據並添加到DOM元素中。默認使用get方式，若是你向服務器發送了數據，將自動轉換爲post方式。

1 $("div").load( 2 "test.html", 3 {name:"ren",age:"12"}, 4 function(){//some code} 5 ); 6 //載入一份新的html文檔到div中，並向服務器發送了數據。

　　load()方法能夠有3個參數，請求的url，向服務器發送的數據，請求成功後的回調函數。

 

寫在最後：jQuery做爲一款工具庫，咱們只須要知道它能幹什麼和怎麼幹就好，沒必要徹底深刻的學習它。當咱們須要用它的時候配合官方文檔編寫相關代碼便可。若是你在技術上有所追求，那麼你仍是能夠仔細研讀jQuery源碼，相信必定會有很多收穫。其實不光jQuery，在你學習其餘框架或庫或工具的時候，也能夠按照這種方式學習，做爲一個軟件工程師，計算機原理，操做系統，網絡技術等等纔是構造你上升的基石，其次纔是各類編程語言，熱門框架及工具等等。

 

原文出處：https://www.cnblogs.com/ruhaoren/p/11670211.html