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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
谈谈node.js中的模块系统
Sep 01 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加密解密的代码
2007/07/16 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
python生成随机图形验证码详解
2017/11/08 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
小程序实现筛子抽奖
2021/05/26 Javascript