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 08 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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遍历二维数组的代码
2011/04/22 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
详解JS函数防抖
2020/06/05 Javascript
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Django自定义manage命令实例代码
2018/02/11 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python实现QQ批量登录功能
2019/06/19 Python
python async with和async for的使用
2019/06/20 Python
Python如何执行系统命令
2020/09/23 Python
运动会开幕式解说词
2014/02/05 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
质检员岗位职责范本
2015/04/07 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书