jQuery 判斷頁(yè)面元素是否存在的代碼
更新時(shí)間：2009年08月14日 01:43:55 作者：
在傳統(tǒng)的Javascript里，當(dāng)我們對(duì)某個(gè)頁(yè)面元素進(jìn)行某種操作前，最好先判斷這個(gè)元素是否存在。原因是對(duì)一個(gè)不存在的元素進(jìn)行操作是不允許的。
例如：
document.getElementById("someID").innerText("hi");
如果ID為"someID"的元素不存在，我們將得到Javascript運(yùn)行錯(cuò)誤：document.getElementById("someID") is null
正確的寫(xiě)法應(yīng)該是：
obj = document.getElementById("someID");
if (obj){
obj.innerText("hi");
}
那么在jQuery，我們?nèi)绾闻袛囗?yè)面元素存在與否呢？如果參照上面的傳統(tǒng)Javascript的寫(xiě)法，我們第一個(gè)想到的辦法一定是：
if ($("#someID")){
$("#someID").text("hi");
}
可是這么寫(xiě)是不對(duì)的！因?yàn)閖Query對(duì)象永遠(yuǎn)都有返回值，所以$("someID") 總是TRUE ，IF語(yǔ)句沒(méi)有起到任何判斷作用。正確的寫(xiě)法應(yīng)該是：
if ( $("#someID").length > 0 ) {
$("#someID").text("hi");
}
注意 ：判斷某個(gè)頁(yè)面元素存在與否在jQuery實(shí)際上是沒(méi)有必要的，jQuery本身會(huì)忽略 對(duì)一個(gè)不存在的元素進(jìn)行操作，并且不會(huì)報(bào)錯(cuò)。
$(document).ready(function(){
var value=$('#btn_delXml').length;
if(value>0)
{
alert('Extsts');
}
else
{
alert('not Extsts');
}
})
下面是其它說(shuō)明雖然類似，但有些文字說(shuō)明
有的時(shí)候，要根據(jù)頁(yè)面加載的內(nèi)容不同而作不同的操作，這個(gè)時(shí)候，判斷頁(yè)面上是否存在這個(gè)元素（或?qū)ο螅┳兊糜葹橹匾?。如果?xiě)JavaScript來(lái)實(shí)現(xiàn)，較為麻煩，而jQuery卻能很容易的實(shí)現(xiàn)這個(gè)功能。
我們知道，jQuery選擇器獲取頁(yè)面的element時(shí)，無(wú)論element是否存在，都會(huì)返回一個(gè)對(duì)象。例如：
var my_element = $("#element_Id" )
此時(shí)的變量my_element就是一個(gè)對(duì)象，既然是一個(gè)對(duì)象，這個(gè)對(duì)象就具有l(wèi)ength的屬性，因此，用以下代碼可以判斷元素（對(duì)象）是否存在：
if(my_element.length>0){
alert("element is exist.");
}else{
alert("element not be found");
}
復(fù)制代碼 代碼如下:
document.getElementById("someID").innerText("hi");
如果ID為"someID"的元素不存在，我們將得到Javascript運(yùn)行錯(cuò)誤：document.getElementById("someID") is null
正確的寫(xiě)法應(yīng)該是：
復(fù)制代碼 代碼如下:
obj = document.getElementById("someID");
if (obj){
obj.innerText("hi");
}
那么在jQuery，我們?nèi)绾闻袛囗?yè)面元素存在與否呢？如果參照上面的傳統(tǒng)Javascript的寫(xiě)法，我們第一個(gè)想到的辦法一定是：
復(fù)制代碼 代碼如下:
if ($("#someID")){
$("#someID").text("hi");
}
可是這么寫(xiě)是不對(duì)的！因?yàn)閖Query對(duì)象永遠(yuǎn)都有返回值，所以$("someID") 總是TRUE ，IF語(yǔ)句沒(méi)有起到任何判斷作用。正確的寫(xiě)法應(yīng)該是：
復(fù)制代碼 代碼如下:
if ( $("#someID").length > 0 ) {
$("#someID").text("hi");
}
注意 ：判斷某個(gè)頁(yè)面元素存在與否在jQuery實(shí)際上是沒(méi)有必要的，jQuery本身會(huì)忽略 對(duì)一個(gè)不存在的元素進(jìn)行操作，并且不會(huì)報(bào)錯(cuò)。
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var value=$('#btn_delXml').length;
if(value>0)
{
alert('Extsts');
}
else
{
alert('not Extsts');
}
})
下面是其它說(shuō)明雖然類似，但有些文字說(shuō)明
有的時(shí)候，要根據(jù)頁(yè)面加載的內(nèi)容不同而作不同的操作，這個(gè)時(shí)候，判斷頁(yè)面上是否存在這個(gè)元素（或?qū)ο螅┳兊糜葹橹匾?。如果?xiě)JavaScript來(lái)實(shí)現(xiàn)，較為麻煩，而jQuery卻能很容易的實(shí)現(xiàn)這個(gè)功能。
我們知道，jQuery選擇器獲取頁(yè)面的element時(shí)，無(wú)論element是否存在，都會(huì)返回一個(gè)對(duì)象。例如：
var my_element = $("#element_Id" )
此時(shí)的變量my_element就是一個(gè)對(duì)象，既然是一個(gè)對(duì)象，這個(gè)對(duì)象就具有l(wèi)ength的屬性，因此，用以下代碼可以判斷元素（對(duì)象）是否存在：
復(fù)制代碼 代碼如下:
if(my_element.length>0){
alert("element is exist.");
}else{
alert("element not be found");
}
您可能感興趣的文章:
- JQuery顯示隱藏頁(yè)面元素的方法總結(jié)
- jQuery獲得頁(yè)面元素的絕對(duì)/相對(duì)位置即絕對(duì)X,Y坐標(biāo)
- JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能
- jQuery獲取頁(yè)面元素絕對(duì)與相對(duì)位置的方法
- jquery獲得頁(yè)面元素的坐標(biāo)值實(shí)現(xiàn)思路及代碼
- jQuery頁(yè)面元素動(dòng)態(tài)添加后綁定事件丟失方法,非 live
- jQuery實(shí)現(xiàn)動(dòng)態(tài)控制頁(yè)面元素的方法分析
- jQuery使用之處理頁(yè)面元素用法實(shí)例
- jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)鎖定頁(yè)面元素(表格列)
相關(guān)文章
基于Jquery的標(biāo)簽智能驗(yàn)證實(shí)現(xiàn)代碼
一直在尋找最快捷方便的信息驗(yàn)證方法，之前自己編過(guò)JS版驗(yàn)證但要寫(xiě)很多輔助代碼，經(jīng)過(guò)許多次改進(jìn)，還是覺(jué)得太麻煩代碼還多，維護(hù)起太費(fèi)盡。2010-12-12
jQuery是一款非常優(yōu)秀的javascript框架，當(dāng)我們使用到j(luò)Query后就再也不想回到j(luò)avascript時(shí)冗長(zhǎng)的代碼，那么jQuery的優(yōu)化就擺在了我們的面前。那么我們優(yōu)化JQuery應(yīng)該從那些方面入手呢？2014-05-05
jQuery實(shí)現(xiàn)仿QQ頭像閃爍效果的文字閃動(dòng)提示代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿QQ頭像閃爍效果的文字閃動(dòng)提示代碼,涉及jQuery正則表達(dá)式及定時(shí)函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
jquery自動(dòng)補(bǔ)齊功能插件flexselect用法示例
這篇文章主要介紹了jquery自動(dòng)補(bǔ)齊功能插件flexselect用法,結(jié)合實(shí)例形式分析了flexselect實(shí)現(xiàn)自動(dòng)補(bǔ)齊功能的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了利用jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本文主要介紹了jquery中bind(),live(),delegate(),on()綁定事件的不同點(diǎn)和相同點(diǎn)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關(guān)資料,需要的朋友可以參考下2017-03-03
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實(shí)現(xiàn)上拉刷新下拉加載更多頁(yè)面的呢？下面小編通過(guò)下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理，需要的朋友可以參考下2015-08-08
原作者是在body中不停的插入多個(gè)小div雪花來(lái)向下慢慢飄，一直飄到body的底部后，將雪花移除,于是，將原來(lái)的代碼稍加修改，讓他只是從屏幕的頂部飄落到屏幕底部（不是body的底部）后，就將雪花移除，另外將雪花改為fixed定位2013-01-01
jquery.ui.draggable中文文檔(原文翻譯)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11