jquery在IE、FF瀏覽器的差別詳細(xì)探討
2.大部分使用過(guò)jquery的都知道,在FF上面瀏覽的效果是剛剛的,但是這些剛剛的效果,在IE上面運(yùn)用的效果差強(qiáng)人意的。
3.今天練習(xí)的一個(gè)效果是這樣的

就是點(diǎn)擊個(gè)個(gè)顏色,然后使得頁(yè)面的背景顏色變成同樣的顏色
4.上圖中的效果使用簡(jiǎn)單的代碼就可以完成了,而且在IE,FF中的效果是同樣的,這里就只貼出jquery中的代碼了,非常的簡(jiǎn)單的
<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");這個(gè)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樣式就不貼出來(lái)了啊,相信大家都曉得的
下面就說(shuō)一下另外的一個(gè)差別的代碼,從而使我了解到了IE,FF對(duì)于jquery的使用

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