jQuery筆記——工具函數——jQuery標誌
- 巴扎黑原創
- 2017-07-08 11:10:581263瀏覽
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检测盒模型： 三、检测功能或缺陷 jQuery的support属性： 返回一个Object对象，在该对象中包含了一组属性，他们代表了不同的浏览器功能或缺陷的存在的合集。 该对象的属性并不是一成不变的，jQuery也并不保证指定的属性在未来的版本中一定可用，这些属性主要供插件或内核开发人员使用。<!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筆記——工具函數——jQuery標誌的詳細內容。更多資訊請關注PHP中文網其他相關文章！