jQuery saab valida kõike, mida CSS3 saab valida. Kuid see ei piirdu sellega! JQuery pakub (Sizzle'i valimismootori kaudu) veel mitmeid lisavalijaid, mis on mõnikord päris kasulikud. Näiteks on CSS-is atribuutide valijad, mis võimaldavad teil elemendi valida mis tahes suvalise atribuudi põhjal, mis elemendil võib olla. Näiteks:
On olemas CSS-valija, mida saame jQuery's kasutada selle valimiseks:
$("(data-whatever='elephant-eyeballs')");Atribuutide valijas on variatsioone, näiteks selle asemel, =et ^=saaksite märkida "algab selle väärtusega". Kuid mingil põhjusel pole CSS-is! = Või "pole selle väärtusega võrdne". jQuery teeb! See on jQuery valija laienduse näide.
Neid valikulaiendeid on palju. Mõned neist, millest me selles ekraanikuva konkreetselt räägime:
- : eq () - n-lapse () 0-indekseeritud versioon
- : isegi - otsetee n-nda lapse jaoks (paaris)
- : gt (n) - valige elemendid, mille indeks on suurem kui n. Samuti otsetee keerukamaks: n-laps () forumla.
Võimalik, et kõige kasulikum selektorilaiend on: has () - mis piirab valiku elementidega, mis sisaldavad seda, mida selle pseudovalijaga edastate (või on see pseudopseudo valija :) On tõenäoline, et kunagi tulevikus on CSS-l midagi sellist see on meie jaoks (ma arvan, et see saab olema pre ! code), kuid see on kaugel. Kahjuks ei esita ma selle ekraanikuva jaoks selle jaoks eriti mõjuvat argumenti, kuid saate teada, millal seda vajate! Näiteks "Valige kõik .moodulid, mis sisaldavad h3.sports-riba" - selline asi.
Soovi korral saate ka ise oma valiku laiendusi teha. Siin on artikkel selle kohta. Näide on teha see, :inviewmis valib elemendi ainult siis, kui see on lehel nähtav praeguses kerimisasendis. See oleks selline:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));