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中的parseInt和parseFloat区别
Jul 12 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
react native 仿微信聊天室实例代码
Sep 17 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 文件状态缓存带来的问题
2008/12/14 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php的hash算法介绍
2014/02/13 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
vue更改数组中的值实例代码详解
2020/02/07 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python运算符重载用法实例
2015/05/28 Python
浅谈python迭代器
2017/11/08 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Django中的ajax请求
2018/10/19 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python调用自定义函数的实例操作
2019/06/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
财务部岗位职责
2013/11/19 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
高一政治教学反思
2014/01/28 职场文书
庆元旦广播稿
2014/02/10 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL