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基础知识之数据类型
Aug 06 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 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
PHP4中实现动态代理
2006/10/09 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
详解python运行三种方式
2019/05/13 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
介绍Java的内部类
2012/10/27 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
销售经理工作职责范文
2013/12/03 职场文书
食品采购员岗位职责
2014/04/14 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
机器人总动员观后感
2015/06/09 职场文书
初中化学教学反思
2016/02/22 职场文书
靠谱的活动总结
2019/04/16 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Linux中各个目录的作用与内容
2022/06/28 Servers