jQuery编程中的一些核心方法简介

2020-05-16 18:45:33易采站长站整理

调用 jQuery 对象的方法很简单:


$('h1').remove();

大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn 命名空间内,这些方法称为 jQuery 对象方法。

但是也有一些方法不需要依赖于选择器的结果集,这些方法位于 jQuery 命名空间内,这些方法称为 jQuery 核心方法。如果觉得不好理解,记住下面两条即可:

    所有 jQuery 选择器的方法都位于 $.fn 命名空间内。
    $ 内的方法一般都是一些实用的功能性方法,这些方法不依赖选择器,这些方法的参数和返回值也都大不相同。

有些对象方法跟核心方法的名称还会相同,例如 $.fn.each 和 $.each,使用的时候需要格外注意。

jQuery 的 $ 命名空间中提供了很多实用方法:

去除字符串两遍的空白:


$.trim(' lots of extra whitespace ');
// 返回 'lots of extra whitespace'

对数组和对象进行迭代:


$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {
console.log('element ' + idx + 'is ' + val);
});

$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {
console.log(k + ' : ' + v);
});

返回数组中某元素的索引,如果元素不存在则返回 -1


var myArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, myArray) !== -1) {
console.log('找到了');
}

用一个对象去扩展另外一个对象:


var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };

var newObject = $.extend(firstObject, secondObject);
console.log(firstObject.foo); // 'baz'
console.log(newObject.foo); // 'baz'

如果不想改变第一个对象中的值,在 $.extend 的第一个参数中传入一个空对象即可:


var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };

var newObject = $.extend({}, firstObject, secondObject);
console.log(firstObject.foo); // 'bar'
console.log(newObject.foo); // 'baz'

改变函数的作用域:


var myFunction = function() { console.log(this); };
var myObject = { foo : 'bar' };

myFunction(); // logs window object

var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction(); // logs myObject object

再结合事件看如何改变函数的作用域:


var myObject = {
myFn : function() {
console.log(this);
}
};

$('#foo').click(myObject.myFn); // logs DOM element #foo