jQuery のいくつかのコア メソッドの紹介 programming_jquery

jQuery オブジェクトを呼び出す方法は非常に簡単です:

$('h1').remove();

ほとんどの jQuery メソッドは上記のように呼び出されます。これらのメソッドは $.fn 名前空間にあり、jQuery オブジェクト メソッドと呼ばれます。

ただし、セレクターの結果セットに依存しないメソッドもいくつかあります。これらのメソッドは jQuery 名前空間内にあり、jQuery コア メソッドと呼ばれます。わかりにくい場合は、次の 2 つの項目を覚えておいてください。

1. すべての jQuery セレクター メソッドは $.fn 名前空間にあります。
2. $ 内のメソッドは通常、セレクターに依存しないいくつかの実用的な関数メソッドであり、これらのメソッドのパラメーターと戻り値も大きく異なります。

$.fn.each や $.each など、一部のオブジェクト メソッドはコア メソッドと同じ名前を持つため、使用する場合は特別な注意が必要です。

jQuery の $ 名前空間には、多くの便利なメソッドが用意されています。

文字列から空白を 2 回削除します:

$.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');