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代码时更加的方便。以后有机会时再总结其他的工具方法。

(0)

相关推荐

  • 关于jQuery的inArray 方法介绍

    例如: 复制代码 代码如下: $.get('aaaaa.ashx',null,function(d){ // 假设d 返回 的值为 1,3,43,23,54,67 var arr = d.split(','); $.inArray(3,arr) ==-1 //true //为什么啊 //如果写成这样的 var arr = eval('['+d+']'); $.inArray(3,arr) >-1 //true }); 这是为什么呢? 望知道的朋友跟贴回复下. jquery inarray()函数

  • jQuery中serializeArray()与serialize()的区别实例分析

    本文实例讲述了jQuery中serializeArray()与serialize()的区别.分享给大家供大家参考,具体如下: serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

  • JQuery中serialize()、serializeArray()和param()方法示例介绍

    下面是服务器端的jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); String content = r

  • jQuery学习笔记之toArray()

    从源码中可以看到,这些常见的方法,都是直接从原生的javascript中"借鉴"过来的.为什么这么说呢?225行中,在运行时,this是指向jQuery对象的,通过call语句借鉴slice方法,切割出一个数组出来,这种"借鸡下蛋"的方法,真的是让人拍手叫绝.slice(start,end)是用来切分数组的.start表示切分数组的开始位置.省略end表示到从start一直到最后

  • jQuery中inArray方法注意事项分析

    本文分析讲述了jQuery中inArray方法注意事项.分享给大家供大家参考,具体如下: jquery为web开发者提供了很大的便捷,本文写作的目地是提醒大家慎重jquery中的inArray方法. 大家都知道javascript是一种弱类型语言,对于数字类型和字符类型,可以随意切换(例如:1+""="1"),下面开始说主题: jquery的一个方法inArray(ele, array)是判断ele是否在array中存在,返回值是该元素第一次出现在数组array中的

  • jquery 注意事项与常用语法小结

    1.关于选择器中含有特殊符号 选择器中含有".","#","(","]"等特殊字符,根据W3C的规定,属性值中是不能含有这些特殊字符的,例如: 复制代码 代码如下: <div id="id#b">bb</div> <div id="id[1]"></div> 如果按照普通的方式来获取,例如: 复制代码 代码如下: $("#id#b

  • JS(JQuery)操作Array的相关方法介绍

    1:split 函数将字符串按某个字符分割,将分割后的结果存入字符串数组中 复制代码 代码如下: function SplitUsersInformation(users) {    var usersArray = users.split(';');    return usersArray;} 2:substr 函数切割目标字符串 复制代码 代码如下: currentStr = currentStr .substr(0, currentStr.length - 2); 3:push 方法向A

  • jQuery语法总结和注意事项小结

    一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度. jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初

  • 与jquery serializeArray()一起使用的函数,主要来方便提交表单

    .serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据.(摘自jquery文档). 有以下一个表单窗口,代码: 复制代码 代码如下: <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="

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

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

  • JQuery中each()的使用方法说明

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

  • jquery中AJAX请求 $.post方法的使用

    使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求.$.post方法是jQuery的实用工具方法. post和get发送方式的特点, GET 方法提交数据不安全,数据置于请求行,客户端地址栏可见; GET 方法提交的数据大小限制在255 个字符之内.POST方法提交的数据置于消息主体内,客户端不可见, POST 方法提交的数据大小没有限制. $.post方法语法 $.post(url,parameters,callback) 参数   url (字符串)服务器端资源地址

  • jQuery中的deferred使用方法

    deferred简介 deferred对象是jQuery的回调函数解决方案,jQuery之前的版本中异步回调这块做的不是很好,所以后期补上了该解决方案. 普遍的ajax操作方式 我们先来回顾一下jQuery中普通的ajax操作 $.ajax({ url: 'test.html', success: function (res) { console.log('数据读取成功'); }, error: function () { console.log('数据读取失败'); } }); 1.5版本后的

  • 详解jQuery中基本的动画方法

    大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 jQuery中的动画 show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none": 2.show()方法和hide()方法会同时改变元素的宽度.高度和透明度 3.在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住

  • jQuery中库的引用方法

    jQuery是一个轻量级的JavaScript库,里面包含所有的jQuery方法. 如果想要使用这些方法,那么必须首先引用这个库. 先看一段代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

  • jQuery中实现text()的方法

    一.有这样一段 html <div class="divOne"> <p>嘿嘿嘿</p> </div> <div class="divOne"> <p>哈哈哈</p> </div> 二.jQuery 的 text() 方法 (1)当直接调用 $().text()时,.text()的作用是(循环)读取(多个)目标元素的textContent/nodeValue 简单实现:

  • 详解jQuery中的isPlainObject()使用方法

    说明 jQuery中的isPlainObject() 函数用于判断指定参数是否是一个纯粹的对象,返回值为Boolean类型. "纯粹的对象",就是通过 { }.new Object().Object.create(null) 创建的对象. 这个方法的作用是为了跟其他的 JavaScript对象如 null,数组,宿主对象(documents),DOM 等作区分,因为这些用 typeof 都会返回object. 使用 语法: $.isPlainObject( object ) 参数说明:

  • 详解jQuery中的prop()使用方法

    prop()定义和用法 prop() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值时,则返回第一个匹配元素的值. 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对. 注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected). 提示:如需检索 HTML 属性,请使用 at

  • jQuery中的关系查找方法

    目录 一.jQuery关系查找方法 二.jQuery其他关系查找方法 一.jQuery关系查找方法 $(this):在原生的DOM操作中,事件函数内部都有一个this关键字指向的就是触发事件的事件源;在jQuery中将this关键字传递给$()方法,得到的就是指向自己的jQuery对象,这样就可以使用jQuery方法了. parent()父级:jQuery对象都有一个parent()方法,得到的是自己的父级,父级得到的也是一个jQuery对象,可以直接继续打点调用jQuery方法和属性 chil

随机推荐