JQuery中關於瀏覽器兼容性的問題

時間 2019-11-16

原文原文鏈接

前言javascript

LIUWEcss

　　　JQuery是一個特別強大的javascript代碼庫，，它的操做DOM的能力是至關強大的，JQuery能夠說是支持各大主流瀏覽器，可是隨着時代的不斷髮展，瀏覽器是在不斷的更新變換的，瀏覽器界的前帶頭大哥IE，其影響力仍是稍微有那麼一點點的。雖然最終仍是屈服了，可是仍是有那麼一羣IE六、七、8的老用戶，爲了知足各類用戶的需求，JQuery能夠說是作的很是好的。前端

　　其實JQuery也是在不斷的發展，更新版本的，在JQuery的2.0版本之前仍是在考慮着這些IE六、七、8的老用戶們，時時刻刻在兼容着它們。可能隨着時代的不斷髮展變化，以爲這些IE六、七、8的老用戶愈來愈少了，在2.0版本開始，就再也不支持IE六、七、8瀏覽器了。下面咱們就用一個簡單的例子來詳細介紹一下關於JQuery對於各大瀏覽器兼容性的問題。java

　　　這一個簡單的例子就是要讓p標籤中文字變爲紅色jquery

1 <body>
2 　　<p id="p">p標籤</p>
3 </body>
7 <script type="text/javascript">
8 　　　$("#p").css("color","red");
9 </script>

1、導入一個2.0版本以上的JQuery文件

　　咱們導入的JQuery文件是jquery-3.1.1.js。瀏覽器

1 <body>
2     <p id="p">p標籤</p>
3 </body>
4 <script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
5 <script type="text/javascript">
6     $("#p").css("color","red");
7 </script>

　　所顯示的結果以下圖：框架

　　在IE8的時候將文字的顏色將不會發生改變：字體

　　而在IE9及以上的IE瀏覽器中文字顏色將會顯示爲紅色spa

2、導入一個2.0如下的JQuery文件

　　此次導入的是jquery-1.10.2.js文件code

1 <body>
2     <p id="p">p標籤</p>
3 </body>
4 <script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
5 <script type="text/javascript">
6     $("#p").css("color","red");
7 </script>

　　所顯示的結果以下圖：

　　此次無論是IE多老的版本，都可以支持，字體的顏色均變爲了紅色。

3、兼容的方式來導入JQuery文件

　　在網頁製做過程當中，爲了達到更好的兼容性，能夠經過條件註釋的方法，來導入JQuery文件

　　具體的代碼以下：

<body>
    <p id="p">p標籤</p>
</body>
<!--[if lt IE 9]>
        <script src="js/jquery-1.10.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
        <script src="js/jquery-3.1.1.js"></script>
<!--<![endif]-->
<script type="text/javascript">
    $("#p").css("color","red");
</script>