一篇文章教會你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從第二個大的版本開始,為了優化網絡響應和使語法更加簡潔,拋棄了對IE6、7、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,在你學習其他框架或庫或工具的時候,也可以按照這種方式學習,作為一個軟件工程師,計算機原理,操作系統,網絡技術等等才是構造你上升的基石,其次才是各種編程語言,熱門框架及工具等等。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM