Chi tiet Jquery

<span class='text_page_counter'>(1)</span>1.1 JQUERY 1.1.1 JQUERY LÀ GÌ 1.1.1.1 Giới thiệu: Với sự phát triển rất nhanh chóng 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 sử dụng. 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 người mới làm quen với jQuery 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ù có đọc phần tài liệu hướng dẫn sử dụng của jQuery thì người lập trình v ẫn th ấy r ất phức tạp và khó hiểu. Nhưng 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. Kiến thức về CSS giúp ích rất nhiều khi bắt đầu v ới jQuery. 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 người dùng c ứ yên tâm là ng ười dùng 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. 1.1.1.2 Những gì Jquery có thể làm 1.1.1.2.1 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, người dùng 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 người dùng 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. 1.1.1.2.2 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 người dùng có thể sử dụng nó để giúp trang.

<span class='text_page_counter'>(2)</span> 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 người dùng 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). 1.1.1.2.3 Tương tác với người dùng. Cho dù công cụ người dùng dùng có mạnh mẽ đến mấy, nhưng n ếu ng ười dùng 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 người dùng 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 ng ười dùng 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 người dùng 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. 1.1.1.2.4 Tạo hiệu ứ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 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 người dùng 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 người dùng tự tạo ra các hiệu ứng của riêng mình. 1.1.1.2.5 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 người dùng 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..

<span class='text_page_counter'>(3)</span> 1.1.1.3 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êu ở 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: 1.1.1.3.1 Tận dụng kiến thức về CSS. Các jQuery Selector hoạt động giống 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, người dùng sẽ có sự khởi đầu thuận lợi với jQuery. 1.1.1.3.2 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. 1.1.1.3.3 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 người dùng 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. 1.1.1.3.4 Luôn làm việc với Set. Ví dụ khi 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, 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à người lập trình không phải tự viết code để loop nữa mà nó vẫn được thực thi, chính vì th ế code sẽ ngắn hơn rất nhiều..

<span class='text_page_counter'>(4)</span> 1.1.1.3.5 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 người dùng 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 những kỹ thuật để giúp code trên trang nhỏ gọn và mạch lạc. 1.1.2 JQUERY SELECTORS Thư viện jQuery tận dụng kiến thức và thế mạnh của CSS Selector để cho phép ng ười lập trình nhanh chóng và dễ dàng truy cập nhiều phần tử ho ặc nhóm các ph ần t ử trong DOM (Document Object Model). 1.1.2.1 Document Object Model (Mô hình đối tượng tài liệu) Một trong những tính năng mạnh mẽ nhất của jQuery là khả năng ch ọn các thành phần trong DOM một cách dễ dàng. Nói nôm na thì DOM là một d ạng phả h ệ c ủa các thành phần HTML. Các thành phần này có mối tương quan với nhau nh ư một “gia đình” HTML hạnh phúc tương tự như mối quan hệ trong gia đình như ông bà, b ố m ẹ, anh chị em v.v.. 1.1.2.2 Hàm $() Cho dù sử dụng Selector nào đi chăng nữa trong jQuery, cú pháp luôn 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 cũng có thể được lồng vào dấu ngoặc kép (”) và đặt vào trong hai d ấu ngoặc đơn, cho phép áp dụng các phương pháp jQuery cho tập h ợp các phần tử phù hợp. Ba thành phần quan trọng nhất của jQuery Selector là tên thẻ HTML, ID và Class. Có thể chỉ sử dụng nó hoặc kết hợp với những Selector khác để chọn. Dưới đây là m ột ví dụ về mỗi Selecter khi sử dụng một mình..

<span class='text_page_counter'>(5)</span> Selecto. CSS. jQuery. Giải thích. P. $(‘p’). Chọn tất cả thẻ p. ID. #MyID. $(‘#MyID’). Class. .MyClassName. $(‘.Name’). r Thẻ HTML. Chọn tất cả các thành phần có ID = ‘MyID’ Chọn tất cả các thành. phần có class = ‘Name’ Bảng 4.1 - Ví dụ về mỗi Selecter khi sử dụng. Khi người lập trình thêm các phương pháp vào hàm $(), thì các phần tử nằm trong đối tượng jQuery sẽ được tự động loop và diễn ra ở “hậu trường”. Cho nên người lập trình không cần phải sử dụng bất cứ một vòng lặp nào cả, như vòng lặp for chẳng hạn, điều này thường phải làm trong khi viết code về DOM. 1.1.2.3 Danh sách selector Selector * this. Ví dụ $("*") $(this). #id. $("#lastname"). .class. $(".intro"). element. $("p"). .class.class. $(".intro.demo"). :first :last. $("p:first") $("p:last"). :first-child. $(“li:first-child”). :last-child. $(“li:last-child”). :even :odd. $("tr:even") $("tr:odd"). :eq(index). $("ul li:eq(3)"). :gt(no). $("ul li:gt(3)"). :lt(no). $("ul li:lt(3)"). Sẽ chọn Tất cả các thẻ Thẻ hiện tại Tất cả các thẻ có id=lastname Tất cả các thẻ có class="intro" Tất cả các thẻ p Tất cả các thẻ có classes = "intro" và "demo" Thẻ p đầu tiên Thẻ p cuối cùng Thẻ li đầu tiên trong các thẻ li cùng cha Thẻ li cuối cùng trong các thẻ li cùng cha Các thẻ tr chẵn Các thẻ tr lẻ Phần tử thứ tư trong danh sách (bắt đầu là 0) Danh sách các phần tử với chỉ số > 3 Danh sách các phần tử với chỉ số < 3.

