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 相关文章推荐
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
原生JS实现层叠轮播图
May 17 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
用React Native制作一个简单的游戏引擎
May 27 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合并数组中相同元素的方法
2014/11/13 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP如何使用Memcached
2016/04/05 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
js自定义事件代码说明
2011/01/31 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python中__call__方法示例分析
2014/10/11 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
python3.4爬虫demo
2019/01/22 Python
python输出决策树图形的例子
2019/08/09 Python
python中如何进行连乘计算
2020/05/28 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
烹饪大赛策划方案
2014/05/26 职场文书
2014教师研修学习体会
2014/07/08 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android