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监听浏览器的问题
Jun 23 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
Javascript的无new构建实例详解
May 15 Javascript
Angular 应用技巧总结
Sep 14 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
javascript 获取图片颜色
2009/04/05 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Python切片用法实例教程
2014/09/08 Python
python操作CouchDB的方法
2014/10/08 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python可以用来做什么
2020/11/23 Python
PyQt QMainWindow的使用示例
2021/03/24 Python
护理中职生求职信范文
2014/02/24 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
社区工作者个人总结
2015/02/28 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技