<span class='text_page_counter'>(6)</span> Selector. Ví dụ. :not(selector). $("input:not(:empty)"). :header. $(":header"). :animated. $(":animated"). :contains(text). $(":contains('ed')"). :empty. $(":empty"). :hidden. $("p:hidden"). :visible. $("table:visible"). s1,s2,s3. $("th,td,.intro"). [attribute]. $("[href]"). [attribute=value]. $ ("[href='default.htm']"). [attribute!. $("[href!. =value]. ='default.htm']"). [attribute$=valu e] [attribute^=valu e]. $("[href$='.jpg']"). Sẽ chọn Tất cả các thẻ input không rỗng Tất cả các thẻ header (h1, h2 ...) Tất cả các thẻ đang chạy hiệu ứng chuyển động Tất cả các thẻ có chứa ‘ed’ Tất cả các thẻ rỗng (Không có con cháu) Tất cả các thẻ p có thuộc tính ẩn Tất cả các bảng (thẻ table) đang hiển thị Tất cả các thẻ th, td và các phần tử có class = intro Tất cả các thẻ có thuộc tính href Tất cả các thẻ có thuộc tính href = "default.htm" Tất cả các thẻ có thuộc tính href có giá trị không phải là "default.htm" Tất cả các thẻ có thuộc tính href có giá trị kết thúc bởi ".jpg" Tất cả các thẻ có thuộc. $("[href^='jquery_']"). tính href có giá trị bắt đầu bởi "jquery_". :input. $(":input"). :text. $(":text"). :password. $(":password"). Tất cả các thẻ input Tất cả các thẻ input có thuộc tính type="text" Tất cả các thẻ input có thuộc tính type="password".

<span class='text_page_counter'>(7)</span> Selector. Ví dụ. :radio. $(":radio"). :checkbox. $(":checkbox"). :submit. $(":submit"). :reset. $(":reset"). :button. $(":button"). :image. $(":image"). :file. $(":file"). :enabled. $(":enabled"). :disabled. $(":disabled"). :selected. $(":selected"). :checked. $(":checked"). Sẽ chọn Tất cả các thẻ input có thuộc tính type="radio" Tất cả các thẻ input có thuộc tính type="checkbox" Tất cả các thẻ input có thuộc tính type="submit" Tất cả các thẻ input có thuộc tính type="reset" Tất cả các thẻ input có thuộc tính type="button" Tất cả các thẻ input có thuộc tính type="image" Tất cả các thẻ input có thuộc tính type="file" Tất cả các thẻ input đang có hiệu lực Tất cả các thẻ input đang bị vô hiệu hoá Tất cả các thẻ input đang được chọn Tất cả các thẻ input đã. được đánh dấu Bảng 4.2 - Danh sách selector. 1.1.2.4 Duyệt tập hợp. Kết quả sau khi lựa chọn là 1 tập hợp, có th ể làm vi ệc tr ực ti ếp trên t ập h ợp cũng như duyệt qua từng phần tử trong tập hợp và thực hiện những lệnh khác nhau cho từng phần tử. Để duyệt qua từng phần tử trong tập hợp của jQuery cần s ử d ụng phương pháp .each, tương tự như vòng lặp foreach của c#: Cấu trúc: .each( function(index, element) ) Trong đó index là chỉ số của phần tử đang được duyệt, element là phần tử đang được duyệt. Ví dụ: $('li').each(function(index) { alert(index + ': ' + $(this).text()); });.

<span class='text_page_counter'>(8)</span> Và $('li').each(function(index, element) { alert(index + ': ' + $(element).text()); }); Cho kết quả như nhau. Và khi không cần sử dụng tới index thì ch ỉ c ần khai báo function(){…} Cũng như foreach, .each cũng cho phép ngắt vòng lặp n ửa ch ừng. Ng ắt vòng l ặp b ằng cách thêm lệnh return false vào thân của function:.

<span class='text_page_counter'>(9)</span> $('li').each(function(index, element) { alert(index + ': ' + $(element).text()); if(index>2) return false; }); 1.1.2.5 Lọc lại kết quả, di chuyển trong cây DOM. Mặc dù cấu trúc select của jQuery đã cực kỳ mạnh nhưng v ẫn ch ưa thoã mãn đ ược một số nhu cầu nâng cao như muốn chọn các phần tử nhưng l ại thoả m ột s ố ràng buộc chẳng hạn như ràng buộc về cha, con hay anh em hay nh ững ràng bu ộc nâng cao khác. jQuery cho chép thêm, bớt, lọc lại kết qu ả đã ch ọn cũng nh ư di chuy ển t ập h ợp kết quả sang cha, con, anh em. 1.1.2.5.1 Chỉnh sửa tập kết quả . .add(). . .andSelf(). . .contents(). . .end(). 1.1.2.5.2 Di chuyển tập kết quả . .children(). . .closest(). . .find(). . .next(). . .nextAll(). . .nextUntil(). . .offsetParent(). . .parent(). . .parents(). . .parentsUntil(). . .prev(). . .prevAll(). . .prevUntil(). . .siblings(). 1.1.2.5.3 Lọc kết quả . .eq(). . .filter().

<span class='text_page_counter'>(10)</span> . .first(). . .has(). . .is(). . .last(). . .not(). . .map(). . .slice(). 1.1.3 SỰ KIỆN JavaScript có một số cách được lập sẵn để phản ứng với những tương tác của ng ười dùng và những sự kiện khác. jQuery nâng cao và mở r ộng những c ơ ch ế qu ản lý s ự ki ện cơ bản để giúp nó có cú pháp đẹp hơn, tiết kiệm thời gian h ơn và t ất nhiên cũng m ạnh mẽ hơn so với JavaScript truyền thống rất nhiều. 1.1.3.1 Định thời gian thực thi code $(document).ready() là cách của jQuery thực hiện các tác vụ tương đương với cách mà JavaScript thực hiện tác vụ với onload event được lập sẵn. Thực tế thì hai cách này đều có tác dụng giống nhau, nhưng chúng lại kích hoạt tác vụ ở những th ời đi ểm h ơi khác nhau. Sự kiện window.onload được kích hoạt khi mà trình duyệt đã hoàn toàn load xong tài liệu. Điều này có nghĩa rằng mọi phần tử trên trang đã sẵn sàng để được thao tác b ởi JavaScript. Đây chính là một điểm thuận lợi để chúng ta viết code mà không ph ải lo lắng về trật tự load. Mặt khác, bộ quản lý đăng ký sử dụng $(document).ready() được kích hoạt khi DOM hoàn toàn sẵn sàng để sử dụng. Điều này cũng có nghĩa rằng mọi thành phần có th ể được truy cập bởi code của chúng ta, nhưng không nhât thiết là tài li ệu liên quan (flash và image) đã được download. Ngay sau khi HTML được download và chuy ển qua cây DOM, code có thể được thực thi. Lưu ý: Để đảm bảo rằng trang web vẫn có định dạng trước khi code JavaScript đ ược thực hiện, người ta thường đặt <link rel=”stylesheet”> đằng tr ước th ẻ <script> trong phần <head> của tài liệu. Ví dụ: một trang thư viện hình ảnh, trang đó bao gồm nhiều hình có dung l ượng l ớn mà có thể ẩn, hiện, di chuyển hoặc thao tác với jQuery. Nếu bây gi ờ thi ết l ập giao diện sử dụng sự kiện onload, thì người dùng sẽ phải đợi cho đến khi mọi tấm hình đã được download trước khi họ có thể sử dụng trang web. Hoặc tệ hơn, nếu những cách.

<span class='text_page_counter'>(11)</span> xử lý chưa được gán cho các phần tử có cách xử lý mặc định riêng như là các đ ường liên kết, thì việc tương tác với người dùng sẽ tạo ra những đi ều không mong đ ợi. Tuy nhiên khi sử dụng $(document).ready(), thì giao diện sẽ sẵn sàng để s ử dụng s ớm hơn rất nhiều với những cách xử lý mong muốn. Lưu ý: Cách sử dụng $(document).ready() luôn được ưa chuộng hơn là s ử dụng b ộ quản lý onload, nhưng bởi vì những tệp tin hỗ trợ có thể ch ưa được load, cho nên những thuộc tính như độ cao và chiều rộng của tấm hình có thể chưa có s ẵn trong lúc này. Nếu thực sự cần thiết, có thể sử dụng bộ quản lý onload (hoặc hay h ơn có th ể s ử dụng jQuery để thiết lập bộ quản lý cho load event). Hai cách này hoàn toàn t ương thích với nhau. 1.1.3.2 Nhiều đoạn mã trên cùng một trang Cách thường dùng để đăng ký bộ quản lý sự kiện thông qua JavaScript là gán một hàm cho thuộc tính tương ứng của phần tử DOM. Giả sử đã định nghĩa một hàm: function doStuff() { //làm một cái gì đó } Sau đó gán nó trong phần code HTML như sau: <body onload=”doStuff();”> Hoặc gán nó trong code JavaScript: window.onload = doStuff; Hai cách này đều thực thi hàm khi trang được load. Nhưng điểm mạnh c ủa cách th ứ hai nằm ở chỗ những cách xử lý được tách rời khỏi mã HTML. Nếu chỉ với một hàm thì cách này cũng sử dụng được. Nhưng nếu thêm một hàm nữa: function doOtherStuff() { //làm một tác vụ khác } Sau đó thử chạy hàm này khi trang được load window.load = doOtherStuff; Hàm thứ hai sẽ thắng hàm đầu tiên. Thuộc tính .onload chỉ có th ể một lúc ch ứa m ột hàm tham chiếu, cho nên không thể thêm vào cách xử lý hiện t ại. C ơ ch ế $ (document).ready() giải quyết trường hợp này rất êm xuôi. Mỗi một lần phương thức được gọi, nó sẽ thêm một hàm mới vào danh sách cách xử lý n ội bộ, nên khi trang.

<span class='text_page_counter'>(12)</span> được load, tất cả các hàm sẽ được thực hiện. Các hàm sẽ th ực hi ện theo th ứ t ự mà chúng được đăng ký. 1.1.3.3 Cách viết tắt cho code ngắn gọn Kết cấu $(document).ready() thực chất là gọi phương thức .ready() cho một đối tượng jQuery đã tạo ra từ phần tử DOM. Hàm $() cung cấp cách viết t ắt b ởi vì nó là một tác vụ phổ biến. Khi được gọi mà không có tham số, thì hàm này sẽ ho ạt đ ộng khi tài liệu đã sẵn sàng. Cho nên thay vì viết: $(document).ready(function() { //code ở đây }); Thì viết: $().ready(function() { //code ở đây }); Hơn nữa, hàm $() có thể lấy một hàm khác làm tham số cho nó. Cho cách viết nh ư sau cũng cho kết quả tương tự: $(function() //code ở đây{ }); 1.1.3.4 Cùng làm việc với những thư viện khác Trong một vài trường hợp cần phải sử dụng nhiều hơn một thư viện JavaScript trên cùng một trang. Bởi vì nhiều thư viện cùng sử dụng ký hi ệu nh ận d ạng $ do nó ngắn và thuận tiện, cho nên phải tránh xảy ra xung đột giữa những tên này. jQuery cung cấp một phương thức gọi là .noConflict() để trả ký hiệu nhận dạng $ về cho các thư viện khác. Cách sử dụng phương thức .noConflict() như sau: <script src="prototype.js" type="text/javascript"></script> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.noConflict(); </script> <script src="myscript.js" type="text/javascript"></script> Đầu tiên thư viện Prototype được gọi. Sau đó là bản thân jQuery được gọi và nó sẽ s ử dụng $ cho nó. Tiếp theo phương pháp .noConflict() được gọi để giải phóng $, quyền.

<span class='text_page_counter'>(13)</span> điều khiển bây giờ lại quay trở về với thư viện được gọi đầu tiên, ở đây là Prototype. Bây giờ code có thể sử dụng cả hai thư viện, nhưng bất cứ khi nào sử d ụng m ột phương thức jQuery thì cần phải sử dụng jQuery thay vì dấu $ làm ký hiệu nhận dạng. Phương thức .ready() còn có một điểm nữa có thể giúp trong trường hợp này. Function trong .ready có thể nhận một tham số đơn: chính là bản thân đ ối t ượng jQuery. Điều này cho phép đặt lại tên cho nó mà không sợ bị xung đột. jQuery(document).ready(function($) { //trong đây, chúng ta có thể sử dụng $ bình thường. }); Hoặc sử dụng kiểu viết tắt ở trên: jQuery(function($) { //code sử dụng $ }); 1.1.3.5 Sự kiện cơ bản Có nhiều lúc người lập trình muốn thực hiện một tác v ụ nào đó vào nh ững th ời đi ểm mà không chỉ là lúc trang được load. Cũng như với JavaScript cho phép chúng ta đón chặn sự kiện load trang với <body onload=””> hoặc window.onload. Nó cung cấp điểm neo cho những sự kiện được người dùng khởi xướng như: nhấp chuột (onclick), trường nhập liệu bị thay đổi (onchajnge) và cửa sổ thay đổi kích thước (onresize). Khi được gán trực tiếp vào các phần từ trong DOM, những cách này cũng có m ặt h ạn ch ế giống như những điều đã nói về onload. Cho nên, jQuery có những cách c ải ti ến h ơn để xử lý những sự kiện này. Cơ bản nhất là sử dụng hàm .blind(Tên sự kiện, hàm xử lý) theo sau 1 jQuery selector như sau: $(document).ready(function() { $('#switcher-green').bind('click', function() { $('body').addClass('green'); }); }); Đoạn mã trên bắt sự kiện click của DOM Element có id là switcher-green, khi s ự ki ện click được bắt thì thêm Class cho thẻ body..

<span class='text_page_counter'>(14)</span> 1.1.3.6 Những sự kiện viết tắt Gắn một bộ xử lý cho một sự kiện (ví dụ như là một sự kiện click) rất th ường xảy ra, cho nên jQuery cung cấp một cách ngắn gọn hơn. Đ ó chính là những phương pháp viết tắt sự kiện, nó hoạt động giống như khi sử dụng .bind() nhưng tiết kiệm được vài chữ. Ví dụ, có thể sử dụng .click() thay vì .bind() như sau: $(document).ready(function() { $('#switcher .button').click(function() { $('body').removeClass(); }); }); Những phương pháp viết tắt sự kiện như thế này tồn tại với tất cả những sự ki ện DOM tiêu chuẩn: blur. focus. mousedown. resize. change. keydown. mousemove. scroll. click. keypress. mouseout. select. dblclick. keyup. mouseover. submit. error. load. mouseup. unload. Mỗi phương pháp viết tắt sẽ gán một bộ xử lý vào một sự kiện với tên tương ứng 1.1.3.7 Sự kiện phức hợp Mỗi một phương thức xử lý sự kiện của jQuery đều tương ứng trực tiếp với một sự kiện thuần JavaScript. Tuy nhiên, jQuery có một vài bộ xử lý riêng được thêm vào cho dễ sử dụng và tối ưu hoá việc tương thích các trình duyệt. Một trong nh ững ph ương thức này chính là .ready(). Hai phương thức .toggle() và .hover() là hai bộ x ử lý s ự ki ện tuỳ chỉnh nữa của jQuery. Chúng đều được gọi là bộ xử lý sự kiện ph ức h ợp b ởi vì chúng tương tác với người dùng và phản ứng lại với họ sử dụng nhiều hơn một hàm. 1.1.3.7.1 Phương thức .toggle() Phương thức .toggle() có thể lấy hai hoặc nhiều tham số, mỗi một tham số là m ột hàm. Khi nhấp chuột lần đầu sẽ chạy hàm thứ nhất, nhấp chuột lần thứ hai sẽ kích hoạt hàm thứ hai v.v.. Khi mỗi hàm đã được kích hoạt, vòng l ặp l ại b ắt đ ầu t ừ hàm nhứ nhất. Với .toggle(), chúng ta có thể tiến hành thêm bớt Class, thay đ ổi ki ểu dáng khá đơn giản:.

<span class='text_page_counter'>(15)</span> $(document).ready(function() { $('#switcher h3').toggle(function() { $('#switcher .button').addClass('hidden'); }, function() { $('#switcher .button').removeClass('hidden'); }); }); Sau khi nhấp chuột một lần nút sẽ được thêm class hidden, Nhấp chuột thêm lần nữa sẽ được bỏ class hidden. Có thể sử dụng phương thức .toggleClass() để tự động kiểm tra sự hiện diện của class trước khi thêm hoặc loại bỏ nó : $(document).ready(function() { $('#switcher h3').click(function() { $('#switcher .button').toggleClass('hidden') }); }); Trong trường hợp này, .toggleClass() là giải pháp hay hơn, nhưng .toggle() là cách linh hoạt hơn khi tiến hành hai hoặc nhiều tác vụ khác nhau. 1.1.3.7.2 Phương thức .hover() CSS cung cấp một pseudo-class gọi là :hover, cho phép styesheet chi phối m ột thành phần khi người dùng di chuột qua nó. Nhưng trong IE6, ch ức năng này b ị gi ới h ạn chỉ với những đường liên kết, cho nên chúng ta không s ử d ụng nó cho t ất c ả các trình duyệt được. Thay vào đó, jQuery cho phép chúng ta sử dụng JavaScript đ ể thay đổi kiểu dáng của một phần tử và có thể tiến hành bất cứ tác v ụ nào lên nó. Kể cả khi di chuột lên phần tử và di chuột ra khỏi phần tử đó. Phương thức .hover() lấy hai tham số, giống như ví dụ về .toggle() ở trên. Trong trường hợp này, hàm đầu tiên sẽ được thực hiện khi chuột di qua nó và hàm thứ hai sẽ được kích hoạt khi chuột ra khỏi nó. Chúng ta có thể thay đổi class cho các nút tại thời điểm này để tạo ra hiệu ứng rollover:.

<span class='text_page_counter'>(16)</span> $(document).ready(function() { $('#switcher h3').hover(function() { $('#switcher .button').addClass('hover'); }, function() { $('#switcher .button').removeClass('hover'); }); }); Sử dụng .hover() cũng giúp chúng ta tránh được những rắc rối tạo ra bởi lan truy ền sự kiện (event propagation) trong JavaScript. 1.1.3.8 Đường đi của một sự kiện Khi một sự kiện xảy ra trên một trang, toàn bộ cấu trúc bậc thang của các phần tử DOM đều có cơ hội để xử lý sự kiện. Ví dụ có một mô hình như sau:. Hình 4.1 - Mô hình tab trên 1 trang web Với mỗi một sự kiện, sẽ có nhiều phần tử có thể chịu trách nhiệm x ử lý. Ví d ụ khi đường link ở ví dụ trên được bấm thì ba thành phần như <div>, <span> và <a> đều có cơ hội để phản ứng lại click đó. Bởi vì cả 3 thành phần trên đều nằm dưới con tr ỏ chuột của người dùng. Có một cách cho phép nhiều phần tử phản ứng lại v ới một click đ ược g ọi là Event Capturing. Với Event Capturing, thì sự kiện được gửi tới phần tử chung nhất sau đó nó đi dần vào những phần tử cụ thể hơn. Ở ví dụ, thì sự kiện sẽ ch ạy qua thẻ div, sau đó đến span và cuối cùng là thẻ a.. Hình 4.2 - Luồng sự kiện.

<span class='text_page_counter'>(17)</span> Cách đối lập với cách trên được gọi là Even Bubbling (sự kiện bong bóng :-s). Sự kiện được gửi tới thành phần cụ thể nhất, và sau khi phần tử này đã có cơ h ội đ ể ph ản ứng, sự kiện sẽ “thổi bong bóng” lên những thành phần chung hơn. Trong ví dụ của chúng ta thì thẻ a sẽ xử lý sự kiện trước, sau đó là thẻ span và div là cuối cùng. Chẳng có gì là ngạc nhiên khi những người phát triển trình duy ệt quy ết đ ịnh nh ững mô hình khác nhau cho sự lan truyền sự kiện. Hệ thống DOM tiêu chu ẩn sau này m ới dần được phát triển thì định nghĩa rằng cả hai cách trên nên là như sau: đ ầu tiên s ự kiện bị “bắt” bởi những thành phần chung nhất rồi mới đến những phần tử cụ thể hơn, sau đó sự kiện sẽ được “nổi bong bóng” lên trên đỉnh của cây DOM. B ộ x ử lý s ự kiện có thể được đăng ký ở một trong hai quá trình trên. Tiếc là không phải toàn bộ các trình duyệt đều áp dụng tiêu chu ẩn m ới này, và ở những trình duyệt có hỗ trợ Capture thì người ta phải tự tay bật tính năng đó. Đ ể tương thích với mọi trình duyệt, jQuery luôn đăng ký bộ x ử lý s ự ki ện trong quá trình “bong bóng” của mô hình. 1.1.3.9 Xử lý sự kiện với tham số event Khai báo và sử dụng tham số event như sau: $('#switcher').click(function(event) { if(event.target == this) { $('#switcher .button').toggleClass('hidden') } } Đoạn code này đảm bảo rằng đối tượng được click vào chỉ là <div id=’switcher’>, chứ không phải là các phần tử phụ của nó..

<span class='text_page_counter'>(18)</span> Phương thức event.currentTarget event.data event.isDefaultPrevented() event.isImmediatePropagationStopp ed() event.isPropagationStopped() event.pageX event.pageY. event.preventDefault(). event.relatedTarget. Ý nghĩa DOM element hiện tại trong quá trình lan truyền sự kiện Chứa những dữ liệu tuỳ chọn để hàm blink xử lý sự kiện Trả về true khi event.preventDefault() được gọi Trả về true khi event.stopImmediatePropagation() được gọi Trả về true khi event.stopPropagation() được gọi Vị trí chuột tương đối so với cạnh trái của tài liệu Vị trí chuột tương đối so với cạnh trên của tài liệu Ngăn chặn các hành động mặc định của sự kiện (ví dụ như mở link khi bấm vào link từ thẻ a) DOM element khác tham gia vào sự kiện, nếu có Thuộc tính này chứa giá trị cuối cùng được. event.result. trả về bởi hàm xử lý sự kiện được kích hoạt. event.stopImmediatePropagation() event.stopPropagation() event.target. bởi sự kiện này, trừ khi giá trị là undefined Ngăn chặn xử lý sự kiện khác nếu được gọi Chặn sự lan truyền sự kiện trên cây DOM DOM element đã được cài đặt sự kiện này Thuộc tính này trả về số mili giây kể từ. event.timeStamp. ngày 01 tháng 1 1970, khi sự kiện được kích. event.type. hoạt Mô tả bản chất của sự kiện Nút hoặc phí được nhấn cho sự kiện nút. event.which. hoặc phím Bảng 4.3 - Các phương thức có thể được gọi từ tham số event.

<span class='text_page_counter'>(19)</span> 1.1.3.10 Loại bỏ một bộ xử lý sự kiện Có những lúc cần loại bỏ một bộ xử lý sự kiện mà đã được đăng ký từ tr ước, ví d ụ như trạng thái của trang đã thay đổi mà sự kiện đó không còn phù h ợp n ữa. Jquey cung cấp lệnh unbind để xoá bộ xử lý sự kiện. $(‘#switcher’).unbind(‘click’); Sẽ gỡ bỏ xử lý sự kiện click của #switcher và con cháu của nó. 1.1.4 HIỆU ỨNG Các hiệu ứng động của jQuery sẽ làm cho trang web thêm ph ần sinh đ ộng. Jquery cho phép ẩn hiện, trượt lên trượt xuống, hoặc thậm chí tự tạo ra hi ệu ứng cho các thành phần của trang web, có thể cho nó xảy ra cùng một lúc hoặc theo thứ tự định trước. 1.1.4.1 Ẩn hiện 1.1.4.1.1 hide() và show() jQuery cho phép ẩn hiện các phần tử HTML với hai phương thức là hide() và show(): Ví dụ: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); Cú pháp: $(selector).hide(speed,callback); $(selector).show(speed,callback); Tham số tuỳ chọn speed cho phép thiết lập tốc độ hay có th ể hi ểu là th ời gian th ực hiện của hiệu ứng ẩn hoặc hiện và có thể nhận những giá trị sau đây: "slow", "fast", hoặc là số mili giây. Tham số tuỳ chọn callback là một hàm sẽ chạy sau khi thực hiện xong hiệu ứng. Ví dụ về sử dụng tham số speed: $("button").click(function(){ $("p").hide(1000); });.

<span class='text_page_counter'>(20)</span> 1.1.4.1.2 toggle() jQuery cho phép chuyển đổi qua lại giữa 2 hiệu ứng hide() và show() bằng ph ương thức toggle(). Ví dụ ẩn thẻ p nếu nó đang hiển thị và hiển thị thẻ p nếu nó đang bị ẩn: $("button").click(function(){ $("p").toggle(); }); Cú pháp: $(selector).toggle(speed,callback); 1.1.4.2 Fading 1.1.4.2.1 fadeIn() Phương thức fadeIn() dùng để hiện lại phần tử HTML đang bị ẩn, nó tương đối giống với phương thức show(), chỉ khác ở chỗ là hiệu ứng có khác đôi chút, hi ệu ứng sẽ là tăng dần độ trong suốt để hiển thị lại phần tử. Cú pháp: $(selector).fadeIn(speed,callback); Ví dụ về sử dụng phương thức fadeIn() với các tham số khác nhau: $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); 1.1.4.2.2 fadeOut() Ngược lại so với fadeIn(), faceOut() ẩn đi phần tử đang được hiển thị bằng cách giảm dần độ trong suốt của nó. Cú pháp: $(selector).fadeOut(speed,callback);.

<span class='text_page_counter'>(21)</span> Ví dụ về sử dụng phương thức fadeOut() với các tham số khác nhau: $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); 1.1.4.2.3 fadeToggle() jQuery cho phép chuyển đổi qua lại giữa 2 hiệu ứng fadeIn() và fadeOut() bằng phương thức fadeToggle(). Cú pháp: $(selector).fadeToggle(speed,callback); Ví dụ về sử dụng phương thức fadeToggle() với các tham số khác nhau: $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); 1.1.4.2.4 fadeTo() Chưa dừng lại ở 3 phương thức trên, jQuery cung cấp thêm một ph ương th ức là fadeTo() cho phép điều khiển hoàn toàn quá trình làm mờ, ẩn hay hi ện m ột phần tử HTML. fadeTo() sẽ gây hiệu ứng thay đổi độ trong suốt hiện hành sang một đ ộ trong suốt khác với tốc độ được thiết lập trước. (value between 0 and 1). Cú pháp: $(selector).fadeTo(speed,opacity,callback); Có hai tham số bắt buộc là speed quy định tốc độ và opacity quy định độ trong suốt đích (Nhận giá trị từ 0 tới 1) Ví dụ về sử dụng phương thức fadeToggle() với các tham số khác nhau: $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });.

<span class='text_page_counter'>(22)</span> 1.1.4.3 Slide – trượt 1.1.4.3.1 slideDown() Phương thức slideDown() sử dụng để gây hiệu ứng trượt xuống cho một phần tử HTML. Cú pháp: $(selector).slideDown(speed,callback); Ví dụ: $("#flip").click(function(){ $("#panel").slideDown(); }); 1.1.4.3.2 slideUp() Phương thức slideUp() sử dụng để gây hiệu ứng trượt lên cho một phần tử HTML. Cú pháp: $(selector).slideUp(speed,callback); Ví dụ: $("#flip").click(function(){ $("#panel").slideUp(); }); 1.1.4.3.3 slideToggle() Phương thức slideToggle() cho phép chuyển đổi qua lại giữa slideDown() và slideUp(). Cú pháp: $(selector).slideToggle(speed,callback); Ví dụ: $("#flip").click(function(){ $("#panel").slideToggle(); }); 1.1.4.4 Animation – Hoạt hình 1.1.4.4.1 animate() Phương thức animate() được dùng để tạo nên những hiệu ứng theo ý thích. Đây cũng là phương thức tạo hiệu ứng tuyệt nhất của jQuery. Cú pháp:.

<span class='text_page_counter'>(23)</span> $(selector).animate({params},speed,callback); Tham số bắt buộc params dùng để định nghĩa các thuộc tính CSS sẽ tr ở thành hi ệu ứng. 1.1.4.4.2 Hiệu ứng cơ bản: Ví dụ sau đây là cách đơn giản để sửa dụng phương thức animate() tạo hiệu ứng cho thẻ <div>, hiệu ứng ở đây được định nghĩa là thay đổi thông số left của nó t ừ t ừ sang 250px: $("button").click(function(){ $("div").animate({left:'250px'}); }); Lưu ý: Theo mặc định, các phần tử HTML có vị trí cố định và không th ể bị di chuyển. Để áp dụng hiệu ứng thay đổi vị trí, thì trước h ết phải thay đổi thu ộc tính vị trí của nó trong CSS thành relative, fixed hoặc absolute 1.1.4.4.3 Thao tác với nhiều thuộc tính: Lưu ý rằng nhiều thuộc tính CSS có thể được sử dụng kết hợp v ới nhau đ ể t ạo thành hiệu ứng cùng một lúc. Ví dụ: $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); Lưu ý: Hầu hết tất cả các thuộc tính CSS đều có thể tạo thành hiệu ứng nh ờ phương thức animate(). Tuy nhiên cần lưu ý là tất cả các tên thuộc tính có một chút thay đổi về viết hoa, thường: paddingLeft thay cho padding-left, marginRight thay cho margin-right và tương tự với các thuộc tính khác.Ngoài ra hiệu ứng để thay đ ổi màu sắc không đi kèm trong thư viện jQuery gốc. Nếu cần sử dụng hi ệu ứng thay đổi màu sắc thì tải Color Animations plugin về từ jQuery.com.

<span class='text_page_counter'>(24)</span> 1.1.4.4.4 Sử dụng các giá trị tương đối: Ở các ví dụ trên điều sử dụng các giá trị tuyệt đối. Tuy nhiên trên th ực t ế, nhu c ầu sử dụng vị trí tương đối cao hơn nhiều, vì thế ohương thức animate được hỗ trợ để xác định giá trị tương đối (giá trị là tương đối so với giá trị hiện tại của ph ần tử). Điều này được thực hiện bằng cách đặt += hoặc -= ở phía trước giá trị.Ví dụ: $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); 1.1.4.4.5 Sử dụng giá trị được định nghĩa trước Có thể gán giá trị cho hiệu ứng là "show", "hide", hay "toggle": Ví dụ: $("button").click(function(){ $("div").animate({ height:'toggle' }); }); 1.1.4.4.6 Làm hiệu ứng xảy ra lần lượt Theo mặc định, jQuery sử dụng chức năng hàng đợi để chạy các hiệu ứng. Đi ều này có nghĩa là các hiệu ứng sẽ được chạy lần lượt từng cái một theo th ức t ự đ ược cài đặt. Vì vậy khi khai báo nhiều hiệu ứng cho cùng m ột đ ối t ượng, jQuery sẽ dinh ra một hàng đợi nội bộ và chạy hiệu ứng dựa vào hàng đợi đó Ví dụ 1: $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });.

