jquery選擇器的優勢

編程語言 jQuery JavaScript CSS 碼農傳奇 2017-05-08

jquery中的選擇器完全繼承了CSS的風格,利用jquery選擇器,可以非常方便地找出特定的DOM元素,然後為它們添加相應的行為,而無需擔心瀏覽器是否支持這一選擇器。jquery中涉及操作CSS樣式的部分比單純的CSS功能更為強大,並且擁有跨瀏覽器的兼容性

jquery選擇器的優勢

jquery選擇器的優勢

jquery選擇器的優勢

1.簡潔的寫法

$()函數在很多javascript類庫中都被作為一個選擇器函數來使用,在jquery中也是如此。例如$("#id")用來代替document.getElementById(),即通過id獲取元素;$("tagName")用來代替document.getElementsByTagName(),即通過標籤名獲取HTML元素。

jquery選擇器的優勢

2.支持CSS1到CSS3選擇器

jquery選擇器支持CSS1、CSS2的全部和CSS3的部分選擇器,同時它也有少量獨有的選擇器。CSS選擇器需要考慮瀏覽器的兼容性問題,而jquery選擇器擁有跨瀏覽器的兼容性

3.完善的處理機制

使用擁有跨瀏覽器的兼容性選擇器不僅比傳統的document.getElementById()和document.getElementsByTagName()簡潔得多,而且還能避免某些錯誤。

比如使用document.getElementById()獲取並操作元素時,如果該元素在頁面上並不存在,瀏覽器就會報錯。為了避免這種情況,需要在操作元素之前判斷鈣元素是否存在,正確的做法是:

<script type="text/javascript">

if(document.getElementById("tt")){

document.getElementById("tt").style.color="red";

}

</script>

這樣就可以避免瀏覽器報錯,但是對每個要操作的元素進行判斷會顯得很繁瑣。jquery在上述問題的處理上是非常不錯的,即使用jquery獲取網頁中不存在的元素也不會報錯,例如:

<script type="text/javascript">

$('#tt').css("color","red");//這裡無需判斷$('#tt')是否存在

</script>

有了這個預防措施,即使以後因為某種原因刪除網頁上的某個元素,也不用擔心jquery代碼會報錯。

需要注意的是,$("#id")獲取的永遠是對象,並且默認是數組,即使網頁上沒有此元素,因此要用jquery檢查某個元素在網頁上是否存在時,不能像javascript那樣使用對象本身來判斷,而應該根據獲取到的元素的長度來判斷,即:

<script type="text/javascript">

if($('#tt').length>0){

//do something

}

</script>

或者轉化為DOM對象來判斷:

<script type="text/javascript">

if($('#tt').[0]){

//do something

}

</script>

這與javascript中直接判斷對象(if(document.getElementById("tt")))是不同的,尤其需要注意。


以上即為jquery相比於javascript的優勢,需要在實際的使用過程中仔細體會。

相關推薦

推薦中...