工具函数(二)
2016-04-26 23:36
363 查看
测试操作
在jQuery中，数据有着各种类型和状态。有时，我们希望能通过判断数据的类型和状态做相应的操作。jQuery提供了五组测试用的工具函数。
测试工具函数
判断是否为数组对象：
判断是否为函数：
判断是否为空对象：
纯粹对象，即由{}或new Object()创造出的对象。
注意：如果使用new Object('name');传递参数后，返回类型已不是Object，而是字符串，所以就不是纯粹的原始对象了。
判断第一个DOM节点是否含有第二个DOM节点：
工具函数.html：
$.type()检测数据类型：
$.isNumeric()检测数据是否为数值：
$.isWindow()检测数据对象是否为window对象：
URL操作
URL地址操作，在之前的Ajax章节其实已经讲到过，只有一个方法：$.param()，将对象的键值对转化为URL键值对字符串形式。
浏览器检测
由于在早期的浏览器中，分IE和W3C浏览器。而IE6/7/8使用的覆盖率还很高，所以早期的jQuery提供了$.browser工具对象，而现在的jQuery已经废弃删除了这个工具对象，
如果还想使用这个对象来获取浏览器版本型号的信息，可以使用兼容插件——jquery-migrate-1.2.1.js
$.browser对象属性
获取火狐浏览器和版本号：
注意：火狐采用的是mozilla引擎，一般就是指火狐；而谷歌Chrome采用的引擎是webkit，一般验证Chrome就用webkit。
还有一种浏览器检测，是对浏览器内容的检测。比如：W3C的透明度为opacity，而IE的透明度为alpha，这个对象是$.support。
$.support对象部分属性
$.support.ajax判断是否能创建ajax：
工具函数.html：
style.css：
$.support.opacity 设置不同浏览器的透明度：
注意：由于jQuery越来越放弃低端的浏览器，所以检测功能在未来使用频率也越来越低。所以，$.brower已被废弃删除，而$.support.boxModel检测W3C或IE盒子也被删除，并且http://api.jquery.com/jQuery.support/官网也不提供属性列表和解释，给出一个Modernizr第三方小工具来辅组检测。
其他操作
jQuery提供了一个预备绑定函数上下文的工具函数：$.proxy()。这个方法，可以解决诸如外部事件触发调用对象方法时this的指向问题。
以上工具函数.html和style.css代码不变。
外部事件触发，调用对象方法时，this到底指代谁?
此时this到底指代谁呢?
发现此时this竟然指代HTMLDivElement！所以我们通常的解决办法为：
而jQuery提供了一个预备绑定函数上下文的工具函数：$.proxy()。
在jQuery中，数据有着各种类型和状态。有时，我们希望能通过判断数据的类型和状态做相应的操作。jQuery提供了五组测试用的工具函数。
测试工具函数
| 函数名 | 说明 |
| $.isArray(obj) | 判断是否为数组对象，是返回true |
| $.isFunction(obj) | 判断是否为函数，是返回true |
| $.isEmptyObject(obj) | 判断是否为空对象，是返回true |
| $.isPlainObject(obj) | 判断是否为纯粹对象，是返回true |
| $.contains(obj) | 判断DOM节点是否含另一个DOM节点，是返回true |
| $.type(data) | 判断数据类型 |
| $.isNumeric(data) | 判断数据是否为数值 |
| $.isWindow(data) | 判断数据是否为window对象 |
var arr = [1,2,3]; alert($.isArray(arr)); //true
判断是否为函数：
var fn = function() {};
alert($.isFunction(fn)); //true判断是否为空对象：
var obj = {};
alert($.isEmptyObject(obj)); //true纯粹对象，即由{}或new Object()创造出的对象。
var obj = window;
alert($.isPlainObject(obj)); //false
obj = {};
alert($.isPlainObject(obj)); //true
obj = new Object();
alert($.isPlainObject(obj)); //true注意：如果使用new Object('name');传递参数后，返回类型已不是Object，而是字符串，所以就不是纯粹的原始对象了。
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 |
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"));
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 