<span class='text_page_counter'>(25)</span> Ví dụ sau đây tạo hiệu ứng cho thẻ <div>: đầu tiên là di chuy ển th ẻ <div> sang phải và sau đó tăng kích thước chữ trong thẻ <div> đó lên:.

<span class='text_page_counter'>(26)</span> $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); 1.1.4.5 Stop – Dừng hiệu ứng. Phương thức stop() của jQuery được sử dụng để dừng hiệu ứng của một phần tử HTML mà đang thực hiện hiệu ứng, trước khi hiệu ứng đó kết thúc. Ph ương thức stop() hoạt động với tất cả các kiểu hiệu ứng của jQuery bao gồm cả sliding, fading và custom animations. Cú pháp: $(selector).stop(stopAll,goToEnd); Tham số tuỳ chọn stopAll xác định liệu hàng đợi hiệu ứng có nên xóa hay không. M ặc định là không(false), có nghĩa là chỉ có các hiệu ứng hiện tại đ ược ngừng lại, cho phép bất kỳ hiệu ứng nào đang đợi được thực hiện sau đó. Tham số tuỳ chọn goToEnd xác định có hoàn thành hi ệu ứng hi ện t ại hay không. M ặc định là không(false). Vì vậy, theo mặc định, phương thức stop () ngừng ngay l ập t ức hiệu ứng trên phần tử được lựa chọn.Ví dụ sau đây là phương thức stop(), không có các tham số: $("#stop").click(function(){ $("#panel").stop(); }); 1.1.4.6 Call back Câu lệnh JavaScript được thực hiện từng dòng. Tuy nhiên, với các hiệu ứng, dòng ti ếp theo của mã có thể được chạy mặc dù hiệu ứng chưa thực hiện xong. Điều này có th ể tạo ra các lỗi. Để ngăn chặn điều này, jQuery cung cấp chức năng g ọi lại (callback). Một chức năng gọi lại được thực hiện sau khi hiệu ứng hiện tại kết thúc. Cú pháp điển hình: $(selector).hide(speed,callback); Ví dụ dưới đây minh hoạ các sử dụng tham số callback để gọi một thông báo khi hi ệu ứng kết thúc:.

