Što je potrebno i kako je napisan jQuery selektor?

Moderni web dizajner ne bi trebao biti samo vlasnik osnove HTML-a, CSS i jаvascript, ali i moći raditi u knjižnici jQuery, koja se fokusira na interakciju jаvascript s HTML dokumentima. Omogućuje vam brz pristup i manipuliranje bilo kojim DOM elementima (sučelje programa koje otvara pristup sadržaju HTML datoteka). Glavne strukturne jedinice ove knjižnice su timovi. Da biste primijenili tu ili tu naredbu, potreban vam je jQuery selektor.

Formula odabranih u biblioteci jQuery

JQuery selektori temelje se na onima korištenim u CSS-u. Potrebni su za odabir elemenata HTML datoteke, kako bi ih mogli koristiti za pozivanje jednog ili drugog načina manipuliranja njima (timom). Pretraživanje izbornika se vrši pomoću funkcije $ (). Na primjer, $ (`div`).

Odabiri se mogu klasificirati prema načinu odabira elemenata:

• osnovna;
• po atributu;
• po hijerarhiji;
• prema sadržaju;
• po položaju;
• izbor polja obrazaca;
• drugi.

Osnovni selektori

U 90% slučajeva kod rada s ovom knjižnicom koristi se jQuery-selektor koji pripada glavnoj skupini. Svi su vrlo jednostavni i razumljivi. Razmotrimo svaku od njih:

• * - odabire sve elemente stranice, uključujući glavu, tijelo itd.;
• p / div / sidebar / ... - odabire sve elemente koji se odnose na navedenu oznaku (tj. p.div, bočnu traku, itd.);
• .myClass / p.myClass - odabire elemente s navedenim nazivom klase;
• # myID / p. # myID - odabire jedan element s navedenim ID-om.

Dajmo primjer. Recimo da moramo odabrati sve elemente stranice s klasa par, unos će izgledati ovako: $ (.par). Ako su potrebni samo elementi p ove klase, napisat ćemo: $ (p.par).

Odabiri svojstava

Glavni JQuery izbornik može se koristiti ako trebamo odabrati element koji pripada klasi koja ima ID ili odabir svih elemenata stranice. Međutim, postoje slučajevi kada željeni element nema klasu ili ID. Zato postoje odabiri prema atributu. Oni vam omogućuju uzorak na nekima atribut HTML elementa, na primjer, href ili src. Ovaj je atribut napisan kvadratne zagrade [].

Najjednostavniji primjer: $ ([src]) - odabire sve elemente koji imaju src atribut. Možete suziti područje uzorka postavljanjem atributa na određenu vrijednost: $ ([src = `value`]).

Možete koristiti više odabira u JQueryu ako želite suziti odabir. Na primjer, $ (p [color = blue] [size = 12]) - odabiru se samo oni elementi p koji su plavi i veličina 12.

Odabiri sadržaja

U slučaju da nije moguće odabrati stavke prema atributima ili glavnim odabirima, onda je vrijedno upućivati ​​na njihov sadržaj. Postoji 4 odabira ove vrste:

• : sadrži - odabire elemente koji sadrže navedeni tekst;
• : ima - odabire elemente koji sadrže druge elemente specifične za tu liniju;
• : roditelj - odabire elemente koji sadrže druge;
• : prazno - odabire stavke koje ne sadrže druge.

Dajmo primjer. Da biste odabrali sve elemente div koji sadrže Hello tekst, morate upisati $ (div: contains (`Hello`)).

Hijerarhijski selektori

Postoji još jedan način odabira stavki u JQuery-u, naime, prema njihovoj hijerarhiji (to jest, odnos jedni s drugima na HTML stranici). Mnogo ih je, pa su ovdje dva od najpopularnijih: "dijete" i "dijete".

U prvom slučaju odabiru se elementi koji su izravni potomci (dijete) određenog elementa (predak). Na primjer, da biste odabrali stavke popisa u svjetlosnoj klasi koja su dijete navnog popisa, morate upisati: $ (ul # nav> li.light).

Drugi je slučaj općenitije. Ovdje se mogu odabrati neizravni potomci nekog elementa. Na primjer, za odabir veza unutar navnog popisa, pišemo: $ (ul # nav a).

Dakle, u JQuery elementima se mogu odabrati na različite načine pomoću parametara kao što su klasa, ID, atributi, sadržaj ili hijerarhija elemenata HTML dokumenta.