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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
vue各种事件监听实例(小结)
Jun 24 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中的函数嵌套层数限制分析
2011/06/13 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php获取参数的几种方法总结
2014/02/18 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
jquery自定义表格样式
2015/11/23 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python3实现微型的web服务器
2019/09/03 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
Python的两道面试题
2013/06/29 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
法律意见书范文
2015/06/04 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
golang判断key是否在map中的代码
2021/04/24 Golang
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