<span class='text_page_counter'>(27)</span> $("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); }); Ví dụ dưới đây không sử dụng tham số callback và thông báo hiện ra trước khi hiệu ứng kết thúc: $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); 1.1.5 XỬ LÝ HTML VÀ CSS 1.1.5.1 Lấy nội dung và thuộc tính phần tử HTML. jQuery chứa những phương thức mạnh mẽ để thay đổi cũng như thao tác với các phần tử HTML và các thuộc tính của chúng. 1.1.5.1.1 Lấy nội dung: text(), html() và val() Đơn giản như lại rất hữu dụng, 3 phương thức của jQuery để thao tác trên DOM là: text(). Lấy hoặc gán nội dung văn bản của các phần tử được. chọn html( Lấy hoặc gán nội dung của các phần tử được chọn (Bao ) val(). gồm cả các thẻ HTML) Lấy hoặc gán giá trị cho các trường trên biểu mẫu Bảng 4.4 - Ba phương thức của jQuery để thao tác trên DOM. Ví dụ về sử dụng phương thức text() and html() để lấy giá trị một phần tử HTML và val() để lấy giá trị của một phần tử trên biểu mẫu:.

<span class='text_page_counter'>(28)</span> $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); 1.1.5.1.2 Lấy thuộc tính: attr() Phương thức attr() của jQuery được dùng để lấy giá trị của một thu ộc tính bất kỳ của một phần tử HTML. Ví dụ về cách lấy giá trị của thuộc tính href từ một liên kết tạo từ thẻ a: $("button").click(function(){ alert($("#w3s").attr("href")); }); 1.1.5.2 Gán nội dung và thuộc tính phần tử HTML. 1.1.5.2.1 Gán nội dung: text(), html() và val() Ba phương thức để lấy nội dung được trình bày ở trên cũng được sử dụng đ ể gán nội dung tương ứng. Ví dụ về cách sử dụng 3 phương thức text(), html() và val() để gán nội dung: $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); 1.1.5.2.2 Hàm Callback cho text(), html() và val() Tất cả ba phương pháp jQuery trên: text(), html() và val(), đều có th ể đi kèm v ới một hàm callback. Hàm callback có hai tham số: chỉ số của ph ần t ử hi ện t ại và giá.

