Tipps zur Verwendung von jquery

Die Geburt von Jquery erleichtert unseren Front-End-Neulingen die Bedienung von Webinteraktionen.

Heute gebe ich Ihnen einige Tipps zur Verwendung von JQuery.

jquery blockiert Standardverhalten des Browsers wie Hyperlinks.

$("a").click(function(event){
  event.preventDefault();
});

Jquery löst das Wagenrücklaufereignis aus

 $(function () {
    $('#target').bind('keyup', function (event) {
       if (event.keyCode == 13) {
          alert("Hello~");
       }
   });
});

Den Wert von „select“ abrufen

jquery kann den Wert von „select“ abrufen, genau wie das Abrufen des Textfeldwerts: $ ('select' ).val();

Text kopieren

Verwenden Sie window.clipboardData.setData('text', text);

, um den Text einzufügen die Systemzwischenablage, um die Textkopierfunktion zu realisieren. Diese Methode wird jedoch nur vom IE unterstützt.

Weder Google Chrome noch Foxfire unterstützen es. Daher sollten Sie bei der Verwendung zunächst feststellen, ob der Browser dies unterstützt:

if (window.clipboardData) {  window.clipboardData.setData('text', text); }

Text auswählen

Für die Auswahl von Eingabe- oder Textbereichstexten bietet jquery eine einfache Funktion: select() , Beim Aufruf müssen Sie sicherstellen, dass das Textfeld sichtbar ist und den Fokus hat.

$("#txtSample").focus().select();　　//现货的焦点，然后选择文本

Mausereignisse

Mouseover und Mouseout, Mouseenter und Mouseleave; diese beiden Ereignisgruppen werden ausgelöst, wenn sich die Maus in ein Element hinein und aus diesem heraus bewegt Größter Unterschied zwischen ihnen Ja: Mouseover- und Mouseout-Blase Wenn sich die Maus zu ihren untergeordneten Elementen bewegt, wird das Ereignis ebenfalls ausgelöst,

, während Mouseenter und Mouseleave nicht blasen. ​

Dieser Unterschied ist sehr wichtig!

Erweiterung eines jQuery-Objekts

Erweitert ein Objekt mit einem oder mehreren anderen Objekten und gibt das erweiterte Objekt zurück. Dies ist die von jquery implementierte Vererbungsmethode. Beispiel:

    $.extend(target,prop1,propN)：

Einstellungen und Optionen zusammenführen und das zusammengeführte Ergebnis an die Einstellungen zurückgeben, was dem Erben der Einstellungen durch Optionen und dem Speichern des geerbten Ergebnisses in den Einstellungen entspricht.

    $.extend(settings, options);

Standardeinstellungen und Optionen zusammenführen und das zusammengeführte Ergebnis auf die Einstellung zurücksetzen, ohne den Standardinhalt zu überschreiben. Kann mehrere Parameter haben (mehrere Elemente kombinieren und zurückgeben)

    var settings = $.extend({}, defaults, options);

jQuery löscht Elemente im Array

Wie in Tipp 7 erwähnt, verwenden Sie die Methode $.grep(), um Elemente im Array zu löschen.

Der obige Code löscht das Element „b“ im Array.

var array = ['a', 'b', 'c']; 
$.grap(array, function(value, index){return value=='b';}, true);

JQuery-Array-Verarbeitung

Traverse obj, wobei obj das zu durchlaufende Array oder Objekt ist; fn ist die Verarbeitungsfunktion und die optionalen Parameter sind Index und Inhalt, z. B. var fn = function(index, content){}; Wenn Sie den Durchlauf beenden müssen, geben Sie bitte false zurück, und andere Rückgabewerte werden ignoriert.

$.each(obj, fn);

Mit dieser Methode können JSON-Datenobjekte verarbeitet werden.

