首頁 > web前端 > js教程 > jQuery筆記——工具函數——jQuery標誌

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

巴扎黑
發布: 2017-07-08 11:10:58
原創
1276 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板