Giới thiệu về jquery

Chia sẻ: Trần Thị Thanh Hằng | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

106
lượt xem 20
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Vối sự phát triển rất mau lẹ của Internet, người dùng ngày càng quan tâm hơn đến hình thức của một trang web. Trước đây một trang web chỉ cần có banner, nội dung và footer hời hợt là đã được cho là một trang web hoàn chỉnh.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giới thiệu về jquery

Chương 1: Gi i thi u v jQuery V i s phát tri n r t mau l c a Internet, ngư i dùng ngày càng quan tâm hơn ñ n hình th c c a m t trang web. Trư c ñây m t trang web ch c n có banner, n i dung và ít footer h i h t là ñã ñư c cho là m t trang web hoàn ch nh. Nhưng bây gi trang web ñó ph i có banner b t m t, n i dung hay và còn nhi u hi u ng l m t khác n a thì m i có th thu hút ñư c ngư i ñ c. Chính vì th nh ng web designer b t ñ u chú ý ñ n các thư vi n JavaScript m như jQuery ñ t o ra các hi u ng có th tương tác tr c ti p v i ngư i ñ c m t cách nhanh chóng và d dàng hơn r t nhi u là s d ng thu n JavaScript. Nhưng n u b n là ngư i m i làm quen v i jQuery b n s th y không bi t ph i b t ñ u t ñâu vì jQuery cũng gi ng như b t c thư vi n nào khác cũng có r t nhi u functions. Cho dù b n có ñ c ph n tài li u hư ng d n s d ng c a jQuery thì b n v n th y r t ph c t p và khó hi u. Nhưng b n yên tâm m t ñi u là jQuery có c u trúc r t m ch l c và theo h th ng. Cách vi t code c a jQuery ñư c vay mư n t các ngu n mà các web designer ña ph n ñã bi t như HTML và CSS. N u t trư c ñ n nay b n ch là Designer ch không ph i coder, b n cũng có th d dàng h c jQuery vì ki n th c v CSS giúp b n r t nhi u khi b t ñ u v i jQuery. Nh n th y jQuery còn khá m i m v i nhi u b n và nó cũng là thư vi n ñư c ñông ñ o ngư i s d ng. Izwebz gi i thi u ñ n các b n lo t bài v jQuery. Trong lo t bài này chúng ta s tìm hi u v jQuery và các tính năng c a nó. Trư c h t b n nên bi t jQuery có th làm ñư c nh ng gì. Jquery – izwebz.com Demon Warlock
Nh ng gì Jquery có th làm Hư ng t i các thành ph n trong tài li u HTML. N u không s d ng thư vi n JavaScript này, b n ph i vi t r t nhi u dòng code m i có th ñ t ñư c m c tiêu là di chuy n trong c u trúc cây (hay còn g i là DOM = Document Object Model) c a m t tài li u HTML và ch n ra các thành ph n liên quan. Jquery cho phép b n ch n b t c thành ph n nào c a tài li u ñ “v c” m t cách d dàng như s d ng CSS. Thay ñ i giao di n c a m t trang web. CSS là công c r t m nh ñ ñ nh d ng m t trang web nhưng nó có m t như c ñi m là không ph i t t c các trình duy t ñ u hi n th gi ng nhau. Cho nên jQuery ra ñ i ñ l p ch tr ng này, vì v y các b n có th s d ng nó ñ giúp trang web có th hi n th t t trên h u h t các trình duy t. Hơn n a jQuery cũng có th thay ñ i class ho c nh ng ñ nh d ng CSS ñã ñư c áp d ng lên b t c thành ph n nào c a tài li u HTML ngay c khi trang web ñó ñã ñư c trình duy t load thành công. Thay ñ i n i dung c a tài li u. Jquery không ph i ch có th thay ñ i b ngoài c a trang web, nó cũng có th thay ñ i n i dung c a chính tài li u ñó ch v i vài dòng code. Nó có th thêm ho c b t n i dung trên trang, hình nh có th ñư c thêm vào ho c ñ i sang hình khác, danh sách có th ñư c s p x p l i ho c th m chí c c u trúc HTML c a m t trang web cũng có th ñư c vi t l i và m r ng. T t c nh ng ñi u này b n hoàn toàn có th làm ñư c nh s giúp ñ c a API (Application Programming Interface = Giao di n l p trình ng d ng). Tương tác v i ngư i dùng. Cho dù công c b n dùng có m nh m ñ n m y, nhưng n u b n không có quy n quy t ñ nh khi nào nó ñư c s d ng thì công c ñó cũng coi như b . V i thư vi n javaScript như jQuery, nó cho b n nhi u cách ñ tương tác v i ngư i dùng ví d như khi ngư i dùng nh p chu t vào ñư ng link thì s có gì x y ra. Nhưng cái hay c a nó là không làm cho code HTML c a b n Jquery – izwebz.com Demon Warlock
r i tung lên chính là nh các Event Handlers. Hơn n a Event Handler API s b o ñ m r ng trang web c a b n tương thích h u h t v i các trình duy t, ñi u này ñã và ñang làm ñau ñ u r t nhi u các web designer. ng ñ ng cho nh ng thay ñ i c a tài li u. ð tương tác t t v i ngư i dùng, các web T o hi u designer ph i cho ngư i dùng th y ñư c hi u ng gì s x y ra khi h làm m t tác v nào ñó. Jquery cho phép b n s d ng r t nhi u hi u ng ñ ng như m d n, ch y d c ch y ngang v.v.. và n u v n chưa ñ , nó còn cho phép b n t t o ra các hi u ng c a riêng mình. L y thông tin t server mà không c n t i l i trang web. ðây chính là công ngh ngày càng tr nên ph bi n Asynchronous JavaScript And XML (AJAX), nó giúp ngư i thi t k web t o ra nh ng trang web tương tác c c t t và nhi u tính năng. Thư vi n jQuery lo i b s ph c t p c a trình duy t trong quá trình này và cho phép ngư i phát tri n web có th t p trung vào các tính năng ñ u cu i. ðơn gi n hoá các tác v javaScript. Ngoài nh ng tính năng như ñã nêu trên, jQuery còn cho phép b n vi t code javaScript ñơn gi n hơn nhi u so v i cách truy n th ng như là các vòng l p và ñi u khi n m ng. Jquery – izwebz.com Demon Warlock
T i sao jQuery làm vi c t t Ngư i dùng ngày càng quan tâm hơn ñ n Dynamic HTML, ñó cũng là n n móng cho s ra ñ i c a nh ng javaScript Frameworks. Có frameworks thì ch t p trung vào m t vài tính năng v a nên trên, có cái thì ráng bao g m t t c nh ng hi u ng, t p tính và nh i nhét vào m t package. ð ñ m b o là m t thư vi n “nhanh g n nh ” nhưng v n “ngon b r ” v i các tính năng ñã nêu trên, jQuery s d ng nh ng chi n lư c sau: T n d ng ki n th c v CSS. Các jQuery Selector ho t ñ ng y chang như CSS Selector v i cùng c u trúc và cú pháp. Chính vì th thư vi n jQuery là c a ngõ cho các web designer mu n thêm nhi u tính năng hơn n a cho trang web c a mình. B i vì ñi u ki n tiên quy t ñ tr thành m t web designer chuyên nghi p là kh năng s d ng CSS thu n th c. V i ki n th c có s n v CSS, b n s có s kh i ñ u thu n l i v i jQuery. H tr Plugin. ð tránh b rơi vào tr ng thái quá t i tính năng, jQuery cho phép ngư i dùng t o và s d ng Plugin n u c n. Cách t o m t plugin m i cũng khá ñơn gi n và ñư c hư ng d n c th , chính vì th c ng ñ ng s d ng jQuery ñã t o ra m t lo t nh ng plugin ñ y tính sáng t o và h u d ng. Xoá nhoà s khác bi t gi a trình duy t. M t th c t t n t i là m i m t h th ng trình duy t l i có m t ki u riêng ñ ñ c trang web. D n ñ n m t ñi u làm ñau ñ u các web designer là làm th nào ñ cho trang web có th hi n th t t trên m i trình duy t. Cho nên ñôi khi ngư i ta ph i làm h n m t ph n code ph c t p ñ ñ m b o r ng trang web c a h ñư c hi n th g n như tương ñ ng các trình duy t ph bi n. Jquery giúp b n thêm m t l p b o v cho s khác bi t c a trình duy t và giúp quá trình này di n ra d dàng hơn r t nhi u. Jquery – izwebz.com Demon Warlock
Luôn làm vi c v i Set. Ví d khi chúng ta yêu c u jQuery tìm t t c các thành ph n có class là delete và n chúng ñi. Chúng ta không c n ph i loop qua t ng thành ph n ñư c tr v . Thay vào ñó, nh ng phương pháp như là hide() ñư c thi t k ra ñ làm vi c v i set thay vì t ng thành ph n ñơn l . K thu t này ñư c g i là vòng l p n, ñi u ñó có nghĩa là chúng ta không ph i t vi t code ñ loop n a mà nó v n ñư c th c thi, chính vì th code c a chúng ta s ng n hơn r t nhi u. Cho phép nhi u tác v di n ra trên cùng m t dòng. ð tránh ph i s d ng nh ng bi n t m ho c các tác v l p t n th i gian, jQuery cho phép b n s d ng ki u l p trình ñư c g i là Chaining cho h u h t các method c a nó. ði u ñó có nghĩa là k t qu c a các tác v ñư c ti n hành trên m t thành ph n chính là thành ph n ñó, nó s n sàng cho tác v ti p theo ñư c áp d ng lên nó. Nh ng chi n lư c ñư c nêu trên giúp kích thư c c a jQuery r t nh bé ch kho ng trên dư i 20Kb d ng nén. Nhưng v n ñ m b o cung c p cho chúng ta nh ng k thu t ñ giúp code trên trang nh g n và m ch l c. Jquery s dĩ tr nên ph bi n là do cách s d ng ñơn gi n và bên c nh ñó còn có m t c ng ñ ng s d ng m nh m v n ngày ngày phát tri n thêm Plugin và hoàn thi n nh ng tính năng tr ng tâm c a jQuery. Cho dù th c t là v y, nhưng jQuery l i là thư vi n javaScript hoàn toàn mi n phí cho m i ngư i s d ng. T t nhiên nó ñư c b o v b i lu t GNU Public License và MIT License, nhưng b n c yên tâm là b n có th s d ng nó trong h u h t các trư ng h p k c thương m i l n cá nhân. Jquery – izwebz.com Demon Warlock
T o trang web ñ u tiên v i s h tr c a jQuery B i vì jQuery là m t thư vi n JavaScript do v y ñ s d ng nó b n phài chèn nó vào trang web thì m i có th s d ng ñư c. Có hai cách ñ chèn jQuery vào m t trang web. 1. T host jQuery Vào trang ch c a jQuery (www.jquery.com) và download phiên b n m i nh t. Thư ng thì có 2 phiên b n c a jQuery cho b n download. Phiên b n chưa nén dành cho nh ng ngư i phát tri n và ñang h c như b n. Còn phiên b n nén kia dành cho ph n s d ng tr c ti p trên trang vì nó có dung lư ng nh hơn r t nhi u so v i phiên b n chưa nén. B n không c n ph i cài ñ t jQuery, b n ch c n ñ t ñư ng link t i thư vi n ñó là ñư c. B t c khi nào b n c n s d ng jQuery, b n ch c n g i nó trong tài li u HTML ñ n nơi lưu tr nó trên host c a b n. 2. Dùng phiên b n có s n trên server c a Google Ngoài cách trên ra b n cũng có th s d ng phiên b n nén c a jQuery có s n trên server c a Google. S d ng cách này có 2 ñi u l i là a) ti t ki m băng thông cho trang web c a b n và b) jQuery s ñư c load nhanh hơn n u máy c a ngư i dùng ñã cache jQuery. Tuy nhiên trong ph n s p t i chúng ta s s d ng phiên b n có s n trên server c a Google mà không c n ph i download v máy. Chu n b tài li u HTML Trong h u h t các ví d ñư c s d ng trong lo t bài này thì có 3 thành ph n ñư c s d ng nhi u nh t ñó chính là tài li u HTML, Stylesheet CSS và m t tài li u JavaScript ñ th c hi n l nh trên ñó. Trong ví d ñ u tiên chúng ta s s d ng m t tài li u HTML ñơn gi n v i m t header, sidebar, content và footer. Trong ph n content s có 3 ño n văn b n và m t s class có s n. T t nhiên b n ph i s d ng CSS ñ ñ nh d ng cho tài li u HTML này. B i vì ñây là tutorial v jQuery cho nên tôi s không Jquery – izwebz.com Demon Warlock
gi i thích v các thu c tính cũng như ch c năng c a CSS. N u có ñi m nào không rõ b n có th tham kh o ph n CSS ngay trên izwebz. jQuery Introduction jQuery Introduction Home Page About Me Forum Ebooks Tutorials Photoshop Email Lorem ipsum dolor sit amet some text here Jquery – izwebz.com Demon Warlock
Lorem ipsum dolor sit amet some text here Lorem ipsum dolor sit amet some text here ©2010 Izwebz - Demon Warlock ño n code trên b n d dàng nh n th y r ng thư vi n jQuery ñư c ñ t dư i Stylesheet. ðây là m t ñi m r t quan tr ng mà b n c n lưu ý là th t c a các file khi g i. Ban ñ u ph i là CSS load trư c, khi trang web ñã load xong ph n CSS thì chúng ta m i thêm vào ph n thư vi n jQuery cu i cùng m i là code jQuery chúng ta t vi t ra. N u không khi code jQuery c a b n s không làm vi c ñúng như mong ñ i n u thư vi n jQuery chưa ñư c load. Jquery – izwebz.com Demon Warlock
B t ñ u code jQuery Bây gi b n m trình so n th o code lên và t o m t file tên là first-jquery.js và file này ñã ñư c chúng ta chèn vào trong dòng code: Gõ vào file v a t o 3 dòng code như sau: $(document).ready(function() { $('.text').addClass('important'); }); Thao tác cơ b n nh t c a jQuery là ch n m t ph n nào ñó c a tài li u HTML. B n ti n hành nó b ng cách s d ng hàm $(). Thư ng thì n m gi a d u ngo c () là m t chu i dư i d ng tham s , nó có th là nh ng CSS Selectors. Trong ví d này chúng ta mu n tìm t t c nh ng thành ph n nào có class=”text”, cú pháp gi ng như khi b n vi t code CSS v y. T t nhiên nh ng bài sau chúng ta s tham kh o thêm nhi u nh ng l a ch n khác hay hơn n a. Trong chương 2 chúng ta s nghiên c u m t vài cách khác ñ l a ch n các thành ph n trong tài li u HTML. Hàm $() chính là m t jQuery Object, ñây là nên móng cho t t c nh ng gì chúng ta s h c t bây gi . Jquery Object bao g m không ho c nhi u thành ph n DOM và cho phép chúng ta tương tác v i chúng b ng nhi u cách. Trong trư ng h p này chúng ta mu n thay ñ i cách hi n th c a nh ng ph n này trong trang, chúng ta th c hi n nó b ng cách thay ñ i class c a nó. Thêm vào m t class m i Phương pháp .addClass(), cũng gi ng nhau h u h t các phương pháp jQuery khác, ñư c ñ t tên theo ch c năng c a nó. Khi ñư c g i, nó s thêm m t class vào thành ph n chúng ta ñã ch n. Tham s duy nh t c a nó là tên class s ñư c thêm vào. Phương pháp này và ñ i ngư c v i nó là .removeClass(), s cho phép chúng ta quan sát jQuery ho t ñ ng như th nào khi chúng ta khám Jquery – izwebz.com Demon Warlock
phá nh ng phương pháp l a ch n có s n c a jQuery. Còn bây gi , code jQuery c a chúng ta ch ñơn gi n thêm m t class=”important”, và class này ñã ñư c khai báo trong stylesheet v i các thu c tính như vi n ñ và n n h ng nh t. (border: 1px solid red; background: pink;) B n cũng nh n th y r ng chúng ta không ph i ch y m t vòng l p nào ñ thêm class vào các ño n văn b n có cùng chung class. ðây chính là vòng l p n c a các phương pháp jQuery, như trong ví d này là .addClass(), cho nên b n ch ph i g i ñúng m t l n và ch có v y ñ thay ñ i nh ng thành ph n b n mu n trong tài li u. Bây gi n u b n ch y th trang web v a t o trên trình duy t b n s th y 2 ño n văn có cùng class là .text s b tô h ng và có vi n màu ñ . ð n ñây chúng ta ñã k t thúc ph n m t c a lo t bài v jQuery. Trong bài này b n ñã bi t ñư c jQuery có th làm nh ng gì? B n cũng ñã h c ñư c cách ñ s d ng jQuery trên m t tài li HTML và cu i cùng là dùng th m t phương pháp c a jQuery là .addClass(). Jquery – izwebz.com Demon Warlock