jquery完善的處理機制

時間 2019-12-14

原文原文鏈接

使用jQuery選擇器不只比使用傳統的getElementById()和getElementsByTagName()函數簡潔得多，並且還能避免某些錯誤。請看下面例子：css

1 <script>
2    document.getElementById("div").style.color ="red";
3 </script>

運行上面代碼後，瀏覽器就會報錯，緣由是網頁中沒有ID爲div的元素。jquery

改進後代碼以下：瀏覽器

1 <script>
2     if(document.getElementById("div")){  //用了IF語句來判斷是否有ID爲div的元素，若是有，執行下面代碼 
3         document.getElementById("div").style.color ="red"
4     }
5 </script>

這樣就能夠避免遊覽器報錯，但若是要操做的元素不少，可能對每一個元素都要進行一次判斷，而jquery方面問題上的處理是很是不錯的，即便用JQUERY獲取網頁中不存在的元素也不會報錯。函數

代碼以下：spa

1 <script>
2    $("#div").css("color","red");
3 </script>

有了這個預防措施，即便之後由於某種緣由刪除網頁上某個之前使用過的元素，也不用擔憂這個網頁的JavaScript會報錯。code

注意點：對象

$("div")獲取的永遠是jquery對象，即便網頁上沒有此元素。所以當要用jquery檢查某個元素在網頁上是否存在時。blog

不能使用如下代碼：ip

1 <script>
2   if($("#div")){
3       $("#div").css("color",red)  //這樣遊覽器會報錯
4   }
5 </script>

而是應該跟獲取長度來判斷。get

代碼以下：

<script>
  if($("#div").length >0){
      $("#div").css("color",red)
  }
</script>

這時候也能夠轉化爲DOM對象來判斷。

代碼以下：

 1 <body>
 2    <div id="div">ccccccc</div>
 3 <script src="jquery-2.1.4.min.js"></script>
 4 <script>
 5    var $div = $("#div");
 6    var  div = $div[0];
 7    if(div){
 8        $div.css("color","red")   //此時DIV的顏色就變爲red
 9    }
10 </script>
11 </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。