工具函數(二)

時間 2019-11-20

標籤工具函數简体版

原文原文鏈接

測試操做javascript

在jQuery中，數據有着各類類型和狀態。有時，咱們但願能經過判斷數據的類型和狀態作相應的操做。jQuery提供了五組測試用的工具函數。css

測試工具函數html

函數名	說明
$.isArray(obj)	判斷是否爲數組對象，是返回true
$.isFunction(obj)	判斷是否爲函數，是返回true
$.isEmptyObject(obj)	判斷是否爲空對象，是返回true
$.isPlainObject(obj)	判斷是否爲純粹對象，是返回true
$.contains(obj)	判斷DOM節點是否含另外一個DOM節點，是返回true
$.type(data)	判斷數據類型
$.isNumeric(data)	判斷數據是否爲數值
$.isWindow(data)	判斷數據是否爲window對象

判斷是否爲數組對象：java

var arr = [1,2,3];
alert($.isArray(arr)); //true

判斷是否爲函數：jquery

var fn = function() {};
alert($.isFunction(fn)); //true

判斷是否爲空對象：web

var obj = {};
alert($.isEmptyObject(obj)); //true

純粹對象，即由{}或new Object()創造出的對象。ajax

var obj = window;    
alert($.isPlainObject(obj)); //false

obj = {};
alert($.isPlainObject(obj)); //true

obj = new Object();
alert($.isPlainObject(obj)); //true

注意：若是使用new Object('name');傳遞參數後，返回類型已不是Object，而是字符串，因此就不是純粹的原始對象了。api

var obj = new Object("name");
alert(obj); //name
alert($.isPlainObject(obj)); //fasle;

判斷第一個DOM節點是否含有第二個DOM節點：數組

工具函數.html：瀏覽器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>工具函數</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="box">
        <span id="pox"></span>
    </div>

</body>
</html>

alert($.contains($("#box").get(0),$("#pox").get(0))); //true

$.type()檢測數據類型：

var arr = [1,2,3];
alert($.type(arr)); //array

var obj = {};
alert($.type(obj)); //object

alert($.type(window)); //objec

$.isNumeric()檢測數據是否爲數值：

var num = 1.23;
alert($.isNumeric(num)); //true

$.isWindow()檢測數據對象是否爲window對象：

var win = window;
alert($.isWindow(win)); //true

URL操做

URL地址操做，在以前的Ajax章節其實已經講到過，只有一個方法：$.param()，將對象的鍵值對轉化爲URL鍵值對字符串形式。

var obj = {
    name:"Lee",
    age:100
};
alert($.param(obj)); //name=Lee&age=100

瀏覽器檢測

因爲在早期的瀏覽器中，分IE和W3C瀏覽器。而IE6/7/8使用的覆蓋率還很高，因此早期的jQuery提供了$.browser工具對象，而如今的jQuery已經廢棄刪除了這個工具對象，
若是還想使用這個對象來獲取瀏覽器版本型號的信息，可使用兼容插件——jquery-migrate-1.2.1.js

$.browser對象屬性

屬性	說明
webkit	判斷webkit瀏覽器，若是是則爲true
mozilla	判斷mozilla瀏覽器，若是是則爲true
safari	判斷safari瀏覽器，若是是則爲true
opera	判斷opera瀏覽器，若是是則爲true
maie	判斷IE瀏覽器，若是是則爲true
version	獲取瀏覽器版本號

獲取火狐瀏覽器和版本號：

alert($.browser.mozilla + ":" + $.browser.version);

注意：火狐採用的是mozilla引擎，通常就是指火狐；而谷歌Chrome採用的引擎是webkit，通常驗證Chrome就用webkit。

還有一種瀏覽器檢測，是對瀏覽器內容的檢測。好比：W3C的透明度爲opacity，而IE的透明度爲alpha，這個對象是$.support。

$.support對象部分屬性

屬性名	說明
hrefNormalized	若是瀏覽器從getAttribute("href")返回的是原封不動的結果，則返回true。在IE中會返回false，由於他的URLs已常常規化了
htmlSerialize	若是瀏覽器經過innerHTML插入連接元素的時候會序列化這些連接，則返回true，目前IE中返回false
leadingWhitespace	若是在使用innerHTML的時候瀏覽器會保持前導空白字符，則返回true，目前在IE 6-8中返回false
objectAll	若是在某個元素對象上執行getElementsByTagName("*")會返回全部子孫元素，則爲true，目前在IE 7中爲false
opacity	若是瀏覽器能適當解釋透明度樣式屬性，則返回true，目前在IE中返回false，由於他用alpha濾鏡代替
scriptEval	使用appendChild/createTextNode方法插入腳本代碼時，瀏覽器是否執行腳本，目前在IE中返回 false，IE使用.text 方法插入腳本代碼以執行
style	若是getAttribute("style")返回元素的行內樣式，則爲true。目前IE中爲false，由於他用cssText代替
tbody	若是瀏覽器容許table元素不包含tbody元素，則返回true。目前在IE中會返回false，他會自動插入缺失的tbody
ajax	若是瀏覽器支持ajax操做，返回true

$.support.ajax判斷是否能建立ajax：

alert($.support.ajax); //true

工具函數.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>工具函數</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="box">
        <span id="pox"></span>
    </div>

</body>
</html>

style.css：

#box {
    width: 100px;
    height: 100px;
    background: red;
    /*opacity: 0.5;
    filter: alpha(opacity=50);*/
}

$.support.opacity 設置不一樣瀏覽器的透明度：

if($.support.opacity == true) {
    $("#box").css("opacity", 0.5);
} else {
    $("#box").css("filter", "alpha(opacity=50)");
}

注意：因爲jQuery愈來愈放棄低端的瀏覽器，因此檢測功能在將來使用頻率也愈來愈低。因此，$.brower已被廢棄刪除，而$.support.boxModel檢測W3C或IE盒子也被刪除，而且http://api.jquery.com/jQuery.support/官網也不提供屬性列表和解釋，給出一個Modernizr第三方小工具來輔組檢測。

其餘操做

jQuery提供了一個預備綁定函數上下文的工具函數：$.proxy()。這個方法，能夠解決諸如外部事件觸發調用對象方法時this的指向問題。

以上工具函數.html和style.css代碼不變。

var obj = {
    name:"Lee",
    test:function() {
        alert(this.name); //this就指代obj
    }
};
obj.test(); //Lee

外部事件觸發，調用對象方法時，this到底指代誰?

$("#box").click(obj.test); //undefined?

此時this到底指代誰呢?

var obj = {
    name:"Lee",
    test:function() {
        alert(this); //[object HTMLDivElement]
        alert(this.name);
    }
};
$("#box").click(obj.test); //undefined

發現此時this居然指代HTMLDivElement！因此咱們一般的解決辦法爲：

var obj = {
    name:"Lee",
    test:function() {
        //alert(this); //[object HTMLDivElement]
        var _this = obj;
    　　alert(_this.name);
    }
};
$("#box").click(obj.test); //Lee

而jQuery提供了一個預備綁定函數上下文的工具函數：$.proxy()。

var obj = {
    name:"Lee",
    test:function() {
        alert(this.name);
    }
};
$("#box").click($.proxy(obj,"test"));

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。