日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
了解jQuery技巧來(lái)提高你的代碼質(zhì)量

推薦專題： jQuery開(kāi)發(fā)手冊(cè)

在德州等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需規(guī)劃網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)整合營(yíng)銷(xiāo)推廣,外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè),德州網(wǎng)站建設(shè)費(fèi)用合理。

目前jQuery的大多數(shù)用戶更趨向于使用jQuery插件來(lái)解決面臨的難題，這通常是明智的選擇。但是當(dāng)插件相對(duì)于你的需求有一定缺陷的時(shí)候，你也許更應(yīng)該想辦法自己來(lái)解決，下面來(lái)看看這些實(shí)用的jQuery技巧，他們肯定會(huì)能夠派上用場(chǎng)的！

編輯推薦閱讀：學(xué)習(xí)jQuery必須知道的幾種常用方法

1.測(cè)試并提升你的jQuery選擇器水平

這個(gè)jQuery選擇器實(shí)驗(yàn)室非?？幔茉诰€免費(fèi)使用，當(dāng)然你也能下來(lái)到本地離線使用。這個(gè)測(cè)試頁(yè)面包含復(fù)雜的HTML組合字段，然后你能?chē)L試預(yù)定義使用各種jQuery選擇器。如果這還不夠你也可以自定義選擇器。

2.測(cè)試jQuery包裝集是否包含某些元素　　

如果你想測(cè)試一下某個(gè)jQuery包裝集中是否包含某些元素，你首先可以嘗試使用驗(yàn)證首個(gè)元素是否存在：

 
 
 
 
      
  
  
  
  1. if($(selector)[0]){...}  
    2.   
  
  
  
  2. // 或者這樣  
    3.   
  
  
  
  3. if($(selector).length){...}  
    4.

來(lái)看看這個(gè)例子：

 
 
 
 
      
  
  
  
  1. //例子.如果你的頁(yè)面有以下html代碼  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   
  4. Item X
    5.    
  
  
  
  5.   
  6. Item Y
    7.    
  
  
  
  7.   
  8. Item Z
    9.    
  
  
  
  9.  
    10.   
  
  
  
  10. ...  
    11.   
  
  
  
  11. //這個(gè)if條件將返回true，因?yàn)槲覀冇袃蓚€(gè)  
    12.   
  
  
  
  12. // input域匹配了選擇器，所以代碼將會(huì)執(zhí)行  
    13.   
  
  
  
  13. if($('#shopping_cart_items input.in_stock')[0]){}  
    14.

3.從jquery.org讀取jQuery最新版本

你可以使用這句代碼讀取jQuery的最新版本的代碼文件。

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2.   
    3.

你可以使用這個(gè)方法來(lái)調(diào)用最近版本的jQuery框架，當(dāng)然，你還可以使用下面這個(gè)代碼從ajax.googleapis.com調(diào)用同樣的最新版本jQuery：

 
 
 
 
      
  
  
  
  1.   
    2.

4.存儲(chǔ)數(shù)據(jù)　　

使用data方法可以避免在DOM中存儲(chǔ)數(shù)據(jù)，有些前端開(kāi)發(fā)er喜歡使用HTML的屬性來(lái)存儲(chǔ)數(shù)據(jù)：

 
 
 
 
      
  
  
  
  1. $('selector').attr('alt', 'data being stored');  
    2.   
  
  
  
  2. //之后可以這樣讀取數(shù)據(jù):  
    3.   
  
  
  
  3. $('selector').attr('alt');  
    4.

使用”alt”屬性來(lái)作為參數(shù)名存儲(chǔ)數(shù)據(jù)其實(shí)對(duì)于HTML來(lái)說(shuō)是不符合語(yǔ)義的，我們可以使用jQuery的data方法來(lái)為頁(yè)面中的某個(gè)元素存儲(chǔ)數(shù)據(jù)：

 
 
 
 
      
  
  
  
  1. $('selector').data('參數(shù)名', '要存儲(chǔ)的數(shù)據(jù)');  
    2.   
  
  
  
  2. //之后這樣取得數(shù)據(jù):  
    3.   
  
  
  
  3. $('selector').data('參數(shù)');  
    4.

