完善的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 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
基于mysql的论坛(1)
2006/10/09 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
Python2和Python3中print的用法示例总结
2017/10/25 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
delegate与普通函数的区别
2014/01/22 面试题
日期和时间问题
2015/01/04 面试题
工程管理专业毕业生自荐信
2014/01/24 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
灵魂歌王观后感
2015/06/17 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle