jQuery权威指南（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1 选择器的优势

与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下两个方面：

  • 代码更简单。
  • 完善的检测机制。

下面将详细介绍这两个方面。

2.1.1 代码更简单

由于在jQuery库中，封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松，简单几行代码就可以实现较为复杂的功能。

下面通过一个实现表格隔行变色功能的示例，分别使用传统的JavaScript语言与jQuery语言加以说明。

示例2-1 分别使用JavaScript和jQuery实现隔行变色

（1）功能描述

在页面中，通过一个<table>标记展示数据列表信息，在元素标记中，奇数行与偶数行的背景色不同，从而实现隔行变色的页面展示效果。

（2）实现代码

使用传统的JavaScript实现该页面功能。新建一个HTML文件2-1.html，加入如代码清单2-1所示的代码。

代码清单2-1 使用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实现隔行变色</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>学号</th><th>姓名</th><th>性别</th><th>总分</th>
         </tr>
             <!--奇数偶-->
         <tr>
             <td>1001</td><td>张小明</td><td>男</td><td>320</td>
         </tr>
             <!--偶数偶-->
         <tr>
             <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
         </tr>
         <!--...-->
    </tbody>
</table>
</body>
</html>

在代码清单2-1中，首先通过ID号获取表格元素，然后遍历表格的各行，根据行号的奇偶性，动态设置该行的背景色，从而实现隔行变色的页面效果。

页面中的JavaScript代码虽可以实现最终效果，但循环页面的元素会影响打开速度，并且代码较为复杂，如果使用jQuery选择器实现上述页面效果，则需要在页面中加入一些代码：

...
<head>
    <title>使用jQuery选择器实现隔行变色</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>
...省略页面主体代码

（3）页面效果

虽然示例2-1和示例2-2中的代码不同，但都实现了页面数据隔行变色的功能，其最终实现的页面效果完全相同，如图2-1所示。

图2-1 页面数据隔行变色效果

可以看出，使用jQuery选择器可以很快捷地定位页面中的某个元素，并设置该元素的相应属性，具有代码简单、执行效果高的优点。

2.1.2 完善的检测机制

在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。因此，在JavaScript代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。

在jQuery选择器定位页面元素时，无须考虑所定位的元素在页面中是否存在，即使该元素不存在该元素，浏览器也不提示出错信息，极大地方便了代码的执行效率。

下面通过一个简单的示例分别使用JavaScript语言与jQuery语言来说明该检测机制在页面中的实现效果。

示例2-2 分别使用JavaScript和jQuery输出文字信息

（1）功能描述

在页面<div>标记中输出一行“这是一个检测页面”的字符。

（2）实现代码

使用传统的JavaScript实现该页面功能。

新建一个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代码检测页面元素</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="这是一个检测页面";
                 }
         }
    </script>
</head>
<body>
</body>
</html>

（3）页面效果

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

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

该行代码用于检测所定位的页面元素是否存在，如果存在，则执行下面的代码，否则不执行；假设不编写该行代码检测元素的存在，则浏览器中将出现如图2-2所示的出错提示信息。

图2-2 页面对象不存在的出错提示信息

如果将例2-2中的JavaScript代码改写成jQuery选择器方式获取页面元素，那么不需要检测元素是否存在，且页面正常执行，其修改后的代码如下所示：

<head>
    <title>jQuery代码检测页面元素</title>
    <script language="javascript" type="text/javascript"
            src="Jscript/jquery-1.8.2.min.js"></script>
    ...省略样式代码
    <script type="text/javascript">
          $(function(){
            $("#divT").html("这是一个检测页面");
         })
    </script>
</head>
...省略页面主体代码
上一章目录下一章