4.3 jQuery選擇器的優勢

與傳統的JavaScript獲取頁面元素和編寫事務相比，jQuery選擇器具有明顯的優勢，具體表現在以下3個方面：

代碼更簡單。

支持CSS1到CSS3選擇器。

完善的處理機制。

4.3.1 代碼更簡單

在jQuery庫中封裝了大量可以直接通過選擇器調用的方法或函數，使我們僅使用簡單的幾行代碼就可以實現比較復雜的功能。例如：可以使用$('#id')代替JavaScript代碼中的document.getElementById()函數，即通過id來獲取元素；使用$('tagName')代替JavaScript代碼中的document.getElementsByTagName()函數，即通過標簽名稱獲取HTML元素等。

4.3.2 支持CSS1到CSS3選擇器

jQuery選擇器支持CSS1、CSS2的全部和CSS3幾乎所有的選擇器，以及jQuery獨創的高級且復雜的選擇器，因此有一定CSS經驗的開發人員可以很容易地切入到jQuery的學習中來。

一般來說，使用CSS選擇器時，開發人員需要考慮主流的瀏覽器是否支持某些選擇器。但在jQuery中，開發人員則可以放心地使用jQuery選擇器，無需考慮瀏覽器是否支持這些選擇器，這極大的方便了開發者。

4.3.3 完善的檢測機制

在傳統的JavaScript代碼中，給頁面中的元素設定某個事務時必須先找到該元素，然后賦予相應的事件或屬性；如果該元素在頁面中不存在或已被刪除，那么瀏覽器會提示運行出錯之后的信息，這會影響后邊代碼的執行。因此，為避免顯示這樣的出錯信息，通常要先檢測該元素是否存在，如果存在，再執行它的屬性或事件代碼。例如，看下面這個例子，代碼如下：

        <div>測試這個頁面</div>
        <script type="text/javascript">
            alert(document.getElementById("mr").value);
        </script>

運行以上代碼，瀏覽器就會報錯，原因是網頁中沒有id為“mr”的元素，瀏覽器中的出錯提示信息如圖4.1所示。

將以上代碼改進為如下形式：

        <div>測試這個頁面</div>
        <script type="text/javascript">
            if(document.getElementById("mr")){
                alert(document.getElementById("mr").value);
            }
        </script>

圖4.1 瀏覽器的錯誤提示信息

這樣就可以避免瀏覽器報錯了。但是，如果要操作的元素很多，我們需要做大量重復的工作對每個元素進行判斷，這無疑會使開發人員感到厭倦。而jQuery在這方面的處理是非常好的，即使用jQuery獲取網頁中不存在的元素也不會報錯，看下面的例子，代碼如下：

        <div>測試這個頁面</div>
        <script type="text/javascript">
          alert($("#mr").val());       //無需判斷$("#mr")是否存在
        </script>

有了jQuery的這個防護措施，即使以后我們因為某種原因刪除了網頁上曾經使用過的元素，也不用擔心網頁的JavaScript代碼會報錯了。

這里需要注意一點，$("#mr")獲取的是jQuery對象，即使頁面上沒有這個元素。因此我們要用jQuery檢測某個元素在頁面上是否存在時，不能使用如下代碼：

            if($("#mr")){
                //省略一些JavaScript代碼
            }

而是應該根據獲取到元素的長度來判斷，代碼如下：

            if($("#mr").length > 0){
                //省略一些JavaScript代碼
            }

或轉換為DOM對象來判斷，代碼如下：

            if($("#mr").get(0)){
                //省略一些JavaScript代碼
            }