完善的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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
总结javascript三元运算符知识点
Sep 28 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
php实现文件下载代码分享
2014/08/19 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
Python中协程用法代码详解
2018/02/10 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
英国女士家居服网站:hush
2017/08/09 全球购物
公司财务会计主管应聘求职信
2014/09/26 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
解决Oracle数据库用户密码过期
2022/05/11 Oracle
Redis特殊数据类型bitmap位图
2022/06/01 Redis
V Rising 服务器搭建图文教程
2022/06/16 Servers
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python