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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
javascript动态加载二
Aug 22 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
Vue分页组件实例代码
Apr 17 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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 批量删除 sql语句
2009/06/05 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
如何在Django项目中引入静态文件
2019/07/26 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python 实现两个线程交替执行
2020/05/02 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
青年创业培训欢迎词
2014/01/08 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
办公设备采购方案
2014/03/16 职场文书
青年文明号创建承诺
2014/03/31 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
2015年助残日活动总结
2015/03/27 职场文书