Einführung in einige Kernmethoden in jQuery programming_jquery

Die Methode zum Aufrufen des jQuery-Objekts ist sehr einfach:

$('h1').remove();

Die meisten jQuery-Methoden werden wie oben aufgerufen. Diese Methoden befinden sich im $.fn-Namespace. Diese Methoden werden als jQuery-Objektmethoden bezeichnet.

Aber es gibt auch einige Methoden, die nicht von der Ergebnismenge des Selektors abhängen. Diese Methoden befinden sich im jQuery-Namespace. Diese Methoden werden als jQuery-Kernmethoden bezeichnet. Wenn Sie Schwierigkeiten haben, es zu verstehen, denken Sie einfach an die folgenden zwei Punkte:

1. Alle jQuery-Auswahlmethoden befinden sich im $.fn-Namespace.
2. Die Methoden in $ sind im Allgemeinen einige praktische Funktionsmethoden. Diese Methoden basieren nicht auf Selektoren, und die Parameter und Rückgabewerte dieser Methoden sind ebenfalls sehr unterschiedlich.

Einige Objektmethoden haben dieselben Namen wie Kernmethoden, z. B. $.fn.each und $.each, daher müssen Sie bei der Verwendung besonders vorsichtig sein.

Der $-Namespace von jQuery bietet viele nützliche Methoden:

Leerzeichen zweimal aus einer Zeichenfolge entfernen:

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

Über Arrays und Objekte iterieren:

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

Gibt den Index eines Elements im Array zurück oder -1, wenn das Element nicht existiert

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

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

Verwenden Sie ein Objekt, um ein anderes Objekt zu erweitern:

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'

Wenn Sie den Wert im ersten Objekt nicht ändern möchten, übergeben Sie einfach ein leeres Objekt im ersten Parameter von $.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'

Den Umfang einer Funktion ändern:

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

myFunction(); // logs window object

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

Kombiniert mit Ereignissen, um zu sehen, wie der Umfang der Funktion geändert werden kann:

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

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

JavaScript selbst verfügt über eine Typerkennungsmethode, jQuery hat sie auch und sie macht es besser:

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

Zusätzliche Daten zu HTML-Elementen hinzufügen:

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

Die hinzuzufügenden Daten können beliebiger Art sein:

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