Cheat sheet JQuery - Cea mai bună foaie de înșelare interactivă pe JQuery

Introducere în Cheatsheet JQuery

Jquery este o bibliotecă javascript multiplă platformă care persistă într-o intenție primară de a facilita codificarea dezvoltării web. Este o declarație dovedită că introducerea Jquery a redus destul de mult lungimea codurilor javascript. Așadar, chiar și un cod javascript cu mai multe linii poate fi obținut cu ușurință cu un bloc mic sau chiar cu o singură linie a instrucțiunii JQuery.

În acest articol Cheatsheet JQuery, vom discuta despre ce este Jquery și PTP-ul acestui cadru:

Există numeroase site-uri web active pe web, iar piața include o gamă largă de limbi care realizează crearea acestor site-uri și produse online. Unele dintre celebre sunt următoarele:

HTML, CSS
Javascript și JQuery pentru scriptul final al clientului
PHP pentru scriptul final al serverului
MYSQL pentru interogarea bazelor de date
etc.

Avantajele utilizării cadrului JQuery față de altele,

Aceasta implică o comunitate uriașă și o mulțime de pluginuri introduse în ea.
categorie ușoară
capacități puternice de înlănțuire
Documentare succintă și tutoriale
Abilitatea de a dezvolta componentele Ajax cu ușurință
Este Capabilitatea de a face codul simplu și reutilizabil
Browser prietenos

Conținut de bază și sintaxa a Cheat Foaie JQuery:

Include: Include Jquery la scriptul de execuție curent

Sintaxa: Structura sintaxuală a JQuery

Selectorul selectează componentele HTML

$(Selector).action() Acțiune efectuată pe componenta selectată

Definește utilizarea JQuery

Foaie de înșelăciune pentru selectoarele de solicitare:

elemente de etichetăelemente de etichetă

Selector	DESCRIERE
$ ( „*“)	Selectează toate elementele HTML
$ ( „P.demo“)	Selectează elemente de etichetă
$ ( „: Buton“)	Selectează butonul și elementele de intrare
$ ( „Tr: chiar“)	Selectează egal
$ ( „Tr: nui“)	Selectează impar
$ ( „Interval: părinte“)	Selectează elemente care au asociat un element copil
$ ( „(Href)“)	Selectează toate elementele cu atribute href
$ ( „: De intrare“)	Selectează toate elementele de formă

Foaie de înșelăciune pentru Jquery Events: Evenimentul este un fel de acțiune pe pagina web, Evenimentele cheie implicate sunt următoarele.

Evenimente de mouse	Metoda evenimentului mouse	Tastaturi Evenimente	Tastatura Metoda evenimentului	Formați evenimente	Formular Metoda evenimentului
mouse-ul intra	.mouseenter ()	keypress	.keypress ()	Schimbare	.Schimbare()
Dublu click	.dblclick ()	Tasta în jos	.Tasta în jos()	concentra	.focus ()
clic	.clic()	keyup	.keyup ()	estompa	.estompa()
mouse-ul pleacă	.mouseleave ()	Evenimente browser	Metoda evenimentului Browser	Document Evenimente	Document Metode de eveniment
mouse-ul în jos	.mousedown ()	Eroare a populației	.eroare()	descărca	.descărca()
mouse-ul în sus	.mouseup ()	sul	.sul()	sarcină	.sarcină()

Ex:

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

Foaie de înșelăciune Efecte de solicitare:

Noțiuni de bază: .hide (), .show (), .toggle () - Permite ascunderea, afișarea și comutarea elementelor selectate.

Ex:

$("p").hide();

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

metoda animate () pregătește animații personalizate
metoda delay () permite executarea întârziată a articolelor.
dequeue () executa urmatoarea secventa de functii prezente in coada.

Ex:

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

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

fadeIn () Estompează un element ascuns
fadeout () permite un element vizibil să fie decolorat
fadeTo () se estompează cu o opacitate dată
fadeToggle () permite elementului să fie comutat cu metode fade in și fade out.

Ex:

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

Slide: slideDown (), slideUp (), slideToggle ()

slideDown () Afișare cu elemente suprapuse cu mișcare glisantă
slideToggle () Afișează sau ascunde cu o mișcare glisantă elemente suprapuse
slideUp () Se ascunde cu o mișcare glisantă, elemente suprapuse

Sfaturi și trucuri gratuite de utilizare a jQuery foaie de cheat

1) Păstrați un parametru de context care permite executării să pornească pornind de la o ramură DOM mai adâncă în loc să invocați de la rădăcină.

2) Verificați dacă elementul există și apoi apăsați înainte pentru executarea codului.

Sintaxa:

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

3) Metoda de date jQuerys leagă elementele și datele DOM fără a modifica DOM.

4) Verificați dacă vreunul dintre elemente este ascuns.

Ex:

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

5) Păstrați un număr de elemente anterioare pentru copii precedente.

6) Încărcarea imaginilor optimizează anterior performanța executării interogării.

7) Este mai bine să verificați că interogarea a fost încărcată cu succes înainte de a o executa.

Ex:

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

8) Link-urile cu imagini sparte pot fi înlocuite cu ușurință prin efectuarea bucății de cod de mai jos,

Ex:

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

9) Cadrul trebuie să fie întotdeauna asigurat să se potrivească conținutului paginii.

10) Filtrele de selecție proprii pot fi adăugate în Jquery. la fel ca orice în filtrele de selecție ale bibliotecii, poate fi personalizat de asemenea. Adăugarea unui obiect $ .expr (':') va face acest lucru.

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) Adăugarea atributului dezactivat la intrare permite menținerea dezactivată a câmpului de intrare până când anumite câmpuri relative sunt completate.

Ex:

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

12) Asigurați-vă că definiți secțiunea de gestionare a erorilor pentru a gestiona returnările erorii ajax. când o eroare de 400 sau 500 este lovită, atunci această secțiune va fi declanșată automat.

Ex:

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

Cheat sheet JQuery - concluzie

Jquery reduce complexitatea suplimentară pe care javascript o ține cu ea. cu mai multe entități asociate cu jquery se află printre cele mai importante instrumente de dezvoltare a paginilor web de pe piață. capacitățile sale ușoare și eficiente de înlănțuire au făcut destul de corect codificarea web pentru dezvoltatori.

Articol recomandat

Acesta a fost un ghid pentru Cheat sheet JQuery aici am discutat despre conținut și comandă, precum și sfaturi și trucuri gratuite ale JQuery sheet cheat, puteți să vă uitați și la articolul următor pentru a afla mai multe -