jQuery筆記——工具函數——jQuery標誌-js教程-PHP中文網

jQuery筆記——工具函數——jQuery標誌

巴扎黑

發布： 2017-07-08 11:10:58

原創

1245 人瀏覽過

jQuery定義了許多工具函數，這些函數的命名空間為$，但不操作包裝集，使用者可以把它看作是頂層函數，不同之處是他們定義在$實例上，而不是定義在window實例上，類似於靜態型別函數。

通常來說，工具函數的主要任務是操作除DOM意外的JavaScript物件，或執行一些非物件相關的操作。

jQuery透過定義在$上的變數為開發人員提供一些有用的客戶訊息，透過這些標誌資訊可以方便的檢測當前瀏覽器的功能，以便用戶基於這些資訊進行決策。

這些標誌資訊包括：jQuery.browser、jQuery.boxModel和jQuery.support

一、偵測用戶代理程式

瀏覽器偵測方法：

1. 字串偵測法：根據navigator.userAgent屬性傳回值進行偵測。 but，jQuery從1.3版本就不再支援使用這種方法了，原因：使用麻煩，與jQuery的靈巧特色相違背。

2. 特徵偵測法：根據瀏覽器是否支援特定功能來決定操作方式。

非精確，最安全

這種方法足矣。

例如：

            var a;
            if(document.getElementsByName){               //如果存在getElementsByName，则使用该方法获取a元素
                a = document.getElementsByName("a");
            }
            else if(document.getElementsByTagName){       //如果存在getElementsByTagName，则使用该方法获取a元素
                a = document.getElementsByTagName("a")
            }

登入後複製

使用對象，方法或屬性時，可先偵測目前瀏覽器是否支援它。在邏輯表達式中，如果瀏覽器支持，則會傳回該對象，屬性或方法，這是JavaScript就會強制把這些物件或成員轉換為true。如果不支持，則會傳回undefined，JavaScript會自動把它轉換為false。

注意：偵測方法或函數時，不要加小括號，否則JavaScript解釋器會呼叫該方法或函數，同時如果指定函數夥房發不存在，會產生編譯錯誤。

偵測瀏覽器類型：

js：var browser = navigator.userAgent;

jQuery： browser屬性。允許檢測4個最受歡迎的瀏覽器類，如：Internet Explorer 、Mozilla、Webkit、Opera，以及每個版本資訊標誌。

中使用中符號上：

$.browser 屬性在jQuery 1.9已經被移除。用於傳回使用者目前使用的瀏覽器的相關資訊。

與「屬性來決定瀏覽器資訊的，因此它的辨識並不一定準確。二、偵測盒模型

jQuery.boxModel：標誌可以取得目前頁面使用的是哪一種盒模型。 true：W3C標準盒型號；false：IE瀏覽器的盒子模型

jQuery1.0 新增该静态属性；1.3中被标记已过时，请使用 jQuery.support.boxModel替代；1.8中被移除。

除IE浏览器外，其他浏览器都支持W3C标准盒模型，而IE浏览器能够根据页面模式（严格模式或怪异模式）有选择的使用不同类型的盒模型。如果页面顶部声明了文档类型（DOCTYPE），则IE也会采用严格模式，即W3C标准盒模型解析元素。如果文档当中没有包含文档类型（DOCTYPE），或者包含了无法识别的文档类型声明，即会以怪异模式显示，并按IE的传统的盒模型来解析元素。

IE传统的盒模型和W3C标准盒模型的区别：

1.IE传统盒模型：width和height属性包含内边距和边框宽度

2.W3C标准盒模型：width和height属性不包含内边距和边框宽度

用JavaScript检测盒模型：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>检测盒模型[JavaScript]</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        function isBoxModel(){
            var p = document.createElement("p");
            p.style.width = p.style.paddingLeft = "1px";
            document.body.appendChild(p);
            var width = p.offsetWidth;
            p.style.display = "none";
            document.body.removeChild(p);
            return width === 2;
        }
        window.onload = function(){
            alert(isBoxModel() && "支持W3C标准盒模型" || "支持IE的怪异解析模式");
        }
    </script>
</head>
<body>
</body>
</html>

登入後複製

三、检测功能或缺陷

jQuery的support属性：

返回一个Object对象，在该对象中包含了一组属性，他们代表了不同的浏览器功能或缺陷的存在的合集。

该对象的属性并不是一成不变的，jQuery也并不保证指定的属性在未来的版本中一定可用，这些属性主要供插件或内核开发人员使用。

以上是jQuery筆記——工具函數——jQuery標誌的詳細內容。更多資訊請關注PHP中文網其他相關文章！