jQuery – selektory i filtry (cz. I)

21.11.2009 - Rafał Polito
TrudnośćTrudność

Filtry formularzy

Poniższych filtrów najczęściej używa się przy tworzeniu formularzy. Filtry :visible/:hidden to filtry wybierające element widoczny/niewidoczny, :enabled/:disabled to filtry wybierające element włączony/wyłączony, :checked to filtr wybierający element zaznaczony, :selected to filtr wybierający element wybrany. Filtry bezpośrednio związane z formularzami to filtry:

  • :input – filtr wybierający elementy input
  • :text – filtr wybierający elementy input type=”text”
  • :password – filtr wybierający element input type=”password”
  • :radio – filtr wybierający element input type=”radio”
  • :checkbox – filtr wybierający element input type=”checkbox”
  • :button - filtr wybierający element input type=”button”
  • :submit – filtr wybierający element input type=”submit”
  • :reset - filtr wybierający element input type=”reset”
  • :image – filtr wybierający element input type=”image”
  • :file - filtr wybierający element input type=”file”

Filtry atrybutów

Wybierając elementy na stronie możemy się też kierować ich atrybutami. Do tego celu służą filtry atrybutów. Filtry atrybutów umieszczamy w nawiasach kwadratowych i dopisujemy przed zwykyłymi filtrami. Ich konstrukcja jest następująca:

1
    nazwa_atrybutu operator ‘wartość’
gdzie w miejsce nazwa_atrybutu wpisujemy nazwę atrybutu według jakiego chcemy filtrować, w miejsce operatora umieszczamy jeden z poniższych operatorów:

  • = (operator równości)
  • != (operator zaprzeczenia)
  • *= (operator zawierania)
  • ^= (operator zawierania na początku – prefiks)
  • $= (operator zawierania na końcu – sufiks)

Pole "wartość" oznacza wartość, której szukamy (bądź nie chcemy żeby występowała w atrybicie). Przykład:

1
    $(„h1[class*=’news’])

Selektor ten wybierze nam wszystkie znaczniki h1 zawierające w nazwie słowo „news”. Filtry atrybutów możemy łączyć ze sobą (wybierzmy np. wszystkie newsy bez pierwszego zakładając, że pierwszy news w nazwie klasy ma słowo „top”):

1
    $(„div[class*=’news’][class!=’top’])

Filtry atrybutów możemy też łączyć ze zwykłymi filtrami. To samo, co zrobiliśmy wcześniej możemy zrobić ładniej.

1
    $(„div[class*=’news’]:not(:first)))

Możemy zastosować filtr atrybutów pomijając operator i wartość, aby wybrać wszystkie elementy z podanym atrybutem. Przykład:

1
    $(„div[class])

Takim selektorem wybierzemy wszystkie kontenery div, które mają przypisaną jakąkolwiek klasę. Na koniec przygotowałem mały skrypt pozwalający sprawdzać selektory - możesz wybrać z listy możliwych i zobaczyć co zostanie wybrane w oknie poniżej.

Slector Checker:

przykładowa strona

menu

  • strona główna
  • galeria
  • forum dyskusyjne
  • artykuły
  • kontakt
  • o nas

gorące dyskusje

  • pierwszy gorący temat
  • drugi gorący temat
  • trzeci gorący temat
  • czwarty gorący temat

inny blok

  • pierwszy podpunkt
  • drugi podpunkt

zielona belka

  • pierwszy podpunkt
  • drugi podpunkt
  • trzeci podpunkt

ostatnio dodane

  • najnowszy
  • nowszy
  • nowy
  • stary

panel użytkownika

  • wyloguj
  • ustawienia
  • edytuj profil

Suspendisse eu volutpat

data: 24:00:00, 12.12.2012, autor: Rafał Polito

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque adipiscing sollicitudin. Proin tempus pulvinar accumsan. Suspendisse eu volutpat quam. Pellentesque lacus nunc, rutrum fermentum hendrerit et, tristique nec diam. Quisque venenatis, diam vitae pharetra malesuada, nisl nunc bibendum nulla, nec consequat risus sem in turpis. Maecenas quis felis vitae orci egestas dictum. Integer non aliquet arcu. Quisque lobortis porttitor augue in malesuada. In ut vestibulum libero. Aliquam hendrerit ultrices enim.

Aenean bibendum

data: 24:00:00, 12.12.2012, autor: Rafał Polito

Phasellus nec odio non magna tristique mattis. Etiam luctus pellentesque leo at adipiscing. Aenean bibendum semper volutpat. Quisque nec tortor dolor. Vivamus mauris mi, fermentum sit amet interdum in, dictum at augue. Nulla non odio id mauris faucibus ultrices sit amet sed turpis. Aenean porttitor erat id ligula semper eget imperdiet eros dictum. In quis ligula vel sapien hendrerit porttitor quis ut ipsum. Ut sapien neque, egestas quis auctor vel, facilisis ac lacus. Sed mattis vestibulum felis, adipiscing sagittis mauris pretium vitae. Duis ultrices ante eu est sodales iaculis. Donec tortor orci, malesuada ac porta id, consequat eu est. Sed bibendum ullamcorper felis, quis lobortis enim molestie vel. Mauris egestas porta eros, at semper purus mattis vel.

© 2009 Copyrights

To wszystko, co chcialbym Ci pokazać w pierwszej części kursu jQuery. Po przeczytaniu tego artykułu powinieneś bez problemu radzić sobie z wybieraniem elementów na stronie www oraz ich filtrowaniem. Zachęcam do czytania kolejnych części kursu jQuery. W części drugiej dowiesz się co nieco o atrybutach i manipulacji.

Ciekawe adresy:
http://blog.createwww.pl/tag/jquery/
http://docs.jquery.com/Tutorials
http://www.queness.com/
3
Twoja ocena: Brak Ocena: 3 (1 ocena)

Copyright © 2008-2010 Wrocławski Portal Informatyczny

design: rafalpolito.com