完善的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 有用的脚本函数
May 07 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 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/12/05 PHP
模拟flock实现文件锁定
2007/02/14 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python __slots__的使用方法
2020/11/15 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
党员组织关系介绍信
2014/02/13 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
仲裁协议书
2014/09/26 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
格林童话读书笔记
2015/06/30 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
设置IIS Express并发数
2022/07/07 Servers