Chng 2: Selectors

Th vi n jQuery t n d ng ki n th c v th m nh c a CSS Selector cho php b n nhanh chng v d dng truy c p nhi u ph n t ho c nhm cc ph n t trong DOM (Document Object Model). Trong chng 2 ny chng ta s khm ph m t vi nh ng Selector ny v c nh ng Selector c a jQuery. Chng ta cng s tm hi u thm v cch di chuy n trong cy th m c v n cho chng ta thm linh ng t c nh ng g mnh mu n.

Document Object Model (M hnh i t ng ti li u)

M t trong nh ng tnh nng m nh m nh t c a jQuery l kh nng ch n cc thnh ph n trong DOM m t cch d dng. Ni nm na th DOM l m t d ng ph h c a cc thnh ph n HTML. Cc thnh ph n ny c m i tng quan v i nhau nh m t gia nh HTML h nh phc. Khi chng ta ni n cc m i quan h ny b n hy lin t ng n m i quan h trong gia nh nh ng b, b m , anh ch em v.v.. B n c th xem bi H ng i t ng d a vo c p b c XHTML bi t r hn v m i quan h c a cc thnh ph n HTML.

Hm $()
Cho d b n s d ng Selector no i chng n a trong jQuery, b n lun b t u b ng m t d u dollar ($) v m t i ngo c n nh: $(). T t c nh ng g c th c s d ng trong CSS cng c th c l ng vo d u ngo c kp () v t vo trong hai d u ngo c n, cho php chng ta p d ng cc phng php jQuery cho t p h p cc ph n t ph h p. Ba thnh ph n quan tr ng nh t c a jQuery Selector l tn th HTML, ID v Class. B n c th ch s d ng n ho c k t h p v i nh ng Selector khc ch n. D i y l m t v d v m i Selecter khi s d ng m t mnh.

Selector Th HTML ID Class P

CSS #vi-du .featured

Jquery $('p') $('#vi-du') $('.featured')

Di n gi i Ch n t t c cc th p trong ti li u HTML Ch ch n thnh ph n no c ID l #vi-du Ch n t t c cc thnh ph n c class l .featured

Nh ni

chng 1, khi chng ta thm cc phng php vo hm $(), th cc ph n t n m trong i t ng

1 Demon Warlock

Www.izwebz.com

jQuery s c t ng loop v di n ra

h u tr ng. Cho nn chng ta khng c n ph i s d ng b t c m t

vng l p no c , nh vng l p for ch ng h n, i u ny th ng ph i lm trong khi vi t code v DOM. Sau khi b n n m b t c nh ng khi ni m c b n, by gi chng ta s khm ph thm nh ng tnh nng m nh m khc c a jQuery.

CSS Selector
Th vi n jQuery h tr g n nh ton b cc CSS Selector chu n t CSS1 cho n CSS3. Chnh vi c ny cho php nh ng ng i lm web khng ph i lo l ng v li u trnh duy t c h tr nh ng Selector m i hay khng ( c bi t l trnh duy t IE) mi n l trnh duy t c b t JavaScript.

Lu : nh ng ng i lm web c kinh nghi m v trch nhi m lun nn p d ng nguyn t c nng cao lu ti n v ging c p hi ho cho code c a h . H ph i lun ch c ch n r ng trang web lun c hi n th chnh xc, cho d khng c p nh khi JavaScript b t t ho c khi n c b t. Chng ta s bn thm v nguyn t c ny trong su t chi u di c a lo t bi ny.

tm hi u jQuery s d ng CSS Selector nh th no th cch t t nh t l lm b ng v d . Trong v d d i y chng ta s s d ng m t d ng danh sch th ng c dng lm thanh di chuy n trn web. Code HTML s nh sau. <ul id="nav"> <li><a href="#">Home Page</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Forum</a></li> <li><a href="ebook.pdf">Ebooks</a> <ul> <li><a href="#">jQuery</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </li> <li><a href="http://www.jquery.com">Tutorials</a></li> <li><a href="#">Photoshop</a> <ul>

Www.izwebz.com

Demon Warlock

<li><a href="#">Action</a></li> <li><a href="#">Effect</a></li> <li><a href="#">Plugins</a></li> </ul> </li> <li><a href="mailto:email@yahoo.com">Email</a></li> </ul>