<span class='text_page_counter'>(29)</span> trị ban đầu (cũ). Trong hàm callback người lập trình có thể trả v ề chuỗi cần s ử dụng như một giá trị mới. Ví dụ sau đây minh hoạ cách sử dụng phương thức text() and html() với hàm callback: $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b>(index: " + i +")"; }); }); 1.1.5.2.3 Gán thuộc tính: attr() Phương thức attr() còn được sử dụng để gán hoặc sửa đổi nội dung các thu ộc tính của một phần tử HTML. Ví dụ dưới đây minh hoạ về cách thay đổi (hoặc gán) giá trị cho thuộc tính href c ủa một liên kết từ thẻ a: $("button").click(function(){ $("#w3s").attr("href",""); }); Phương thức attr() còn cho chép gán nhiều thuộc tính một lúc. Ví dụ: $("button").click(function(){ $("#w3s").attr({ "href" : "", "title" : "jQuery Tutorial" }); });.

<span class='text_page_counter'>(30)</span> 1.1.5.2.4 Hàm Callback cho attr() Phương thức attr() còn có thể đi kèm với một hàm callback. Hàm callback này có một tham số bắt buộc là chỉ số của phần tử hiện tại đang được xử lý và m ột tham số tuỳ chọn là giá trị cũ của thuộc tính. Trong hàm callback người lập trình có th ể trả về chuỗi cần sử dụng như một giá trị mới. Ví dụ: $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); 1.1.5.3 Thêm các phần tử HTML mới Với jQuery, thật là dễ dàng để thêm một phần tử hoặc nội dung mới vào trang web. append(. Chèn nội dung mới vào cuối của các phần tử đang được. ) prepend. chọn Chèn nội dung mới vào cuối của các phần tử đang được. (). chọn Chèn nội dung mới vào phía sau của các phần tử đang được. after() before(). chọn Chèn nội dung mới vào phía trước của các phần tử đang. được chọn Bảng 4.5 - Bốn phương thức của jQuery được sử dụng để thêm nôi dung mới. Ví dụ: $("p").append("Some appended text."); $("p").prepend("Some prepended text."); $("img").after("Some text after"); $("img").before("Some text before"); Ở ví dụ trên, chỉ là chèn vào một chuỗi văn bản, hoặc ch ỉ là m ột đo ạn mã HTML đ ơn thuần. Sẽ thật rắc rối nếu thứ cần chèn lại là rất nhiều th ẻ HTML ch ẳng h ạn nh ư một cái bảng hoặc là một phần tử DOM hay jQuery. Để giải quyết rắc r ối này, các hàm chèn nội dung này còn hỗ trợ chèn nội dung bằng các đối tượng được tạo ra từ jQuery hoặc với mã JavaScript và các phần tử DOM. Ví dụ :.

