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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
js实现微信分享代码
2020/10/11 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
如何编写jquery插件
2017/03/29 jQuery
基于vuejs实现一个todolist项目
2017/04/11 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
详解Python中的分支和循环结构
2020/02/11 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Python多线程多进程实例对比解析
2020/03/12 Python
python属于跨平台语言码
2020/06/09 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
日语专业求职信
2014/07/04 职场文书
股份合作协议书
2014/09/10 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2014公司年终工作总结
2014/12/19 职场文书