Mi a jQuery querySelector?
jQuery querySelector válasszon vagy keressen egy DOM (dokumentumobjektum modell) elemet egy HTML dokumentumban. A JQuery lehetővé teszi számunkra, hogy manipuláljuk a HTML elemeket. Egy vagy több HTML elem kiválasztására szolgál az azonosító, név, típusok, attribútumok, osztály, attribútumértékek stb. Alapján. A meglévő CSS-választókon alapul.
Bevezetés a querySelector-be
A querySelector () módszer csak azt az első elemet adja vissza, amely megegyezik a dokumentumban megadott CSS-választóval. Ha egy azonosítót a dokumentumban többször is használnak, akkor az visszatér az első egyező elemhez.
A querySelector szintaxisa
Az alábbiakban látható a querySelector szintaxisa:
- querySelector (CSS választók)
- Visszaadja az első elemet, amely megegyezik a megadott szelektorokkal.
- Az összes elem visszaadására, amelyek megegyeznek, akkor a querySelectorAll () metódust használjuk.
- Az átadott CSS szelektoroknak string típusúaknak kell lenniük.
- A CSS választók kötelező átadása.
- Az átadott karakterláncnak érvényes CSS-választónak kell lennie.
- Ha az átadott karakterlánc érvénytelen, akkor egy SYNTAX_ERRexception kerül elküldésre.
- Ha nem található egyezés, akkor semleges lesz.
- Az első elem illesztése a dokumentum mélység előzetes előrendelésével történik.
- Egy vagy több CSS-választót határoz meg, hogy megfeleljen az elemnek.
- Több választó esetén vesszővel válassza el őket.
- Azokat a karaktereket, amelyek nem tartoznak a szokásos CSS szintaxisba, visszavágó karakterrel kell kitölteni.
Példák a querySelector () módszerre
Az alábbiakban bemutatunk példákat a querySelector () metódusokra:
A jQuery alkalmazásban elemeket választhat ki egy oldalon, az elem sokféle tulajdonságának felhasználásával: Típus, Osztály, Azonosító, Az Attribútum birtoklása, Az Attribútumértékek stb. Az alábbiakban a Jquery példája található a típus használatával.
1. példa - Kiválasztás típus szerint
1. A következő lekérdezésválasztó két <a> -ot tartalmaz
A fenti kód magyarázata: Ebben a példában megfigyelhetjük, hogy két horgonycímkét használtunk, és a horgonycímke belsejében átadtuk a két kép hiperhivatkozását. A querySelector („a”) használatával. Style.backgroundColor = „red”; átadtuk a rögzítőcímkét („a”) a querySelector-nak. A querySelector () módszernél, ha több szelektoron átjutunk, akkor az első elem jelenik meg, amely megegyezik a megadott szelektorokkal. Annak ellenére, hogy tartalmaz két rögzítőcímkét, az első megtalált rögzítőcímkét, alkalmazza a style.backgroundColor = “red”; csak az első horgonycímkéhez.
1. output: Mielőtt rákattintana a gombra („Click me”).
2. eredmény: A gombra kattintás után („Kattintson rám”) a virág háttér színe „piros” -ra változik.
3. kimenet: A hiperhivatkozásokra kattintva a megfelelő képek megnyílnak.
2. Ez a querySelector is tartalmaz kettőt, de az alábbi példában megváltoztattam a kép sorrendjét. Először a sivatagi hiperhivatkozást, majd a virág hiperhivatkozását tartottam fenn.
A fenti kód magyarázata: Ebben a példában azt is megfigyelhetjük, hogy két rögzítőcímkét használtunk, és a rögzítőcímke belsejében két kép hiperhivatkozását adtuk át. A querySelector („a”) használatával. Style.backgroundColor = „red”; átadtuk a horgonycímkét („a”) a lekérdezés-választónak. Ezúttal a querySelector () -ben először megtudja a „Sivatag” hiperhivatkozást, amikor megváltoztattuk a sorrendet. Annak ellenére, hogy tartalmaz két rögzítőcímkét, az első megtalált rögzítőcímkét, alkalmazza a style.backgroundColor = “red”; csak az első horgonycímkéhez.
1. kimenet: A kimenetben megfigyelhetjük, hogy az első kép Sivatag. Tehát a querySelector () módszer miatt a sivatagi háttér színe pirosra vált.
2. output: A hiperhivatkozásra kattintva megnyílik a sivatagi kép.
3. output: A virág hiperhivatkozására kattintva megnyílik a virág képe.
2. példa - Kiválasztás osztály szerint
Az alábbiakban bemutatott példában az osztálynév alapján választjuk meg.
A fenti kód magyarázata: A fenti példában az osztály nevét használjuk, itt az osztály neve a választó. Ugyanazt az osztálynevet adja át a h2 (fejcímke) és a bekezdéscímke is. A querySelector () módszerhez átadjuk az osztály nevét, amely ellenőrzi az adott osztály nevét a programban. Most megtalálta azokat a címkéket, amelyek ugyanazzal az osztálynévvel rendelkeznek, mint ahogy említettük. A dokumentum mélység első előrendelésű átjárójának felhasználásával megtörténik az első elem illesztése. A példában az első elem, amely az osztály nevét választóként tartalmazza, a h2 (fejcímke). A querySelector () módszer lekérdezi a h2 címkét, és a style.backgroundColor szerint az adott háttérszínt alkalmazza a h2 címkére.
1. kimenet: Mielőtt rákattintana a gombra („kattintson rám”), a h2 tag tartalma nem változtatja meg a háttér színét kékre.
2. output: A gombra kattintás után („kattintson rám”) a h2 tag tartalma háttér színét kékre változtatja.
3. példa - Kiválasztás azonosító alapján
Az alábbiakban bemutatott példában az id használatával választjuk meg.
A fenti kód magyarázata: A példában az id segítségével választjuk meg az id azonosítót: Selector. A querySelector () módszerhez átadjuk az azonosítót, amely ellenőrzi az adott azonosító nevet a programban. Most megtalálta a címkét, amelynek azonos azonosító neve van, mint említettük. A dokumentum mélység első előrendelésű átjárójának felhasználásával megtörténik az első elem illesztése. A példa azon eleme, amely Selectorként azonosító nevet tartalmaz, bekezdéscímke. A querySelector () módszer letölti a bekezdéscímkét, és a megadott kód szerint alkalmazza a tartalom bizonyos változásait.
1. output: Mielőtt rákattintana a „kattintson rám” gombra, a bekezdéscímke tartalma „Ez egy ap elem id =” választóval lesz.
2. eredmény: Miután rákattintott a „kattintson rám” gombra, a bekezdéscímke tartalma megváltozik „Change in the text”.
A jQuery querySelector felhasználásai
Az alábbiakban bemutatjuk a querySelector használatát:
- A jQuery kódjai pontosabbak, rövidebbek és egyszerűbbek, mint a szokásos JavaScript kódok. Különféle funkciókat tud végrehajtani.
- A querySelector () hívása visszatér az első elemhez, amikor kiválasztja az elemet, így gyorsabb és rövidebb az írása.
Ajánlott cikkek
Ez a jQuery querySelector útmutatója. Itt megvitatjuk, mi a jQuery querySelector, bevezetés a querySelectorbe, a szintaxis és a Jquery példája a típus használatával. Megnézheti más kapcsolódó cikkeket is, ha többet szeretne megtudni -
- jQuery Események
- A JQuery felhasználásai
- jQuery Methods
- Hogyan telepíthetem a Jquery-t?
- HTML események
- Az 5 legnépszerűbb HTML eseményttribútum példákkal
- Dobás és dobás | Öt legfontosabb különbség, amelyet tudnia kell
- Útmutató a JQuery Progress Bar példákhoz