jQuery választók

A jQuery CSS-stílusú választókkal választja ki a HTML-oldal részeit vagy elemeit. Ezután lehetővé teszi, hogy az elemekkel jQuery módszerek vagy függvények segítségével tegyen valamit.

Ahhoz, hogy ezek egyikét használja szelektor, írja egy dollár jel és a zárójel után: $(). Ez a jQuery()funkció rövidítése . A zárójelben adja hozzá a kijelölni kívánt elemet. Használhat egy- vagy dupla idézőjeleket. Ezután adjon hozzá egy pontot a zárójelek és a használni kívánt módszer után.

A jQuery-ben az osztály- és azonosítóválasztók olyanok, mint a CSS-ben. Nézzük át ezt gyorsan, mielőtt folytatnánk.

ID-választó a CSS-ben

A CSS ID választó stílusokat alkalmaz egy adott html elemre. A CSS ID választónak meg kell egyeznie egy HTML elem ID attribútumával. Azokkal az osztályokkal ellentétben, amelyek egy webhelyen több elemre alkalmazhatók, egy adott azonosító csak a webhely egyetlen elemére alkalmazható. A CSS ID felülírja a CSS osztály tulajdonságait. Adott azonosítóval rendelkező elem kiválasztásához írjon egy kivonat (#) karaktert, majd az elem azonosítóját.

Szintaxis

#specified_id { /* styles */ }

Kombinálhatja az azonosító választót más típusú szelektorokkal, hogy egy nagyon meghatározott elemet stílusozzon.

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Megjegyzés az azonosítókról

Lehetőség szerint kerülni kell a személyazonosító igazolványt. Mivel nagyon specifikus, és csak akkor lehet felülírni, ha stílusokat illeszt be, vagy ha stílusokat ad hozzá . Az azonosító felülbírálja az osztályválasztókat és a típusválasztókat.

Ne feledje, hogy az azonosító választónak meg kell egyeznie egy HTML elem azonosító attribútumával.

Sajátosság

Az ID-választók magas specifitással rendelkeznek, így nehéz őket felülírni. Az osztályok sokkal alacsonyabb specifikussággal bírnak, és általában a stílusok előnyben részesített módja a sajátossággal kapcsolatos kérdések elkerülése érdekében.

Íme egy példa egy jQuery módszerre, amely kiválasztja az összes bekezdéselemet, és hozzáad egy „kiválasztott” osztályt:

This is a paragraph selected by a jQuery method.
This is also a paragraph selected by a jQuery method.
 $("p").addClass("selected");

Ok, vissza a jQuery-hez

A jQuery-ben az osztály és az azonosító kiválasztói megegyeznek a CSS-sel. Ha egy bizonyos osztályú elemeket szeretne kiválasztani, használjon pontot ( .) és az osztály nevét. Ha bizonyos azonosítóval rendelkező elemeket szeretne kiválasztani, használja a kivonat szimbólumot ( #) és az azonosító nevét. Ne feledje, hogy a HTML nem különbözteti meg a kis- és nagybetűket, ezért a legjobb gyakorlat, ha a HTML jelölést és a CSS választókat kisbetűvel tartja.

Osztályok szerinti kiválasztás:

Paragraph with a class.
 $(".p-with-class").css("color", "blue"); // colors the text blue

Kiválasztás azonosító szerint:

List item with an ID.
 $("#li-with-id").replaceWith("
Socks
");

Kiválaszthat bizonyos elemeket, osztályaikkal és azonosítóikkal együtt:

Osztályok szerinti kiválasztás

Ha egy bizonyos osztályú elemeket szeretne kiválasztani, használjon pontot (.) És az osztály nevét.

Paragraph with a class.

$(".pWithClass").css("color", "blue"); // colors the text blue

Az osztályválasztót egy címke nevével kombinálva is használhatja, hogy konkrétabb legyen.

    

     My Wish List
    
`

$("ul.wishList").append("
New blender
");

Kiválasztás azonosító szerint

Ha bizonyos azonosító értékű elemeket szeretne kiválasztani, használja a kivonat szimbólumot (#) és az azonosító nevét.

List item with an ID.

$("#liWithID").replaceWith("
Socks
");

Az osztályválasztóhoz hasonlóan ez is használható egy címke nevével együtt.

News Headline

$("h1#headline").css("font-size", "2em");

Szűrőként működő választók

Vannak olyan szelektorok is, amelyek szűrőként működnek - általában kettőspontokkal kezdődnek. Például a :firstválasztó kiválasztja azt az elemet, amely a szülő első gyermeke. Íme egy példa egy rendezetlen listára, amely tartalmaz néhány listát. A lista alatti jQuery választó választja ki az elsőt

     

      
One
      
Two
      
Three
     

$("li:first").css("color", "green");

Hello
World

$("p:contains('World')").css("color", "yellow");

$("#cat,#dog,#rat").css("background-color","red");