Spickzettel JQuery - Der beste interaktive Spickzettel für JQuery

Einführung in Cheatsheet JQuery

Jquery ist eine plattformübergreifende Javascript-Bibliothek, die hauptsächlich darauf abzielt, die Webentwicklung einfacher zu programmieren. Es ist erwiesen, dass die Einführung von Jquery die Länge von Javascript-Codes ziemlich reduziert hat. Selbst ein mehrzeiliger Javascript-Code kann leicht mit einem kleinen Block oder sogar einer einzelnen Zeile einer JQuery-Anweisung erreicht werden.

In diesem Cheatsheet JQuery-Artikel werden wir diskutieren, was Jquery ist und wie der PTP dieses Frameworks aussieht:

Es gibt zahlreiche Websites, die im Internet aktiv sind, und der Markt umfasst eine breite Palette von Sprachen, die den Aufbau dieser Websites und Online-Produkte ermöglichen. Einige der berühmtesten sind wie folgt:

• HTML, CSS
• Javascript und JQuery für Client-End-Scripting
• PHP für Server-End-Scripting
• MYSQL zur Datenbankabfrage
• etc.

Vorteile der Verwendung von JQuery Framework gegenüber anderen,

• Es beinhaltet eine riesige Community und eine Menge Plugins.
• Leicht
• leistungsstarke Verkettungsfunktionen
• Kurzdokumentation und Tutorials
• Fähigkeit zur einfachen Entwicklung von Ajax-Komponenten
• Es ist die Fähigkeit, Code einfach und wiederverwendbar zu machen
• Browser freundlich

Grundlegender Inhalt und Syntax von Cheat Sheet JQuery:

Einschließen : JQuery in das aktuelle Ausführungsskript einschließen




Syntax: Die Syntaxstruktur von JQuery

Der Selektor wählt die HTML-Komponenten aus

$(Selector).action() Aktion, die für die ausgewählte Komponente ausgeführt wird

Definiert die Verwendung von JQuery

Spickzettel für Jquery Selectors:

Tag-ElementeTag-Elemente

Wähler	BESCHREIBUNG
$ ("*")	Wählt alle HTML-Elemente aus
$ ("P.demo")	Wählt aus Tag-Elemente
$ (": Button")	Wählt die Schaltfläche und die Eingabeelemente aus
$ ("Tr: gerade")	Wählt die Gerade aus
$ ("Tr: odd")	Wählt die ungerade aus
$ ("Span: parent")	Wählt Elemente aus, denen ein untergeordnetes Element zugeordnet ist
$ ("(Href)")	Wählt alle Elemente mit href-Attributen aus
$ (": Eingabe")	Wählt alle Formularelemente aus

Cheat Sheet für Jquery Events: Event ist eine Art Aktion auf der Webseite. Die wichtigsten Ereignisse sind wie folgt.

Mausereignisse	Mausereignismethode	Tastaturereignisse	Tastaturereignismethode	Formularereignisse	Form Event-Methode
maus eingeben	.mouseenter ()	Tastendruck	.Tastendruck()	Veränderung	.Veränderung()
Doppelklick	.dblclick ()	Taste nach unten	.Taste nach unten()	Fokus	.Fokus()
klicken	.klicken()	Keyup	.keyup ()	verwischen	.verwischen()
Maus verlassen	.mouseleave ()	Browser-Ereignisse	Browser-Ereignismethode	Ereignisse dokumentieren	Document Event-Methoden
Maus nach unten	.Maus nach unten()	Fehlerpopulation	.Error()	entladen	.entladen()
Maus hoch	.mouseup ()	scrollen	.scrollen()	Belastung	.Belastung()

Ex :

$("p").dblclick(function()(
$(this).hide();
));

Cheat Sheet JQuery-Effekte:

Grundlagen: .hide (), .show (), .toggle () - Ermöglicht das Ausblenden, Anzeigen und Umschalten der ausgewählten Elemente.

Ex:

$("p").hide();

Benutzerdefiniert: .animate (), .delay (), .dequeue (), .stop ()

• Die Methode animate () erstellt benutzerdefinierte Animationen
• Die delay () -Methode ermöglicht die verzögerte Ausführung von Elementen.
• dequeue () führt die nächste Folge von Funktionen in der Warteschlange aus.

Ex :