這個(gè)data方法能讓你自己明明數(shù)據(jù)的參數(shù)，更語(yǔ)義更靈活，你可以在頁(yè)面上的任何元素存儲(chǔ)數(shù)據(jù)信息。這個(gè)方法的經(jīng)典應(yīng)用是給input域一個(gè)默認(rèn)值，然后在聚焦的時(shí)候清空它:

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.   
    6.

JavaSript部分:

 
 
 
 
      
  
  
  
  1. $(function() {  
    2.   
  
  
  
  2.  //取出有clear類(lèi)的input域  
    3.   
  
  
  
  3.  //(注: "clear once" 是兩個(gè)class clear 和 once)  
    4.   
  
  
  
  4.  $('#testform input.clear').each(function(){  
    5.   
  
  
  
  5.    //使用data方法存儲(chǔ)數(shù)據(jù)  
    6.   
  
  
  
  6.    $(this).data( "txt", $.trim($(this).val()) );  
    7.   
  
  
  
  7.  }).focus(function(){  
    8.   
  
  
  
  8.    // 獲得焦點(diǎn)時(shí)判斷域內(nèi)的值是否和默認(rèn)值相同，如果相同則清空  
    9.   
  
  
  
  9.    if ( $.trim($(this).val()) === $(this).data("txt") ) {  
    10.   
  
  
  
  10.      $(this).val("");  
    11.   
  
  
  
  11.    }  
    12.   
  
  
  
  12.  }).blur(function(){  
    13.   
  
  
  
  13.    // 為有class clear的域添加blur時(shí)間來(lái)恢復(fù)默認(rèn)值  
    14.   
  
  
  
  14.    // 但如果class是once則忽略  
    15.   
  
  
  
  15.    if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {  
    16.   
  
  
  
  16.      //Restore saved data  
    17.   
  
  
  
  17.      $(this).val( $(this).data("txt") );  
    18.   
  
  
  
  18.    }  
    19.   
  
  
  
  19.  });  
    20.   
  
  
  
  20. });  
    21.

#p#

5.jQuery手冊(cè)常備身邊　　

大多數(shù)人都很難記住所有的編程細(xì)節(jié)，即使再好的程序員也會(huì)有對(duì)某個(gè)程序語(yǔ)言的疏忽大意，所以把相關(guān)的手冊(cè)打印出來(lái)或隨時(shí)放在桌面上進(jìn)行查閱絕對(duì)是可以提高編程效率的。

6.在FireBug控制臺(tái)記錄jQuery　　

FireBug是我最喜歡用的一個(gè)瀏覽器擴(kuò)展工具之一，這個(gè)工具可以讓你快速的在可視化界面中了解當(dāng)前頁(yè)面的HTML+CSS+JavaScript，并在該工具下完成即時(shí)開(kāi)發(fā)。作為jQuery或JavaScript開(kāi)發(fā)人員，F(xiàn)ireFox對(duì)于記錄你的JavaScript代碼也得到支持。寫(xiě)入FireBug控制臺(tái)的最簡(jiǎn)單方式如下:

 
 
 
 
      
  
  
  
  1. console.log("hello world") 
    2.   
  
  
  
  2.  
    3.

你也可以按照你希望的方式寫(xiě)一些參數(shù)：

 
 
 
 
      
  
  
  
  1. console.log(2,4,6,8,"foo",bar)
    2.   
  
  
  
  2.   
    3.