Bestimmen Sie, ob das obj-Objekt im Array enthalten ist. Wenn es vorhanden ist, geben Sie -1 zurück zu einem anderen Array. array ist das Array, das konvertiert werden muss, und fn ist die Verarbeitungsfunktion. Der Rückgabewert dieser Methode ist ein neu verarbeitetes Array.

$.inArray(obj, array);

Zwei Arrays zusammenführen; den Inhalt von Array2 nach Array1 kopieren und das Ergebnis zurückgeben. Die Merge-Methode entfernt keine Duplikate. Sie müssen $.unique() verwenden, um Duplikate zu entfernen.

$.map(array, fn);

Duplikate aus dem Array entfernen.

$.merge(array1, array2);

Filtern Sie die Elemente im Array; diese Methode ruft die fn-Methode für jedes Objekt im Array auf;

$.unique(array);

invert optionaler Parameter; Die Funktion gibt die Elemente im Array zurück, die von der Filterfunktion als „true“ zurückgegeben werden. Wenn „invert“ wahr ist, wird die Menge der Elemente zurückgegeben, die von der Filterfunktion als „false“ zurückgegeben werden.

$.grep(array, fn, [invert]);

Diese Methode wird oft verwendet, um Elemente in einem Array zu löschen

Entfernen Sie die Leerzeichen am Anfang und Ende der Zeichenfolge

Es gibt für uns keine Trimmfunktion in js Entfernen Sie die Nullzeichen in beiden Segmenten der Zeichenfolge. Diese Funktion wurde in jQuery erweitert:

$.trim(str): Entfernen Sie Leerzeichen an beiden Enden der Zeichenfolge.

Zum Beispiel: $.trim("Hallo, wie geht es dir? "); //Return „Hallo, wie geht es dir?“

Ereignisse hinzufügen und Ereignisse entfernen

Es ist sehr praktisch, Ereignisse zu einem jQuery-Objekt hinzuzufügen:

jQuery bietet einen Mechanismus zum Bereitstellen mehrerer Verarbeitungsfunktionen für Ereignisse eines Objekts. Nachdem wir eine Klickereignisverarbeitungsmethode hinzugefügt haben, können wir mit dem Hinzufügen fortfahren ohne vorherige Verarbeitungsmethoden zu überschreiben.

Entfernen Sie das gebundene Ereignisabonnement, wenn die Unbind-Methode aufgerufen wird:

$('#btn').click(fn);
$('#btn').bind('click', fn);

Rufen Sie ein Element in der jQuery-Objektsammlung ab.

Rufen Sie es für die erhaltene Elementsammlung ab Das Element (angegeben durch den Index) kann mit der Methode eq oder get(n) oder der Indexnummer abgerufen werden. Beachten Sie, dass eq ein JQuery-Objekt zurückgibt, während get(n) und Index ein Dom-Elementobjekt zurückgeben. Für JQuery-Objekte können Sie nur JQuery-Methoden und für Dom-Objekte nur Dom-Methoden verwenden. Sie möchten beispielsweise den Inhalt des dritten

-Elements abrufen. Es gibt zwei Methoden:

$('#btn').unbind();　　　　//将会移除所有的事件订阅
$('#btn').unbind('click')　　//将会移除click事件的订阅

Konvertierung von jQuery-Objekten und Dom

Dom-Objekte können über $(dom) in jQuery-Objekte konvertiert werden; zum Beispiel:

$("div").eq(2).html(); 　　　　 //调用jquery对象的方法
$("div").get(2).innerHTML; 　　//调用dom的方法属性

　$ ( document.getElementById('#myDiv'))

Das jQuery-Objekt selbst ist ein Index. Sie können das Dom-Objekt über den Index abrufen. Sie können auch die Methode get() verwenden, um das Dom-Objekt abzurufen. zum Beispiel:

Intellisense in einer eigenständigen JS-Datei

Fügen Sie :/// am Anfang der JS-Datei hinzu: ///

$("div")[0];　　　　//获取第一个Dom对象
$("div").get(0);　　//同样获取第一个Dom对象