完善的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中的Window窗口对象
Jan 16 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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数据缓存技术
2007/02/14 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Python Deque 模块使用详解
2014/07/04 Python
python求crc32值的方法
2014/10/05 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python爬取哈尔滨天气信息
2018/07/14 Python
解决Django中多条件查询的问题
2019/07/18 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
Python使用贪婪算法解决问题
2019/10/22 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
介绍一下gcc特性
2015/10/31 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
岗位职责范本
2013/11/23 职场文书
大学新生欢迎词
2014/01/10 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
发布会邀请函
2015/01/31 职场文书
2015年党建工作总结
2015/03/30 职场文书
跳高加油稿
2015/07/21 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书