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 相关文章推荐
JS读取cookies信息(记录用户名)
Jan 10 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
JS二分查找算法详解
Nov 01 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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 setcookie函数的参数说明及其用法
2014/04/20 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
vue2组件之select2调用的示例代码
2017/10/12 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
Python docx库用法示例分析
2019/02/16 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python几种常见算法汇总
2020/06/02 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
门卫人员岗位职责
2013/12/24 职场文书
流动人口婚育证明
2014/10/19 职场文书
财务会计实训报告
2014/11/05 职场文书
计算机实训报告总结
2014/11/05 职场文书
2015年外联部工作总结
2015/04/03 职场文书
病危通知单
2015/04/17 职场文书
小学生读书笔记范文
2015/06/30 职场文书