Polecają:

Jak skutecznie programować stosując jQuery – część V – Filtrujemy zaznaczenie do konkretnych zapytań

02 maja 2011 § 2

jquery
Ten post przedstawi jak założyć filtr na nasze zaznaczenie w jQuery. W ten sposób będzie w lepszy sposób mogli posługiwać się tworzeniem galerii, układem redakcyjnych blogów itp.

Jeżeli nie przeglądałeś wcześniejszych stron z kursu Jak skutecznie programować stosując jQuery w celu ułatwienia wcześniejszej nauki zapraszam do zapoznania się z nimi.

Jeżeli umiesz już zaznaczać to znaczy, że poniższe informację przydadzą Ci się w większej ilości okazji niż Ci się obecnie wydaje. Często pomijane, ale jakie istotne. Oto one podzielone na 6 grup:

1 – Podstawowe filtry

//Wszystkie filtry zostaną nałożone 
//na wszystkie bloki div w przykładzie

div:first 
//zaznacza pierwszy blok div, 
//który pojawił się na stronie

div:last 
//zaznacza ostatni blok div, 
//który pojawił się na stronie

div:even 
//zaznacza parzyste bloki div

div:odd 
//zaznacza nieparzyste bloki div

div:eq(n) 
//zaznacza blok div, z indeksem o wartości n
//przykład: :eq(1)- pobiera drugi element
//ponieważ Javascript liczy elementy w tablicach od zera 


div:gt(n) 
//zaznacza bloki div z indeksem, 
//który jest wyższym niż wartość "n"

div:lt(n) 
//zaznacza bloki div z indeksem, 
//który jest niższym niż wartość "n"

div:header
//zaznacza w bloku, wszystkie nagłówki

div:animated 
//zaznacza blok div, 
//którego animuje jQuery

div:not(selector)
//wskazuje, którego bloku div, 
//NIE zaznaczać ze względu na posiadanie 
//konkretnego wskaźnik, np. :checked

2 – Filtry zawartości

p:contains('text')
//sprawdza czy w danym paragrafie jest dany tekst
//i go zaznacza

div:empty()
//sprawdza czy blok jest pusty i zaznacza go

div:parent()
//sprawdza czy w blok jest rodziciem
//czyli nie jest pusty - przeciwieństwo empty()

div:has(p)
//sprawdza czy w bloku znajduje się paragraf


3 – Filtry widzialności

Kilka słów na początek kiedy element jest widzialny a kiedy ukryty, ponieważ nie jest to tak oczywiste jakby się mogło wydawać.

Elementy są widzialne gdy:

  1. Posiadają wartość display ustawioną na none:
    div {
    display: none;
    }
    
  2. Są elementem formularza z type ustawionym na hidden
    
    
  3. Wysokość i szerokość są ustawione na 0;
    .class {
    width:0;
    height: 0;
    }
    
  4. Przodek jest ukryty np. rodzic:), więc element się nie pojawi.

Pamiętaj! Jeżeli element posiada jeden z poniższych atrybutów

.class{
visibility:hidden;
opacity:0;
}

nadal jest uważany jako widoczny, ponieważ nadal zabiera miejsce na stronie.

Oto oba filtry:

:hidden
//zaznacza wszystkie ukryte elementy
:visible
//zaznacza wszystkie widzialne elementy

4 – Filtry atrybutów

Główny filtr

$('a[name="value"]')
//zaznacza element "a" o wartości "name" równej = "value"

5 – Filtry rodzinne

:first-child Selector
// zaznacza pierwsze dziecko rodzica

:last-child Selector
// zaznacza ostatnie dziecko rodzica

:nth-child(n) Selector
// zaznacza dziecko rodzica o wartości n

:only-child Selector
//zaznacza element katóre są jedynym dzieckiem

5 – Filtry formularza

:button
// zaznacza przyciski oraz elementy o typie "button"

:checkbox
//zaznacza elementy typu checkbox

:checked
//zaznacza elementy, które są odhaczone

:disabled
//zaznacza elementy, które są niedostępne

:enabled
//zaznacza elementy, które są dostępne

:file
//zaznacza elementy, typu file

:image
//zaznacza elementy, typu image

:input
//zaznacza elementy input, textarea, select i button

:password
//zaznacza elementy, typu hasło

:radio
//zaznacza elementy, typu radio button

:reset
//zaznacza elementy, typu reset

:selected
//zaznacza elementy, które są zaznaczone

:submit
//zaznacza elementy, typu submit

:text
//zaznacza elementy, typu text

Podsumowanie

Wszystkie 6 klas może być bardzo użytecznych w codziennych projektach i może dać wiele nowych możliwości w stylizacji Twojej kolejnej strony i nie zapominaj o nich. W następnej częsci naszego kursu zabierzemy się za pierwsze funkcję jQuery, dzięki którym będziemy programować lepiej używając jQuery.

Jak skutecznie programować stosując jQuery

>> część I – Co to i po co?
>> część II – Gdzie znaleźć jQuery i jak je stosować?
>> część III – Dokument gotowy proszę pana
>> część IV – Zaznaczamy z czym działamy
>> część V – Filtrujemy zaznaczenie do konkretnych zapytań

Tagged:

§ 2 komentarzy do “Jak skutecznie programować stosując jQuery – część V – Filtrujemy zaznaczenie do konkretnych zapytań”

Co to za artykuł?

Obecnie czytasz Jak skutecznie programować stosując jQuery – część V – Filtrujemy zaznaczenie do konkretnych zapytań w Lime Factory.