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 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
详解Javascript实践中的命令模式
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
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
图片之间的切换
2006/06/26 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
python的类方法和静态方法
2014/12/13 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python pygame实现方向键控制小球
2019/05/17 Python
Django多数据库联用实现方法解析
2020/11/12 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
班主任工作年限证明
2014/01/12 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Python学习之包与模块详解
2022/03/19 Python