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 函数式编程的原理
Oct 16 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
JavaScript中string对象
Jun 12 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
解放web程序员的输入验证
2006/10/06 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS实现的全排列组合算法示例
2017/10/09 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
详解React 条件渲染
2020/07/08 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
四年大学生活的自我评价范文
2014/02/07 职场文书
迟到早退检讨书
2014/02/10 职场文书
事业单位考察材料范文
2014/12/25 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python