|
一 認(rèn)識jQuery jQuery是JavaScript Query的縮寫形式。jQuery是一款非常優(yōu)秀的JavaScript庫，即便是MVVM框架盛行的今天，也有超過半數(shù)的網(wǎng)頁及應(yīng)用直接或間接的使用了jQuery。jQuery的設(shè)計(jì)理念是“Write Less, Do More“，即寫的更少，做的更多！使用jQuery可以大大簡化我們的JS代碼，從而提高開發(fā)效率。 jQuery現(xiàn)在有3個大的版本，分別是1.x，2.x，3.x。你可以從jQuery官方網(wǎng)站下載需要的版本，然后從本地引入到自己的項(xiàng)目，也可以使用CDN引入。在你下載jQuery時一般有兩個可選的版本，一個是壓縮版（不包含換行和空格，體積更小，多用于實(shí)際項(xiàng)目開發(fā)），另一個是未壓縮版（包含換行和空格，體積稍大，多用于學(xué)習(xí)和測試）。 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從第二個大的版本開始，為了優(yōu)化網(wǎng)絡(luò)響應(yīng)和使語法更加簡潔，拋棄了對IE6、7、8的支持，并且從2.1.0開始，壓縮版本的文件中也不再包含注釋信息了。為了獲得更好的兼容性，我們這里使用的jQuery文件版本號是1.12.4。 二 jQuery核心 1，$符號 jQuery實(shí)際上是一個函數(shù)對象。事實(shí)上，jQuery通過全局變量jQuery引用該函數(shù)對象，$符號是jQuery變量的一個別名，為了寫的更少，我們通常都使用$符號表示該對象。 1 window.jQuery === window.$; //true2 jQuery === $;// true3 typeof($);// 'function' 如果你還使用了其他框架，或自定義了$變量，那么有可能和jQuery的$符號造成沖突。 1 jQuery.noConflict(); 在使用jQuery編程之前，首先調(diào)用noConflict()方法，解除jQuery對$符號的占用，這樣就可以解決這一問題了。但往后就只能通過變量jQuery來使用jQuery的所有功能了。 2，參數(shù) $核心函數(shù)可以接收3種類型的參數(shù)，分別是函數(shù)引用、字符串、DOM對象。 a) 接收一個函數(shù) 1 $(function(){2 //some code3 });4 //這種方式的完整寫法應(yīng)該是：5 //$(document).ready(function(){some code});這種方式類似原生JS的window.DOMContentLoaded方法，只要HTML文檔解析完畢并生成DOM tree就會觸發(fā)該事件。但是在jQuery中可以同時存在多個該方法。 b) 接收字符串 1 var box1 = $('div');2 //接收css選擇器字符串，可以拿到DOM tree中相應(yīng)的DOM元素，并把它包裝成jQuery對象3 var box2 = $('<div></div>');4 //接收HTML代碼片段，可以創(chuàng)建相應(yīng)的DOM元素，并把它包裝秤jQuery對象 c) 接收DOM元素 1 var box = document.getElementById('#box');2 var jBox = $(box);//jQuery obj如果核心函數(shù)接收一個DOM元素，那么它會把該DOM元素包裝成一個jQuery對象，并返回。 jQuery對象事實(shí)上是一個類數(shù)組，保存了獲取到的DOM元素。只有通過jQuery對象才可以訪問jQuery提供的屬性和方法。 3，靜態(tài)方法 jQuery提供了一些靜態(tài)方法，例如遍歷數(shù)組，字符串去空格，判斷數(shù)據(jù)類型等等，這些方法在ES5之前都是很實(shí)用的方法，但ES5之后，原生JS就已經(jīng)實(shí)現(xiàn)了這類似的方法，所以這里就不再詳細(xì)講解了，有興趣可以自行查看官方文檔。jQuery把a(bǔ)jax相關(guān)操作也封裝為靜態(tài)方法，稍后會專門講解。這里要講的只有holdReady方法。 1 $.holdReady(true);2 $(function(){3 //some code4 });5 $.joldReady(false);6 //參數(shù)true，暫停ready方法的執(zhí)行，參數(shù)false，恢復(fù)ready方法的執(zhí)行 三 jQuery 屬性和節(jié)點(diǎn) 1，選擇器 選擇器是jQuery的核心功能。絕大多數(shù)css支持的選擇器都可以在jQuery得到支持。 1 $('p');//標(biāo)簽選擇器2 $('.class');//類選擇器3 $('#id');//id選擇器4 $('[type=text]');//屬性選擇器5 $('input[type=email]');//組合選擇器6 $(#id p);//后代選擇器7 $(#id p:first-child);//篩選選擇器8 //...通過核心函數(shù)獲取到的DOM元素都被包裝成jQuery對象，以類數(shù)組的形式存儲。我們可以通過eq方法獲取其中某一個，還可以通過get方法獲取DOM對象。 1 var divList = $('div');//獲取所有div2 var domDiv = divList.get(0);//獲取第一個Dom元素，如果有的話3 var jqDiv = divList.eq(0);//獲取第一個jq對象，如果有的話4 var another = $(domDiv);//把Dom元素轉(zhuǎn)化成jq對象 另外jQuery還提供了一些通過層級結(jié)構(gòu)查找元素的方法。 1 $('div').find('span');//查找div內(nèi)部的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提供的方法修改相應(yīng)的DOM元素了，包括CSS，文本，屬性節(jié)點(diǎn)，HTML結(jié)構(gòu)等等。 屬性及屬性節(jié)點(diǎn)相關(guān)： 1 $('div').attr('name','test');//設(shè)置屬性名：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元素的屬性，也可以操作它的屬性節(jié)點(diǎn) 當(dāng)屬性沒有被顯示的設(shè)置時，通過attr()方法獲取將返回undefined，而prop()方法可以返回true或者false，所以，如果你要檢索和更改DOM屬性，比如元素的checked，selected，或disabled狀態(tài)，推薦使用prop()方法，其他時候都使用attr方法。 注意，使用上訴方法獲取屬性值時，返回的只是第一個匹配的DOM元素的相應(yīng)屬性值。但是設(shè)置的時候卻是為所有匹配的DOM元素都添加該屬性。 class類相關(guān)： 1 $('div').addClass('test');//添加類，如需添加多個類，使用空格隔開即可2 $('div').removeClass('test');//刪除類，如需刪除多個類，也用空格隔開即可3 $('div').toggleClass('test');//切換類，如果DOM元素已經(jīng)有該類了，那么就刪除，如果沒有則添加文本及結(jié)構(gòu)相關(guān)： 1 $('div').html();//獲取第一個匹配到的div的內(nèi)容2 $('div').html('<p>我是段落</p>');//設(shè)置所有匹配到的div的內(nèi)容3 $('div').text();//獲取所有匹配元素的文本內(nèi)容4 $('div').text('hello');//設(shè)置所有匹配到的div的文本內(nèi)容5 $('input').val();//獲取匹配元素value值6 $('input').val('hello');//獲取匹配元素value值 css相關(guān)： 1 $('div').css('background-color','red');//設(shè)置元素的單個css屬性2 $('div').css({3 width:'200px',4 height:'200px',5 background-color:'red'6 });//通過對象設(shè)置多個css屬性尺寸及位置相關(guān)： 1 $('div').width();//獲取div的內(nèi)容區(qū)寬度，可傳參設(shè)置2 $('div').height();//獲取div的內(nèi)容區(qū)高度，可傳參設(shè)置3 //innerWidth，innerHeight表示content+padding的寬高4 //outerWidth，outerHeight表示content+padding+border的寬高5 $('div').offset();//獲取div相對視口的偏移量，返回值是一個包含top和left屬性，且值為數(shù)字的對象6 $('div').position();//獲取div相對父元素的偏移量，返回值是一個包含top和left屬性，且值為數(shù)字的對象7 //offset和position都以像素計(jì)，并且只對可見的元素起作用 3，節(jié)點(diǎn) jQuery也提供了節(jié)點(diǎn)的增、刪、改、查相關(guān)方法。 1 $('div').append('<p>Hello</p>');//在div內(nèi)部的末尾插入元素2 $('div').prepend('<p>Hello</p>');//在div內(nèi)部的開頭插入元素3 $('div').after('<p>Hello</p>');//緊挨著div的后面插入元素4 $('div').before('<p>Hello</p>');//緊挨著div的前面插入元素5 $('div').remove();//刪除div元素，但是會保留文本6 $('div').empty();//清空div中的所有內(nèi)容四 jQuery 事件 1，事件綁定和移除 jQuery提供了兩種綁定事件的方式，第一種是on+事件名稱的具體事件方法，第二種是直接使用on方法。 1 $('div').onclick(function(){});2 $('div').on('click',function(){});3 //事件處理函數(shù)可以是匿名函數(shù)，也可以是函數(shù)引用，如果涉及到解除事件綁定，建議使用函數(shù)引用的方式 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，阻止事件冒泡和默認(rèn)行為 使用jQuery阻止事件冒泡和默認(rèn)行為與原生JS一樣。不太清楚的可以查看我的《DOM之事件（一）》。 1 $('div').on('click',function(){ 2 //some code 3 e.stopPropagation(); 4 }); 5 //阻止事件冒泡 6 $('a').on('click',function(){ 7 //some code 8 return false；//簡單方式 9 //e.preventDefault();//W3C標(biāo)準(zhǔn)方式10 });11 //阻止默認(rèn)行為 3，一次性事件和自動觸發(fā)事件 通常我們給元素綁定的事件處理程序需要特定的事件才能觸發(fā)，比如click，mouseover等等，jQuery提供了triggerHandler方法，你可以通過該方法手動觸發(fā)元素綁定的事件處理程序，而不用等到特定事件發(fā)生。 1 $('div').on('click',function(){2 //some code3 });4 //一般需要等到用戶點(diǎn)擊div，函數(shù)才會被執(zhí)行5 $('div').triggerHandler('click');6 //自動觸發(fā)div的click事件，不用等到用戶點(diǎn)擊jQuery還提供了另一個方法：trigger。它的功能和triggerHandler方法一樣。他們的不同之處在于triggerHandler不會觸發(fā)事件的默認(rèn)行為和冒泡。 1 $('div').one('click',function(){2 //some code3 });4 //jQuery通過one方法綁定一個只會被觸發(fā)一次的事件處理程序 4，事件委托 jQuery通過delegate方法實(shí)現(xiàn)事件委托。該方法使用上和原生JS有一些區(qū)別，原生JS實(shí)現(xiàn)事件委托也請移步《DOM之事件（一）》。 1 $('ul').delegate('li', 'click', function(){ 2 $(this).toggleClass('test');3 });4 //把li的點(diǎn)擊事件委托給ul，被委托元素一般是委托元素的父元素五 jQuery 動畫 1，顯示和隱藏 jQuery通過show方法和hide方法實(shí)現(xiàn)元素的顯示和隱藏。它的原理是修改元素的display和寬高及opacity屬性。 1 $('div').show(1000);2 //使div顯示，1000表示整個過程持續(xù)時間，單位是ms3 $('div').hide(1000);4 //使div隱藏 這兩個方法還可以接受一個回調(diào)函數(shù)作為第二個參數(shù)，用于設(shè)置動畫完成后需要執(zhí)行的操作。 2，展開和收起 jQuery通過slideDown，slideUp實(shí)現(xiàn)平緩的展開和收起元素。該方法是通過高度變化（向下增大或減?。﹣韯討B(tài)地顯示元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。 1 $('p').slideDown(1000);2 //展開，可以設(shè)置一個時間，表示整個過程持續(xù)時間，單位ms3 $('p').slideUp(1000);4 //收起5 $('p').slideToggle(1000);6 //切換展開后收起動畫常用來做下拉菜單。 3，淡入淡出 jQuery通過fadeIn和fadeOut實(shí)現(xiàn)淡入淡出效果。該方法的原理是修改元素的opacity屬性，不會改變元素的寬高。也可接收一個回調(diào)函數(shù)。 1 $('div').fadeIn(1000);2 //淡入，可一接收一個數(shù)字作為參數(shù)，表示過程持續(xù)時間，單位ms3 $('div').fadeOut(1000);4 //淡出5 $('div').fadeTo(1000,0.5);6 //調(diào)整到指定值7 $('div').fadeToggle(1000);8 //切換 4，自定義動畫 jQuery通過animate方法實(shí)現(xiàn)自定義動畫效果。 1 $('div').animate({2 width:500px,3 opacity:0.84 },1000);5 //該方法接收一個對象，表示動畫結(jié)束時元素的狀態(tài)，第二參數(shù)是一個數(shù)字，表示持續(xù)時長，單位ms，也可以接收一個回調(diào)函數(shù)作為第三個參數(shù)注意，jQuery的動畫采用隊(duì)列形式，每編寫一個動畫，就向動畫隊(duì)列中插入一個，只能等前面的執(zhí)行完后才執(zhí)行后面的。 5，停止和延遲 jQuery的stop方法可以暫停正在執(zhí)行的動畫。 1 $('div').stop();2 //立即停止當(dāng)前動畫，直接開始執(zhí)行隊(duì)列中后續(xù)的動畫，如果有的話3 $('div').stop(true,true);4 //stop方法可以接收兩個blloean值作為參數(shù)。第一個規(guī)定在停止當(dāng)前動畫的同時對否清除隊(duì)列中的其他動畫，第二個規(guī)定在停止當(dāng)前動畫的同時是否要直接完成隊(duì)列中其他動畫。 介于jQuery通過隊(duì)列形式控制動畫執(zhí)行，我們建議在調(diào)用jQuery動畫之前都先調(diào)用一次stop方法，以免造成動畫混亂。 1 $('div').stop();2 $('div').animate({3 //some code4 },1000);jQuery通過delay延遲動畫的執(zhí)行。 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方法接收一個對象作為參數(shù)，對象的屬性名為ajax的設(shè)置參數(shù)，屬性值為ajax的設(shè)置值。 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 code12 }13 });常用的參數(shù)有： type：請求類型，可選值有post和get。 url：發(fā)送請求的地址。 data：發(fā)送到服務(wù)器的數(shù)據(jù)。必須是“key0=value0&key1=value1“或鍵值對的形式（對象）。 cache：規(guī)定是否讀取緩存數(shù)據(jù)，true表示讀取，false表示不讀取，直接從服務(wù)器獲取。 dataType：期望服務(wù)器返回的數(shù)據(jù)類型，可選值有xml，html，script，json，text。 success：ajax請求成功回調(diào)函數(shù)。 error：ajax請求失敗回調(diào)函數(shù)。 使用ajax()方法時，所有的設(shè)置參數(shù)都是可選的，除了上訴參數(shù)外，還有很多其他的參數(shù)可選，這讓我們在通過jQuery實(shí)現(xiàn)ajax時有了更大的靈活性。如果你想了解更多相關(guān)參數(shù)的信息，請到j(luò)Query官網(wǎng)查詢。 2，get()方法 如果你覺得ajax()方法發(fā)送簡單get請求還是太麻煩，那么你可以直接使用$.get()方法。 1 $.get(2 'url',3 { name: 'ren', age: '12' },4 function(msg){5 //some code6 },7 'text'8 ); 該方法只需要4個參數(shù)，發(fā)送請求的url，發(fā)送的數(shù)據(jù)，請求成功的回調(diào)函數(shù)，期望的返回值類型。 3，post()方法 使用$.post()方法和$.get()一樣，他們都只需要4個參數(shù)。 1 $.post(2 'url',3 { name: 'ren', age: '12' },4 function(msg){5 //some code6 },7 'text'8 );4，load()方法 load()方法可以直接請求服務(wù)器的數(shù)據(jù)并添加到DOM元素中。默認(rèn)使用get方式，如果你向服務(wù)器發(fā)送了數(shù)據(jù)，將自動轉(zhuǎn)換為post方式。 1 $('div').load(2 'test.html',3 {name:'ren',age:'12'},4 function(){//some code}5 );6 //載入一份新的html文檔到div中，并向服務(wù)器發(fā)送了數(shù)據(jù)。 load()方法可以有3個參數(shù)，請求的url，向服務(wù)器發(fā)送的數(shù)據(jù)，請求成功后的回調(diào)函數(shù)。 寫在最后：jQuery作為一款工具庫，我們只需要知道它能干什么和怎么干就好，不必完全深入的學(xué)習(xí)它。當(dāng)我們需要用它的時候配合官方文檔編寫相關(guān)代碼即可。如果你在技術(shù)上有所追求，那么你還是可以仔細(xì)研讀jQuery源碼，相信一定會有不少收獲。其實(shí)不光jQuery，在你學(xué)習(xí)其他框架或庫或工具的時候，也可以按照這種方式學(xué)習(xí)，作為一個軟件工程師，計(jì)算機(jī)原理，操作系統(tǒng)，網(wǎng)絡(luò)技術(shù)等等才是構(gòu)造你上升的基石，其次才是各種編程語言，熱門框架及工具等等。 |
|
|
