jQuery常用工具函数（用于检测操作）
时间：03-07来源：作者：点击数：
在实际开发中，有时我们需要获取对象或元素的各种状态，例如是否为数组、是否为对象、是否为空等，然后根据这些状态值来决定程序的下一步操作。
jQuery 为我们提供了大量用于检测操作的工具函数，常见的用于检测操作的工具函数如表 1 所示。
| 函数 | 说明 |
|---|---|
| $.isFunction(obj) | 判断变量是否为一个函数，返回 true 或 false |
| $.isArray(obj) | 判断变量是否为一个数组，返回 true 或 false |
| $.isEmptyObject(obj) | 判断变量是否为一个空对象，返回 true 或 false |
| $.isPlainObject(obj) | 判断变量是否为一个原始对象，返回 true 或 false |
| $.contains( node1, node2) | 判断一个 DOM 节点是否包含另一个 DOM 节点，返回 true 或 false |
在这里，所谓的原始对象，指的是通过{}或“new Object()”来创建的对象。
举例：检查变量是否为函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
var fn = function(){};
console.log($.isFunction(fn)); //true
</script>
</head>
<body>
</body>
</html>
控制台输出结果如图 1 所示。
图 1：$.isFunction()
举例：检测变量是否为数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var a = ["HTML","CSS","JavaScript"];
console.log($.isArray(a)); //true
var b = {name:"helicopter", age:25};
console.log($.isArray(b)); //false
})
</script>
</head>
<body>
</body>
</html>
控制台输出结果如图 2 所示。
图 2：$.isArray()
使用 jQuery 来判断变量是否为数组，一个 isArray() 方法就可以搞定。但是如果使用原生 JavaScript 就比较麻烦，请看下面的例子。
举例：原生 JavaScript 判断是否为数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function isArr(o){
return Object.prototype.toString.call(o) == "[object Array]";
}
var a = ["HTML","CSS","JavaScript"];
console.log(isArr(a)); //true
var b = {name:"helicopter", age:25};
console.log(isArr(b)); //false
</script>
</head>
<body>
</body>
</html>
控制台输出结果如图 3 所示。
图 3：原生 JavaScript 判断是否为数组
这个例子的代码比较复杂，看不懂没关系。由于它属于原生 JavaScript 的知识，这里就不详细展开了。感兴趣的小伙伴可以自行搜索了解一下 Object.prototype.toString 以及 call() 的用法。
举例：检测变量是否为空对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var a = {};
var b = {
name:"helicopter",
age:25,
hobby:"swimming"
};
console.log($.isEmptyObject(a)); //true
console.log($.isEmptyObject(b)); //false
})
</script>
</head>
<body>
</body>
</html>
控制台输出结果如图 4 所示。
图 4：$.isEmptyObject()
举例：检测变量是否为原始对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var person = {
name:"helicopter",
age:25,
hobby:"swimming"
};
console.log($.isPlainObject(person)); //true
function Box(width, height){
this.width = width;
this.height = height;
}
var box = new Box(100, 100);
console.log($.isPlainObject(box)); //false
})
</script>
</head>
<body>
</body>
</html>
控制台输出结果如图 5 所示。
图 5：$.isPlainObject()
举例：检测一个节点是否包含另一个节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var oDiv = $("div");
var oStrong = $("strong");
console.log($.contains(oDiv, oStrong)); //false
})
</script>
</head>
<body>
<div>
<strong>城东书院</strong>
</div>
</body>
</html>
控制台输出结果如图 6 所示。
图 6：$.contains()
咦，怎么回事呢？怎么输出结果是 false？出现这种情况，那是因为小伙伴们没有搞清楚$.contains()方法的两个参数。其中，$.contains()方法的两个参数必须是 DOM 对象，不能是 jQuery 对象。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:jQuery index()方法的用法
下一篇:jQuery工具函数简介
湘公网安备 43102202000103号