Trong o n code HTML

trn chng ta n gi n ch c m t unorder list v i id=nav ng vai tr l menu trnh duy t s nh hnh d i y. y chnh l

chnh. Khi cha c style g p d ng vo n th k t qu khi xem nh d ng m c nh c a trnh duy t cho cc Unorder List.

nh d ng list-item
T t nhin trong v d ny b n hon ton c th s d ng CSS nh d ng menu ny, nhng v chng ta mu n khm ph jQuery nn chng ta t m th i coi nh CSS khng t n t i. Gi s trong v d ny b n mu n nh ng listitem chnh c g ch chn m nh ng ul ph c a n s khng c g ch chn.

.highlight { border-bottom: 1px solid #e6db55; padding: 5px; } Thay v chng ta s thm class tr c ti p vo ti li u HTML, chng ta s s d ng jQuery thm class vo

Www.izwebz.com

Demon Warlock

nh ng list-item t ng 1 nh: Homepage, About Me, Forum, Ebooks, Tutorials, Photoshop v Email. $(document).ready(function() { $('#nav > li').addClass('highlight'); }); Nh bn chng 1, chng ta b t u o n code jQuery v i $(document).ready(), n s ch y ngay khi

DOM c load. Dng th 2 s d ng CSS Child selector (>) thm class='highlight' ch cho list item t ng 1. Ni theo ngn ng c a chng ta th o n code trn c ngha nh sau: jQuery hy tm m i m t list item (li) l con tr c ti p (>) c a thnh ph n c ID l nav (#nav). V i class='highlight' c thm vo, menu c a chng ta c nh sau.

nh d ng cho nh ng list item t ng 2 c r t nhi u cch. Nhng m t trong nh ng cch chng ta s s d ng trong ph n ny l pseudo-class ph nh. B ng cch ny chng ta s i xc nh t t c nh ng item no m khng c class='highlight'. Chng ta s vi t code nh sau: $(document).ready(function() { $('#nav > li').addClass('highlight'); $('#nav li:not(.highlight)').addClass('background'); });

Www.izwebz.com

Demon Warlock

o n code trn c ngha nh sau: 1. Ch n t t c nh ng danh sch l con tr c ti p c a #nav

2. Nh ng danh sch ny ph i khng c class='highlight' (:not(.highlight))

V chng ta s c hnh nh hnh d i, t t nhin b n ph i khai bo class='background' trong file CSS c a mnh.

Attribute Selectors
Attribute Selectors l b Selector ph c a CSS cng r t h u d ng. N cho php chng ta ch n m t thnh ph n no d a vo c tnh HTML c a n nh: thu c tnh Title c a link ho c thu c tnh Alt c a image. V d ch n t t c cc t m hnh c thu c tnh Alt chng ta lm nh sau: $('img[alt]')

Www.izwebz.com

Demon Warlock

 nh d ng cho ng lin k t
N u b n bi t s qua v Regular Expressions trong ngn ng l p trnh nh PHP th Attribute Selector trong jQuery ch u nh h ng b i phng php ny. V d d u (^) dng xc nh gi tr t i i m b t u ho c ($) k t thc c a m t chu i. N cng c th s d ng d u (*) ch m t gi tr t i m t v tr b t k trong m t chu i ho c s d ng d u ch m than (!) bi u th m t gi tr ph nh. Trong ph n CSS ny chng ta s nh d ng cc ng lin k t nh sau:
a { color: #00c; } .email { padding-right: 20px; background: url(images/mail.png) no-repeat right center; } .ebook { padding-right: 20px; background: url(images/pdf.png) no-repeat right center; } .hyperlink { padding-right: 20px; background: url(images/external.png) no-repeat right center; }

Sau chng ta thm 3 class l email, ebook v hyperlink vo nh ng ng lin k t thch h p b ng cch s d ng jQuery. thm m t class vo t t c nh ng ng lin k t email, chng ta s t o m t selector v n s tm t t c nh ng thnh ph n anchor (a) v i thu c tnh href b t u b ng chu i mailto nh sau:

$(document).ready(function() { $('a[href^=mailto:]').addClass('email'); });

thm m t class vo t t c cc ng lin k t n nh ng t p tin .pdf, chng ta s d ng d u $ thay v d u ^ nh .pdf.

$(document).ready(function() { $('a[href^=mailto:]').addClass('mailto'); $('a[href$=.pdf]').addClass('ebook'); });
Www.izwebz.com 6 Demon Warlock

trn. B i v l n ny chng ta ch ch n nh ng ng lin k t no c thu c tnh href k t thc b ng c m

Attribute Selector cng c th c k t h p v i nhau. V d chng ta cng c th thm m t class l hyperlink cho t t c cc ng lin k t v i gi tr href b t u b ng http v ch a c m t
$(document).ready(function() { $('a[href^=mailto:]').addClass('mailto'); $('a[href$=.pdf]').addClass('pdflink'); $('a[href^=http][href*=jquery]').addClass('hyperlink'); });

hyper trong n.

V i 3 class c p d ng nh trn cho cc ng lin k t, chng ta s c k t qu nh hnh d i y. B n s th y c nh m i ng link s c thm m t hnh icon ch cho ng i dng bi t m t cch r t tr c quan l ng lin k t l v ci g.

Selector ring c a jQuery

D ng nh cn cha v a v i nh ng CSS Selector, jQuery c m t h th ng nh ng Selector c a ring n. H u h t nh ng Selector ny u cho php chng ta ch n b t c thnh ph n no trong ti li u HTML. C php cho nh ng Selector ny tng ng v i c php c a CSS pseudo-class, ni m cc selector b t u b ng d u hai ch m (:). V d , ch n th div th 2 c a t p h p nh ng th div c class='horizontal', chng ta c cch

Www.izwebz.com

Demon Warlock

vi t code nh sau: $('div.horizontal:eq(1)'); B n nn lu ph n ny l :eq(1) ch n th div th hai t t p h p tr v b i v JavaScript nh s array b t

u t s 0. Ng c l i, CSS l i l b t u t s 1. Cho nn khi b n s d ng nth-child CSS Selector nh l $ ('div:nth-child(1)') s ch n t t c cc th div l con u tin c a thnh ph n cha m . T t nhin y l di n gi l v y, nhng n u trong th c t th b n nn dng $('div:first-child') th h p l hn.

nh d ng b ng ki u k s c
Hai trong s nh ng jQuery selector r t h u d ng l :odd v :even. Trong v d d i y chng ta s s d ng m t trong hai selector ny nh d ng cho b ng ki u k s c v i code HTML nh sau:
<table> <tr> <td>Movies</td> <td>Actors/ Actresses</td> <td>Year Make</td> </tr> <tr> <td>Terminator</td> <td>arnold schwarzenegger</td> <td>1991</td> </tr> <tr> <td>Die Hard</td> <td>Bruce Willis</td> <td>2000</td> </tr> <tr> <td>Speed</td> <td>Sandra Bullock</td> <td>1997</td> </tr> <tr> <td>Independence Day</td> <td>Will Smith</td> <td>1999</td> </tr> <tr> <td>Armageddon</td> <td>Bruce Willis</td> <td>1997</td> </tr> <tr> <td>Under Siege</td> <td>Steven Seagal</td> <td>1996</td> </tr> <tr> <td>Avatar</td> <td>Unknown</td> <td>2010</td> </tr> </table>
Www.izwebz.com 8 Demon Warlock

By gi b n c th thm style vo stylesheet cho t t c cc dng c a b ng v s d ng m t class='alt' cho nh ng dng ch n.

.alt { background: #dda; } td { padding: 10px; }

Cu i cng chng ta s vi t code jQuery g n class vo cho nh ng dng ch n c a b ng (<tr>).

$(document).ready(function() { $('tr:odd').addClass('alt'); });

B n c th y code

trn c i u g l khng? Odd ti ng Vi t l l v Even l ch n. Chng ta ni s t mu cho y cng tng t nh :eq() trn, b i v :odd v :even

dng ch n nhng l i s d ng :odd? Th c ra v n

s d ng d ng nh s t s 0 nh trong JavaScript. Cho nn dng th nh t m l s 0 (s ch n) v dng th hai m l 1 (s l ). Do v i dng code jQuery nh trn d i y l k t qu chng ta c c.

V n c v nh c gi i quy t

y, nhng n u b n c m t b ng th hai trn cng m t trang th k t qu

l i khng nh b n mu n. V d , dng cu i cng c a b ng trn c mu c a th dng u tin c a b ng k ti p s c mu tr ng. C cch trnh tnh tr ng ny l s d ng :nth-child() Selector. Selector ny c th l y tham s l odd, even ho c ch s . Nhng cng lu b n l :nth-child() l selector duy nh t c a jQuery nh s theo th t t 1. Cho nn t c k t qu nh mong mu n v nh t qun v i nhi u b ng trn trang, chng ta c o n code m i nh sau:
$(document).ready(function() { $('tr:nth-child(even)').addClass('alt'); });
Www.izwebz.com 9 Demon Warlock

By gi gi s chng ta mu n t m cho c t no c cha tn ch Bruce Willis th tr c h t b n ph i thm m t class='red' vo ph n stylesheet v sau th vi t code jQuery nh sau s d ng :contains() Selector.
$(document).ready(function() { $('tr:nth-child(even)').addClass('alt'); $('td:contains(Bruce Willis)').addClass('red'); });

By gi th b ng c a chng ta t m v in ch Bruce Willis.

Ti cng ph i lu v i b n l :contains() Selector c phn bi t gi a IN HOA v in th ng. Cho nn n u b n ch g $('td:contains(bruce willis)') m khng vi t hoa th s khng c c t no c ch n c .

Ph i th a nh n r ng v i v d n gi n nh trn, b n khng c n ph i s d ng jQuery cng t c k t qu nh mong mu n. Tuy nhin, jQuery k t v i v i CSS, l m t l a ch n ph h p cho ki u nh d ng khi m n i dung c t o ra t ng t CSDL v chng ta khng c kh nng chi ph i code HTML cng nh code c xu t ra t PHP ch ng h n.

Form Selector
Khi lm vi c v i form, nh ng selector c a jQuery gip b n ti t ki m th i gian ch n ch nh ng thnh ph n no mnh mu n. B ng bi u sau l nh ng selector c a jQuery lm vi c v i form.

Seletor :text, :checkbox, :radio, :image, :submit, :reset, :password, :file :input

Thnh ph n c ch n Ph n t Input v i thu c tnh c cng tn v i Selector. V d :text s ch n <input type='text' /> Input, textarea, select v cc button

Www.izwebz.com

10

Demon Warlock

:button :enable :disable :checked :selected

Cc ph n t nt v input v i thu c tnh type b ng cc nt Ph n t form c b t (enable) Ph n t form c t t (disable) Nt radio ho c h p ki m c nh d u Cc tu bi n khi c ch n

Cng gi ng nh nh ng Selector khc, form Selector cng c th c k t h p cho i t ng ch n c c th hn. V d chng ta c th ch n t t c cc nt radio c nh d u (ch khng ph i h p ki m) v i $ (':radio:checked') ho c ch n t t c cc tr ng nh p m t kh u v tr ng nh p d li u b t t v i $ (':passowrd, :text:disabled'). Cho d v i jQuery Selector, nhng chng ta v n s d ng nguyn t c c a CSS ch n cc ph n t c n ch n.

Phng php di chuy n trong DOM

Nh ng jQuery selector v a c gi i thi u trn cho php chng ta ch n m t t p h p cc ph n t khi chng ta di chuy n ngang qua ho c d c xu ng cy DOM v ch n l c k t qu . N u y l cch duy nh t ch n cc ph n t th nh ng l a ch n c a chng ta cng b h n ch kh nhi u (m c d trong th c t nh ng selector r t m nh m c bi t l khi mang ra so snh v i cch di chuy n trong DOM truy n th ng). C nhi u tr ng h p khi b n c n ph i ch n cha m ho c ng b c a cc ph n t tr nn quan tr ng, chnh v v y phng php di chuy n trong DOM c gi i thi u. V i nh ng phng php ny chng ta c th i ln, i xu ng, ngang d c ho c xung quanh cy DOM r t d dng. M t vi phng php c ch c nng g n nh tng ng v i nh ng ng i 'anh em' Selector v d v nh d ng b ng ki u k s c trn. Nh trong

trn chng ta thm class='alt' v i $('tr:odd').addClass('alt');

cng c th c vi t l i v i phng php .filter() nh sau: $('tr').filter(':odd').addClass('alt');

Trong a s cc tr ng h p th hai cch trn b tr cho nhau. Hn n a, c bi t l phng php .filter() c c k m nh m ch n c th l y m t hm lm tham s c a n. Hm cho php chng ta t o ra nh ng

php ki m ph c t p xc nh xem m t thnh ph n no c nn c gi l i trong t p h p k t qu tr v . Ni v d chng ta mu n thm m t class cho t t c nh ng ng lin k t ngoi. Jquery khng c selector no c th ti n hnh tc v ny. N u khng c hm trong phng php .filter(), chng ta b t bu c ph i s d ng vng l p nh y qua t ng thnh ph n v ki m tra n ring r . Tuy nhin v i nh ng hm trong phng php .filter() sau, chng ta v n c th d a vo vng l p n c a jQuery v gi cho code c a chng ta g n gng.

Www.izwebz.com

11

Demon Warlock

$('a').filter(function() { return this.hostname && this.hostname != location.hostname; }).addClass('external');

Dng code th 2 l c t p h p cc ph n t <a> v i hai tiu ch sau: 1. N ph i c thu c tnh href v i tn mi n (this.hostname). Chng ta s d ng php ki m ny lo i b nh ng lin k t d ng mailto v nh ng th tng t . 2. Tn mi n m n lin k t t i (this.hostname) khng c gi ng (!=) v i tn mi n c a trang hi n t i (location.hostname).

Ni chnh xc hn th phng php .filter() l p qua t p h p nh ng ph n t ph h p, ki m tra t ng gi tr tr v b ng hm t o. N u hm tr v l false, th ph n t s b lo i kh i t p h p. Cn n u gi tr tr v l true, th ph n t c gi l i. By gi chng ta s xem l i b ng ki u k s c v xem xem c th lm g v i phng php di chuy n ny.

nh d ng t ng c th
v d trn chng ta thm class='red' cho nh ng c ch a ch Bruce Willis. N u by gi chng ta cng mu n nh d ng cho bn c nh ch a Bruce Willis, chng ta c th b t u v i Selector m chng ta t o, v sau ch n gi n n i n v i phng php .next().

$(document).ready(function()

$('td:contains(Bruce Wiliss)').next().addClass('red'); });

B ng c a b n s c nh sau

Www.izwebz.com

12

Demon Warlock

Phng php .next() ch l a ch n cc ph n t ngay st c nh n. t m cho t t c cc ng sau c cha Bruce Willis, chng ta c th s d ng phng php .nextAll(). $(document).ready(function() { $('td:contains(Bruce Wiliss)').nextAll().addClass('red'); }); Bn c nh phng php .next() v .nextAll() chng ta cn c .prev() v prevAll(). Thm n a, .siblings() ch n t t c cc ph n t c cng chung m t c p b c trn DOM, m khng c n quan tm n n xu t hi n tr c ho c sau ph n t c ch n. bao g m c ban u (l c ch a Bruce Willis) v nh ng theo sau n, chng ta c th thm phng php .andSelf(): $(document).ready(function() { $('td:contains(Bruce Wiliss)').nextAll().andSelf().addClass('red'); });

B n cng nn bi t r ng c v s nh ng k t h p c a selector v phng php di chuy n m d a vo chng ta c th ch n cng m t t p h p cc ph n t . V d ny s cho b n th y m t cch khc ch n m i m t trong m t dng m c cha ch Bruce Willis: $(document).ready(function() { $('td:contains(Bruce Willis)').parent().children().addClass('red'); }); y thay v chng ta di chuy n theo ki u ngang hng, chng ta di chuy n ln trn m t b c c a cy DOM (<tr>) v i phng php .parent() v sau ch n t t c cc c a dng b ng phng php .children().

Www.izwebz.com

13

Demon Warlock

K t h p (chaining)
Phng php di chuy n k t h p nh chng ta v a khm ph trn th hi n kh nng k t h p c a jQuery. V i jQuery b n c th ch n t p h p cc ph n t v thao tc nhi u tc v ln chng, t t c trn cng m t dng code. Ki u k t h p ny khng nh ng gi cho code jQuery c sc tch m cn tng kh nng ho t ng c a m. Nhng cho d c hn, b n cng c th tch ra thnh nhi u hng. V d m t dy k t h p cc phng php c th c vi t trn m t dng nh sau: $('td:contains(Bruce Willis)').parent().find('td:eq(1)').addClass('red').end().find('td:eq(2)').addClass ('red');

ho c c t nh ra t ng dng

$('td:contains(Bruce Willis)') // Tm t t c .parent() // Di chuy n ln m t t ng .find('td:eq(1)') // Tm td v i th .addClass('red') // Thm class='red' .end() // quay v v i b m c a ch a Henry t t

cc dng c ch a Bruce Willis

l 1 (dng th

2)

.find('td:eq(2)') // Tm ti p td v i th .addClass('red') // thm class='red'

l 2 (dng 3)

T t nhin cch di chuy n ki u nh trn l lng vng n m c th a thi v khng c trong th c t . B i v c nhi u cch khc n gi n hn, tr c ti p hn. Tuy nhin n cng cho b n th y c s linh ho t tuy t v i m

Www.izwebz.com

14

Demon Warlock

ki u k t h p cho php chng ta. Vi t code ki u k t h p th ny nh l ni m t trng trong m t hi khng ngh . N gip b n t m c tiu nhanh chng, nhng l i kh cho ng i khc hi u c. Cho nn tch n ra v thm comments c th gip b n ti t ki m th i gian v cng s c sau ny n u ph i ch nh s a code.

H ng t i cc thnh ph n DOM
M i m t Selector v h u h t cc phng php c a jQuery u tr v m t i t ng jQuery. y chnh l i u chng ta lun mong i, b i v kh nng ti n hnh vng l p n v k t h p n c th lm. Nhng cng c lc chng ta mu n h ng t i m t ph n t DOM m t cch tr c ti p. V d , chng ta mu n s d ng m t t p h p cc ph n t cho m t th vi n JavaScript khc. Ho c chng ta mu n h ng t i tn th c a m t ph n t , m n l i c s n nh l m t thu c tnh c a ph n t DOM. Tuy tr ng h p ny hi m khi x y ra, jQuery c phng php .get(). h ng t i thnh ph n DOM u tin ch n b i m t i t ng jQuery, chng ta s s d ng .get(0). N u ph n t DOM c n ph i n m trong m t vng l p, chng ta s s d ng .get(index). Nh v y, n u chng ta mu n bi t tn th c a m t thnh ph n v i id='my-element', chng ta s vi t code nh sau:
var myTag = $('#my-element').get(0).tagName;

ti n d ng hn n a, jQuery cung c p cch vi t t t cho phng php .get(). Thay v vi t nh dng code trn, chng ta c th s d ng c p ngo c vung [] ngay ng sau selector:

var myTag = $('#my-element')[0].tagName;

Khng ph i l ng u nhin m c php ny nhn gi ng nh l m t array c a cc phn t DOM, s d ng c p ngo c vung nh l x i l p v t i danh sch cc n t, c bao g m lun c index (trong tr ng h p ny l 0) cng gi ng nh li t ng thnh ph n DOM ra v y.

K t lu n
V i nh ng k nng m chng ta h c trong chng ny, chng ta c th nh d ng cho t ng m t v t ng ph c a m t danh sch s d ng nh ng CSS Selector c b n, p d ng nh ng style khc nhau cho cc lo i ng lin k t khc nhau s d ng Attribute Selector, t m u khc nhau cho b ng k s c b ng cch s d ng jQuery selector nh :odd v :even ho c Selector m i c a CSS l :nth-child(), v cu i cng l t m cho t ng trong b ng b ng cch k t h p cc phng php jQuery. Cho n by gi chng ta s d ng s ki n $ (document).ready() thm class vo t p h p cc ph n t . Trong chng t i, chng ta s khm ph nh ng cch thm class vo nh ng s ki n ng i dng t t o.

Www.izwebz.com

15

Demon Warlock