你也可以編寫(xiě)一個(gè)小擴(kuò)展來(lái)記錄jQuery對(duì)象到控制臺(tái)：

 
 
 
 
      
  
  
  
  1. jQuery.fn.log = function (msg) {  
    2.   
  
  
  
  2.    console.log("%s: %o", msg, this);  
    3.   
  
  
  
  3.    return this;  
    4.   
  
  
  
  4. ;  
    5.

對(duì)于這個(gè)擴(kuò)展，你可以直接使用.log()方法來(lái)記錄當(dāng)前對(duì)象到控制臺(tái)。

 
 
 
 
      
  
  
  
  1. $('#some_div').find('li.source > input:checkbox')  
    2.   
  
  
  
  2.    .log("sources to uncheck")  
    3.   
  
  
  
  3.    .removeAttr("checked");  
    4.

7.盡可能使用ID選擇器　　

在使用jQuery之后，你會(huì)發(fā)現(xiàn)利用class屬性來(lái)選擇DOM元素變得相當(dāng)簡(jiǎn)單。盡管如此，還是推薦大家盡量少用class選擇器取而代之盡量多使用運(yùn)行更快的ID選擇器(IE瀏覽器下使用class選擇器會(huì)在遍歷整個(gè)DOM樹(shù)之后返回相符的class包裝集)。而ID選擇器更快是因?yàn)镈OM本身就有”天然的”getElementById這個(gè)方法，而class并沒(méi)有。所以如果使用class選擇器的話，瀏覽器會(huì)遍歷整個(gè)DOM，如果你的網(wǎng)頁(yè)DOM結(jié)構(gòu)足夠復(fù)雜，這些class選擇器足矣把頁(yè)面拖得越來(lái)越慢。讓我們看看這段簡(jiǎn)單的HTML代碼:

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   
    Selectors in jQuery
     
    4.   
  
  
  
  4.   ...  
    5.   
  
  
  
  5.   ...  
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.  
    8.
   
  •  
  •  //使用class來(lái)調(diào)用submit按鈕要比使用絕對(duì)的ID選擇器慢很多  
  • var main_button = $('#main .button');  
  • var main_button = $('#main_button');  

    • 8.善于利用jQuery鏈　　

    jQuery鏈不但允許以簡(jiǎn)潔的方式寫(xiě)出強(qiáng)大的操作，而且提高了開(kāi)發(fā)效率，因?yàn)樗軌虬讯鄠€(gè)命令應(yīng)用到包裝集，而不必重新計(jì)算包裝集。從而你不用再這樣寫(xiě)了：

     
 
 
 
        
  
  
  
    2. Description: 
      3.      
  
  
  
    3. $('#shopping_cart_items input.text').css('border', '3px dashed yellow');  
      4.   
  
  
  
    4. $('#shopping_cart_items input.text').css('background-color', 'red');  
      5.   
  
  
  
    5. $('#shopping_cart_items input.text').val("text updated");  
      6.

    取而代之你可以使用jQuery鏈來(lái)完成簡(jiǎn)便的操作：

     
 
 
 
        
  
  
  
    1. var input_text = $('#shopping_cart_items input.text');  
      2.   
  
  
  
    2. input_text.css('border', '3px dashed yellow');  
      3.   
  
  
  
    3. input_text.css('background-color', 'red');  
      4.   
  
  
  
    4. input_text.val("text updated");  
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6. //same with chaining:  
      7.   
  
  
  
    7. var input_text = $('#shopping_cart_items input.text');  
      8.   
  
  
  
    8. input_text  
      9.   
  
  
  
    9.  .css('border', '3px dashed yellow')  
      10.   
  
  
  
    10.  .css('background-color', 'red')  
      11.   
  
  
  
    11.  .val("text updated");  
      12.

    9.綁定jQuery函數(shù)到$(window).load事件　　

    大多數(shù)jQuery實(shí)例或教程都告訴我們綁定我們的jQuery代碼到$(document).ready事件。雖然$(document).ready事件在大多數(shù)情況下都OK，但是它的解析順序是在文檔準(zhǔn)備就緒，單文檔中的圖片等對(duì)象正在下載的時(shí)候開(kāi)始運(yùn)行的。所以在某些時(shí)候使用$(document).ready事件并不一定能達(dá)到我們預(yù)期的效果，比如一些視覺(jué)效果和動(dòng)畫(huà)、拖拽、預(yù)讀取隱藏圖片等…通過(guò)使用$(window).load事件便可以安全的在整個(gè)文檔都準(zhǔn)備就緒之后再開(kāi)始運(yùn)行你期望的代碼。

     
 
 
 
        
  
  
  
    1.  $(window).load(function(){  
      2.   
  
  
  
    2.  // 將你希望在頁(yè)面完全就緒之后運(yùn)行的代碼放在這里  
      3.   
  
  
  
    3. });  
      4.

    #p#
    10.使用jQuery鏈來(lái)限定選擇器，讓你的代碼更簡(jiǎn)潔更優(yōu)雅　　

    由于JavaScript支持鏈結(jié)構(gòu)而且支持?jǐn)嘈?，所以你的代碼可以寫(xiě)成下面這樣，這個(gè)例子先在元素上移除一個(gè)class然后在同一個(gè)元素上添加另一個(gè)class：

     
 
 
 
        
  
  
  
    1. $('#shopping_cart_items input.in_stock')  
      2.   
  
  
  
    2.    .removeClass('in_stock')  
      3.   
  
  
  
    3.    .addClass('3-5_days');  
      4.

    如果想讓它更簡(jiǎn)單實(shí)用，你可以創(chuàng)建一個(gè)支持鏈結(jié)構(gòu)的jQuery函數(shù)：

     
 
 
 
        
  
  
  
    1.  $.fn.makeNotInStock = function() {  
      2.   
  
  
  
    2.     return $(this).removeClass('in_stock').addClass('3-5_days');  
      3.   
  
  
  
    3. }  
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5. $('#shopping_cart_items input.in_stock').makeNotInStock().log();  
      6.

    11.使用回調(diào)函數(shù)同步效果　　

    如果你想確保某個(gè)事件或動(dòng)畫(huà)效果要在另一個(gè)事件運(yùn)行之后再調(diào)用，那你就要使用回調(diào)函數(shù)了。你可以在這些動(dòng)畫(huà)效果后面綁定回調(diào)函數(shù)：

     
 
 
 
        
  
  
  
    1. slideDown( speed, [回調(diào)] ) ie. $(‘#sliding’).slideDown(’slow’, function(){…   
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  $(document).ready(function(){  
      5.   
  
  
  
    5. // 使用jQuery的click事件改變視覺(jué)效果，并開(kāi)啟滑動(dòng)效果  
      6.   
  
  
  
    6.  $("div.button").click(function () {  
      7.   
  
  
  
    7.    //div.button 現(xiàn)在看上去是按下的效果  
      8.   
  
  
  
    8.    $(this).css({ borderStyle:"inset", cursor:"wait" });  
      9.   
  
  
  
    9.    //#sliding 現(xiàn)在將漸隱并在完成動(dòng)作之后開(kāi)啟漸顯效果  
      10.   
  
  
  
    10.    //slideup once it completes  
      11.   
  
  
  
    11.    $('#sliding').slideDown('slow', function(){  
      12.   
  
  
  
    12.      $('#sliding').slideUp('slow', function(){  
      13.   
  
  
  
    13.        //漸顯效果完成后將會(huì)改變按鈕的CSS屬性  
      14.   
  
  
  
    14.        $('div.button').css({ borderStyle:"outset", cursor:"auto" });  
      15.   
  
  
  
    15.      });  
      16.   
  
  
  
    16.    });  
      17.   
  
  
  
    17.  });  
      18.   
  
  
  
    18. });  
      19.

    12.學(xué)會(huì)使用自定義選擇器　　

    jQuery允許我們?cè)赾ss選擇器的基礎(chǔ)上定義自定義選擇器來(lái)讓我們的代碼更簡(jiǎn)潔:

     
 
 
 
        
  
  
  
    1. $.expr[':'].mycustomselector= function(element, index, meta, stack){  
      2.   
  
  
  
    2.     // element- DOM元素  
      3.   
  
  
  
    3.     // index - 堆棧中當(dāng)前遍歷的索引值  
      4.   
  
  
  
    4.     // meta - 關(guān)于你的選擇器的數(shù)據(jù)元  
      5.   
  
  
  
    5.     // stack - 用于遍歷所有元素的堆棧  
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.     // 包含當(dāng)前元素則返回true  
      8.   
  
  
  
    8.     // 不包含當(dāng)前元素則返回false  
      9.   
  
  
  
    9. };  
      10.   
  
  
  
    10. // 自定義選擇器的應(yīng)用:  
      11.   
  
  
  
    11. $('.someClasses:test').doSomething();  
      12.

    下面讓我們來(lái)看看一個(gè)小例子，我們通過(guò)使用自定義選擇器來(lái)鎖定含有”rel”屬性的元素集：

     
 
 
 
        
  
  
  
    1. $.expr[':'].withRel = function(element){  
      2.   
  
  
  
    2.   var $this = $(element);  
      3.   
  
  
  
    3.   //僅返回rel屬性不為空的元素  
      4.   
  
  
  
    4.   return ($this.attr('rel') != '');  
      5.   
  
  
  
    5. };  
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7. $(document).ready(function(){  
      8.   
  
  
  
    8. //自定義選擇器的使用很簡(jiǎn)單，它和其他選擇器一樣，返回一個(gè)元素包裝集  
      9.   
  
  
  
    9. //你可以為他使用格式方法，比如下面這樣修改它的css樣式  
      10.   
  
  
  
    10.  $('a:withRel').css('background-color', 'green');  
      11.   
  
  
  
    11. });   
      12.   
  
  
  
      12.    
  
  
  
      •   
      •  
        •   
  
  
  
      •     without rel 
        •   
  
  
  
      •   
        •    
  
  
  
      •   
      •  
        •   
  
  
  
      •     with rel 
        •   
  
  
  
      •   
        •    
  
  
  
      •   
      •  
        •   
  
  
  
      •     without rel 
        •   
  
  
  
      •   
        •    
  
  
  
      •   
      •  
        •   
  
  
  
      •     a link with rel 
        •   
  
  
  
      •   
        •    
  
  
  
        
      13.

    13.預(yù)加載圖片

    通常使用JavaScript來(lái)預(yù)加載圖片是個(gè)相當(dāng)不錯(cuò)的方法:

     
 
 
 
        
  
  
  
    1. //定義預(yù)加載圖片列表的函數(shù)(有參數(shù))  
      2.   
  
  
  
    2. jQuery.preloadImages = function(){  
      3.   
  
  
  
    3.   //遍歷圖片  
      4.   
  
  
  
    4.   for(var i = 0; i  
  
  
  
    5.     jQuery("").attr("src", arguments[i]);  
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.   }  
      8.   
  
  
  
    8. }  
      9.   
  
  
  
    9. // 你可以這樣使用預(yù)加載函數(shù)  
      10.   
  
  
  
    10. $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");  
      11.

    14.將你的代碼測(cè)試完好

    jQuery有一個(gè)名為QUnit單元測(cè)試框架。編寫(xiě)測(cè)試很容易，它能讓您可以放心地修改您的代碼，并確保它仍然按預(yù)期工作。下面是如何工作的：

     
 
 
 
        
  
  
  
    1. //將測(cè)試分成若干模塊.  
      2.   
  
  
  
    2. module("Module B");  
      3.   
  
  
  
    3. test("some other test", function() {  
      4.   
  
  
  
    4.   //指定多少個(gè)判斷語(yǔ)句需要加入測(cè)試中.  
      5.   
  
  
  
    5.   expect(2);  
      6.   
  
  
  
    6.     
      7.   
  
  
  
    7.   equals( true, false, "failing test" );  
      8.   
  
  
  
    8.   equals( true, true, "passing test" );  
      9.   
  
  
  
    9. });  
      10.

    文章轉(zhuǎn)自Lee's程序人生的博客，

    原文地址：http://www.cnblogs.com/analyzer/articles/1732327.html

    【編輯推薦】

    1. 10個(gè)自由豐富的jQuery或JavaScript編輯器
    2. jQuery 1.4十大新特性解讀及代碼示例
    3. 學(xué)習(xí)jQuery必須知道的幾種常用方法 

    當(dāng)前名稱：了解jQuery技巧來(lái)提高你的代碼質(zhì)量
    URL鏈接：http://www.5511xx.com/article/djeddpe.html