Einführung in einige Kernmethoden in jQuery programming

Einführung in einige Kernmethoden in jQuery programming_jquery

WBOY

Freigeben： 2016-05-16 15:45:06

Original

1718 Leute haben es durchsucht

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

$('h1').remove();

Nach dem Login kopieren

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:

Alle jQuery-Auswahlmethoden befinden sich im $.fn-Namespace.
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'

Nach dem Login kopieren

Ü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);
});

Nach dem Login kopieren

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('找到了');
}

Nach dem Login kopieren

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'

Nach dem Login kopieren

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'

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren