jquery在IE、FF瀏覽器的差別詳細探討
更新時間:2013年04月28日 15:40:01 作者:
jquery在IE,FF瀏覽器差別的問題,在FF的效果很好,但是在IE上面沒有效果,當時也沒有在意,通過今天的練習發(fā)現(xiàn),“是不是對于一些自定義的js,IE的兼容性不是太好呢
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.
看到這個圖片和上面的圖片的區(qū)別,相信大家很容易就查出來,對的,這個的一個小圖標的四個角都是弧度的,為了完成這個弧度的,我使用了一個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運行的效果非常完成,但是出現(xiàn)在IE上面則沒有效果的
之前沒有注意過,但今天進行測試后,有點小的意見,是不是對于一些自定義的js,IE的兼容性不是太好呢,之前做過一個項目,也是自定義了一個js,然后通過Script來嵌套到頁面中,在FF的效果很好,但是在IE上面沒有效果,當時也沒有在意,通過今天的練習發(fā)現(xiàn),“是不是對于一些自定義的js,IE的兼容性不是太好呢?”是真的呢?要不要以后盡量少的自定義js,但是如果不自定義js,那么頁面中的 代碼就會很多的啊?有點迷茫ING...
2.大部分使用過jquery的都知道,在FF上面瀏覽的效果是剛剛的,但是這些剛剛的效果,在IE上面運用的效果差強人意的。
3.今天練習的一個效果是這樣的

就是點擊個個顏色,然后使得頁面的背景顏色變成同樣的顏色
4.上圖中的效果使用簡單的代碼就可以完成了,而且在IE,FF中的效果是同樣的,這里就只貼出jquery中的代碼了,非常的簡單的
復(fù)制代碼 代碼如下:
<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中的代碼
復(fù)制代碼 代碼如下:
<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.
看到這個圖片和上面的圖片的區(qū)別,相信大家很容易就查出來,對的,這個的一個小圖標的四個角都是弧度的,為了完成這個弧度的,我使用了一個js,這個js是這個“jquery.curvycorners.source.js”通過方法
復(fù)制代碼 代碼如下:
$(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運行的效果非常完成,但是出現(xiàn)在IE上面則沒有效果的
之前沒有注意過,但今天進行測試后,有點小的意見,是不是對于一些自定義的js,IE的兼容性不是太好呢,之前做過一個項目,也是自定義了一個js,然后通過Script來嵌套到頁面中,在FF的效果很好,但是在IE上面沒有效果,當時也沒有在意,通過今天的練習發(fā)現(xiàn),“是不是對于一些自定義的js,IE的兼容性不是太好呢?”是真的呢?要不要以后盡量少的自定義js,但是如果不自定義js,那么頁面中的 代碼就會很多的啊?有點迷茫ING...
您可能感興趣的文章:
相關(guān)文章
jQuery pager.js 插件動態(tài)分頁功能實例分析
這篇文章主要介紹了jQuery pager.js 插件動態(tài)分頁功能,結(jié)合具體實例形式分析了pager.js 插件的定義及使用插件進行分頁操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-08-08詳解Jquery EasyUI tree 的異步加載(遍歷指定文件夾,根據(jù)文件夾內(nèi)的文件生成tree)
本篇文章主要介紹了Jquery EasyUI tree 的異步加載,可以實現(xiàn)遍歷指定文件夾,根據(jù)文件夾內(nèi)的文件生成tree,有興趣的可以了解一下。2017-02-02jQuery.cookie.js實現(xiàn)記錄最近瀏覽過的商品功能示例
這篇文章主要介紹了jQuery.cookie.js實現(xiàn)記錄最近瀏覽過的商品功能,結(jié)合實例形式分析了基于jQuery.cookie.js插件創(chuàng)建cookie及保存瀏覽記錄的操作技巧,需要的朋友可以參考下2017-01-01jquery下將選擇的checkbox的id組成字符串的方法
jquery下將選擇的checkbox的id組成字符串的方法,需要的朋友可以參考下。2010-11-11jQuery動態(tài)添加可拖動元素完整實例(附demo源碼下載)
這篇文章主要介紹了jQuery動態(tài)添加可拖動元素的方法,可實現(xiàn)簡單的點擊添加元素,并且添加的元素可進行拖動操作.涉及jQuery響應(yīng)鼠標事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06jQuery操作復(fù)選框(CheckBox)的取值賦值實現(xiàn)代碼
這篇文章主要介紹了jQuery操作復(fù)選框(CheckBox)的取值賦值實現(xiàn)代碼,需要的朋友可以參考下2017-01-01jQuery獲取父元素及父節(jié)點的方法小結(jié)
這篇文章主要介紹了jQuery獲取父元素及父節(jié)點的方法,結(jié)合實例形式總結(jié)分析了jQuery針對父元素及父節(jié)點操作的常用技巧,需要的朋友可以參考下2016-04-04設(shè)置jQueryUI DatePicker默認語言為中文
本文主要介紹jQueryUI DatePicker設(shè)置中文的方法,需要的朋友可以參考下。2016-06-06