jquery在IE、FF瀏覽器的差別詳細探討

來源:互聯網
上載者:User

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...

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.