<span class='text_page_counter'>(31)</span> function appendText() { var txt1="<p>Text.</p>";. // Tạo một phần tử HTML. var txt2=$("<p></p>").text("Text."); // tạo ra với jQuery var txt3=document.createElement("p"); // tạo ra với DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3);. // chèn vào. } function afterText() { var txt1="<b>I </b>";. // Tạo một phần tử với HTML. var txt2=$("<i></i>").text("love ");. // tạo ra jQuery. var txt3=document.createElement("big"); // tạo ra với DOM txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3);. // chèn vào sau img. } 1.1.5.4 Xoá các phần tử HTML Cũng như chèn phần tử mới, việc xoá bớt phần tử HTML rất đơn giản với jQuery. Có hai phương thức chính trong jQuery đảm nhận việc xoá nội dung / phần tử HTML: remove(). Xoá các phần tử đang được chọn (và cả con cháu. empty(). của nó) Xoá con cháu của phần tử đang được chọn (Nó không bị xoá) Bảng 4.6 - remove() và empty(). Ví dụ: $("#div1").remove(); $("#div1").empty(); Phương thức remove còn chấp nhận thêm một tham số tuỳ chọn nữa để lọc ra những phần tử cần xoá. Tham số này có kiểu string và là một jQuery selector bất kỳ. Ví dụ dưới đây xoá tất cả các thẻ <p> có class="italic": $("p").remove(".italic"); 1.1.5.5 Lấy và gán CSS Classes Với jQuery, rất dễ dàng để theo tác với định dạng CSS của các phần tử HTML.

<span class='text_page_counter'>(32)</span> jQuery có một số phương pháp để thao tác CSS: addClass(). Thêm một hoặc nhiều lớp vào một phần tử HTML được. removeClass. chọn Xoá một hoặc nhiều lớp của một phần tử HTML đuợc chọn. () toggleClass(). Chuyển qua lại giữa thêm/xoá lớp của một phần tử HTML. css(). đuợ chọn Gán hoặc trả về thuộc tính CSS của một Bảng 4.7 - Một số phương pháp để thao tác CSS. 1.1.5.5.1 Phương thức addClass() Cú pháp: $(selector).addClass(ClassList); ClassList có kiểu chuỗi, là tên một lớp hoặc là danh sách các lớp, mỗi lớp cách nhau bởi dấu cách trắng. Ví dụ: $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); Thêm nhiều lớp với phương thức addClass(): $("button").click(function(){ $("#div1").addClass("important blue"); }); 1.1.5.5.2 Phương thức removeClass() Cú pháp: $(selector).removeClass("Class") Class là tên lớp cần xoá Ví dụ : $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); 1.1.5.5.3 Phương thức toggleClass() Cú pháp: $( selector).toggleClass("Class").

