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

1.今天突然想到了jquery好处时间没有用到了,就练习了一下,谁知道,就碰到了jquery在IE,FF浏览器差别的问题了,好了废话也不多说了,就将一下碰到的问题吧
2.大部分使用过jquery的都知道,在FF上面浏览的效果是刚刚的,但是这些刚刚的效果,在IE上面运用的效果差强人意的。
3.今天练习的一个效果是这样的

就是点击个个颜色,然后使得页面的背景颜色变成同样的颜色
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的使用
 
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...

时间: 2024-09-18 15:24:42

jquery在IE、FF浏览器的差别详细探讨_jquery的相关文章

jquery uploadify 在FF下无效的解决办法_jquery

Js代码 $('#file_upload').uploadify({ buttonImage: '${ctx }/commons/uploaddify/img/browse-btn.png', swf :'${ctx }/commons/uploaddify/uploadify.swf', uploader :'../servlet/defaultDispatcher;jsessionid=${pageContext.session.id}?__action=xxx', fileTypeExts

jquery中常用的函数和属性详细解析_jquery

Dom:Attribute:属性$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map$("input").attr({"checked", "checked"}); $("img").

jQuery异步上传文件插件ajaxFileUpload详细介绍_jquery

一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url   上传处理程序地址. 2,fileElementId   需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,sc

jQuery快速上手:写jQuery与直接写JS的区别详细解析_jquery

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:<script language="javascript" src="/js/jquery.min.js"></script> 库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度.另外一个好处是显而易见的,节省了网站的流量带宽. jQuery

关于jQuery判断元素是否存在的问题示例探讨_jquery

是这样的,最近做jQuery训练时遇到jQuery判断元素是否存在时出现问题. 题目如下:请在"选择按钮3"后面,添加Id=rad4,处于选择状态的,之后文字为"选择按钮4"的HTML控件,只能添加一次(自由选择使用js原生或JQuery实现 function addradio() { if (!document.getElementById("rad4")) { var main = document.getElementById("

jQuery JSON实现无刷新三级联动实例探讨_jquery

复制代码 代码如下: <asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList> <asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList> <

关于ie6、ie7和ff浏览器兼容

这些方法都是我平时用到时在网上找到收藏下来的呵呵,我提前声明一下免得误会!一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style> 2,

jQuery异步上传文件插件ajaxFileUpload详细介绍

这篇文章主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数.错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下     一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileEl

jquery中常用的函数和属性详细解析

 本篇文章主要是对jquery中常用的函数和属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map $("input").attr({&qu