完善的jquery处理机制


Posted in Javascript onFebruary 21, 2016

使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误。请看下面例子:

<script>
  document.getElementById("div").style.color ="red";
 </script>

运行上面代码后,浏览器就会报错,原因是网页中没有ID为div的元素。

改进后代码如下:

<script>
   if(document.getElementById("div")){ //用了IF语句来判断是否有ID为div的元素,如果有,执行下面代码 
    document.getElementById("div").style.color ="red"
   }
</script>

这样就可以避免游览器报错,但如果要操作的元素很多,可能对每个元素都要进行一次判断,而jquery方面问题上的处理是非常不错的,即使用JQUERY获取网页中不存在的元素也不会报错。

代码如下:

<script>
  $("#div").css("color","red");
 </script>

有了这个预防措施,即使以后因为某种原因删除网页上某个以前使用过的元素,也不用担心这个网页的JavaScript会报错。

注意点:

$("div")获取的永远是jquery对象,即使网页上没有此元素。因此当要用jquery检查某个元素在网页上是否存在时。

不能使用以下代码:

<script>
 if($("#div")){
   $("#div").css("color",red) //这样游览器会报错
  }
</script>

而是应该跟获取长度来判断。

代码如下:

<script>
 if($("#div").length >0){
   $("#div").css("color",red)
 }
</script>

这时候也可以转化为DOM对象来判断。

代码如下:

<body>
  <div id="div">ccccccc</div>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $div = $("#div");
  var div = $div[0];
  if(div){
    $div.css("color","red")  //此时DIV的颜色就变为red
  }
</script>
</body>

这就是jquery完善的处理机制的,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 #Javascript
jQuery实现div拖拽效果实例分析
Feb 20 #Javascript
jQuery实现简单隔行变色的方法
Feb 20 #Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 #Javascript
jQuery获得字体颜色16位码的方法
Feb 20 #Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 #Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 #Javascript
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
实例讲解php数据访问
2016/05/09 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python装饰器使用方法实例
2013/11/21 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
django session完成状态保持的方法
2018/11/27 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
Python中的pprint模块
2021/11/27 Python
使用python绘制分组对比柱状图
2022/04/21 Python