jQuery 判断页面元素是否存在的代码


Posted in Javascript onAugust 14, 2009

例如:

document.getElementById("someID").innerText("hi");

如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null
正确的写法应该是:
obj = document.getElementById("someID"); 
if (obj){ 
obj.innerText("hi"); 
}

那么在jQuery,我们如何判断页面元素存在与否呢?如果参照上面的传统Javascript的写法,我们第一个想到的办法一定是:
if ($("#someID")){ 
$("#someID").text("hi"); 
}

可是这么写是不对的!因为jQuery对象永远都有返回值,所以$("someID") 总是TRUE ,IF语句没有起到任何判断作用。正确的写法应该是:
if ( $("#someID").length > 0 ) { 
$("#someID").text("hi"); 
}

注意 :判断某个页面元素存在与否在jQuery实际上是没有必要的,jQuery本身会忽略 对一个不存在的元素进行操作,并且不会报错。
$(document).ready(function(){ 
var value=$('#btn_delXml').length; 
if(value>0) 
{ 
alert('Extsts'); 
} 
else 
{ 
alert('not Extsts'); 
} 
})

下面是其它说明虽然类似,但有些文字说明
有的时候,要根据页面加载的内容不同而作不同的操作,这个时候,判断页面上是否存在这个元素(或对象)变得尤为重要。如果写JavaScript来实现,较为麻烦,而jQuery却能很容易的实现这个功能。

我们知道,jQuery选择器获取页面的element时,无论element是否存在,都会返回一个对象。例如:

var my_element = $("#element_Id" )

此时的变量my_element就是一个对象,既然是一个对象,这个对象就具有length的属性,因此,用以下代码可以判断元素(对象)是否存在:

if(my_element.length>0){ 
    alert("element is exist.");  
}else{  
    alert("element not be found");  
}
Javascript 相关文章推荐
用于table内容排序
Jul 21 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
vue观察模式浅析
Sep 25 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 #Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 #Javascript
img标签中onerror用法
Aug 13 #Javascript
什么是JavaScript
Aug 13 #Javascript
Javascript Global对象
Aug 13 #Javascript
Javascript Math对象
Aug 13 #Javascript
Javascript 作用域使用说明
Aug 13 #Javascript
You might like
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js模拟类继承小例子
2010/07/17 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
基于jQuery拖拽事件的封装
2020/11/29 jQuery
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
遗传算法之Python实现代码
2017/10/10 Python
详解python eval函数的妙用
2017/11/16 Python
Python列表切片操作实例总结
2019/02/19 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
助人为乐模范事迹材料
2014/06/02 职场文书
新党章的学习心得体会
2014/11/07 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2014年技术部工作总结
2014/12/12 职场文书
新党员入党决心书
2015/09/22 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python