jQuery自带的一些常用方法总结

本身方法($.each,$.map,$.contains,$ajax)

常用工具方法

(1)$.trim

$.trim方法用于移除字符串头部和尾部多余的空格。

复制代码 代码如下:


$.trim('   Hello   ') // Hello

(2)$.contains

$.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一个DOM元素(第一个参数)的下级元素。

复制代码 代码如下:


$.contains(document.documentElement, document.body);
// true
$.contains(document.body, document.documentElement);
// false

(3)$.each,$.map

$.each方法用于遍历数组和对象,然后返回原始对象。它接受两个参数,分别是数据集合和回调函数。

复制代码 代码如下:


$.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


需要注意的,jQuery对象实例也有一个each方法($.fn.each),两者的作用差不多。

$.map方法也是用来遍历数组和对象,但是会返回一个新对象。

复制代码 代码如下:


var a = ["a", "b", "c", "d", "e"];
a = $.map(a, function (n, i){
  return (n.toUpperCase() + i);
});
// ["A0", "B1", "C2", "D3", "E4"]

(4)$.inArray

$.inArray方法返回一个值在数组中的位置(从0开始)。如果该值不在数组中,则返回-1。

复制代码 代码如下:


var a = [1,2,3,4];
$.inArray(4,a) // 3

(5)$.extend

$.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不会。

(6)$.proxy

$.proxy方法类似于ECMAScript 5的bind方法,可以绑定函数的上下文(也就是this对象)和参数,返回一个新函数。

jQuery.proxy()的主要用处是为回调函数绑定上下文对象。

复制代码 代码如下:


var o = {
    type: "object",
    test: function(event) {
        console.log(this.type);
    }
};
$("#button")
  .on("click", o.test) // 无输出
  .on("click", $.proxy(o.test, o)) // object


上面的代码中,第一个回调函数没有绑定上下文,所以结果为空,没有任何输出;第二个回调函数将上下文绑定为对象o,结果就为object。

这个例子的另一种等价的写法是:

复制代码 代码如下:


$("#button").on( "click", $.proxy(o, test))


上面代码的$.proxy(o, test)的意思是,将o的方法test与o绑定。

这个例子表明,proxy方法的写法主要有两种。

复制代码 代码如下:


jQuery.proxy(function, context)
// or
jQuery.proxy(context, name)


第一种写法是为函数(function)指定上下文对象(context),第二种写法是指定上下文对象(context)和它的某个方法名(name)。

再看一个例子。正常情况下,下面代码中的this对象指向发生click事件的DOM对象。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgsxjs.html