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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
vue.js的安装方法
May 12 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
vue超时计算的组件实例代码
Jul 09 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小技巧之过滤ascii控制字符
2014/05/14 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
php封装的smarty类完整实例
2016/10/19 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
javascript中Function类型详解
2015/04/28 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python中p-value的实现方式
2019/12/16 Python
简单介绍django提供的加密算法
2019/12/18 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
美国在线家具网站:GDFStudio
2021/03/13 全球购物
数控个人求职信范文
2014/02/03 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
入党团支部推荐意见
2015/06/02 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android