Petturileht JQuery - Parim interaktiivne petmisleht saidil JQuery

Sissejuhatus Cheatsheet JQuery

Jquery on platvormideülene javascripti teek, mis on püsiv esmane eesmärk hõlbustada veebiarenduse kodeerimist. On tõestatud väide, et Jquery kasutuselevõtt on JavaScripti koodide pikkust üsna vähendanud. Isegi JQuery avalduse väikese ploki või isegi ühe rea abil on hõlpsasti saavutatav mitmerealine javascripti kood.

Selles Cheatsheet JQuery artiklis käsitleme, mis on Jquery ja selle raamistiku PTP:

Veebis tegutseb arvukalt veebisaite ja turg hõlmab suurt hulka keeli, mis nende veebisaitide ja veebitoodete loomise lõpule viivad. Mõned kuulsamad on järgmised:

HTML, CSS
Javascript ja JQuery kliendi lõppskriptimiseks
PHP serveri lõpu skriptimiseks
MYSQL andmebaasi päringute jaoks
jne.

JQuery raamistiku kasutamise eelised teiste ees,

See hõlmab tohutut kogukonda ja sinna sisse viidud hulgaliselt pluginaid.
Kerge
võimsad aheldamisvõimalused
Lühidokumentatsioon ja õpetused
Võimalus Ajaxi komponente hõlpsalt arendada
See on võime muuta kood lihtsaks ja korduvkasutatavaks
Brauserisõbralikud

JQuery peitlehe põhisisu ja süntaks:

Kaasa: Jquery kaasamine praegusesse täitmisskripti

Süntaks: JQuery süntaksi struktuur

Valija valib HTML-komponendid

$(Selector).action() Valitud komponendil tehtud toiming

Määratleb JQuery kasutamise

Jquery Selectorsi petmisleht:

sildielemendidsildielemendid

Valija	KIRJELDUS
USD (“*”)	Valib kõik HTML-elemendid
$ (“P.demo”)	Valib sildielemendid
$ (“: Nupp”)	Valib nupu ja sisestuselemendid
$ (“Tr: isegi”)	Valib ühtlase
$ (“Tr: veider”)	Valib paaritu
$ („Span: parent”)	Valib elemendid, mis on seotud alamelemendiga
$ (“(Href)”)	Valib kõik elemendid, millel on atribuudid href
$ (“: Input”)	Valib kõik vormi elemendid

Jquery Sündmuste leht: Sündmus on mingisugune tegevus veebisaidil. Peamised seotud sündmused on järgmised.

Hiireüritused	Hiireürituse meetod	Klaviatuuriüritused	Klaviatuuriürituse meetod	Vormisündmused	Vormiürituse meetod
hiire sisestus	.mouseenter ()	klahvivajutus	.keypress ()	muuta	.change ()
Topeltklõps	.dblclick ()	Keydown	.keydown ()	fookus	.fookus ()
klõps	.klõpsake ()	Klaviatuur	.keyup ()	hägusus	.blur ()
hiire lahkus	.mouseleave ()	Brauseri sündmused	Brauseriürituse meetod	Dokumendiüritused	Dokumendiürituse meetodid
hiir alla	.mousedown ()	Vigade populatsioon	.error ()	maha laadima	.unload ()
hiir üles	.mouseup ()	kerige	.scroll ()	koormus	.load ()

Näide:

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

Petturilehe Jquery efektid:

Põhiteave: .hide (), .show (), .toggle () - võimaldab valitud elemente peita, kuvada ja ümber lülitada.

Näide:

$("p").hide();

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

meetod animate () valmistab ette kohandatud animatsioone
viivituse () meetod võimaldab üksuste edasilükkamist.
dequeue () käivitab järjekorras järgmise funktsioonide jada.

Näide:

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

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

fadeIn () Kaob peidetud element
fadeout () võimaldab nähtava elemendi tuhmuma
fadeTo () kaob antud läbipaistmatuseni
fadeToggle () võimaldab elemendil sisse lülitada fade in ja fade out meetodeid.

Näide:

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

Slaid: slideDown (), slideUp (), slideToggle ()

slideDown () Kuva libiseva liigutusega elementidega
slideToggle () Kuvab või peidab libiseva liigutusega ühtivaid elemente
slideUp () Peidab libiseva liigutusega ühtivate elementidega

Tasuta näpunäited ja nipid jQuery petukirja kasutamisel

1) Hoidke kontekstiparameetrit, mis võimaldab täitmisel käivitada juurest käivitamise asemel DOM-i sügavamast harust.

2) Kontrollige, kas element on olemas, ja seejärel lükake koodi täitmiseks edasi.

Süntaks:

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

3) jQuerys andmemeetod seob DOM-i elemendid ja andmed DOM-i muutmata.

4) Kontrollige, kas mõni element on peidetud.

Näide:

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

5) Arvestage vahetult eelnevate lapseelementide arvu.

6) Piltide eelnev laadimine optimeerib päringu täitmise toimimist.

7) Parem on kontrollida, kas päring on edukalt laaditud enne selle käivitamist.

Näide:

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

8) Katkised pildilinke saab hõlpsasti asendada, täites allpool oleva kooditüki,

Näide:

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

9) Raam tuleb alati veenduda, et see sobiks lehe sisuga.

10) Jquery-s saab lisada enda valitud filtreid. Nagu kõike teegi valimisfiltrites, saab ka kohandada. Objekti $ .expr (':') lisamisega tehakse see ka tehtud.

Näide:

(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) Keelatud atribuudi lisamine sisendile võimaldab sisendvälja välja lülitada seni, kuni teatud suhtelised väljad on täidetud.

Näide:

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

12) Määratlege ajax tõrketeadete käsitlemiseks kindlasti veakäitleja sektsioon. 400 või 500 tõrke korral käivitub see jaotis automaatselt.

Näide:

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

Petturileht JQuery - järeldus

Jquery vähendab javascripti täiendavat keerukust. mitmete üksustega, mis on seotud jquery stendidega, on üks populaarsemaid veebisaidi arendamise tööriistu turul. selle kerged ja tõhusad aheldamisvõimalused on veebi kodeerimise arendajatele õiglaselt teinud.

Soovitatav artikkel

See on juhend petturilehe JQuery jaoks. Siin oleme arutanud petulehe JQuery sisu ja käske ning tasuta näpunäiteid ja näpunäiteid. Lisateabe saamiseks võite vaadata ka järgmist artiklit -