完善的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 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
js字符串转成JSON
Nov 07 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
js严格模式总结(分享)
Aug 22 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
js 对象使用的小技巧实例分析
Nov 08 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php 文件上传类代码
2011/08/06 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
微信小程序 slider的简单实例
2017/04/19 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python super的使用方法及实例详解
2019/09/25 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
毕业自我评价范文
2013/11/17 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
树转促学习心得体会
2014/09/10 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
优秀班组事迹材料
2014/12/24 职场文书
百家讲坛观后感
2015/06/12 职场文书
地心历险记观后感
2015/06/15 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书