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 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
js简易版购物车功能
Jun 17 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
python求解水仙花数的方法
2015/05/11 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
理货员的岗位职责
2013/11/23 职场文书
探亲邀请信范文
2014/01/30 职场文书
新学期开学标语
2014/06/30 职场文书
公司周年庆典标语
2014/10/07 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
初婚未育证明样本
2014/10/24 职场文书
义诊活动总结
2015/02/04 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