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

    $.extend(target,prop1,propN)：

    $.extend(settings, options);

    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.

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

JQuery-Array-Verarbeitung

$.each(obj, fn);

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

$.inArray(obj, array);

$.map(array, fn);

$.merge(array1, array2);

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

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

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

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

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