前面的话jquery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法。如果理解原生javascript的继承原理,那么就能理解工具方法的实质。它是定义在jquery构造函数上的方法,即jquery.method(),所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jquery.prototype.method(),所以必须生成实例(即选中元素)后使用。把工具方法理解成像javascript原生函数那样可以直接使用的方法就行了。下面将详细介绍jquery的常用工具方法
元素相关【each()】
它是一个通用的迭代函数,可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到 length - 1。其他对象通过其属性名进行迭代
jquery.each( collection, callback(indexinarray, valueofelement) )
jquery.each()函数和 jquery(selector).each()不一样,后者专门用来遍历一个jquery对象。jquery.each()函数可用于迭代任何集合,无论是“名/值”对象(javascript对象)或数组。在迭代数组的情况下,回调函数每次传递一个数组索引和相应的数组值作为参数。(该值也可以通过访问this关键字得到,但是javascript将始终将this值作为一个object ,即使它是一个简单的字符串或数字值。)该方法返回其第一个参数,这是迭代的对象
$.each( ['a','b','c'], function(index,value){//index #0: a//index #1: b//index #2: cconsole.log( index # + index + : + value );
});
$.each( { name: john, lang: js }, function(index,value){//index #name: john//index #lang: jsconsole.log( index # + index + : + value );
});
【contains()】
检查一个dom元素是另一个dom元素的后代
jquery.contains( container, contained )
$.contains( document.documentelement, document.body ); // true
【extend()】
将两个或更多对象的内容合并到第一个对象
jquery.extend( target [, object1 ] [, objectn ] )
target: object 一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展jquery的命名空间。
object1: object 一个对象,它包含额外的属性合并到第一个参数
objectn: object 包含额外的属性合并到第一个参数
$.extend({}, object1, object2);
jquery.extend( [deep ], target, object1 [, objectn ] )
deep: boolean 如果是true,合并成为递归(又叫做深拷贝)。
target: object 对象扩展。这将接收新的属性。
object1: object 一个对象,它包含额外的属性合并到第一个参数.
objectn: object 包含额外的属性合并到第一个参数
$.extend(true, object1, object2);
数据相关【data()】
存储任意数据到指定的元素并且/或者返回设置的值
jquery.data( element )
element:element 要关联数据的dom对象
key: string 存储的数据名
value:object 新数据值
$.data(document.body, 'foo', 52);
$.data(document.body, 'bar', 'test');
console.log($.data( document.body, 'foo' ));//52console.log($.data( document.body ));//{foo: 52, bar: test}
【removedata()】
删除一个先前存储的数据片段
jquery.removedata( element [, name ] )
var div = $(div);
$.data(div, test1, value-1);
$.data(div, test2, value-2);
console.log($.data(div));//{test1: value-1, test2: value-2}$.removedata(div, test1);
console.log($.data(div));//{test2: value-2}
类型检测【type()】
type()方法用于检测javascript对象的类型
如果对象是undefined或null,则返回相应的“undefined”或“null”
jquery.type( undefined ) === undefinedjquery.type() === undefinedjquery.type( window.notdefined ) === undefinedjquery.type( null ) === null
如果对象有一个内部的[[class]]和一个浏览器的内置对象的 [[class]] 相同,返回相应的 [[class]] 名字
jquery.type( true ) === booleanjquery.type( 3 ) === numberjquery.type( test ) === stringjquery.type( function(){} ) === functionjquery.type( [] ) === arrayjquery.type( new date() ) === datejquery.type( new error() ) === error jquery.type( /test/ ) === regexp
所以该方法类似于原生javascript中经过封装的object.prototype.tostring()方法
function type(obj){return object.prototype.tostring.call(obj).slice(8,-1).tolowercase();
}
【isarray()】
在原生javascript中,数组检测是一个经典问题,当出现网页中包含多个框架的场景时,数组检测就不再容易
jquery提供了isarray()方法用来检测数组
console.log($.isarray([]));//true
【isfunction()】
isfunction()方法用来检测传入的参数是否为函数
console.log($.isfunction(function(){}));//true
如果使用原生javascript,使用typeof即可实现
console.log(typeof function(){});//function
【isnumeric()】
isnumeric()方法用来检测传入的参数是否为数字
[注意]参数为纯数字或数字字符串都可以
$.isnumeric(-10); // true$.isnumeric(-10); // true
如果使用原生javascript,使用typeof即可实现,但结果稍有不同
console.log(typeof 10);//numberconsole.log(typeof '10');//string
【isemptyobject()】
isemptyobject()方法用来检测一个对象是否为空对象
jquery.isemptyobject({}) // truejquery.isemptyobject({ foo: bar }) // false
【isplainobject()】
isplainobject()方法用来检测一个对象是否是原生对象,即通过 {} 或者 new object 创建的对象
console.log($.isplainobject({}));//trueconsole.log($.isplainobject(document.documentelement));//falseconsole.log($.isplainobject(new boolean(true)));//falseconsole.log($.isplainobject(true));//false
数组相关【inarray()】
inarray(value, array [, fromindex ])方法类似于原生javascript的indexof()方法,没有找到匹配元素时它返回-1。如果数组第一个元素匹配参数,那么$.inarray()返回0
参数fromindex是数组索引值,表示从哪里在开始查找。默认值是0
var arr = [1,2,3,'1','2','3'];
console.log(arr.indexof('2'));//4console.log(arr.indexof(3));//2console.log(arr.indexof(0));//-1var arr = [1,2,3,'1','2','3'];
console.log($.inarray('2',arr));//4console.log($.inarray(3,arr));//2console.log($.inarray(0,arr));//-1
【makearray()】
makearray()方法用于将一个类数组对象转换为真正的javascript数组
console.log($.isarray({ 0: 'a', 1: 'b', length: 2 }));//falseconsole.log($.isarray($.makearray({ 0: 'a', 1: 'b', length: 2 })));//true
如果使用原生javascript,可以使用slice()方法将类数组对象变成真正的数组
var arr = array.prototype.slice.call(arraylike);
array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']array.prototype.slice.call(document.queryselectorall(div));
array.prototype.slice.call(arguments);
【unique()】
unique()方法用于数组去重
var $arr = [document.body,document.body];
console.log($.unique($arr));//[body]var $arr = [1,2,1];
console.log($.unique($arr));//[2,1]
使用原生javascript实现如下
array.prototype.norepeat = function(){var result = [];for(var i = 0; i < this.length; i++){if(result.indexof(this[i]) == -1){
result.push(this[i]);
}
}return result;
}
var arr = [1,2,1];
console.log(arr.norepeat());//[1,2]var arr = [document.body,document.body];
console.log(arr.norepeat());//[body]
【grep()】
查找满足过滤函数的数组元素。原始数组不受影响
jquery.grep( array, function(elementofarray, indexinarray) [, invert ] )
array: array 用于查询元素的数组。function: function() 该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素,第二个参数是该元素的索引值。该函数应返回一个布尔值。this将是全局的window对象。
invert: boolean 如果“invert”为false,或没有提供,函数返回一个“callback”中返回true的所有元素组成的数组,。如果“invert”为true,函数返回一个“callback”中返回false的所有元素组成的数组。
$.grep()方法会删除数组必要的元素,以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true,该数组元素将返回到结果数组中。
该过滤器的函数将被传递两个参数:当前正在被检查的数组中的元素,及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项
var result = $.grep( [0,1,2], function(n,i){ return n > 0;
});
console.log(result);//[1, 2]
var result = $.grep( [0,1,2], function(n,i){ return n > 0;
},true);
console.log(result);//[0]
【merge()】
合并两个数组内容到第一个数组
jquery.merge( first, second )
console.log($.merge( [0,1,2], [2,3,4] ));//[0, 1, 2, 2, 3, 4]
其他【proxy()】
proxy()方法接受一个函数,然后返回一个新函数,并且这个新函数使用指定的this
proxy()方法类似于bind(),但并不相同。区别在于,bind()方法是改变原函数的this指向,而proxy()方法是新建一个函数,并使用参数中的this指向,原函数的this指向并无变化
var a = 0;function foo(){
console.log(this.a);
}var obj = {
a:2};
foo();//0$.proxy(foo,obj)();//2foo();//0
proxy()方法支持多种参数传递方式
function foo(a,b){
console.log(a+b);
}
$.proxy(foo,document)(1,2);//3$.proxy(foo,document,1,2)();//3$.proxy(foo,document,1)(2);//3
在绑定事件时一定要合理使用proxy()方法的参数传递方式,否则事件还没有发生,可能函数已经被调用了
$(document).click($.proxy(foo,window,1,2))
【trim()】
jquery.trim()函数用于去除字符串两端的空白字符
这个函数很简单,没有多余的参数用法
console.log($.trim( hello, how are you? ));//'hello, how are you?'
【noop()】
一个空函数
jquery.noop() 此方法不接受任何参数
当你仅仅想要传递一个空函数的时候,就用他吧
这对一些插件作者很有用,当插件提供了一个可选的回调函数接口,那么如果调用的时候没有传递这个回调函数,就用jquery.noop来代替执行
【now()】
返回一个数字,表示当前时间
jquery.now() 这个方法不接受任何参数
$.now()方法是表达式(new date).gettime()返回数值的一个简写
【parsehtml()】
将字符串解析到一个dom节点的数组中
jquery.parsehtml( data [, context ] [, keepscripts ] )
data : string 用来解析的html字符串
context (默认: document): element dom元素的上下文,在这个上下文中将创建的html片段。
keepscripts (默认: false): boolean 一个布尔值,表明是否在传递的html字符串中包含脚本。
jquery.parsehtml 使用原生的dom元素的创建函数将字符串转换为一组dom元素,然后,可以插入到文档中。
默认情况下,如果没有指定或给定null or undefined,context是当前的document。如果html被用在另一个document中,比如一个iframe,该frame的文件可以使用
var result = $.parsehtml( hello, my name is jquery);
$('div').append(result);
【parsejson()】
接受一个标准格式的 json 字符串,并返回解析后的 javascript 对象
jquery.parsejson( json )
var obj = jquery.parsejson('{name:john}');
console.log(obj.name === john);//true
以上就是jquery常用工具方法的详细内容。