Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. jQuery
Code

Ritka jQuery kiválasztók

by
Difficulty:BeginnerLength:MediumLanguages:

Hungarian (Magyar) translation by Bózsó Bence (you can also view the original English article)

A kiválasztók létfontosságúak. A legtöbb jQuery mód egy kis elem kiválasztást igényel bármilyen használatra. Például, csatolva egy click eseményt egy gombhoz igényli, hogy válaszd ki a gombot először.

Mivel a közös jQuery kiválasztók létező CSS kiválasztókon alapulnak, jól képzettnek kell lenned bennük. Azonban, van egy pár kiválasztó ami nincs sokat használva. Ebben a bemutatóban, ezekre a kevésbé ismert de fontos kiválasztókra fogok fókuszálni.

Minden kiválasztó (*)

Ezt a kiválasztót helyesen univerzális kiválasztónak hívják, mivel minden elemet kiválaszt a dokumentumban, beleértve a <head>, <body>, <script>, vagy <link címkéket. Ez a demó illusztrálja a véleményemet.

Ez a kiválasztó nagyon lassú ha más elemekkel kombinációban van használva. Azonban, minden attól függ, hogyan van használna a kiválasztó és melyik böngészőben van végrehajtva. Firefoxban, a $("#selector > *").find("li") lassabb, mint a $("#selector > ul").find("li") Érdekes módon, a Chrome végrehajtja a $("#selector > *").find("li")-t némileg sokkal gyorsabban. Minden böngésző végrehajtja a $("#selector *").find("li")-t sokkal lassabban, mint a $("#selector ul").find("li")t. Azt javasolnám, hogy hasonlítsd össze a teljesítményt mielőtt használod a kiválasztót.

Itt egy demó ami összehasonlítja a végrehajtási sebességeit az összes kiválasztónak.

Animált kiválasztó (:animated)

Használhatod az :animated kiválasztót hogy kiválaszd az összes elemet aminek az animációja még folyamatban van mikor a kiválasztó fut. Az egyetlen probléma, hogy csak azokat az elemeket fogja kiválasztani ami jQuery használatával lett meganimálva. Ez a kiválasztó egy jQuery kiterjesztés és nem részesül a teljesítménynövelésből ami az eredeti querySelectorAll() módszerből jön.

Továbbá nem tudod felismerni a CSS animációkat jQuery használatával. Azonban, akkor felismerheted, mikor az animáció az animationend esemény használatával zárul.

Vess egy pillantást a következő demóra.

A demóban fentebb, csak a páratlan div elemek vannak meganimálva a végrehajtás előtt $(":animated").css("background","#6F9"); Eredményképp, csak azok a div elemek változnak zöldre. Csak ezután, előhívjuk az animálás funkciót a maradék div elemekre. Ha rákattintasz a button-re most, az összes div elem zöldre változik.

Tulajdonság nem egyenlő kiválasztó ([attr!="value"])

Gyakori tulajdonság kiválasztók általában felismerik ha egy tulajdonság egy megadott névvel vagy értékkel létezik. Másfelől, az [attr!="value"] kiválasztó ki fogja választani az összes elemet aminek nincs meghatározott tulajdonsága vagy ahol a tulajdonság létezik de nem egyenlő egy különös értékkel. Ez egyenértékű a :not([attr="value"])-vel. Nem úgy mint [attr="value"], [attr!="value"] nem része a CSS leírásnak. Eredményképp, a $("css-selector").not("[attr='value']") használata növelheti  a teljesítményt modern böngészőkben.

A töredék lentebb hozzáad egy mismatch osztályt az összes li elemhez amik data-category tulajdonsága nem egyenlő a css-el. Ez hasznos lehet hibakeresés alatt vagy a helyes tulajdonság érték beállítása közben JavaScript használatával.

A demóban, végigmegyek két listán és kijavítom az értékeit az elemek kategória tulajdonságainak.

Tartalom kiválasztó (:contains(text))

Ez a kiválasztó az összes elem kiválasztására van használva amik tartalmazzák a meghatározott húrt. Az egyező húr közvetlenül belül lehet az érintett elemek vagy más leszármazottai belsejében.

A példa lentebb segít, hogy jobban megértsd ezt a kiválasztót. Hozzá fogunk adni sárga hátteret az összes eseménynek a Lorem Ipsum kifejezésben.

Kezdjük a jelöléssel:

Figyeld, hogy a Lorem Ipsum kifejezés hét különböző helyen bukkan fel. Szándékosan használtam kis sapkákat az egyik példában hogy megmutassan az egyezést érzékeny esetben.

Itt a JavaScript kód kiemelni az összes egyezést:

Az idézetek a húr körül választhatóak. Ez magába foglalja a $("section:contains('Lorem Ipsum')")-ot és a $("section:contains(Lorem Ipsum)")-ot és érvényes lesz a töredékben fentebb, Csak a szakasz elemre célzok, szóval a Lorem Ipsum szöveg belül a lista elem változatlan marad. Ráadásul, az egyezéstelen eset következtében, a szöveg belül a második section elem aminek nem kell kiemelve lennie. Ahogy láthatod ebben a demóban, ez az ami pontosan történik.

