日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

jQuery是一個(gè)了不起的輕量級(jí)的JavaScript框架，事實(shí)上在jQuery發(fā)布之前，就已經(jīng)有無(wú)數(shù)功能強(qiáng)大得多的JavaScript框架在流行。從功能列表上來(lái)說(shuō)，jQuery在JavaScript框架中只能算是很不起眼的小弟。

但這個(gè)小弟在短短的時(shí)間內(nèi)，就成為了最流行的JavaScript框架之一。當(dāng)然jQuery成功的原因有很多，跨瀏覽器兼容、輕巧、不算很差的性能，以及jQuery的“口號(hào)”：write less, do more。

推薦閱讀：jQuery四大天王：核心函數(shù)詳解

有人會(huì)說(shuō)，write less, do more就是jQuery的全部設(shè)計(jì)哲學(xué)，但我不這么認(rèn)為。在我看來(lái)，write less, do more是任何一個(gè)框架都必須去做的事情。很難想象會(huì)有人選擇一個(gè)write more, do less的框架吧。所以，對(duì)于一個(gè)框架而言，這是最基本的事情，要成為一個(gè)偉大的框架，顯然這很不夠。

在這里我想談?wù)刯Query的一個(gè)設(shè)計(jì)的藝術(shù)，select then do。CSS選擇器是jQuery最重要的函數(shù)$（或者說(shuō)jQuery）最常見(jiàn)的參數(shù)。盡管這個(gè)函數(shù)可以接受的參數(shù)還有HTML元素或是HTML代碼。但最常用的顯然是傳入一個(gè)CSS選擇器，jQuery會(huì)幫你選擇文檔中符合要求的元素。然后，你就可以對(duì)這個(gè)元素集進(jìn)行操作：

 
 
 

  
  
  
$("li").css("font-style", "italic");
  
  
  

 
 
 

這段腳本可以將所有l(wèi)i元素設(shè)置為斜體。這是jQuery最常見(jiàn)的用法，利用選擇器選擇自己所需的元素，然后對(duì)其執(zhí)行某些操作。為了方便進(jìn)行多個(gè)操作，jQuery絕大多數(shù)的函數(shù)都返回執(zhí)行函數(shù)的原對(duì)象，在這里也就是$("li")。所以我們可以簡(jiǎn)單的繼續(xù)寫(xiě)：

 
 
 

  
  
  
$("li").css("font-style", "italic").hide();
  
  
  

 
 
 

這里面透露出來(lái)了一個(gè)jQuery設(shè)計(jì)的哲學(xué)，即select then do，select就是選擇所需的元素，do就是執(zhí)行某些操作。絕大多數(shù)時(shí)候，我們都是select.do.do.select.do.do.do，比如說(shuō)：

 
 
 

  
  
  
$("li").css("font-style", "italic").show().find("a").text("刪除").attr("href", "javascript:void(0);").click(function ()  
  
  
  
{ $(this).parent().hide(); });
 
 
 

很明顯的，$("li")在select然后接著兩個(gè)do，再然后.find("a")，這里在進(jìn)一步進(jìn)行select，然后繼續(xù)執(zhí)行一系列的do。注意在click綁定的事件處理函數(shù)里：$(this).parent().hide()也是一個(gè)非常經(jīng)典的select.select.do。這非常接近我們的自然語(yǔ)言，比如說(shuō)上面那一段腳本，其實(shí)是這個(gè)意思：

“所有的li元素聽(tīng)好了，把你們的字體搞成斜的，再給我顯示出來(lái)，然后看看你們后代里面有沒(méi)有a元素，讓它把顯示文字變成“刪除”，再把href屬性設(shè)置為"javascript:void(0);"，最后他們被點(diǎn)擊的時(shí)候，把他們的父親隱藏掉?！笔堑模彝耆钦罩_本直接就可以說(shuō)出來(lái)，不需要任何思考和變換。接下來(lái)，我們來(lái)看看一個(gè)糟糕的例子：

 
 
 

  
  
  
var items = document.getElementsByTagName("li" ); 
  
  
  
     for (var i = 0; i < items.length; i++) 
  
  
  
          {  var li = items.item(i);   
  
  
  
             li.style.fontStyle = "italic";   
  
  
  
             li.style.display = "";    
  
  
  
             var childs = li.childNodes;   
  
  
  
             for (var j = 0; j < childs.length; j++)   
  
  
  
          {    var a = childs[j];      
  
  
  
              if (a.tagName != "A")       
  
  
  
              continue;      
  
  
  
               a.innerText = "刪除";     
  
  
  
               a.href = "javascript:void(0);";      
  
  
  
               a.onclick = function ()     
  
  
  
           {   this.parentNode.style.display = "none";     
  
  
  
             };   
  
  
  
            } 
  
  
  
}
 
 
 

