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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
js给selected添加options的方法
May 06 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
浅谈React Event实现原理
Sep 20 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
原生js实现五子棋游戏
May 28 Javascript
javascript实现拼图游戏
Jan 29 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php GeoIP的使用教程
2011/03/09 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Python Tkinter基础控件用法
2014/09/03 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
信息服务专业毕业生求职信
2014/03/02 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015年教师节活动总结
2015/03/20 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技