完善的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 上下滚动广告
Jun 17 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
解决vue项目router切换太慢问题
Jul 19 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创建动态图像
2006/10/09 PHP
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php中使用sftp教程
2015/03/30 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python异步存储数据详解
2019/03/19 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python自动化发送邮件实例讲解
2021/01/04 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
C语言面试题
2013/05/19 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
应届生服务员求职信
2013/10/31 职场文书
高中军训感言600字
2014/03/11 职场文书
函授生自我鉴定
2014/03/25 职场文书
征兵宣传标语
2014/06/20 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
python如何正确使用yield
2021/05/21 Python
一条慢SQL语句引发的改造之路
2022/03/16 MySQL