完善的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学习3:操作元素属性和特性
Feb 07 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
js编写简易的计算器
Jul 29 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
python3实现飞机大战
2020/11/29 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
情人节活动策划方案
2014/02/27 职场文书
八一建军节慰问信
2015/02/14 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