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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js中this的用法实例分析
Jan 10 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php中socket通信机制实例详解
2015/01/03 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
JS中表单的使用小结
2014/01/11 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python:socket传输大文件示例
2017/01/18 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python多继承顺序实例分析
2018/05/26 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python基础 range的用法解析
2019/08/23 Python
python实现按日期归档文件
2021/01/30 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
奥巴马就职演讲稿
2014/05/15 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
初中语文教学研修日志
2015/11/13 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python