很難想象這段腳本只是完成了相同的事情。照著這段腳本你能簡(jiǎn)單的描述它是干什么的么？

當(dāng)然，select then do并不僅僅只是幫我們節(jié)省了代碼。更大的優(yōu)勢(shì)在于，它使得我們可以將我們的邏輯和HTML文檔徹底的分開(kāi)。簡(jiǎn)單的說(shuō)，在Web開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到這樣的需求，按下一個(gè)按鈕，彈出一個(gè)選擇框讓用戶決定是否提交表單，傳統(tǒng)的方式是這樣：

 
 
 

  
  
  

  
  
  
( confirm( '您確定要提交這些信息么' ) )  
  
  
  
document.getElementById('registerForm').submit();" />
 
 
 

顯然這很糟糕，他將行為和HTML元素死死的捆在了一起，如果我們希望這個(gè)按鈕同時(shí)干兩件事情，那真是一件災(zāi)難。jQuery的選擇器可以很好的幫助我們分離我們的行為，select then do：

 
 
 

  
  
  
$("#submitButton").click(function () 
  
  
  
{ if (confirm('您確定要提交這些信息么'))  
  
  
  
$('#registerForm').submit(); });
 
 
 

如果是要處理復(fù)雜的事情，這會(huì)更愜意。其實(shí)到現(xiàn)在并沒(méi)有什么神奇的事情發(fā)生，沒(méi)有jQuery我們也可以通過(guò)DOM提供的方法簡(jiǎn)單的通過(guò)腳本進(jìn)行事件的注冊(cè)，而不是直接寫(xiě)在HTML里面。只是我們要處理一下不同的瀏覽器之間的差異而已。

#p#

我們來(lái)考慮另一個(gè)場(chǎng)景。譬如說(shuō)在頁(yè)面上有一個(gè)登陸的小區(qū)域，里面有三個(gè)輸入框，用戶名、密碼和驗(yàn)證碼，然后有一個(gè)登陸按鈕，像這樣：

 
 
 

  
  
  
   
  
  
  
          
  
  
  
                  
  
  
  
               用戶名:       
  
  
  
                    
  
  
  
                    
  
  
  
                      
  
  
  
               密碼:       
  
  
  
                    
  
  
  
                    
  
  
  
                      
  
  
  
               驗(yàn)證碼:       
  
  
  
                    
  
  
  
                    
  
  
  
                      
  
  
  
                    
  
  
  
                  
  
  
  
               
  
  
  

 
 
 

有一個(gè)很不幸的事情，這種登陸框到處都有。而你，還不得不給這個(gè)登陸框加上一些必須處理的事情，例如在提交的時(shí)候檢查一下輸入框是不是空的。顯然我們并不希望在所有的這些頁(yè)面都去寫(xiě)一小段腳本，我們希望有一段腳本，能夠自動(dòng)的在有這種登陸框的頁(yè)面處理這些事情。最好是，在沒(méi)有登陸框的頁(yè)面，它也不會(huì)有任何副作用，那么這樣的腳本真的存在么？

 
 
 

  
  
  
$("form#loginForm input[type=submit]").click(function () 
  
  
  
           {   
  
  
  
               var form = $("form#loginForm");   
  
  
  
               var flag = true;   
  
  
  
               form.find("input[type=text] , input[type=password]").each(function ()   
  
  
  
          {    if (this.value == "" && flag)     
  
  
  
               {      window.alert("請(qǐng)將登陸信息填寫(xiě)完整");       
  
  
  
                     flag = false;     
  
  
  
          }   
  
  
  
 });    
  
  
  
             return flag; 
  
  
  
} 
  
  
  
);
 
 
 

