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公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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伪静态的实现详细介绍
2013/04/28 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
python socket 超时设置 errno 10054
2014/07/01 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
简单谈谈python中的多进程
2016/11/06 Python
详解Python pygame安装过程笔记
2017/06/05 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
积极贯彻学习两会精神总结
2014/03/17 职场文书
房屋转让协议书范本
2014/04/11 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
民事授权委托书范文
2014/08/02 职场文书
检讨书范文
2019/04/16 职场文书