Van kiválasztó (:has(selector))

Ez a kiválasztó ki fogja választani az összes elemet ami tartalmaz legalább egy elemet ami egyezik a megadott kiválasztóval. A kiválasztó ami igényel egyezést nem kell, hogy közvetlen gyerek legyen. :has() nem része a CSS leírásnak. Modern böngészőkben, használnod kell $("pure-css-selector").has(selector)-t $("pure-css-selector:has(selector)") helyett a növelt teljesítményért.

Egy lehetséges alkalmazása ennek a kiválasztónak az elemek manipulációja ami tartalmaz egy különleges elemet bennük. A példánkban ez a lista minden elemének a színét megváltoztatja, amelyek tartalmazzák a linket.

Ez a demó kódja:

Itt a JavaScript kód a lista elemeinek színének megváltoztatásához:

A kód mögötti logika elég egyértelmű. Végigmegyek a lista összes elemén amik linket tartalmaznak, és átállítom a színüket. Manipulálhatod is a belső szövegeket vagy eltüntetheted őket a DOM-ból. Biztos vagyok benne hogy ezt a kiválasztót sok más szituációban is használhatod. Nézd meg ennek a kódnak a live verzióját a CodePen oldalon.

Index-központú kiválasztók

A :nth-child() CSS kiválasztók mellett a jQuery birtokol saját index-központú szelektort.  Ezek a kiválasztók: :eq(index):lt(index), és :gt(index). A CSS-központú kiválasztókkal ellentétben ezek a kiválasztók nullbázisú indexelést használnak. Ez azt jelenti hogy a :nth-child(1) az első, az :eq(1) a második elemet fogja kiválasztani. Az első kiválasztásához a következőt kell használnod: :eq(0)

Ezek a kiválasztók negatív értékeket is el tudnak fogadni. Amikor a negatív értékek vannak meghatározva, a számolás visszafelé az utolsó elemtől kezdődik.

Az :lt(index) kiválasztja az összes elemet ami egy alacsonyabb indexben van mint a meghatározott érték. Hogy kiválaszd az első három elemet, :lt(3)-t fogsz használni. Ez azért van, mert az első három elem illetőleg 0, 1 és 2 index értéket fog kapni. Egy negatív index használata ki fogja választani az összes értéket mielőtt az elem amit elértünk a visszaszámolás után lesz. Hasonlóképp, a :gt(index) kiválasztja az összes elemet indexszel jóbban, mint a meghatározott érték.

Próbálj meg különböző gombokra kattintani a demóban, hogy jobban megértsd az index kiválasztókat.

Forma kiválasztók

A jQuery definiál sok kiválasztót forma elemek könnyű kiválasztásáért. Például, a :button kiválasztó ki fogja választani az összes gomb elemet mint ahogy az elemeket típus gombbal. Hasonlóan, a :checkbox ki fogja választani az összes bemenő elemet típus jelölőnégyzettel. Vannak kiválasztók definiálva majdnem minden bemenő elemhez. Fontold meg a formát lejjebb:

Készítettem két szöveg elemet itt és négy jelölőnégyzetet. A forma nagyon alapvető, de adnia kell neked egy ötletet, hogyan működnek a forma kiválasztók. Meg fogjuk számolni a text elemek számát a :text kiválasztó használatával és továbbá frissíteni fogjuk a szöveget az első szöveg bemenetnél.

Én :textet használok az összes bemeneti szöveg kiválasztására, aztán a hossz módszert, hogy kiszámítsam a számukat. A harmadik állításban a korábban megbeszélt :eq() szelektort fogom használni az első elemhez hozzáféréshez és az értékének beállításához.

Tartsuk fejben hogy a jQuery 1.5.2-ben a :text igazként tér vissza olyan elemek esetében, ahol a típus attribútum nincs meghatározva.

Vess egy pillantást a demóra

Cím kiválasztó (:header)

Ha az összes fejléc elemet ki szeretnéd választani a weboldalon, használhatod a rövid $(":header") verzióját a $("h1 h2 h3 h4 h5 h6") szelektornak. Ez a kiválasztó nem része a CSS leírásnak. Ennek eredményeképp jobb teljesítmény érhető el egy tiszta CSS szelektor használatával, később alkalmazva a .filter(":header")-t.

Például, tételezzük fel, hogy van egy article elem a weboldalon, és van három különböző címe. Most ezt $("article :header") használhatod $("article h1, article h2, article h3") ehelyett. Hogy még gyorsabbá tedd, ezt is használhatod: $("article").filter(":header") Így mindkét világ legjobbjával rendelkezel.

Hogy megszámozd az összes cím elemet, használahtod a követekző kódot.

Próbáld ki ezt a kísérő demót.

Végszó

Ebben a bemutatóban, megvitattam ritka kiválasztókat amikkel talán találkozol mikor jQueryt használsz. Mialatt a legtöbb ezek a kiválasztók közül alternatívákkal rendelkezik amiket tudsz használni, ezt még jó tudni hogy ezek a kiválasztók léteznek.

Remélem tanultál valami újat ebben a bemutatóban. Ha van bármi kérdésed vagy javaslatod, kérlek írj hozzászólást.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.