jQuery 检查某个元素在页面上是否存在实例代码


Posted in Javascript onOctober 27, 2016

    最近做项目,有这么个功能用jQuery检查某个元素在网页上是否存在,这里记录下,也许能帮助正在读文章的朋友。

 用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下:

if($("#tt").length > 0) {
  //元素存在时执行的代码
}

具体原因如下:

         在JavaScript中,我们在使用传统的getElementById()和getElementsByTagName()时,如果在网页中找不到相关元素,那么浏览器就会报错,影响后续代码的执行,所以为了避免浏览器报错,可以对元素进行判断,例如:

if(document.getElementById("tt")) {//js判断元素是否存在
  document.getElementById("tt").style.color = "red";
}

如果要操作的元素很多,就需要大量重复的工作,这往往让人厌倦。而jQuery的一大优势就是它完善的处理机制,即使用jQuery获取网页中不存在的元素也不会报错。这是因为$("#tt")获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码:

if($("#tt")) {
  //永远执行,不管元素是否存在
}

这就是为什么要根据元素的长度来判断元素在页面中是否存在的原因。

       感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!  

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 #Javascript
简单理解vue中el、template、replace元素
Oct 27 #Javascript
深入理解JavaScript定时机制
Oct 27 #Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 #Javascript
js实现加载更多功能实例
Oct 27 #Javascript
Vue.js一个文件对应一个组件实践
Oct 27 #Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 #Javascript
You might like
PHP中的Memcache详解
2014/04/05 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
跟老齐学Python之Import 模块
2014/10/13 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python操作文件的参数整理
2019/06/11 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
几个人围成一圈的问题
2013/09/26 面试题
希特勒经典演讲稿
2014/05/19 职场文书
大一新生期末自我评价
2014/09/12 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python