当前位置: 首页 > 编程笔记 >

jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()

孔扬
2023-03-14
本文向大家介绍jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow(),包括了jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()的使用技巧和注意事项,需要的朋友参考一下

在javascript中对变量类型的判断中,我们讲解了了jquery中$.type()实现的原理。当然,jquery除了提供$.type的工具方法外,还提供了几个其他的工具方法:$.isFunction(), $.isArray(), $.isWindow(), $.isNumeric()等。这几个方法从方法名上就能看出其用途来,下面我们来一一讲解这几个方法在jQuery(2.1.2)中实现的内部细节。

1. $.isFunction()

$.isFunction()是用来判断变量是否为function类型,我们通过几个例子来看看:

$.isFunction(123); // false
$.isFunction(true);// false
$.isFunction([1, 2]);// false
$.isFunction(function(){});// true

function func(){

}
var sfunc = function(){

}
$.isFunction(func); // true
$.isFunction(sfunc);// true

从上面的例子中能够看到,在$.isFunction(param)中,若传入的param是function类型,则返回true;其他的类型则返回false。
查看jquery的源码我们可以看到,$.isFunction()也是通过$.type()实现的:

isFunction: function( obj ) {
	return jQuery.type(obj) === "function";
}

2. $.isArray()

$.isArray()是用来判断变量是否为array类型。同样,我们也通过几个例子来看看$.isArray的用法:

$.isArray(123);  // false
$.isArray(true); // false
$.isArray([1, 2]);// true
$.isArray(new Array(3, 4)); // true

无论是array的字面量还是使用new关键词创建的变量,都能使用$.isArray()判断其是array类型。在jquery源码中,$.isArray调用的就是原生Array提供的isArray方法。因为在高版本的浏览器中,已经给原生JavaScript提供了一个isArray方法用来判断变量是否为array类型。
isArray: Array.isArray
3. $.isWindow()

$.isWindow()是用来判断当前变量是否为window,如:

$.isWindow(window); // true
$.isWindow([]); 	// false
$.isWindow(null); 	// false

在jQuery源码中:

isWindow: function( obj ) {
	return obj != null && obj === obj.window;
}

他是通过判断obj是否有window属性,来判断obj是否为window对象。因为window对象里有一个属性window,就是他自己,因此:window.window===window,同样的:

window.window.window.window === window;

可以一直循环下去。

而代码里为什么要先判断一下obj是否为null呢?因为在判断null或undefined是否有window属性时,代码会抛出异常:Uncaught TypeError: Cannot read property ‘window' of null。因此,为了防止代码错误,首先判断变量是否为null,若为null,则它肯定不是window对象,直接返回false;否则再判断这个变量有没有window属性。

4. $.isNumeric()

$.isNumeric()是用来判断当前变量是否为数字类型,可是为什么我不使用$.type()=="number"来判断呢。我们先来看几个官方的例子:

$.isNumeric("-10"); // true
$.isNumeric(16);   // true
$.isNumeric(0xFF);  // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5"); // true (exponential notation string)
$.isNumeric(3.1415); // true
$.isNumeric(+10);  // true
$.isNumeric(0144);  // true (octal integer literal)
$.isNumeric("");   // false
$.isNumeric({});   // false (empty object)
$.isNumeric(NaN);  // false
$.isNumeric(null);  // false
$.isNumeric(true);  // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

使用$.isNumeric()能够判断出“-10”, “0xFF”这样字符串类型的数字,而$.type()则会将其解析为string类型。
在jquery源码中,是这样判断变量类型的:

isNumeric: function( obj ) {
	// parseFloat NaNs numeric-cast false positives (null|true|false|"")
	// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
	// subtraction forces infinities to NaN
	// adding 1 corrects loss of precision from parseFloat (#15100)
	return !jQuery.isArray( obj ) && (obj - parseFloat( obj ) + 1) >= 0;
}

首先判断其变量是否为array类型,若是则直接返回false。可是为什么要先判断变量是否为array类型呢?因为[123]这样类型的数组是可以直接进行减法运算的,同时也能通过parseFloat([“123”])转换为数字:

[100] - 60 		// 40
[100] - [60] 		// 40
parseFloat([123]) 	// 123
parseFloat(["345"]) // 345

因此不能直接通过parseFloat()转换,然后判断。首先得判断这个变量是否为数组;若不是才进行下一步的判断:

