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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
Javascript中this的用法详解
Sep 22 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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
php json_encode奇怪问题说明
2011/09/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python3几个常见问题的处理方法
2019/02/26 Python
详解Python 切片语法
2019/06/10 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python解析多层json操作示例
2019/12/30 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
员工工作表扬信范文
2014/01/13 职场文书
函授自我鉴定范文
2014/02/06 职场文书
《菜园里》教学反思
2014/04/17 职场文书
劳动竞赛口号
2014/06/16 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2014年医院工作总结
2014/11/20 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书