<span class='text_page_counter'>(33)</span> Class là tên lớp cần chuyển (thêm và xoá lần lượt) $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); 1.1.5.5.4 Phương thức css() 1.1.5.5.4.1 Lấy giá trị của một thuộc tính CSS Cú pháp: css(propertyname); propertyname có kiểu chuỗi, là tên thuộc tính CSS cần lấy giá trị Ví dụ lấy giá trị thuộc tính background-color của phần tử đầu tiên trong các phần tử được chọn: $("p").css("background-color"); 1.1.5.5.4.2 Gán giá trị cho một thuộc tính CSS Cú pháp: css(propertyname,value); propertyname có kiểu string, là tên thuộc tính CSS cần gán giá trị.value có kiểu string, là giá trị cần gán Ví dụ sau gán giá trị thuộc tính background-color cho tất cả các phần tử được chọn: $("p").css("background-color","yellow"); 1.1.5.5.4.3 Gán giá trị cho nhiều thuộc tính CSS Cú pháp: css({"propertyname":"value","propertyname":"value",...}); Ví dụ sau gán giá trị thuộc tính background-color và font-size cho tất cả các phần tử được chọn: $("p").css({"background-color":"yellow","font-size":"200%"} 1.1.5.6 Xử lý kích thước Với jQuery, thật dễ dàng để xử lý kích thước của một đối tượng HTML khi nó hi ển th ị trên cửa sổ trình duyệt..

<span class='text_page_counter'>(34)</span> 1.1.5.6.1 Phương thức width() và height() Phương thức width() gán hoặc lấy giá trị độ rộng của một phần tử HTML. Phương thức height() gán hoặc lấy giá trị độ cao của một phần tử HTML. Ví dụ sau biểu diễn cách lấy độ rộng và độ cao của phần tử <div>: $("button").click(function(){ var txt=""; xt+="Width: " + $("#div1").width() + "</br>"; xt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); Ví dụ lấy độ rộng và độ cao của tài liệu HTML và cửa sổ trình duyệt: $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); }); Ví dụ gán độ rộng và độ cao cho một phần tử <div>: $("button").click(function(){ $("#div1").width(500).height(500); }); 1.1.5.6.2 Phương thức innerWidth() và innerHeight() Phương thức innerWidth() lấy giá trị độ rộng của một phần tử HTML (tính c ả padding). Phương thức innerHeight() lấy giá trị độ cao của một phần tử HTML (tính c ả padding). Ví dụ sau biểu diễn cách lấy độ rộng và độ cao bên trong của phần tử <div>:.

<span class='text_page_counter'>(35)</span> $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); 1.1.5.6.3 Phương thức outerWidth() và outerHeight() Phương thức outerWidth() lấy giá trị độ rộng của một phần tử HTML (tính c ả padding và border). Phương thức outerHeight() lấy giá trị độ rộng của một phần tử HTML (tính c ả padding và border). Ví dụ sau biểu diễn cách lấy độ rộng và độ cao bên ngoài của ph ần t ử <div> element: $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); }); Phương thức outerWidth(true) lấy giá trị độ rộng của một phần t ử HTML (tính c ả padding, border, và margin). Phương thức outerHeight(true lấy giá trị độ rộng của một phần tử HTML (tính c ả padding, border, và margin). Ví dụ: $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });.

<span class='text_page_counter'>(36)</span> 1.1.6 AJAX 1.1.6.1 AJAX là gì? AJAX = Asynchronous JavaScript and XML (JavaScript bất đồng bộ và XML). AJAX là nghệ thuật trao đổi dữ liệu với máy chủ, và cập nhật các thành ph ần c ủa m ột trang web mà không cần tải lại toàn bộ trang. Hiện tại đa phần các trang web tương tác với người dùng trên Internet hiện nay đ ều sử dụng công nghệ AJAX và không thể không nhắc đến các tên tuổi n ối ti ếng nh ư: Gmail, Google Maps, Youtube, Facebook, … AJAX thực sự rất mạnh mẽ, tuy nhiên để viết code thực hiện AJAX lại khá rắc r ối, v ừa dài lại vừa không tương thích với trình duyệt. Với mỗi trình duy ệt khác nhau thì code lại khác nhau, nên cần phải viết thêm các phương thức kiểm tra.Chính vì th ế mà b ộ thư viện jQuery tích hợp luôn các phương thức giúp người lập trình sử dụng AJAX một cách đơn giản và nhanh chóng. Với jQuery, việc sử dụng AJAX chỉ là gọi một phương thức đơn giản. Ng ười lập trình có thể yêu cầu văn bản, HTML, XML, JSON, Script từ máy ch ủ v ới c ả hai ph ương th ức: HTTP Get và HTTP Post. jQuery còn hỗ trợ tải trực tiếp dữ liệu và b ỏ vào phần t ử HTML được chọn! 1.1.6.2 Phương thức AJAX lõi của jQuery: jQuery.ajax() Cú pháp: jQuery.ajax( url [, settings] ) Mô tả: Thực hiện một yêu cầu HTTP bất đồng bộ (Ajax). Tham số: url: Chuỗi chứa địa chỉ để gởi yêu cầu. settings: Một tập hợp gồm các cặp khoá và giá trị nhằm cấu hình cho yêu cầu Ajax . Tất cả cấu hình đều là tuỳ chọn, nếu không khai báo, giá tr ị mặc định sẽ đ ược s ử dụng. Các thiết lập mặc đinh có thể được thiết lập bằng phương thức $.ajaxSetup(). Hàm $.ajax() là nền tảng của tất cả các yêu cầu Ajax được gởi bởi jQuery. Th ường thì nó ít khi được gọi mà thường được thay thế bởi các hàm cao cấp h ơn như $.get() hay .load() mặc dù nếu trực tiếp sử dụng thì $.ajax() linh hoạt hơn rất nhiều. Cách đơn giản nhất để sử dụng $.ajax() là gọi nó mà không có tham số, lúc này nó sẽ tải nội dung của trang hiện tại, nhưng không xử lý kết quả. Để s ử dụng k ết qu ả c ần dùng một hàm gọi lại. Ví dụ: Lưu một số dữ liệu vào máy chủ và thông báo cho người sử dụng khi nó đã hoàn thành..

