jquery在IE、FF浏览器的差别详细探讨


Posted in Javascript onApril 28, 2013

1.今天突然想到了jquery好处时间没有用到了,就练习了一下,谁知道,就碰到了jquery在IE,FF浏览器差别的问题了,好了废话也不多说了,就将一下碰到的问题吧
2.大部分使用过jquery的都知道,在FF上面浏览的效果是刚刚的,但是这些刚刚的效果,在IE上面运用的效果差强人意的。
3.今天练习的一个效果是这样的
jquery在IE、FF浏览器的差别详细探讨
就是点击个个颜色,然后使得页面的背景颜色变成同样的颜色
4.上图中的效果使用简单的代码就可以完成了,而且在IE,FF中的效果是同样的,这里就只贴出jquery中的代码了,非常的简单的

<script type="text/javascript"> 
$(document).ready(function(){ 
$("div span").each(function(){ 
$("div span").click(function(){ 
var index = $("div span").index(this); 
$("#css").attr("href","css/index"+index+".css");这个css是<link rel="stylesheet" type="text/css" href="css/index.css" id="css">中的,这行代码是HTML中的,相信大家都懂得 
if(index==7){ 
$("#css").attr("href","css/index.css"); 
} 
}); 
}); 
}); 
</script>

下面是HTML中的代码
<div align="right" id="div"> 
<span class="myBox"> 
      
</span> 
<span class="myBox1"> 
      
</span> 
<span class="myBox2"> 
      
</span> 
<span class="myBox3"> 
      
</span> 
<span class="myBox4"> 
      
</span> 
<span class="myBox5"> 
      
</span> 
<span class="myBox6"> 
      
</span> 
<span class="myBox7">还原</span>

下面的css样式就不贴出来了啊,相信大家都晓得的
下面就说一下另外的一个差别的代码,从而使我了解到了IE,FF对于jquery的使用
jquery在IE、FF浏览器的差别详细探讨 
1.
看到这个图片和上面的图片的区别,相信大家很容易就查出来,对的,这个的一个小图标的四个角都是弧度的,为了完成这个弧度的,我使用了一个js,这个js是这个“jquery.curvycorners.source.js”通过方法
$(document).ready(function(){ 
settings = { 
tl: { radius: 10 }, 
tr: { radius: 10 }, 
bl: { radius: 10 }, 
br: { radius: 10 }, 
antiAlias: true, 
autoPad: true, 
validTags: ["span"] 
} 
$('.myBox').corner(settings); 
$('.myBox1').corner(settings); 
$('.myBox2').corner(settings); 
$('.myBox3').corner(settings); 
$('.myBox4').corner(settings); 
$('.myBox5').corner(settings); 
$('.myBox6').corner(settings); 
$('.myBox7').corner(settings); 
});

这个方法来使上面的图片的四个角变成弧度的,但是问题出来了
这个方法,这个js在FF运行的效果非常完成,但是出现在IE上面则没有效果的
之前没有注意过,但今天进行测试后,有点小的意见,是不是对于一些自定义的js,IE的兼容性不是太好呢,之前做过一个项目,也是自定义了一个js,然后通过Script来嵌套到页面中,在FF的效果很好,但是在IE上面没有效果,当时也没有在意,通过今天的练习发现,“是不是对于一些自定义的js,IE的兼容性不是太好呢?”是真的呢?要不要以后尽量少的自定义js,但是如果不自定义js,那么页面中的 代码就会很多的啊?有点迷茫ING...
Javascript 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
js自动下载文件到本地的实现代码
Apr 28 #Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 #Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 #Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 #Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 #Javascript
javascript中强制执行toString()具体实现
Apr 27 #Javascript
用客户端js实现带省略号的分页
Apr 27 #Javascript
You might like
CI(CodeIgniter)框架介绍
2014/06/09 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python 系统调用的实例详解
2017/07/11 Python
python基础之入门必看操作
2017/07/26 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
关于python中remove的一些坑小结
2021/01/04 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
党员创先争优承诺书
2014/03/26 职场文书
安全口号大全
2014/06/21 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js