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 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
Javascript 面向对象之重载
May 04 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
javascript获取元素的计算样式
May 24 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
phpStorm2020 注册码
2020/09/17 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python实现学校管理系统
2018/01/11 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
请说出几个常用的异常类
2013/01/08 面试题
保密承诺书
2014/03/27 职场文书
法人授权委托书范本
2014/04/04 职场文书
年终考核实施方案
2014/05/26 职场文书
艾滋病宣传标语
2014/06/25 职场文书
安全生产标语大全
2014/10/06 职场文书
电影地道战观后感
2015/06/04 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书