千炮捕鱼(破解版内购)

書(shū)名： jQuery權(quán)威指南（第2版）
作者名：陶國(guó)榮著
本章字?jǐn)?shù)： 1284字
更新時(shí)間： 2018-12-31 23:37:05

2.1 選擇器的優(yōu)勢(shì)

與傳統(tǒng)的JavaScript獲取頁(yè)面元素和編寫(xiě)事務(wù)相比，jQuery選擇器具有明顯的優(yōu)勢(shì)，具體表現(xiàn)在以下兩個(gè)方面：

代碼更簡(jiǎn)單。
完善的檢測(cè)機(jī)制。

下面將詳細(xì)介紹這兩個(gè)方面。

2.1.1 代碼更簡(jiǎn)單

由于在jQuery庫(kù)中，封裝了大量可以通過(guò)選擇器直接調(diào)用的方法或函數(shù)，使編寫(xiě)代碼更加簡(jiǎn)單輕松，簡(jiǎn)單幾行代碼就可以實(shí)現(xiàn)較為復(fù)雜的功能。

下面通過(guò)一個(gè)實(shí)現(xiàn)表格隔行變色功能的示例，分別使用傳統(tǒng)的JavaScript語(yǔ)言與jQuery語(yǔ)言加以說(shuō)明。

示例2-1 分別使用JavaScript和jQuery實(shí)現(xiàn)隔行變色

（1）功能描述

在頁(yè)面中，通過(guò)一個(gè)<table>標(biāo)記展示數(shù)據(jù)列表信息，在元素標(biāo)記中，奇數(shù)行與偶數(shù)行的背景色不同，從而實(shí)現(xiàn)隔行變色的頁(yè)面展示效果。

（2）實(shí)現(xiàn)代碼

使用傳統(tǒng)的JavaScript實(shí)現(xiàn)該頁(yè)面功能。新建一個(gè)HTML文件2-1.html，加入如代碼清單2-1所示的代碼。

代碼清單2-1 使用JavaScript實(shí)現(xiàn)隔行變色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用JavaScript實(shí)現(xiàn)隔行變色</title>
    <style type="text/css">
         body{font-size:12px;text-align:center}
         #tbStu{width:260px;border:solid 1px #666;background-color:#eee}
         #tbStu tr{line-height:23px}
         #tbStu tr th{background-color:#ccc;color:#fff}
         #tbStu .trOdd{background-color:#fff}
    </style>
    <script type="text/javascript">
         window.onload=function(){
         var oTb=document.getElementById("tbStu");
            for(var i=0;i<oTb.rows.length-1;i++){
               if(i%2){
                  oTb.rows[i].className="trOdd";
               }
             }
          }
    </script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
         <tr>
             <th>學(xué)號(hào)</th><th>姓名</th><th>性別</th><th>總分</th>
         </tr>
             <!--奇數(shù)偶-->
         <tr>
             <td>1001</td><td>張小明</td><td>男</td><td>320</td>
         </tr>
             <!--偶數(shù)偶-->
         <tr>
             <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
         </tr>
         <!--...-->
    </tbody>
</table>
</body>
</html>

在代碼清單2-1中，首先通過(guò)ID號(hào)獲取表格元素，然后遍歷表格的各行，根據(jù)行號(hào)的奇偶性，動(dòng)態(tài)設(shè)置該行的背景色，從而實(shí)現(xiàn)隔行變色的頁(yè)面效果。

頁(yè)面中的JavaScript代碼雖可以實(shí)現(xiàn)最終效果，但循環(huán)頁(yè)面的元素會(huì)影響打開(kāi)速度，并且代碼較為復(fù)雜，如果使用jQuery選擇器實(shí)現(xiàn)上述頁(yè)面效果，則需要在頁(yè)面中加入一些代碼：

...
<head>
    <title>使用jQuery選擇器實(shí)現(xiàn)隔行變色</title>
    <script language="javascript" type="text/javascript"
            src="Jscript/jquery-1.8.2.min.js"></script>
     ...省略樣式代碼
    <script type="text/javascript">
          $(function(){
            $("#tbStu tr:nth-child(even)").addClass("trOdd");
           })
    </script>
</head>
...省略頁(yè)面主體代碼

（3）頁(yè)面效果

