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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
Jul 26 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
基于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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
使用angular写一个hello world
2015/01/23 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
挪威手表购物网站:Klokker
2016/09/19 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
大学生村官心得体会范文
2014/01/04 职场文书
保护水资源的标语
2014/06/17 职场文书
大学生入党自传2015
2015/06/26 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android