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();
});Nach dem Login kopieren
Jquery löst das Wagenrücklaufereignis aus
$(function () {
$('#target').bind('keyup', function (event) {
if (event.keyCode == 13) {
alert("Hello~");
}
});
});Nach dem Login kopieren
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); }Nach dem Login kopieren
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(); //现货的焦点，然后选择文本Nach dem Login kopieren
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)：
Nach dem Login kopieren
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);
Nach dem Login kopieren
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);Nach dem Login kopieren
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);Nach dem Login kopieren
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);
Nach dem Login kopieren
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);
Nach dem Login kopieren
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);
Nach dem Login kopieren
Duplikate aus dem Array entfernen.
$.merge(array1, array2);
Nach dem Login kopieren
Filtern Sie die Elemente im Array; diese Methode ruft die fn-Methode für jedes Objekt im Array auf;
$.unique(array);
Nach dem Login kopieren
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]);
Nach dem Login kopieren
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);
Nach dem Login kopieren
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事件的订阅
Nach dem Login kopieren
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的方法属性Nach dem Login kopieren
$ ( 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对象Nach dem Login kopieren
