Zgjedhësit dhe filtrat e jQuery. Probleme të plotësimit automatik të karaktereve speciale të JQuery (norvegjeze) Përzgjedhës hierarkikë në jQuery

15.08.2023

Përzgjedhësit jQuery përdoren për të zgjedhur elementin e dëshiruar në faqe.

Komandat jQuery

Kodi jQuery, si kodi JavaScript, përbëhet nga komanda sekuenciale. Komandat janë blloku themelor i ndërtimit të jQuery.

Sintaksa standarde e komandës jQuery:

$(përzgjedhës).metodë();

Shenja $ tregon se karakteret pas saj janë kod jQuery;

Zgjedhësi ju lejon të zgjidhni një element në faqe;

Metoda specifikon veprimin që duhet të kryhet në elementin e zgjedhur. Metodat në jQuery ndahen në grupet e mëposhtme:

Metodat për manipulimin e DOM-it;
Metodat për dekorimin e elementeve;
Metodat për krijimin e kërkesave AJAX;
Metodat për krijimin e efekteve;
Metodat për lidhjen e mbajtësve të ngjarjeve.

simboli $

jQuery mund të kombinohet me JavaScript të rregullt.

Nëse rreshti fillon me $, është jQuery, nëse nuk ka $ në fillim të rreshtit, është Vargu JavaScript kodi.