<span class='text_page_counter'>(37)</span> $.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); }); Ví dụ: Lấy phiên bản mới nhất của một trang HTML. $.ajax({ url: "test.html", cache: false }).done(function( html ) { $("#results").append(html); }); Ví dụ: Gửi tài liệu xml cho máy chủ. Bằng cách thiết lập tùy chọn processData là false, tự động chuyển đổi dữ liệu thành chuỗi. var xmlDocument = [create xml document]; var xmlRequest = $.ajax({ url: "page.php", processData: false, data: xmlDocument }); xmlRequest.done(handleResponse); Ví dụ: Gửi id cho máy chủ, lưu một số dữ liệu trên máy chủ, và thông báo cho ng ười sử dụng khi nó hoàn thành. Nếu yêu cầu không thành công, cảnh báo người sử dụng..

<span class='text_page_counter'>(38)</span> var menuId = $("ul.nav").first().attr("id"); var request = $.ajax({ url: "script.php", type: "POST", data: {id : menuId}, dataType: "html" }); request.done(function(msg) { $("#log").html( msg ); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); Ví dụ: Nạp và thực hiện một tập tin JavaScript. $.ajax({ type: "GET", url: "test.js", dataType: "script" }); 1.1.6.3 jQuery.get() Cú pháp: jQuery.get(url [, data] [, success(data, textStatus, jqXHR)] [, dataType]) Mô tả: Tải dữ liệu từ máy chủ bằng cách sử dụng một yêu cầu HTTP GET. Tham số: url: Tham số bắt buộc. Là một chuỗi chứa địa chỉ cần gởi yêu cầu . data: Tham số tuỳ chọn. Dữ liệu sẽ gởi lên máy chủ. success(data, textStatus, jqXHR): Một hàm gọi lại sẽ được thực thi khi yêu cầu được thực hiện thành công. dataType: Loại dữ liệu dự kiến từ máy chủ. Mặc định: Tự đoán là xml, json, script, hoặc html. Đây là một hàm Ajax được viết tắt, nó tương đương với:.

<span class='text_page_counter'>(39)</span> $.ajax({ url: url, data: data, success: success, dataType: dataType }); Một ví dụ đơn giản về hàm gọi lại, lấy dữ liệu về và chèn vào phần tử được chọn: $.get('ajax/test.html', function(data) { $('.result').html(data); alert('Load was performed.'); }); Ví dụ: Yêu cầu trang test.php, nhưng bỏ qua các kết quả được gởi về. $.get("test.php"); Ví dụ: Yêu cầu trang test.php và gửi thêm một số dữ liệu. $.get("test.php", { name: "John", time: "2pm" } ); Ví dụ: Yêu cầu trang test.php và gửi thêm mảng. $.get("test.php", { 'choices[]': ["Jon", "Susan"]} ); Ví dụ: Cảnh báo các kết quả từ yêu cầu test.php (HTML hay XML, tùy thu ộc vào nh ững gì đã được trả lại). $.get("test.php", function(data){ alert("Data Loaded: " + data); }); Ví dụ: Lấy nội dung trang test.php, được trả về ở định dạng json và thêm nó vào trang. $.get("test.php", function(data){ $('body').append( "Name: " + data.name ) // John .append( "Time: " + data.time ); // 2pm }, "json" );.

<span class='text_page_counter'>(40)</span> 1.1.6.4 jQuery.getJSON() Cú pháp: jQuery.getJSON(url [, data] [, success(data, textStatus, jqXHR)]) Mô tả: Load JSON-encoded data từ server dùng GET HTTP request. Đây là một hàm Ajax được viết tắt, nó tương đương với: $.ajax({ url: url, dataType: 'json', data: data, success: callback }); Ví dụ: Cấu trúc của tập tin JSON: { "one": "Singular sensation", "two": "Beady little eyes", "three": "Little birds pitch by my doorstep" } Sử dụng cấu trúc này, lặp qua các dữ liệu, tạo một danh sách không th ứ t ự, và g ắn nó vào body. $.getJSON('ajax/test.json', function(data) { var items = []; $.each(data, function(key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items.join('') }).appendTo('body'); }); Ví dụ: Nạp bốn hình ảnh con mèo gần đây nhất từ JSONP Flickr API..

<span class='text_page_counter'>(41)</span> <!DOCTYPE html> <html> <head> <style>img{ height: 100px; float: left; }</style> <script src=" </head> <body> <div id="images"></div> <script> $.getJSON(" { tags: "cat", tagmode: "any", format: "json" }, function(data) { $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); </script> </body> </html> Ví dụ: Nạp dữ liệu JSON từ test.js và truy cập một tên từ các dữ liệu JSON đ ược tr ả l ại. $.getJSON("test.js", function(json) { alert("JSON Data: " + json.users[3].name); }); Ví dụ: Nạp dữ liệu JSON từ test.js kèm theo dữ liệu đầu vào và truy cập một tên t ừ các dữ liệu JSON được trả lại..

<span class='text_page_counter'>(42)</span> $.getJSON("test.js", { name: "John", time: "2pm" }, function(json) { alert("JSON Data: " + json.users[3].name); }); 1.1.6.5 jQuery.post() Cú pháp: jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ) Mô tả:: Tải dữ liệu lên sever bằng HTTP POST request. Đây là một hàm Ajax được viết tắt, nó tương đương với: $.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType }); Ví dụ: Gởi 1 yêu cầu lên test.php không có tham số và không bắt sự kiện hoàn tất. $.post("test.php"); Gởi 1 yêu cầu lên test.php kèm theo 2 tham số, không bắt sự kiện hoàn tất. $.post("test.php", { name: "John", time: "2pm" } ); Gởi 1 yêu cầu lên test.php kèm theo mảng, không bắt sự kiện hoàn tất. $.post("test.php", { 'choices[]': ["Jon", "Susan"] }); Gởi dữ liêu của form: $.post("test.php", $("#testform").serialize()); Bắt sự kiện hoàn tất $.post("test.php", function(data) { alert("Data Loaded: " + data); }); Gởi tham số, khi hoàn tất thì hiện thông báo.

<span class='text_page_counter'>(43)</span> $.post("test.php", { name: "John", time: "2pm" }, function(data) { alert("Data Loaded: " + data); }); Lấy nội dung test.php lưu nó dưới dạng XMLHttpResponse object và chạy hàm JavaScript process() $.post("test.php", { name: "John", time: "2pm" }, function(data) { process(data); }, "xml" ); Gởi và xử lý dữ liệu Json trả về $.post("test.php", { "func": "getNameAndTime" }, function(data){ console.log(data.name); // John console.log(data.time); // 2pm }, "json"); Gởi dữ liệu của một form và ghi kết quả trả về vào div <!DOCTYPE html> <html> <head> <script src=" </head> <body> <form action="/" id="searchForm"> <input type="text" name="s" placeholder="Search..." /> <input type="submit" value="Search" /> </form> <!-- the result of the search will be rendered inside this div --> <div id="result"></div> <script>.

<span class='text_page_counter'>(44)</span> /* attach a submit handler to the form */ $("#searchForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form = $( this ), term = $form.find( 'input[name="s"]' ).val(), url = $form.attr( 'action' ); /* Send the data using post and put the results in a div */ $.post( url, { s: term }, function( data ) { var content = $( data ).find( '#content' ); $( "#result" ).empty().append( content ); } ); }); </script> </body> </html>.

<span class='text_page_counter'>(45)</span>