jQuery程式設計中的一些核心方法簡介

jQuery程式設計中的一些核心方法簡介_jquery

WBOY

發布： 2016-05-16 15:45:06

原創

1750 人瀏覽過

呼叫 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
$('#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');

登入後複製