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

Posted 2020-08-30 山涧清泉

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

$(‘h1‘).remove();

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

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

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

有些对象方法跟核心方法的名称还会相同，例如 $.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

 

$(‘#foo‘).click($.proxy(myObject, ‘myFn‘)); // logs myObject

javascript 本身有类型检测的方法，jQuery 中也有，并且做得更好：

var myValue = [1, 2, 3];

 

// 用 JavaScript 的 typeof 操作符来判断类型

typeof myValue == ‘string‘; // false

typeof myValue == ‘number‘; // false

typeof myValue == ‘undefined‘; // false

typeof myValue == ‘boolean‘; // false

 

// 用恒等于 检测 null

myValue === null; // false

 

// 使用 jQuery 的方法来判断类型

jQuery.isFunction(myValue); // false

jQuery.isPlainObject(myValue); // false

 

jQuery.isArray(myValue); // true

向 html 元素添加额外的数据：

$(‘#myDiv‘).data(‘keyName‘, { foo : ‘bar‘ });

 

$(‘#myDiv‘).data(‘keyName‘); // { foo : ‘bar‘ }

所要添加的数据可以是任意类型：

$(‘#myList li‘).each(function() {

  var $li = $(this), $div = $li.find(‘div.content‘);

  $li.data(‘contentDiv‘, $div);

});

 

// 不需要再去找那些 div 了；

// 可以直接从 list 中读取出来

var $firstLi = $(‘#myList li:first‘);

 

$firstLi.data(‘contentDiv‘).html(‘new content‘);

 

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

?

1	$(‘h1‘).remove();

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

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

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