注意這段腳本中選擇器的運(yùn)用，通過(guò)id限定和find方法的范圍限定，我們牢牢地將這段腳本所影響的范圍控制在了一個(gè)id為loginForm的表單中。更絕妙的是，即使這個(gè)表單不存在于頁(yè)面，這段腳本也沒(méi)有任何的問(wèn)題。不會(huì)在你IE的狀態(tài)欄弄一個(gè)黃色的感嘆號(hào)告訴你腳本出現(xiàn)了錯(cuò)誤。你可以將這段腳本大膽放心的放在每一個(gè)頁(yè)面的JavaScript的引用中（這對(duì)于現(xiàn)有的技術(shù)來(lái)說(shuō)再簡(jiǎn)單不過(guò)），也不用擔(dān)心明天哪個(gè)頁(yè)面多了一個(gè)登陸塊你會(huì)需要去寫(xiě)什么腳本。

這就是選擇器的絕妙之處，它使得我們的頁(yè)面元素可以通過(guò)約定來(lái)獲得某些行為，例如在這里，只要我們將登陸用的表單的id設(shè)置為loginForm，那么這個(gè)表單就會(huì)自動(dòng)獲得提交的時(shí)候檢查所有輸入框的行為。這種約定的威力完全不僅如此，我們?cè)賮?lái)看一段神奇的腳本：

 
 
 

  
  
  
$("form").submit(function () 
  
  
  
  {   
  
  
  
     var flag = true;     
  
  
  
     $(this).find("input[type=text][requiredrequired=required] , input[type=password][requiredrequired=required]").each(function ()   
  
  
  
            {     
  
  
  
                if ($(this).val() == "")     
  
  
  
                   {      window.alert("信息沒(méi)有填寫(xiě)完整，請(qǐng)認(rèn)真檢查必填項(xiàng)");       
  
  
  
                          flag = false;      return false;     
  
  
  
                   }   
  
  
  
             } 
  
  
  
    );    
  
  
  
                return flag; 
  
  
  
   } 
  
  
  
);
 
 
 

這段神奇的腳本可以讓你只需要在你的輸入框上加一個(gè)屬性required="required"，然后表單提交的時(shí)候就會(huì)自動(dòng)驗(yàn)證這些輸入框里面是不是填了東西。這太神奇了，我們利用jQuery提前享受了HTML 5的新特性。

當(dāng)我意識(shí)到j(luò)Query的選擇器如此強(qiáng)大的威力的時(shí)候，我馬上想到，事實(shí)上如果將選擇器運(yùn)用于我們傳統(tǒng)的頁(yè)面數(shù)據(jù)綁定，也會(huì)是一件非常棒的事情。這便是Jumony引擎的由來(lái)。Jumony將jQuery的選擇器和select then do藝術(shù)幾乎完整的搬到了C#中。在項(xiàng)目開(kāi)發(fā)中帶來(lái)的效率提升和暢快的感覺(jué)，完全的超出了我原本的設(shè)想。

在這里，我仍不愿意過(guò)多的去談Jumony的功能細(xì)節(jié)。由于這個(gè)引擎仍在不斷的開(kāi)發(fā)修改和內(nèi)部測(cè)試中，現(xiàn)在并沒(méi)有可以公開(kāi)的預(yù)覽，我只能說(shuō)，敬請(qǐng)期待。我會(huì)繼續(xù)分享在Jumony開(kāi)發(fā)和設(shè)計(jì)中過(guò)程中的。

最新的Jumony build已經(jīng)實(shí)現(xiàn)如下選擇器支持：

 
 
 

  
  
  
*、E、E E、E + E、E > E、E ~ E 
  
  
  

  
  
  
#identity、.class-name、[attr]、[attr=value] 
  
  
  
[attr!=value]、[attr^=value]、[attr$=value] 
  
  
  

  
  
  
:nth-child、:nth-last-child、:nth-of-type、 
  
  
  
:nth-last-of-type、:first-child、:last-child、 
  
  
  
:first-of-type、:last-of-type
 
 
 

網(wǎng)站欄目：不只是口號(hào)jQuery的設(shè)計(jì)藝術(shù)
網(wǎng)頁(yè)路徑：http://www.dlmjj.cn/article/djdcdih.html