完善的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 相关文章推荐
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
javascript字符串函数汇总
Dec 06 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
浅谈js中的闭包
2015/03/16 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
原生js实现分页效果
2020/09/23 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python 文件操作实现代码
2009/10/07 Python
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
绵山导游词
2015/02/05 职场文书
教师节寄语2015
2015/03/23 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2015年行政部工作总结
2015/04/28 职场文书
会议室使用管理制度
2015/08/06 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android