jQuery常用工具函数(用于检测操作)
在实际开发中,有时我们需要获取对象或元素的各种状态,例如是否为数组、是否为对象、是否为空等,然后根据这些状态值来决定程序的下一步操作。
jQuery 为我们提供了大量用于检测操作的工具函数,常见的用于检测操作的工具函数如表 1 所示。
在这里,所谓的原始对象,指的是通过
举例:检查变量是否为函数
图 1:$.isFunction()
举例:检测变量是否为数组
图 2:$.isArray()
使用 jQuery 来判断变量是否为数组,一个 isArray() 方法就可以搞定。但是如果使用原生 JavaScript 就比较麻烦,请看下面的例子。
举例:原生 JavaScript 判断是否为数组
图 3:原生 JavaScript 判断是否为数组
这个例子的代码比较复杂,看不懂没关系。由于它属于原生 JavaScript 的知识,这里就不详细展开了。感兴趣的小伙伴可以自行搜索了解一下 Object.prototype.toString 以及 call() 的用法。
举例:检测变量是否为空对象
图 4:$.isEmptyObject()
举例:检测变量是否为原始对象
图 5:$.isPlainObject()
举例:检测一个节点是否包含另一个节点
图 6:$.contains()
咦,怎么回事呢?怎么输出结果是 false?出现这种情况,那是因为小伙伴们没有搞清楚
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 对象。所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算