Funksioni start() ( //Fshih paragrafin me id="hid" duke përdorur jQuery $("p#hid").hide(); //Ndrysho përmbajtjen e paragrafit me id="ndrysho" document.getElementById(" change") .innerHTML="Kjo përmbajtje është modifikuar duke përdorur JavaScript.";

Disa biblioteka JavaScript përdorin gjithashtu $ për të treguar kodin e tyre. Për të shmangur konfliktet e emrave midis tyre, jQuery ofron komandën noConflict(). Duke përdorur komandën noConflict() ju mund të zëvendësoni shenjën $ me ndonjë tjetër.

Sintaksa:

Var custom_name=jQuery.noConflict();

//Ndrysho simbolin standard $ në nsign var nsign=jQuery.noConflict(); //Ndrysho ngjyrën e paragrafit duke përdorur nsign në vend të $ nsign(document).ready(function())( nsign("p").css("color","green"); ));

Pamje e shpejtë

Përzgjedhës jQuery

Duke përdorur përzgjedhësit, mund të zgjidhni elementë në një faqe për të zbatuar veprime specifike ndaj tyre.

Më poshtë është një tabelë me shembuj të ndryshëm të përdorimit të përzgjedhësve për të zgjedhur elementët e dëshiruar:

Shembull Rezultati

$("p")	Do të zgjidhen të gjithë elementët p që janë në faqe.
$(".par")	Të gjithë elementët në faqen me class="par" do të zgjidhen.
$("#par")	Do të zgjidhet elementi i parë në faqen me id="par".
	Ju lejon të zgjidhni elementin aktual HTML. Klikoni në $(this) në të majtë për të parë një shembull të përdorimit të këtij përzgjedhësi në redaktorin online.
$("p.par")	Të gjithë elementët p në faqen me class="par" do të zgjidhen.
$("p#par")	Do të zgjidhen të gjithë elementët p në faqen me id="par".
$("par,.header,#heat")	Të gjithë elementët në faqe me vlerat e atributeve class="par", class="header" dhe id="heat" do të zgjidhen.
$("")	Do të zgjidhen të gjithë elementët në faqe që kanë një atribut src.
$("")	Do të zgjidhen të gjithë elementët me vlerat e atributit src="value".
$("")	Do të zgjidhen të gjithë elementët me vlerat e atributit src që mbarojnë me .gif.
$("div#wrap .par1")	Do të zgjidhen të gjithë elementët me class=par1 që janë brenda elementeve div me id=wrap.
$(":input")	Të gjithë elementët e hyrjes në faqe do të zgjidhen.
$(":type")	Të gjithë elementët hyrës me . Për shembull:button do të zgjedhë të gjithë elementët, :text do të zgjedhë të gjithë elementët, etj.

$(document).ready(function())( //Cakto madhësinë e shkronjave të të gjithë paragrafëve në 20 piksel $("p").css("fontSize","20px"); //Ndrysho ngjyrën e fontit të element me id= në jeshile el2 $("#el2").css("ngjyrë","jeshile" //Ndrysho ngjyrën e shkronjave të elementit me class=el3 $(".el3").css("); color","red") ;//Bëni fontin e elementeve me id=el2 dhe class=el3 bold $("#el2,.el3").css("fontWeight","bold"); blu teksti i butonit $(":input").css("ngjyra","blu"); //Cakto madhësinë e shkronjave të të gjithë elementëve me atributin href të barabartë me 20 piksel $("").css("fontSize","20px"); //Ndrysho ngjyrën e lidhjes në www..site/"]").css("color","green"); ));

Pamje e shpejtë

Ju mund të gjeni një listë të plotë të përzgjedhësve jQuery në faqen tonë.

Parandalimi i ekzekutimit të parakohshëm të kodit

Ju mund të mbani mend nga tutoriali JavaScript se ekzekutimi i kodit përpara se dokumenti të jetë ngarkuar plotësisht shpesh çon në gabime.

Fakti është se skripti mund të hyjë në përmbajtje që ende nuk është ngarkuar, dhe kjo gjithmonë çon në gabime ose rezultate të papritura.

Për të shmangur këtë, ne shpesh e vendosim kodin në një funksion që filloi të ekzekutohej vetëm pasi dokumenti të ishte ngarkuar plotësisht.

Parandalimi i ekzekutimit të parakohshëm të kodit në JavaScript:

funksioni start() (Kodi që do të ekzekutohet pasi dokumenti të jetë ngarkuar plotësisht)

Në jQuery, ju mund të shpëtoni nga ekzekutimi i parakohshëm i kodit në mënyrat e mëposhtme:

Parandalimi i ekzekutimit të parakohshëm të kodit në jQuery:

//Metoda e parë: $(dokument).ready(funksion())(Kodi që do të ekzekutohet pasi dokumenti të jetë ngarkuar plotësisht)); //Metoda e dytë: $().ready(function())( Kodi që do të ekzekutohet pasi dokumenti të jetë ngarkuar plotësisht )); //Metoda e tretë: $(funksion())( Kodi që do të ekzekutohet pasi dokumenti të jetë ngarkuar plotësisht ));

Ekziston një metodë tjetër alternative që gjithashtu ndihmon në shmangien e ekzekutimit të parakohshëm të kodit JavaScript dhe jQuery dhe gjithashtu ju lejon të shpejtoni ngarkimin e faqeve ( faleminderit përdoruesit Ghringo Americano që më kujtoi për këtë).

Është e nevojshme të vendosni kodin në fund të trupit të dokumentit (d.m.th. më parë). në këtë rast Interpretuesi JavaScript i integruar në shfletues do të fillojë të analizojë kodin vetëm pasi të jetë ngarkuar dokumenti. Në metodën e mëparshme, skriptet ngarkohen njëkohësisht me ngarkimin e dokumentit dhe ky kod ekzekutohet pasi të jetë ngarkuar dokumenti.

Përmbajtja e trupit të dokumentit

Përmbajtja e kodit të trupit të dokumentit që do të ekzekutohet pasi dokumenti të jetë ngarkuar plotësisht

Zinxhirët e komandave në jQuery

Për të zvogëluar madhësinë e kodit, mund të lidhni komandat jQuery.

Komandat në zinxhir do të ekzekutohen në mënyrë alternative nga e majta në të djathtë.

//Kodi pa shkurtesë $("p").css("color","green"); $("p").css("madhësia e shkronjave","30px"); //Kodi i shkurtër $("p").css("ngjyra","jeshile").css("madhësia e shkronjave","30px");

Bëje vetë

Detyra 1 Ndryshoni ngjyrën dhe madhësinë e shkronjave të elementeve të renditur më poshtë në mënyrë që të nënvizoni shkronjat e fjalës së kodit.

Ndryshoni ngjyrën dhe madhësinë e shkronjave:

Element me id=livadh;
Një element me klasë=ylber;
Një element me id=future që ndodhet brenda një elementi me id=fut; (ky element duhet të theksohet me një ngjyrë të ndryshme nga e kuqe);
Një element që ka një atribut grup;
Një element me atributin last=code.

Ju lutemi vini re: për të ndryshuar ngjyrën e tekstit të një elementi, përdorni metodën: css("color", "new_text_color"), për të ndryshuar madhësinë e shkronjave përdorni metodën: css("size-font", "font_size_px").

Në JavaScript, simboli i dollarit gjendet zakonisht në deklaratat e variablave dhe thirrjet e funksioneve. Më lejoni t'ju bind se këtu nuk fshihet asgjë misterioze, sepse është thjesht një emër variabli (identifikues). Nuk ka asgjë të çuditshme për këtë. Për shembull, korniza jashtëzakonisht popullore JavaScript për të cilën kam shkruar më parë (Çfarë është jQuery?) përdor shenjën e dollarit për të hyrë në objektin kryesor jQuery.

Shumë gjuhë të përpiluara dhe të interpretuara i trajtojnë variablat si identifikues. Çdo gjuhë ka sintaksën e vet, qoftë C, C++, PHP, Java apo JavaScript. Dhe sintaksa e secilës gjuhë i nënshtrohet një grupi të caktuar rregullash. Për shembull, në JavaScript, rregullat për deklarimin e variablave janë që çdo identifikues duhet të fillojë me një shkronjë Alfabeti latin, shenjë e dollarit ($) ose nënvizim (_) dhe nuk mund të fillojë me numrat (0 deri në 9) ose karaktere të tjera si shenjat e pikësimit. Të dy karakteret e përmendura ($ dhe _) janë jo standarde dhe mund të shfaqen në pjesën tjetër të identifikuesit. Kështu, për shembull, një emër variabli i specifikuar me pesë shenja dollari me radhë: $$$$$ (ose çdo numër nënvizash) është krejtësisht i pranueshëm sepse ndjek rregullat e sintaksës JavaScript. Kjo është një kërkesë e thjeshtë e gjuhës JavaScript me të cilën programuesit duhet të pajtohen. Më besoni, ka arsye shumë të mira për këtë.

Në disa kode kishte një objekt funksioni global, emri i të cilit ishte një shenjë e thjeshtë $. Ky stil kodi (mungesa e fjalës kyçe var) konsiderohet i padëshirueshëm nga programuesit me përvojë, ne përpiqemi të mos përdorim variabla globale në JavaScript, përveç nëse, sigurisht, po përpiqemi të mashtrojmë. Gjithsesi, çështja është se ky funksion mund të quhet pothuajse çdo gjë: a, z, apo edhe _.

// Shembull i identifikuesve të saktë var A = funksion() ( alarm ("funksioni A u thirr"); ) var $ = funksion() ( alert("funksioni $ u thirr"); ) var _ = funksion() ( alarm ( "funksioni _ u thirr");

Për më tepër, në versionet JavaScript 1.5 dhe më të lartë, përveç shenjës së dollarit dhe nënvizimit, mund të përdorni karakteret ISO 8859-1 dhe Unicode në identifikues, si p.sh. Ø. Mund të habiteni, por edhe sekuencat e Unicode si uXXXX janë të lejuara, ku XXXX është një numër, për shembull 0024. Karakteri Unicode u0024 është ekuivalent me - me mend çfarë? ... Shenja e dollarit. Dhe madje mund të telefononi funksionin e specifikuar nga id u0024 duke përdorur shenjën e dollarit si referencë! Sigurisht, nuk duhet ta përdorni kudo vetëm sepse është e mundur. Unë besoj se kjo nuk është një praktikë e dëshirueshme, shumë programues mund të jenë më pak të ditur se ju, dhe për shkak të "mashtrimeve" të tilla kodi do t'u duket konfuz dhe i palexueshëm.

Siç e dini ndoshta, JavaScript është një gjuhë programimi e orientuar drejt objekteve. Ka disa mënyra të ndryshme për t'i caktuar një vlerë një identifikuesi. Për shembull, kur përdorim fjalën kyçe var, JavaScript krijon një variabël në shtrirjen aktuale (ose lokale). Nëse e heqim fjalën kyçe var, ndryshorja do të krijohet ende, por në sferën globale të programit, që do të thotë se do të jetë e dukshme në të gjithë skedarin .js. Përsëri, dua t'ju kujtoj: shmangni variablat globale. E kuptoj se ky artikull ka të bëjë me shenjat e dollarit, por nëse nuk është tashmë e dukshme për ju, variablat globale hyjnë në lojë kur përballeni me projekte në shkallë të gjerë ku komponentë të ndryshëm janë shkruar nga dikush tjetër ose janë zhvilluar nga një ekip programuesish. Pra, nëse dikush ju thotë se është në rregull të përdorni variabla globale pa fjalën kyçe var, mos i besoni - ata po ju mashtrojnë.

Dhe një gjë tjetër. Meqenëse variablat janë objekte në JavaScript, ju mund t'i referoheni funksioneve me variablat tuaja. Ju madje mund t'i caktoni një "funksion anëtar" një funksioni tashmë ekzistues. Por përpjekja për t'i caktuar një funksion një objekti që ende nuk ekziston është i dënuar të dështojë në JavaScript. Nëse vërtet dëshironi ta kuptoni mirë, kushtojini vëmendje të veçantë kodit më poshtë.

Tani, duke përdorur atë që keni mësuar dhe pa e ekzekutuar këtë kod në shfletues, a mund të tregoni nëse do të funksionojë?

Sipas marrëveshjes, shenja e dollarit ($), nënvizon (_), madje edhe disa karaktere ASCII mund të përdoren kudo në një identifikues në JavaScript. Dokumentacioni i Ecma Script (7.6 Identifiers, ECMA-262, 3rd Ed.) thotë: "Simboli i dollarit përdoret vetëm në kodin e gjeneruar automatikisht." Kjo do të thotë që ne nuk duhet të përdorim shenjën e dollarit ($) në identifikues nëse nuk jemi duke shkruar një kornizë. Këtu është një listë e karaktereve të lejuara që mund të përdoren në identifikues:

Emri i identifikuesit::
IdentifikuesFillimi
IdentifierName IdentifierPart
IdentifikuesFillimi::
Letër Unicode
$
_
UnicodeEscapeSequence
IdentifierPart::
IdentifikuesFillimi
UnicodeCombining Mark
UnicodeDigit
UnicodeConnectorPunctuation
UnicodeEscapeSequence

Qëllimi i këtij artikulli është të tregojë se simboli i dollarit është thjesht një identifikues (i zbatuar nga kuadri popullor Prototype dhe më pas i zgjedhur nga zhvilluesit e jQuery) dhe asgjë më shumë. Pse e përdorin programuesit? Epo, ky është një emër shumë i përshtatshëm për një funksion që ka një qëllim të qartë në kodin e kornizës. Për këtë arsye, objekti kryesor jQuery i përcaktuar si shenjë dollari është sinonim me objektin jQuery. Në kodin normal, ne përdorim një objekt jQuery në vend të $. Nëse jeni njohës i mirë i jQuery dhe i kushtoni vëmendje dokumentacionit, përdorimi i sinonimit $ në vend të një objekti jQuery nuk është i këshillueshëm, megjithëse për disa arsye është shumë i popullarizuar në mesin e programuesve që e shohin të pastër.

Le ta përmbledhim

Dallimi në përdorimin e simbolit të dollarit është semantik. Ky është emri identifikues. Nga pikëpamja psikologjike, duket komode dhe elegante. Teknikisht, është thjesht një funksion ose një referencë simbolike për një ndryshore, në të vërtetë nuk ka asnjë ndryshim në përdorimin e $ ose _ ose ndonjë simbol tjetër.

Karakteri $, siç thuhet në specifikimin Ecmascript, lejohet të përdoret në identifikues. Nëse identifikuesi përbëhet nga një simbol i vetëm $, sigurisht që duket i çuditshëm, por një ndryshim i tillë është i dukshëm vetëm për njerëzit. Me sa di unë, përpiluesit nuk do t'i interesonte nëse ndryshorja përbëhej nga ndonjë karakter tjetër, si a ose b.

Nga ana tjetër, specifikimi Ecmascript thotë se simboli $ duhet të përdoret në kodin e brendshëm, siç është kodi i kornizës jQuery, thjesht për lehtësi. Kjo do të thotë që nuk duhet ta përdorni në kodin tuaj vetëm sepse duket i lezetshëm, por kur zhvilloni një kornizë mund të përfitoni nga ai sepse objekti global i kornizës do të duket unik dhe do të dallohet nga pjesa tjetër e kodit tuaj.

JavaScript dhe jQuery

Çfarë është jQuery

jQuery është një bibliotekë e shërbimeve të ndryshme softuerike të dobishme për manipulimin e elementeve të shënimit html të një faqeje të ngarkuar. Ishte shkruar në. Bukuria e tij nuk është vetëm se ka aftësi mjaft serioze, por edhe se ndërfaqja e tij softuerike është tepër e thjeshtë.

Para se të kalojmë në përshkrimin e jQuery, më lejoni t'ju kujtoj edhe një herë se çfarë është. modeli i objektit të dokumentit ose DOM (Modaliteti i objektit të dokumentit l). DOM është një strukturë hierarkike e objekteve në RAM, që korrespondon me strukturën e një faqe interneti të ngarkuar. DOM gjenerohet nga shfletuesi dhe ofron një ndërfaqe programimi për të punuar me elementët e shënjimit, për shembull, duke përdorur të njëjtin JavaScript. Duke përdorur mjetet DOM, mund të kërkoni, shtoni dhe hiqni elementë dokumenti, të modifikoni atributet e tyre, të ndryshoni stilet, etj. Me fjalë të tjera, duke përdorur DOM dhe JavaScript, krijohen faqe dinamike në internet, të cilat quhen gjithashtu Faqet DHTML(Faqe dinamike HTML). Le të kthehemi te biblioteka jQuery. Duke përdorur jQuery API, mund të zgjidhni lehtësisht elementët DOM që ju nevojiten dhe të kryeni çdo veprim mbi to nga lista e mëposhtme:

Ndryshimi ;
Redakto përbërjen e atributeve;
Fshij;
Shtoni pasardhës;
Lëvizni ose mbështillni me një element tjetër;
Kryeni kopjimin;
Mbajtës i ngjarjeve lidhëse;
Personalizo efektin vizual ose animacionin;

Sigurisht, e gjithë kjo mund të bëhet duke përdorur DOM dhe JavaScript të zhveshur, por pse, nëse ka një grup mjetesh të gatshme dhe falas. Mos harroni për pajtueshmërinë ndër-shfletues. Nëse keni nevojë që faqja juaj të funksionojë njësoj në të gjithë shfletuesit e njohur, atëherë duhet të bëni shumë përpjekje për këtë, pasi ka mjaft listë e madhe diçka që shfletues të ndryshëm e zbatojnë ndryshe. Nëse punoni përmes ndërfaqes jQuery, atëherë mund ta harroni këtë problem. Natyrisht, programet shkruhen nga njerëz dhe mund të ketë gabime në jQuery, por në këtë rast mund të mbështeteni në rregullimin e problemit në të ardhmen e afërt. Nëse jeni të njohur me , keni një ide se çfarë është JavaScript, atëherë është koha për të zotëruar jQuery. Me ardhjen e kësaj biblioteke të mrekullueshme, aftësitë e profesionistëve dhe dizajnerëve fillestarë të internetit janë ulur disi, gjë që mund të trishtojë të parën, por frymëzon të dytën. Ndoshta po e ekzagjeroj disi, por fakti që tani të gjithë ata që nuk kanë përvojë të veçantë në ndërlikimet e programimit JavaScript kanë një arsenal mjaft serioz për krijimin e faqeve DHTML mbresëlënëse, të shpejta dhe të besueshme është një meritë e pamohueshme e jQuery.

Lidhja jQuery Së pari ju duhet të shkarkoni bibliotekën. Ju mund ta bëni këtë në faqen e internetit të autorëve të jQuery: http://jquery.com

Kjo është ajo, ju mund të filloni të punoni me të. Nëse nuk dëshironi të shkarkoni, mund të siguroni një lidhje direkt me versionin më të fundit të bibliotekës që ndodhet në serverin e zhvilluesit: Lidhja me versionin më të fundit, nga njëra anë, është e mirë, pasi rregullon vazhdimisht disa gabime dhe optimizon funksionimin e funksioneve të tij individuale, por, nga ana tjetër, mund të ketë ndryshime në versionin e ri që nuk i prisnit dhe që do të çojnë në ndryshime në mënyrën e funksionimit të projektit tuaj.

Ndërfaqja ose sintaksa e programimit jQuery

Unë tashmë thashë se sintaksa e pyetjeve jQuery është mjaft e thjeshtë. Domethënë kërkesat, pasi programimi në JavaScript duke përdorur jQuery mund të klasifikohet si programimi deklarativ, i cili ndryshon nga programimi procedural klasik në atë që ju përshkruani "çfarë duhet bërë" në vend që "si ta bëni atë". Emri i bibliotekës pasqyron thelbin e saj - një gjuhë pyetëse në kontekstin e JavaScript. Të gjitha kërkesat jQuery fillojnë me një thirrje në funksionin $, argumenti i të cilit është vetë kërkesa. Pra, sintaksa e përgjithshme e pyetjeve jQuery duket diçka si kjo:

$(kërkesë)[{.filtër(kriter)}].veprim(argumentet){ .veprim(argumentet)} Kërkesaështë një përzgjedhës ose listë përzgjedhësish e ndarë me presje. Sintaksa e kërkesës është e njëjtë me sintaksën e përzgjedhësve të stilit CSS. Pra, një pyetje jQuery mund të fillojë diçka si kjo:
$(“div”) - zgjidhni të gjithë elementët div;
$(“div, p”) – zgjidhni të gjithë elementët div dhe elementet fq;
$(. emri_class”) – zgjedh të gjithë elementët e klasës emri i klasës;
$(“#element_id”) – zgjedhja e një elementi me një identifikues element_id;
$(*) – përzgjedhja e të gjithë elementëve;
$(“. class_name span”) – zgjedh të gjithë elementët e hapësirës brenda të gjitha elementeve të klasës emri i klasës;
$(“#element_id > div”) – zgjidhni të gjithë elementët div, të cilët janë pasardhës (fëmijë) të drejtpërdrejtë të elementit me identifikues element_id.
$("#element_id .class_name + div") – zgjedh të gjithë elementët që ndjekin menjëherë elementët e klasës emri i klasës brenda një elementi element_id.
$(“#ul_id > li:first”) – zgjedhja e elementit të parë li listë ul_id. Gjithashtu, mund të zgjidhni elementin e fundit të fundit ose të gjithë elementët çift ose tek. Ka opsione të tjera.
$(“a”) – zgjedh të gjitha lidhjet me vlerën e atributit href duke filluar me "http://ru.wikipedia.org". Pa simbolin "^", marrim një kusht për një përputhje të plotë të vlerave nëse në vend të simbolit "^" vendosim simbolin "$", marrim një kufizim në përputhjen nga fundi, dhe simboli * do të thotë që; vlera e atributit thjesht duhet të përmbajë fragmentin e specifikuar.

Filtro– një mënyrë për të filtruar një grup elementësh të zgjedhur sipas kritereve shtesë. Kriteret janë të njëjta me përzgjedhësit. Ka dy operacione që janë të kundërta me njëri-tjetrin: filtri dhe jo. Nëse përdorni operacionin filtër (kriter), atëherë do të mbeten të zgjedhura vetëm ato elemente që plotësojnë kriterin-argument, dhe nëse jo, atëherë do të mbeten vetëm ato që nuk kënaqin. Zakonisht, ka kuptim të përdoret operacioni jo, që nga kriteri i funksionimit filtër zakonisht e lehtë për t'u kombinuar me një përzgjedhës funksioni bazë $() . Këtu janë disa shembuj të përdorimit të këtyre operacioneve:
$("div").not(". class_name") – përjashtoni gjithçka div klasës emri i klasës;
$(“td, th, div”).filter(“emri_klasës”) – zgjidhni elementet td, th, div klasës emri i klasës.

Ekziston edhe pjesa e operacionit (nga, në) , e cila ju lejon të zgjidhni një sekuencë elementësh me indekse nga intervali [ nga - te].

Veprimi- ky është, në fakt, vetë veprimi - një operacion në një grup elementësh të zgjedhur. Çdo operacion kthen një rezultat të caktuar: ose të njëjtin grup, nëse operacioni nuk përfshin krijimin ose fshirjen e elementeve të zgjedhur, ose një grup tashmë të redaktuar, ose një grup elementësh të krijuar rishtazi. Falë kësaj, ju mund të specifikoni disa operacione në të njëjtën kohë, të ndara me pika. Shembulli i mëposhtëm do të zgjedhë të gjithë elementët shtrirje, që nuk ka lidhje me klasën emri i klasës dhe i kopjon ato në elementin me id objektiv:
$("span").not(".class_name").clone().appendTo("#target");

Rezultati i çdo operacioni është grup elementesh HTMLElement. Madhësia e një grupi mund të gjendet duke përdorur veçorinë gjatësi ose funksionin size(). Argumentet e operacionit mund të jenë jo vetëm parametra të vargut, por edhe rezultate të pyetjeve të tjera. Këtu është një shembull se si rezultati i një pyetjeje mund të vendoset brenda një elementi, i cili, nga ana tjetër, është rezultat i një pyetjeje tjetër:
$("span").not(".class_name").clone().appendTo($("span.class_name"))

Ju mund të përdorni jo të gjithë rezultatin e pyetjes si argument, por një element të veçantë të tij:
$("emri_span.klasa").append($("span").not(".emri_klases"));

Kështu, argumenti i operacionit mund të jetë ose një përzgjedhës si varg, ose rezultat i një pyetjeje tjetër, ose ndonjë shembull HTMLElement.

Operacionet jQuery

Më poshtë janë tabelat kryesore me operacionet jQuery, të tyre përshkrim i shkurtër dhe lidhje me shembuj që demonstrojnë zbatimin e tyre në praktikë.

Vetitë

Merrni ose vendosni vlerat e vetive të ndryshme të elementeve të zgjedhur. Nëse keni nevojë të përcaktoni një vlerë të re pronësie, duhet ta kaloni atë si argument, për shembull, $(“#element”).text(text_value) ose $(#element”).html(html_value) :

Shembull përshkrimi i emrit

teksti ()	Teksti.	-
kompensuar ()	Ofset (majtas, lart).	, funksioni i lëvizjes së topit top.move(): $("#top").offset((majtas:$("#top").offset().left + this.dx, lart:$("#top").offset().lart + kjo. dy)); Ky funksion thirret në një kohëmatës çdo 10 milisekonda.
gjerësia (), lartësia ()	Gjerësia dhe lartësia.	-
html ()	shënimi html brenda elementeve të zgjedhur.

Në mësimet e mëparshme diskutuam pyetjen konceptet e përgjithshme jQuery dhe si ta lidhni atë.
Ky artikull do të fokusohet në përdorimin e përzgjedhësve në jQuery (CSS dhe XPath), të cilët ju lejojnë të zgjidhni një ose më shumë elementë DOM me lehtësi dhe saktësi. Çdo përzgjedhës do të ketë një kod dhe një shembull të aplikimit të tij. Përdorimi i përzgjedhësve jQuery nuk shkakton probleme me punën në shfletues të vjetër, siç është IE 6, pasi përmban mekanizma funksionimi CSS 1-3.

Struktura e kodit jQuery Shenja e dollarit $ - tregon përdorimin jQuery, përzgjedhës - Elementi DOM me të cilin punojmë dhe një funksion special jQuery me parametrat e tij (për shembull, animacioni, vendosja, lëvizja, etj.).

Shembull i kodit jQuery

$(zgjedhës).funksioni(parametrat);

Selektorët në jQuery Në këtë mësim do të ndalemi në detaje në çështjen e selektorëve. Çfarë është kjo?

Përzgjedhësi(nga anglishtja zgjidhni - zgjidhni) - këto janë elementet e DOM (modeli i objektit të dokumentit, për shembull, etiketat ose blloqet e shënuara posaçërisht) të cilave ne i drejtojmë kërkesën. Ky koncept ekziston në JavaScript, CSS dhe gjuhë të tjera ku duhet të zgjidhni një element specifik dhe të punoni me vetitë e tij.

Identifikuesit (id).

Nëse dëshironi të punoni me një element specifik, dhe vetëm një herë(teorikisht, pasi në praktikë disa shfletues nuk do të përçmojnë ripërdorimin e identifikuesit), atëherë ne i caktojmë atij një id unik.

Kodi HTML

#id- zgjedh elementin e vetëm me identifikuesin e kaluar (id). Në këtë rast e veçantë

Kodi jQuery

$("#special").css("kufi", "1px e zezë e fortë");

Në të ardhmen do të shkruaj pa etiketa, shpresoj të jetë e qartë se JavaScript duhet të jetë i mbyllur në to. Në shembull, ne zgjedhim elementin me id special, në këtë rast është një div. Në të përdorim funksionin css dhe krijojmë një kufi (border) të zi të vazhdueshëm (të ngurtë) prej 1 piksel.

Klasat.

.klasë- zgjidhni të gjithë elementët me klasën e specifikuar. Kjo është e drejtë, mund të ketë disa prej tyre. Gjëja kryesore është që emri i klasës është i njëjtë.

Kodi HTML

Blloku i parë
Blloku i dytë
Siç mund ta shihni, ekzistojnë dy elementë (div) dhe ata kanë të njëjtat klasa.

Kodi jQuery

$(".spec_class").css("kufi", "1px e kuqe e fortë");
Për të gjithë elementët ku vlera e klasës spec_class janë krijuar edhe kufijtë e njëjtë si në shembullin e mëparshëm, por të kuq.

Elementet.

Përzgjidhen të gjithë elementët e një lloji të caktuar. Është ose trupi, ose të gjitha divs, ose gjithë tavolina e kështu me radhë.

Kodi jQuery

$("div").css("kufiri", "1px jeshile solid");
U të gjitha divs Do të shfaqet një kornizë e gjelbër.

* (të gjithë elementët) - zgjidhni absolutisht të gjithë elementët. Madje kokë Dhe trupi.

Kodi jQuery

$("*").css("kufiri", "1px blu e fortë");
Të gjithë elementët në dokumentin tuaj do të kenë një kufi blu.

$("*", document.body).css("kufiri", "2px solid e zezë");
Zgjidhni të gjithë elementët në trup dhe jepini atyre një kufi të zi 2 piksel.

Sipas llojit: përzgjedhës1, përzgjedhës2, ..., përzgjedhësN - listojmë të gjithë elementët. Më poshtë është një shembull interesant i përdorimit të përzgjedhësve së bashku.

Kodi jQuery

$("div, span, p.spec_class").css("border", "1px e kuqe e fortë");
Zgjedh të gjithë elementët div, span dhe p që kanë specifikuar spec_class. Të gjithë përzgjedhësit thjesht specifikohen të ndarë me presje.

Përzgjedhës hierarkikë në pasardhësin e jQueryancestor

Përzgjidhen elementi kryesor (elementi prind) dhe elementët e përfshirë në të (pasardhësit). Le të shohim shembullin më poshtë të prindit formë dhe pasardhësve zgjidhni.

Kodi jQuery

$("zgjedhja e formës").css("kufiri", "1px e zezë me pika");
Të gjithë elementët e zgjedhur dhe pasardhësit e formave do të kenë një kufi me pika të zeza.

prind-fëmijë

Tani le të zgjedhim të gjithë fëmijët e elementit prind.

Kodi jQuery

$("#id > *").css("kufi", "1px e zezë e dyfishtë");
Së pari, ne zgjedhim të gjithë trashëgimtarët e elementit me id, dhe më pas krijoni një kufi të dyfishtë të zi me të.

e mëparshme dhe e ardhshme (e mëparshme dhe e ardhshme)

Ne tregojmë elementët që vijnë pas (tjetër) pas elementit të caktuar si i mëparshëm (para).

Kodi jQuery

$("label + input").css("color", "blu").val("U krye!");
Zgjidhni elementet hyrëse pas etiketës. Ne vendosëm vetitë e tyre CSS - ngjyra është në formën e zezë, dhe vlera (.val) është vendosur Gati!

para ~ vëllezër e motra

Tani punojmë me elementë motra. Gjeni të gjitha motrat që ndjekin elementin e mëparshëm (para).

Kodi jQuery

$("#prev ~ div").css("border", "3px groove blu");
Po kërkojmë të gjithë elementët div që janë vëllezër e motra me njëri-tjetrin dhe menjëherë ndjekin elementin me ID #prev. Ju lutemi vini re se shembulli nuk do të zgjedhë elementet e hapësirës, pasi zgjedhja është vetëm për elementët div.

Filtrat bazë: së pari

Elementi i parë me përzgjedhësin e specifikuar do të zgjidhet.

Kodi jQuery

$("tr:first").css("font-style", "bold");
Në rreshtin e parë (tr) në tabelë, teksti do të theksohet me shkronja të zeza.

Tani do të zgjedhim elementin e fundit me përzgjedhësin e specifikuar.

Kodi jQuery

$("tr: fundit").css((ngjyra e sfondit: "e verdhë", pesha e shkronjave: "më e guximshme"));
Gjeni rreshtin e fundit (tr) në tabelë dhe ngjyrosni sfondin me të verdhë dhe vendosni gjithashtu fontin e theksuar (më të guximshëm).

:jo (zgjedhës)

Përdorimi i mohimit filtron elementet. Zgjidhni të gjitha hyrjet që nuk kanë një kuti zgjedhjeje, si dhe shtrirjet pas tyre

Kodi jQuery

$("input:not(:checked) + span").css("background-color", "yellow");
Kuptimi i kutive të kontrollit nuk ndryshon.

Kujdes! Shembull interesant, të cilin çdo i dyti e përdor në praktikën e tij. Si të zgjidhni elementet çift apo tek? Pastaj ju duhet t'i bëni rreshtat në tekst apo edhe kodin të lexueshëm. Vlera fillestare 0.

Kodi jQuery

$("tr:edhe").css("ngjyra e sfondit", "#с1с1с1");
Zgjidhni rreshtat çift në tabelë. Do të theksohen rreshtat e parë, të tretë etj. Kujdes! Numërimi bazohet në indekse dhe në to rreshti i parë ka vlerën 0. Më pas zgjidhen rreshtat me indekset 0, 2, 4 etj.).

Tani zgjedhim elementët tek. Vlera e indeksit llogaritet duke filluar nga 0. Vlerat 1,3,5,7, etj. do të zgjidhen në përputhje me rrethanat. Kjo korrespondon me rreshtat 2,4,6, etj., pasi ato numërohen pas faktit, nga e para.

Kodi jQuery

$("tr:tek").css("ngjyra e sfondit", "#с1с1с1");
Sfondi i vijave me numër tek është me ngjyrë gri.

:eq(indeks)

Zgjidhni një indeks specifik elementi. Në shembull, ne do të ngjyrosim vetëm një rresht të tabelës.

Kodi jQuery

$("td:eq(2)").css("ngjyra", "blu");
Ne zgjedhim elementin 2 sipas indeksit, më lejoni t'ju kujtoj se kjo do të jetë rreshti i tretë, pasi do të jetë indeksi i tretë (0,1,2).

:gt(indeks)

Tani zgjedhim vlerat e indeksit që janë më të mëdha se ato të specifikuara në përzgjedhës.

Kodi jQuery

$("td:gt(4)").css("dekorimi i tekstit", "linjë-përmes");
Ne zgjedhim rreshta në tabelë, indeksi i elementeve të të cilave është më i madh se 4, domethënë indeksi i tyre është 5.6, etj. Kjo korrespondon me 6, 7, etj. elemente që ndodhin, në rreshtat e tabelës në rastin tonë.

:lt(indeks)

Tani zgjedhim vlerat e indeksit që janë më të vogla se ato të specifikuara në përzgjedhës.

Kodi jQuery

$("td:lt(3)").css("ngjyra", "e kuqe");
Të gjithë elementët td me indeks m janë përzgjedhur Për shembull, ne jemi duke kërkuar për të gjithë elementët TD me një indeks më të vogël se 3. Meqenëse numërimi, ju kujtoj edhe një herë, është nga e para, këto janë rreshtat e tabelës (td) 1,2. ,3.

Do të zgjidhen të gjithë elementët që janë tituj (h1, h2, h3, etj.).

Kodi jQuery

$(":header").css(( sfond:"#c1c1c1", ngjyra:"#0085cc" ));
Për të gjithë titujt (elementet h) do ta vendosim fontin në blu dhe sfondin në gri të hapur.

: animuar

Të gjithë elementët që janë aktualisht të animuar do të zgjidhen.

Kodi HTML

Bëjeni div-in e parë të kuq
Kodi jQuery

$("#run"). kliko(funksion())(
$("div:animuar").toggleClass("me ngjyra");
});
funksioni animateIt() (
$("#mover").slideToggle("ngadalë", animateIt);
}
animateIt();
Këtu shembulli është pak më i komplikuar. Pasi klikojmë në butonin, ndryshojmë ngjyrën e elementit të animuar (div). Nuk ka ndryshime në elementët jo të animuar.

Le të shohim një shembull të thjeshtë se si funksionojnë përzgjedhësit në jQuery. Skedari është plotësisht gati për përdorim, thjesht duhet të kopjoni të gjithë kodin në skedarin e krijuar html. Biblioteka në shembull është e lidhur nga serveri Google, kështu që që skedari të funksionojë siç duhet, do t'ju duhet një lidhje interneti. Poshtë kodit ka një version demo për shikim.

jQuery

#polosa1 (pozicioni: relativ; sfondi: i bardhë; gjerësia: 200 px; lartësia: 50 px; kufiri në krye: 1 px #000; )
#polosa2 (pozicioni: relative; sfondi: blu; gjerësia: 200 px; lartësia: 50 px; )
#polosa3 (pozicioni: relative; sfondi: i kuq; gjerësia: 200 px; lartësia: 50 px; kufiri-fund: solid 1px #000; )

funksioni addFlag1())(
$("div:eq(0)").css("background", "e bardhë");
$("div:eq(1)").css("sfondi", "gjelbër");
$("div:eq(2)").css("sfondi", "e kuqe");
}
funksioni addFlag2())(
$("#polosa1, #polosa3").css("background", "e kuqe");
$("#polosa2").css("background", "e bardhë");
}
funksioni addFlag3())(
$("div").css("sfondi", "e kuqe");
}

Një shembull i funksionimit të përzgjedhësve jQuery

Flamuri i Bullgarisë
Flamuri i Austrisë
Flamuri i BRSS

Demonstrimi Burimet e shkarkimit
Faleminderit për vëmendjen tuaj! Fat i mirë në përpjekjet tuaja!

JQuery HTML është një bibliotekë e krijuar për të "shkruar më pak dhe për të bërë më shumë". Nuk është një gjuhë programimi, por një mjet që përdoret për t'i bërë detyrat e zakonshme JavaScript më të lehta për t'u zbatuar.

JQuery ka përfitimin e shtuar të të qenit i pajtueshëm me ndërshfletuesit. Ju mund të jeni i sigurt se kodi juaj do të interpretohet në çdo shfletues modern.

Krahasimi i shkrimit të një programi të thjeshtë "Përshëndetje, Botë!

" duke përdorur JavaScript dhe jQuery, ju mund të shihni ndryshimin midis tyre.

JavaScript

document.getElementById("demo").innerHTML = "Përshëndetje, Botë!";

JQuery

Ky shembull i shkurtër ilustron se si duke përdorur jQuery mund të arrini të njëjtin rezultat si JavaScript standard, por në mënyrë më koncize.

Golat

Ky tutorial nuk supozon ndonjë njohuri bazë të jQuery, por mbulon temat e mëposhtme:

Si të instaloni jQuery në një projekt ueb;
Përcaktoni koncepte të rëndësishme të zhvillimit të uebit si API, DOM dhe CDN;
Përzgjedhës, ngjarje dhe efekte të zakonshme jQuery;
Shembuj për të testuar konceptet e mësuara në këtë artikull.

Konfigurimi i jQuery

JQuery është skedari JavaScript me të cilin do të lidhni në dokumentin tuaj. Si të lidhni JQuery me HTML:

Shkarkoni kopjen lokale;
Shtoni një lidhje në një skedar përmes një rrjeti të ofrimit të përmbajtjes (CDN).

Shënim. Rrjeti i shpërndarjes së përmbajtjes (CDN) është një sistem i serverëve të shumtë që i shërbejnë përmbajtjes së internetit përdoruesit bazuar në vendndodhjen gjeografike. Kur lidheni me një skedar jQuery nëpërmjet një CDN, ai do t'i shërbehet përdoruesit më shpejt dhe me efikasitet sesa nëse do të ishte i pritur në serverin tuaj.

Në shembujt tanë ne do të përdorim lidhjen jQuery nëpërmjet CDN. Versioni i fundit jQuery mund të gjendet në Google. Nëse dëshironi të shkarkoni bibliotekën në vend të kësaj, mund të merrni një kopje të jQuery nga faqja zyrtare e internetit.

Le të krijojmë një projekt të vogël në internet. Ai do të përbëhet nga një skedar style.css, scripts.js dhe një skedar kryesor index.html.

Vendosni shënimin bazë HTML dhe ruajeni në index.html.

Indeksi.html

Demoja e jQuery

Indeksi.html

Demoja e jQuery

Skripti JavaScript (scripts.js) duhet të përfshihet në dokumentin poshtë bibliotekës jQuery ose nuk do të funksionojë.

Shënim. Nëse keni shkarkuar një kopje lokale të jQuery, ruajeni në dosjen js/ dhe lidheni atë nëpërmjet lidhjes js/jquery.min.js.

Biblioteka jQuery u shtua në HTML dhe ne e kemi akses të plotë në API jQuery.

Duke përdorur jQuery

jQuery përdoret për t'u lidhur me elementët HTML në shfletues nëpërmjet DOM.

Modeli i objektit të dokumentit (DOM) është metoda me të cilën JavaScript (dhe jQuery) ndërveprojnë me HTML në shfletues. Për të parë se çfarë është DOM, në shfletuesin tuaj, klikoni me të djathtën në faqen aktuale të internetit dhe zgjidhni "Shiko kodin". Kjo do të hapë panelin "Mjetet e Zhvilluesit". Kodi HTML që shihni në të është DOM.

Çdo element HTML konsiderohet një nyje DOM - një objekt që mund të aksesohet nga JavaScript. Këto objekte kanë një strukturë peme, me elementin më afër rrënjës dhe çdo element një degë të pemës. JavaScript mund të shtojë, heqë dhe modifikojë cilindo nga këta elementë.

Nëse klikoni përsëri me të djathtën dhe zgjidhni "Shiko Burimin", do të shihni HTML-në e papërpunuar. Në fillim mund të jeni të hutuar rreth kodit burimor DOM dhe HTML, por ato janë gjëra të ndryshme. Kodi burimor i faqes përputhet saktësisht me atë që është shkruar në skedarin HTML. Është statike dhe e pandryshueshme dhe nuk ndikohet nga JavaScript. Nga ana tjetër, DOM është dinamik dhe mund të ndryshojë.

Shtresa e jashtme DOM, e cila mbështjell të gjithë nyjen, është objekti i dokumentit. Për të përdorur jQuery në një faqe, duhet të siguroheni që dokumenti të jetë "gati".

Krijoni një skedar scripts.js në dosjen js/ dhe shtoni kodin e mëposhtëm në të:

js/skriptet.js

I gjithë kodi jQuery i futur në HTML do të mbështillet në kodin e mësipërm. Do të funksionojë vetëm pasi DOM të jetë gati për ekzekutimin e kodit JavaScript. Edhe pse në disa raste JavaScript nuk do të ngarkohet derisa elementët të jepen, përfshirja e këtij blloku konsiderohet praktika më e mirë.

Për të ekzekutuar skenarin "Hello, World!" dhe shfaqim tekstin në shfletues duke përdorur jQuery, së pari krijojmë një element paragrafi bosh me demonstrimin e identifikuesit të aplikuar në të.

Indeksi.html

... ...

JQuery thirret dhe tregohet me një shenjë dollari ($). Ne hyjmë në DOM me jQuery duke përdorur sintaksën CSS dhe zbatojmë metodën e veprimit me:

$("përzgjedhës").metodë();

Meqenëse një identifikues në CSS përfaqësohet nga simboli (#), ne aksesojmë identifikuesin demo duke përdorur përzgjedhësin #demo. html() është një metodë që ndryshon shënimin HTML brenda një elementi.

Tani do të vendosim programin “Përshëndetje, Botë!

js/skriptet.js

" brenda mbështjellësit jQuery gati(). Shtoni këtë rresht në funksionin tuaj ekzistues në skedarin tuaj scripts.js:

$(dokument).ready(funksion() ( $("#demo").html("Përshëndetje, botë!"); ));

Pasi të keni ruajtur ndryshimet, mund të hapni skedarin index.html në shfletuesin tuaj. Nëse gjithçka funksionon si duhet, do të shihni mbishkrimin "Përshëndetje, Botë!

Klikoni me të djathtën në "Përshëndetje, Botë!"

" dhe zgjidhni "Shiko kodin". Tani shfaqet DOM

Përzgjedhësit janë mënyra se si ne i tregojmë jQuery HTML me cilët elementë duam të punojmë. Ju mund të shikoni një listë të plotë të përzgjedhësve jQuery në dokumentacionin zyrtar.

Për të hyrë në një përzgjedhës, përdorni simbolin $ të ndjekur nga kllapat ().

$("përzgjedhës")

Preferohen vargjet e dyfishta të cituara (sipas manualit të jQuery). Edhe pse shpesh përdoren vargjet me thonjëza të vetme.

Më poshtë është pasqyrë e shkurtër përzgjedhës të përdorur shpesh.

$("*") - wildcard: zgjedh çdo element në faqe;
$(this) - aktuale : zgjedh elementin aktual që manipulohet për momentin brenda një funksioni;
$("p") - etiketa: zgjedh të gjitha rastet e etiketës
;
$(".example") - class: zgjedh të gjithë elementët në të cilët aplikohet klasa shembull;
$("#example") - identifikues: zgjedh një shembull me një shembull identifikues unik;
$("") - atribut: zgjedh të gjithë elementët atributi i tipit të të cilëve është vendosur në tekst;
$("p:first-of-type") - pseudo-element: zgjedh elementin e parë
.

Kur lidhni JQuery me HTML, do të keni të bëni me klasa dhe ID. Klasat përdoren kur ju duhet të zgjidhni elementë të shumtë, dhe identifikuesit kur duhet të zgjidhni vetëm një.

Ngjarjet jQuery

Në shembullin "Përshëndetje, Botë!

"Kodi funksionoi kur faqja u ngarkua dhe dokumenti ishte gati, kështu që nuk kërkonte asnjë ndërhyrje të përdoruesit. Në këtë rast, ne mund ta shkruajmë tekstin drejtpërdrejt në HTML, pa jQuery. Por do të na duhet të përdorim jQuery nëse duam që teksti të shfaqet në faqe pas një klikimi të mausit.

Kthehuni te skedari juaj index.html dhe shtoni një element në të. Ne do ta përdorim këtë buton për të gjurmuar ngjarjen e klikimeve.

index.html

...Më kliko

js/skriptet.js

Ne përdorim metodën click() për të thirrur një funksion që përmban kodin "Hello, World! "

$(dokument).ready(funksion() ( $("#trigger").klikoni(); ));

ID-ja e elementit është trigger, e zgjedhim duke përdorur $("#trigger") . Duke shtuar click() ne dëgjojmë për ngjarjen e klikimit. Më pas ne thërrasim një funksion që përmban kodin tonë brenda metodës click().

funksion() ( $("#demo").html("Përshëndetje, botë!"); ) Këtu kodi i plotë

js/skriptet.js

Elementi HTML jQuery.

$(document).ready(function() ( $("#trigger").klikoni(funksion() ($("#demo").html("Përshëndetje, botë!"); )); ));

Një ngjarje është çdo ndërveprim i përdoruesit me shfletuesin duke përdorur miun ose tastierën. Shembulli që sapo krijuam përdor një ngjarje klikimi. Mund të gjeni një listë të plotë të metodave të ngjarjeve jQuery në dokumentacionin zyrtar të jQuery. Më poshtë është një listë e ngjarjeve të përdorura zakonisht.

click() - click: ndodh me një klikim të vetëm të mausit;
hover() - hover: ndodh kur treguesi i miut rri pezull mbi një element;
submit() - submit: ndodh kur dorëzohen të dhënat e formularit;
scroll() - scrolling: ndodh kur lëvizni një faqe ose element;
keydown() - shtypja e tastierës: ndodh kur shtypni një tast në tastierë.

Për të animuar ose fshehur elementë ndërsa përdoruesi lëviz faqen, përdorni metodën scroll().

Për të dalë nga një menu duke përdorur tastin ESC, përdorni metodën keydown(). Për të krijuar një menu dropdown ose për të shtuar HTML në një div duke përdorur JQuery, përdoret metoda click().

Efektet jQuery

Efektet jQuery ju lejojnë të shtoni animacion dhe të manipuloni elementë në një faqe.