雖然示例2-1和示例2-2中的代碼不同，但都實(shí)現(xiàn)了頁(yè)面數(shù)據(jù)隔行變色的功能，其最終實(shí)現(xiàn)的頁(yè)面效果完全相同，如圖2-1所示。

圖2-1 頁(yè)面數(shù)據(jù)隔行變色效果

可以看出，使用jQuery選擇器可以很快捷地定位頁(yè)面中的某個(gè)元素，并設(shè)置該元素的相應(yīng)屬性，具有代碼簡(jiǎn)單、執(zhí)行效果高的優(yōu)點(diǎn)。

2.1.2 完善的檢測(cè)機(jī)制

在傳統(tǒng)的JavaScript代碼中，給頁(yè)面中某元素設(shè)置事務(wù)時(shí)必須先找到該元素，然后賦予相應(yīng)的屬性或事件；如果該元素在頁(yè)面中不存在或被前面代碼所刪除，那么瀏覽器將提示運(yùn)行出錯(cuò)信息，影響后續(xù)代碼的執(zhí)行。因此，在JavaScript代碼中，為了避免顯示這樣的出錯(cuò)信息，先要檢測(cè)該元素是否存在，然后再運(yùn)行其屬性或事件代碼，從而導(dǎo)致代碼冗余，影響執(zhí)行效率。

在jQuery選擇器定位頁(yè)面元素時(shí)，無(wú)須考慮所定位的元素在頁(yè)面中是否存在，即使該元素不存在該元素，瀏覽器也不提示出錯(cuò)信息，極大地方便了代碼的執(zhí)行效率。

下面通過(guò)一個(gè)簡(jiǎn)單的示例分別使用JavaScript語(yǔ)言與jQuery語(yǔ)言來(lái)說(shuō)明該檢測(cè)機(jī)制在頁(yè)面中的實(shí)現(xiàn)效果。

示例2-2 分別使用JavaScript和jQuery輸出文字信息

（1）功能描述

在頁(yè)面<div>標(biāo)記中輸出一行“這是一個(gè)檢測(cè)頁(yè)面”的字符。

（2）實(shí)現(xiàn)代碼

使用傳統(tǒng)的JavaScript實(shí)現(xiàn)該頁(yè)面功能。

新建一個(gè)HTML文件2-2.html，加入如代碼清單2-2所示的代碼。

代碼清單2-2 使用JavaScript輸出文字信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JavaScript代碼檢測(cè)頁(yè)面元素</title>
    <style type="text/css">
        body{font-size:12px;text-align:center}
    </style>
    <script type="text/javascript">
        window.onload=function(){
           if(document.getElementById("divT")){
                  var oDiv=document.getElementById("divT");
                  oDiv.innerHTML="這是一個(gè)檢測(cè)頁(yè)面";
                 }
         }
    </script>
</head>
<body>
</body>
</html>

（3）頁(yè)面效果

在JavaScript代碼中，有一行代碼如下：

if(document.getElementById("divT")){...}

該行代碼用于檢測(cè)所定位的頁(yè)面元素是否存在，如果存在，則執(zhí)行下面的代碼，否則不執(zhí)行；假設(shè)不編寫(xiě)該行代碼檢測(cè)元素的存在，則瀏覽器中將出現(xiàn)如圖2-2所示的出錯(cuò)提示信息。

圖2-2 頁(yè)面對(duì)象不存在的出錯(cuò)提示信息

如果將例2-2中的JavaScript代碼改寫(xiě)成jQuery選擇器方式獲取頁(yè)面元素，那么不需要檢測(cè)元素是否存在，且頁(yè)面正常執(zhí)行，其修改后的代碼如下所示：

<head>
    <title>jQuery代碼檢測(cè)頁(yè)面元素</title>
    <script language="javascript" type="text/javascript"
            src="Jscript/jquery-1.8.2.min.js"></script>
    ...省略樣式代碼
    <script type="text/javascript">
          $(function(){
            $("#divT").html("這是一個(gè)檢測(cè)頁(yè)面");
         })
    </script>
</head>
...省略頁(yè)面主體代碼

官术网_书友最值得收藏!

jQuery權(quán)威指南（第2版）

2.1 選擇器的優(yōu)勢(shì)

2.1.1 代碼更簡(jiǎn)單

示例2-1 分別使用JavaScript和jQuery實(shí)現(xiàn)隔行變色

2.1.2 完善的檢測(cè)機(jī)制

示例2-2 分別使用JavaScript和jQuery輸出文字信息