工具函数(二)

时间 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"));