$("element1").animate(
(
opacity : 0.50
left: "+=27"
)

Fade: fadeTo (), fadeOut (), fadeIn (), fadeToggle ()

• fadeIn () Blendet ein ausgeblendetes Element aus
• Mit fadeout () kann ein sichtbares Element ausgeblendet werden
• fadeTo () wechselt zu einer bestimmten Deckkraft
• Mit fadeToggle () kann das Element zwischen Einblend- und Ausblendmethoden umgeschaltet werden.

Ex :

$("button").click(function()
(
$("#div2").fadeOut("slow");
));

Folie: slideDown (), slideUp (), slideToggle ()

• slideDown () Anzeige mit einer Schiebebewegung, die über die Elemente hinausgeht
• slideToggle () Zeigt oder verbirgt sich mit einer Schiebebewegung überübereinstimmende Elemente
• slideUp () Versteckt sich mit einer Schiebebewegung über den Elementen

Kostenlose Tipps und Tricks zur Verwendung von Spickzettel jQuery

1) Behalten Sie einen Kontextparameter bei, mit dem die Ausführung von einer tieferen DOM-Verzweigung aus gestartet werden kann, anstatt vom Stamm aus aufzurufen.

2) Überprüfen Sie, ob das Element vorhanden ist, und drücken Sie es zur Ausführung des Codes nach vorne.

Syntax :

if($("#element").length)
(
// DOM element exists
)
else
(
//DOM element dont exists
)

3) Die jQuerys-Datenmethode bindet DOM-Elemente und Daten, ohne das DOM zu ändern.

4) Überprüfen Sie, ob eines der Elemente verborgen ist.

Ex :

if($(element).is(":visible") == "true")
(
//The element is Visible
)

5) Zählen Sie die unmittelbar vorhergehenden untergeordneten Elemente.

6) Das vorherige Laden der Bilder optimiert die Leistung der Abfrageausführung.

7) Es ist besser zu überprüfen, ob die Abfrage erfolgreich geladen wurde, bevor sie ausgeführt wird.

Ex:

if (typeof jQuery == 'undefined')
(
console.log('jQuery not loaded');
)
else
(
console.log('jQuery loaded');
)

8) Defekte Bildverknüpfungen können einfach ersetzt werden, indem der folgende Code ausgeführt wird.

Ex:

$('img').on('error', function ()
(
if(!$(this).hasClass('broken-image'))
(
$(this).prop('src', 'img/broken.png.webp').addClass('broken-image');
)
));

9) Der Rahmen muss immer zum Inhalt der Seite passen.

10) Eigene Auswahlfilter können in Jquery hinzugefügt werden. Wie alles in der Bibliothek können auch die Auswahlfilter angepasst werden. Wenn Sie ein $ .expr (':') -Objekt hinzufügen, wird dies erledigt.

Ex :

(function($)
(
var random = 0
$.expr(':').random = function(a, i, m, r)
(
if (i == 0)
(
random = Math.floor(Math.random() * r.length);
)
return i == random;
);
))(jQuery);
// how to utilize this piece of code.
$('li:random').addClass('glow');

11) Wenn Sie das Attribut disabled zur Eingabe hinzufügen, bleibt das Eingabefeld deaktiviert, bis bestimmte relative Felder ausgefüllt sind.

Ex:

$('input(type="submit")').prop('disabled', true);

12) Stellen Sie sicher, dass Sie den Fehlerbehandlungsabschnitt definieren, um Ajax-Fehlerrückgaben zu behandeln. Wenn ein Fehler von 400 oder 500 auftritt, wird dieser Abschnitt automatisch ausgelöst.

Ex:

$(document).on('ajaxError', function (e, xhr, settings, error)
(
console.log(error);
));

Spickzettel JQuery - Fazit

Jquery reduziert die zusätzliche Komplexität, die Javascript mit sich bringt. mit mehreren mit jquery verbundenen unternehmen gehört jquery zu den führenden entwicklungswerkzeugen für webseiten auf dem markt. Dank seiner leichten und effizienten Verkettungsfunktionen ist Web-Codierung für Entwickler ein Kinderspiel.

Empfohlener Artikel

Dies war eine Anleitung zu Cheat Sheet JQuery. Hier haben wir den Inhalt und das Kommando sowie kostenlose Tipps und Tricks zu Cheat Sheet JQuery besprochen. Sie können auch den folgenden Artikel lesen, um mehr zu erfahren.

1. Fragen in Vorstellungsgesprächen bei jQuery
2. Spickzettel für C ++
3. Spickzettel für SQL
4. JavaScript vs JQuery
5. Bester Spickzettel für UNIX
6. Cheat Sheet JavaScript: Was sind die Vorteile
7. Top 8 jQuery-Selektoren mit Code-Implementierung