X

Aleproste na FaceBook'u

Reklama.

[jQuery] selektory CSS w jQuery :: poruszanie się po znacznikach HTML - ściąga

Wyszukiwanie, a raczej podpinanie się pod znaczniki HTML, realizujemy według schematu:

$('znacznik')
// lub
$('element') // gdzie element to np. klasa
// lub
$('przodek potomek') //dopasowanie złożone

$('znacznik1, znacznik2, element, ..') 
// dopasowanie jednoczesne wielu elementów 
// lub/i znaczników, które w wyniku dadzą jeden zbiór

Dopasowanie znaczników HTML i elementów CSS:

  • znacznik : dopasowuje się do wskazanego znacznika
  • #id : dopasowuje się do znacznika o identyfikatorze id (powinien być tylko jeden taki element na stronie).
  • .klasa : dopasowuje się do znaczników ze wskazaną klasą CSS.
  • elem1, elem2 : dopasowanie jednoczesne do elementów elem1 oraz elem2 jako jednego zbioru.
  • przodek potomek : dopasowuje się do "potomków, które mają wskazanego "przodka".
  • rodzic > dziecko : dopasowuje się do "dziecka" mającego wskazanego "rodzica".
  • poprzedni + następny : dopasowuje się do elementu następny, mającego wskazanego poprzednika.
  • poprzedni ~ rodzeństwo : dopasowuje się do elementów będących rodzeństwem wskazanego poprzednika.
  • elem[atryb] : dopasowuje się do elementów zawierających wskazany atrybut.
  • elem[atryb=wartość] : dopasowuje się do elementów zawierających atrybut ze wskazaną wartością.
  • elem[atryb^=wartość] : dopasowuje się do elementów zawierających atrybut o wartości zaczynającej się od wskazanej wartości.
  • elem[atryb$=wartość] : dopasowuje się do elementów zawierających atrybut o wartości kończący się na wskazaną wartość.
  • elem[atryb*=wartość] : dopasowuje się do elementów zawierających atrybut o wartości zawierającej wskazaną wartość.

Pseudoklasy:

  • :first; :last; :even; :odd : pseudoklasy dopasowujące się odpowiednio do pierwszego, ostatniego, parzystych lub nieparzystych elementów.
  • :first-child; :last-child; :only-child; : pseudoklasy dopasowujące się odpowiednio do pierwszego dziecka, ostatniego dziecka i jedynego dziecka (czyli tylko wtedy, gdy element zawiera jedno dziecko) każdego pasującego "rodzica".
  • nth-child(indeks) : pseudoklasa dopasowuje się do co N-tego dziecka, gdzie N to podany indeks.
  • :not(selektor) : pseudoklasa powodująca zagnieżdżone sprawdzenie braku dopasowania.
  • :eq(indeks); :gt(indeks); :lt(indeks) : pseudoklasy dopasowujące się odpowiednio do N-tego pasującego elementu, wszystkich pasujących elementów powyżej N-tego lub wszystkich pasujących elementów do N-tego.
  • :input; :text; :password; :radio; :checkbox; :submit; :image; :reset; :button; :file; :hidden : pseudoklasy dopasowujące się do znaczników input wybranego typu
  • :enabled; :disabled; :checked; :selected : seudoklasy pozwalające wyszukać odpowiednio wszystkie włączone elementy, wszystkie wyłączone elementy, wszystkie wybrane elementy lub wszystkie zaznaczone elementy.
  • :hidden; :visible : pseudoklasy dopasowujące się odpowiednio do elementów ukrytych lub elementów widocznych na stronie.
  • :header : pseudoklasa dopasowująca się do wszystkich rodzajów nagłówków (od h1 do h6).
  • :animated : pseudoklasa dopasowująca się do dowolnych elementów, które są w danym momencie animowane za pomocą jQuery.
  • :contains(tekst) : pseudoklasa dopasowująca się do elementów, które w swej treści zawierają wskazany tekst.
  • :empty : pseudoklasa dopasowująca się do pustych elementów.
  • :has(selektor) : pseudoklasa dopasowująca się do elementów, które zawierają przynajmniej jeden element pasujący do selektora.
  • :parent : pseudoklasa dopasowująca się do elementów, które są rodzicami, czyli mają potomków.

Na podstawie powyższej ściągi, mamy praktycznie dostęp do dowolnego miejsca na stronie i możemy przystąpić do akcji, o czym już niedługo w kolejnej publikacji - zapraszam.

opublikowane 04-01-2011171311 powrót

© aleproste.pl v.10 Projekt i realizacja projekt.etvn.pl & aleproste.pl