Ritka jQuery kiválasztók

Hungarian (Magyar) translation by Bózsó 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.

1	$("section *") // Selects all descendants
2	$("section > *") // Selects all direct descendants
3	$("section > * > *") // Selects all second level descendants
4	$("section > * > * a") // Selects 3rd level links

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.

$("li[data-category!='css']").each(function() {
  $(this).addClass("mismatch");
  // Adds a mismatch class to filtered out selectors.
  
  $(".mismatch").attr("data-category", attributeValue);
  // Set correct attribute value
});

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:

<section>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <b>Lorem Ipsum</b>.</p>
  <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum Wikipedia Link</a>
</section>
<section>
  <p>This <span class="small-u">lorem ipsum</span> should not be highlighted.</p>
</section>
<ul>
  <li>A Lorem Ipsum List</li>
  <li>More Elements Here</li>
</ul>

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:

$("section:contains('Lorem Ipsum')").each(function() {
  $(this).html(
      $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>")
    );
});

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:

<ul>
  <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li>
  <li>Pellentesque habitant morbi tristique senectus.</li>
  (... more list elements here ...)
  <li>Pellentesque habitant morbi tristique senectus.</li>
  <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li>
</ul>

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

1	$("li:has(a)").each(function(index) {
2	$(this).css("color", "crimson");
3	});

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.

:lt(4)  // Selects first four elements
:lt(-4) // Selects all elements besides last 4
:gt(4)  // Selects all elements besides first 5
:gt(-4) // Selects last three elements
:gt(-1) // Selects Nothing
:eq(4)  // Selects fifth element
:eq(-4) // Selects fourth element from last

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:

<form action="#" method="post">
  <div>
    <label for="name">Text Input</label>
    <br>
    <input type="text" name="name" />
    <input type="text" name="name" />
  </div>
  <hr>
  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
  </div>
</form>

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.

1	var textCount = $(":text").length;
2	$(".text-elements").text('Text Inputs : ' + textCount);
3
4	$(":text").eq(0).val('Added programatically!');

É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.

1	$("article :header").each(function(index) {
2	$(this).text((index + 1) + ": " + $(this).text());
3	// Adds numbers to Headings
4	});

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.