完善的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 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 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
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python计算文本文件行数的方法
2015/07/06 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
用python读取xlsx文件
2020/12/17 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
后勤岗位职责
2013/11/26 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
献爱心倡议书
2014/04/14 职场文书
促销活动总结模板
2014/07/01 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
质量整改通知单
2015/04/21 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2016年感恩节寄语
2015/12/07 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL