Pengenalan kepada beberapa kaedah teras dalam jQuery programming_jquery

Kaedah memanggil objek jQuery adalah sangat mudah:

$('h1').remove();

Kebanyakan kaedah jQuery dipanggil seperti di atas. Kaedah ini terletak di ruang nama $.fn. Kaedah ini dipanggil kaedah objek jQuery.

Tetapi terdapat juga beberapa kaedah yang tidak bergantung pada set hasil pemilih Kaedah ini terletak dalam ruang nama jQuery. Jika anda merasa sukar untuk memahami, cuma ingat dua perkara berikut:

1. Semua kaedah pemilih jQuery terletak dalam ruang nama $.fn.
2. Kaedah dalam $ biasanya beberapa kaedah berfungsi praktikal Kaedah ini tidak bergantung pada pemilih, dan parameter dan nilai pulangan kaedah ini juga sangat berbeza.

Sesetengah kaedah objek akan mempunyai nama yang sama seperti kaedah teras, seperti $.fn.each dan $.each, jadi anda perlu memberi perhatian khusus apabila menggunakannya.

ruang nama $ jQuery menyediakan banyak kaedah berguna:

Alih keluar ruang putih daripada rentetan dua kali:

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

Lelaran pada tatasusunan dan objek:

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

Mengembalikan indeks elemen dalam tatasusunan, atau -1 jika elemen itu tidak wujud

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

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

Gunakan satu objek untuk memanjangkan objek lain:

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'

Jika anda tidak mahu menukar nilai dalam objek pertama, hanya hantar objek kosong dalam parameter pertama $.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'

Tukar skop fungsi:

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

myFunction(); // logs window object

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

Digabungkan dengan acara untuk melihat cara menukar skop fungsi:

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

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

JavaScript sendiri mempunyai kaedah pengesanan jenis, jQuery juga mempunyainya, dan ia melakukannya dengan lebih baik:

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

Tambah data tambahan pada elemen HTML:

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

Data yang akan ditambahkan boleh terdiri daripada sebarang jenis:

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