完善的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 验证日期的函数
Mar 18 Javascript
JavaScript中string对象
Jun 12 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
javascript 中的继承实例详解
May 05 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
javascript实现时钟动画
Dec 03 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 curl_init函数用法
2014/01/31 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python中管道用法入门实例
2015/06/04 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
不可错过的十本Python好书
2017/07/06 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python 串行执行和并行执行实例
2020/04/30 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
大学生求职计划书
2014/04/30 职场文书
青春演讲稿范文
2014/05/08 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
中国合伙人观后感
2015/06/02 职场文书
天堂的孩子观后感
2015/06/11 职场文书