(obj - parseFloat( obj ) + 1) >= 0

纯数字,字符串类型的数字,0开头的数字(8进制),0x开头的数组(16进制)等,都能通过parseFloat()正常进行转换为10进制的数字。经过上面表达式的运算,肯定是大于0的。可是为什么要加上1呢?代码里也解释了,通过parseFloat()转换到,会造成精度丢失的问题,因此+1后,运算结果更加的准确。

而其他类型的通过parseFloat()转换后得到的是NaN,NaN无论通过怎样的运算,都是不能跟0比较的,返回false。

在jquery之前的版本(如2.0.2)中:

isNumeric: function( obj ) {
	return !isNaN( parseFloat(obj) ) && isFinite( obj );
}

我们可以发现,使用这样的代码$.isNumeric([123])运行后,得到的true,而实际上,它是个数组类型。不过还好,在后续的版本已经修复了。

5. $.isEmptyObject()

$.isEmptyObject()不是用来判断变量的类型了,而是判断一个object类型是否为空,不包含任何属性。
从 jQuery 1.4 开始,这个方法既检测对象本身的属性,也检测从原型继承的属性(因此没有使用hasOwnProperty)。参数应当是一个普通的JavaScript对象, 对于其他类型的对象(DOM元素,原始strings/numbers,host对象)在跨浏览器中可能无法提供一致的结果。

$.isEmptyObject({name:"wenzi"}) // false
$.isEmptyObject({}) // true

function Person(){
	this.name = "wenzi"
}
$.isEmptyObject(new Person()); // false

function Student(){

}
Student.prototype.name = "wenzi";
$.isEmptyObject(new Student()); // false

我们能够看到,不论是对象本身的属性,还是prototype上的属性,只要存在,都会返回false。

isEmptyObject: function( obj ) {
	var name;
	for ( name in obj ) {
		return false;
	}
	return true;
}

在jquery中,是通过for~in进行检测的。因为for~in也是能循环到prototype上的属性的,若进入到循环中,则说明obj存在属性,发挥false;否则返回true。
6. 总结

jquery中还提供了很多各种各样的工具方法,让我们在编写js代码时更加的方便。以后有机会时再总结其他的工具方法。

 类似资料:
  • 1px线 解决移动端retina屏幕1像素的显示问题。 <ul class="ui-list-text border-list"> <li class="ui-border-t">上边框</li> <li class="ui-border">边框</li> <li class="ui-border-b">下边框</li> <li class="ui-bord

  • IsArray函数返回一个布尔值,指示指定的输入变量是否是数组变量。 语法 (Syntax) IsArray(variablename) 例子 (Example) 添加按钮并添加以下功能。 Private Sub Constant_demo_Click() Dim a,b as Variant a = array("Red","Blue","Yellow") b = "1234

  • 本文向大家介绍Java Class类 isArray()方法及示例,包括了Java Class类 isArray()方法及示例的使用技巧和注意事项,需要的朋友参考一下 Class类方法 isArray()方法在java.lang包中可用。 isArray()方法用于检查此类是否表示数组类。 isArray()方法是一个非静态方法,只能通过类对象访问,如果尝试使用类名称访问该方法,则会收到错误消息。

  • 本文向大家介绍jQuery使用方法,包括了jQuery使用方法的使用技巧和注意事项,需要的朋友参考一下 使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。 选择表达式可以是CSS选择器: 也可以是jQuery特有的表达式: 二、改变结果集 如果选中多个元素,jQuery提供过滤器,可以缩小结果集: 有一些时候,我们需要从结果集出发,

  • 本文向大家介绍浅谈jQuery操作类数组的工具方法,包括了浅谈jQuery操作类数组的工具方法的使用技巧和注意事项,需要的朋友参考一下 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$(‘div')将返回div里面的所有div元素包装的JQuery对象。在这种情况下,JQuery提供了几个常用的属性和方法来操作JQuery对象。 length:该属性返回JQuery

  • 本文向大家介绍PyQt 图解Qt Designer工具的使用方法,包括了PyQt 图解Qt Designer工具的使用方法的使用技巧和注意事项,需要的朋友参考一下 前言 Qt Designer是PyQt程序UI界面的实现工具,Qt Designer工具使用简单,可以通过拖拽和点击完成复杂界面设计,并且设计完成的.ui程序可以转换成.py文件供python程序调用。本文主要通过用户登录需求描述Qt