首页 > 编程笔记 > Web笔记

jQuery常用工具函数(用于检测操作)

在实际开发中,有时我们需要获取对象或元素的各种状态,例如是否为数组、是否为对象、是否为空等,然后根据这些状态值来决定程序的下一步操作。

jQuery 为我们提供了大量用于检测操作的工具函数,常见的用于检测操作的工具函数如表 1 所示。

表 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 所示。
$.isFunction()
图 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 所示。
$.isArray()
图 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 所示。
原生JavaScript判断是否为数组
图 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 所示。

原生JavaScript判断是否为数组
图 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 所示。
原生JavaScript判断是否为数组
图 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 所示。
$.contains()
图 6:$.contains()

咦,怎么回事呢?怎么输出结果是 false?出现这种情况,那是因为小伙伴们没有搞清楚$.contains()方法的两个参数。其中,$.contains()方法的两个参数必须是 DOM 对象,不能是 jQuery 对象。

所有教程

优秀文章