jQuery函数库提供了一个jQuery对象(简写为$),这个对象本身是一个构造函数,可以用来生成jQuery对象的实例。有了实例以后,就可以调用许多针对实例的方法,它们定义jQuery.prototype对象上面(简写为$.fn)。
除了实例对象的方法以外,jQuery对象本身还提供一些方法(即直接定义jQuery对象上面),不需要生成实例就能使用的静态方法。由于这些静态的方法类似“通用工具”的性质,所以我们把它们称为“工具方法”(utilities)。
工具方法多为静态的。
常用的工具方法
- $.trim方法
$.trim方法用于移除字符串头部和尾部多余的空格。 - $.contains方法
$.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一个DOM元素(第一个参数)的下级元素。
$.trim(' Hello ') // Hello $.contains(document.documentElement, document.body); // true $.contains(document.body, document.documentElement); // false
参数只能是DOM元素,JQuery对象可以吗?
-
$.each,$.map
$.each方法用于遍历数组和对象,然后返回原始对象。它接受两个参数,分别是数据集合和回调函数。需要注意的,jQuery对象实例也有一个each方法($.fn.each),两者的作用差不多。
$.map方法也是用来遍历数组和对象,但是会返回一个新对象。
前者侧重原始数据输出,后者侧重原始数据处理返回?$.each([ 52, 97 ], function( index, value ) { console.log( index + ": " + value ); }); // 0: 52 // 1: 97 var obj = { p1: "hello", p2: "world" }; $.each( obj, function( key, value ) { console.log( key + ": " + value ); }); // p1: hello // p2: world var a = ["a", "b", "c", "d", "e"]; a = $.map(a, function (n, i){ return (n.toUpperCase() + i); }); // ["A0", "B1", "C2", "D3", "E4"]
-
$.inArray
$.inArray方法返回一个值在数组中的位置(从0开始)。如果该值不在数组中,则返回-1。
-
$.extend
$.extend方法用于对象扩展,可以将多个对象合并进成一个对象。
//$.inArray() var a = [1,2,3,4]; $.inArray(4,a) // 3 //$.extend() var o1 = {p1:'a',p2:'b'}; var o2 = {p1:'c'}; $.extend(o1,o2); o1.p1 // "c" //$.extend() var o1 = {p1:'a',p2:'b'}; var o2 = {p1:'c'}; var o = $.extend({},o1,o2); o // Object {p1: "c", p2: "b"}
取待合并对象属性集合,重名属性后者覆盖前者。
默认情况下,extend方法生成的对象是“浅拷贝”,也就是说,如果某个属性是对象或数组,那么只会生成指向这个对象或数组的指针,而不会复制值。如果想要“深拷贝”,可以在extend方法的第一个参数传入布尔值true。
var o1 = {p1:['a','b']}; var o2 = $.extend({},o1); var o3 = $.extend(true,{},o1); o1.p1[0]='c'; o2.p1 // ["c", "b"] o3.p1 // ["a", "b"]
上面代码中,o2是浅拷贝,o3是深拷贝。结果,改变原始数组的属性,o2会跟着一起变,而o3不会。
-
$.proxy
$.proxy方法类似于ECMAScript 5的bind方法,可以绑定函数的上下文(也就是this对象)和参数,返回一个新函数。
View Code
由上面代码2种写法可知,$.proxy()方法有2种使用方法
View Code
第一种写法是为函数(function)指定上下文对象(context),第二种写法是指定上下文对象(context)和它的某个方法名(name)。
//$(this)指向引发事件的DOM对象$('#myElement') $('#myElement').click(function() { $(this).addClass('aNewClass'); }); //$(this)因使用setTimeout延迟函数而指向了window $('#myElement').click(function() { setTimeout(function() { $(this).addClass('aNewClass'); }, 1000); }); //使用$.proxy()改变this指向 $('#myElement').click(function() { setTimeout($.proxy(function() { $(this).addClass('aNewClass'); }, this), 1000); });
正常情况下,下面代码中的this对象指向发生click事件的DOM对象。
如果我们想让回调函数延迟运行,使用setTimeout方法,代码就会出错,因为setTimeout使得回调函数在全局环境运行,this将指向全局对象。
这时,就可以用proxy方法,将this对象绑定到指定的对象。
setTimeOut()解决绑定了吗?需要测试。 -
$.data,$.removeData
$.data方法可以用来在DOM节点上储存数据。$.removeData方法用来移除DOM节点存储的数据。读取所有数据返回的是对象?
// 存入数据 $.data(document.body, "foo", 52 ); // 读取数据 $.data(document.body, "foo"); // 读取所有数据 $.data(document.body); // 移除数据 $.removeData(document.body, "foo");
-
$.parseHTML,$.parseJSON,$.parseXML 将字符串解析为特定对象
$.parseHTML方法用于将字符串解析为DOM对象。
$.parseJSON方法用于将JSON字符串解析为JavaScript对象,作用与原生的JSON.parse()类似。但是,jQuery没有提供类似JSON.stringify()的方法,即不提供将JavaScript对象转为JSON对象的方法。
$.parseXML方法用于将字符串解析为XML对象。
var html = $.parseHTML("hello, <b>my name is</b> jQuery."); var obj = $.parseJSON('{"name": "John"}'); var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>"; var xmlDoc = $.parseXML(xml);
-
$.makeArray
$.makeArray方法将一个类似数组的对象,转化为真正的数组。
-
$.merge
$.merge方法用于将数组并。
// $.makeArray() var a = $.makeArray(document.getElementsByTagName("div")); // $.merge() var a1 = [0,1,2]; var a2 = [2,3,4]; $.merge(a1, a2); a1 // [0, 1, 2, 2, 3, 4]
-
$.now
$.now方法返回当前时间距离1970年1月1日00:00:00 UTC对应的毫秒数,等同于(new Date).getTime()。
$.now() // 1388212221489
判断数据类型的方法
jQuery提供一系列工具方法,用来判断数据类型,以弥补JavaScript原生的typeof运算符的不足。以下方法对参数进行判断,返回一个布尔值。
- jQuery.isArray():是否为数组。
- jQuery.isEmptyObject():是否为空对象(不含可枚举的属性)。
- jQuery.isFunction():是否为函数。
- jQuery.isNumeric():是否为数值(整数或浮点数)。
- jQuery.isPlainObject():是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。
- jQuery.isWindow():是否为window对象。
- jQuery.isXMLDoc():判断一个DOM节点是否处于XML文档之中。
$.isEmptyObject({}) // true $.isPlainObject(document.location) // false $.isWindow(window) // true $.isXMLDoc(document.body) // false
除了上面这些方法以外,还有一个$.type方法,可以返回一个变量的数据类型。它的实质是用Object.prototype.toString方法读取对象内部的[[Class]]属性
$.type(/test/) // "regexp"
参考