Chi tiet Jquery

Class là tên lớp cần chuyển thêm và xoá lần lượt $"button".clickfunction{ $"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á[r]

1.1 JQUERY 1.1.1 JQUERY LÀ GÌ 1.1.1.1 Giới thiệu: Với phát triển nhanh chóng Internet, người dùng ngày càng quan tâm h ơn đến hình thức trang web Trước đây trang web cần có banner, n ội dung và ít footer hời hợt là đã cho là 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 khác thì có thể thu hút người sử dụng Chính vì web designer bắt đầu chú ý đến các thư viện JavaScript m nh jQuery để tạo 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 nhiều là sử dụng JavaScript Nhưng người làm quen với jQuery thấy không biết phải b đ ầu t đâu vì jQuery giống thư viện nào khác có nhiều functions Cho dù có đọc phần tài liệu hướng dẫn sử dụng jQuery thì người lập trình v ẫn th 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 jQuery vay mượn từ các nguồn mà các web designer đa phần đã biết HTML và CSS Kiến thức CSS giúp ích nhiều bắt đầu v ới jQuery Jquery trở nên phổ biến là 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ẽ ngày ngày phát triển thêm Plugin và hoàn thi ện tính trọng tâm 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 người sử dụng Tất nhiên nó bảo v ệ luật GNU Public License và MIT License, người dùng c ứ yên tâm là ng ười dùng có thể sử dụng nó hầu hết các trường hợp kể 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 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 nhiều dòng code có thể đạt mục tiêu là di chuyển cấu trúc cây (hay còn g ọi là DOM = Document Object Model) tài liệu HTML và ch ọn các thành ph ần liên quan Jquery cho phép người dùng chọn thành phần nào c tài li ệu đ ể “vọc” cách dễ dàng sử dụng CSS 1.1.1.2.2 Thay đổi giao diện trang web CSS là công cụ mạnh để định dạng trang web nó có m ột nh ược điểm là không phải tất các trình duyệt hiển thị giống Cho nên jQuery đời để lấp chỗ trống này, vì người dùng 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ó th ể thay đổi class định dạng CSS đã áp dụng lên thành ph ần nào tài liệu HTML trang web đó đã trình duyệt load thành công Thay đổi nội dung tài liệu Jquery không phải có th ể thay đổi b ề ngoài trang web, nó có thể thay đổi nội dung chính tài li ệu đó ch ỉ v ới vài dòng code Nó có thể thêm bớt nội dung trên trang, hình ảnh có th ể đ ược thêm vào đổi sang hình khác, danh sách có thể xếp lại chí cấu trúc HTML trang web có thể viết l ại và m r ộng T ất điều này người dùng hoàn toàn có thể làm nhờ giúp đỡ 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, n ếu ng ười dùng không có quyền định nào nó sử dụng thì công cụ đó coi bỏ Với thư viện javaScript jQuery, nó cho người dùng nhi ều cách đ ể t ương tác với người dùng ví dụ người dùng nhấp chuột vào đường link thì có gì xảy Nhưng cái hay nó là không làm cho code HTML ng ười dùng r ối tung lên chính là nhờ các Event Handlers Hơn Event Handler API b ảo đ ảm trang web người dùng tương thích hầu hết với các trình ệt, điều này đã và làm đau đầu nhiều các web designer 1.1.1.2.4 Tạo hiệu ứng động cho thay đổi 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 đ ược hiệu ứng gì xảy họ làm tác vụ nào đó Jquery cho phép người dùng s dụng nhiều hiệu ứng động 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 các hiệu ứng 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 trang web tương tác cực t ốt và nhiều tính Thư viện jQuery loại bỏ phức tạp trình ệt 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 đ ầu cuối Đơn giản hoá các tác vụ javaScript Ngoài tính 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 là các vòng lặp và điều khiển mảng 1.1.1.3 Tại jQuery làm việc tốt? Người dùng ngày càng quan tâm đến Dynamic HTML, đó là móng cho s ự đời javaScript Frameworks Có frameworks thì tập trung vào vài tính vừa nêu trên, có cái thì ráng bao gồm tất hi ệu ứng, tập tính và nhồi nhét vào package Để đảm bảo là thư viện “nhanh gọn nh ẹ” nh ưng “ngon bổ rẻ” với các tính đã nêu trên, jQuery sử dụng chiến l ược sau: 1.1.1.3.1 Tận dụng kiến thức CSS Các jQuery Selector hoạt động giống CSS Selector với cùng cấu trúc và cú pháp Chính vì thư viện jQuery là cửa ngõ cho các web designer muốn thêm nhi ều tính cho trang web mình Bởi vì điều kiện tiên quy ết đ ể tr thành web designer chuyên nghiệp là khả sử dụng CSS th ục V ới kiến thức có sẵn CSS, người dùng có 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 cần Cách tạo plugin khá đ ơn gi ản và đ ược hướng dẫn cụ thể, chính vì cộng đồng sử dụng jQuery đã tạo m ột lo ạt plugin đầy tính sáng tạo và hữu dụng 1.1.1.3.3 Xoá nhoà khác biệt trình duyệt Một thực tế tồn là hệ thống trình duyệt lại có ki ểu riêng đ ể đ ọc trang web Dẫn đến đ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 trình duyệt Cho nên đôi người ta ph ải làm hẳn phần code phức tạp để đảm bảo trang web họ hiển thị gần tương đồng các trình duyệt phổ biến Jquery giúp người dùng thêm lớp bảo vệ cho khác biệt trình duyệt và giúp quá trình này di ễn d ễ dàng nhiều 1.1.1.3.4 Luôn làm việc với Set Ví dụ yêu cầu jQuery tìm tất các thành phần có class là delete và ẩn chúng đi, không cần phải loop qua thành phần trả Thay vào đó, phương pháp là hide() thiết kế để làm việc với set thay vì thành ph ần đơn lẻ Kỹ thuật này 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 mà nó thực thi, chính vì th ế code ngắn nhiều 1.1.1.3.5 Cho phép nhiều tác vụ diễn trên cùng dòng Để tránh phải sử dụng biến tạm 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 gọi là Chaining cho h ầu h ết các method nó Điều đó có nghĩa là kết các tác vụ 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ụ đ ược áp d ụng lên nó Những chiến lược nêu trên giúp kích thước jQuery nhỏ bé khoảng trên 20Kb dạng nén Nhưng đảm bảo cung cấp 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à mạnh CSS Selector 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 DOM (Document Object Model) 1.1.2.1 Document Object Model (Mô hình đối tượng tài liệu) Một tính mạnh mẽ jQuery là khả ch ọn các thành phần DOM cách dễ dàng Nói nôm na thì DOM là d ạng phả h ệ c các thành phần HTML Các thành phần này có mối tương quan với nh “gia đình” HTML hạnh phúc tương tự mối quan hệ gia đình ông bà, b ố m ẹ, anh chị em v.v 1.1.2.2 Hàm $() Cho dù sử dụng Selector nào jQuery, cú pháp luôn b đ ầu dấu dollar ($) và đôi ngoặc đơn như: $() Tất gì có th ể đ ược s dụng CSS có thể lồng vào dấu ngoặc kép (”) và đặt vào 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 jQuery Selector là tên thẻ HTML, ID và Class Có thể sử dụng nó kết hợp với Selector khác để chọn Dưới đây là m ột ví dụ Selecter sử dụng mình Selecto CSS jQuery Giải thích P $(‘p’) Chọn tất thẻ p ID #MyID $(‘#MyID’) Class .MyClassName $(‘.Name’) r Thẻ HTML Chọn tất các thành phần có ID = ‘MyID’ Chọn tất các thành phần có class = ‘Name’ Bảng 4.1 - Ví dụ Selecter 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 đối tượng jQuery tự động loop và diễn “hậu trường” Cho nên người lập trình không cần phải sử dụng vòng lặp nào cả, vòng lặp for chẳng hạn, điều này thường phải làm viết code 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 thẻ Thẻ Tất các thẻ có id=lastname Tất các thẻ có class="intro" Tất các thẻ p Tất các thẻ có classes = "intro" và "demo" Thẻ p đầu tiên Thẻ p cuối cùng Thẻ li đầu tiên các thẻ li cùng cha Thẻ li cuối cùng các thẻ li cùng cha Các thẻ tr chẵn Các thẻ tr lẻ Phần tử thứ tư danh sách (bắt đầu là 0) Danh sách các phần tử với số > Danh sách các phần tử với số < 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 thẻ input không rỗng Tất các thẻ header (h1, h2 ) Tất các thẻ chạy hiệu ứng chuyển động Tất các thẻ có chứa ‘ed’ Tất các thẻ rỗng (Không có cháu) Tất các thẻ p có thuộc tính ẩn Tất các bảng (thẻ table) hiển thị Tất các thẻ th, td và các phần tử có class = intro Tất các thẻ có thuộc tính href Tất các thẻ có thuộc tính href = "default.htm" Tất các thẻ có thuộc tính href có giá trị không phải là "default.htm" Tất các thẻ có thuộc tính href có giá trị kết thúc ".jpg" Tất các thẻ có thuộc $("[href^='jquery_']") tính href có giá trị bắt đầu "jquery_" :input $(":input") :text $(":text") :password $(":password") Tất các thẻ input Tất các thẻ input có thuộc tính type="text" Tất các thẻ input có thuộc tính type="password" 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 thẻ input có thuộc tính type="radio" Tất các thẻ input có thuộc tính type="checkbox" Tất các thẻ input có thuộc tính type="submit" Tất các thẻ input có thuộc tính type="reset" Tất các thẻ input có thuộc tính type="button" Tất các thẻ input có thuộc tính type="image" Tất các thẻ input có thuộc tính type="file" Tất các thẻ input có hiệu lực Tất các thẻ input bị vô hiệu hoá Tất các thẻ input chọn Tất các thẻ input đã đánh dấu Bảng 4.2 - Danh sách selector 1.1.2.4 Duyệt tập hợp Kết sau lựa chọn là tập hợp, có th ể làm vi ệc tr ực ti ếp trên t ập h ợp duyệt qua phần tử tập hợp và thực lệnh khác cho phần tử Để duyệt qua phần tử tập hợp jQuery cần s d ụng phương pháp each, tương tự vòng lặp foreach c#: Cấu trúc: each( function(index, element) ) Trong đó index là số phần tử duyệt, element là phần tử duyệt Ví dụ: $('li').each(function(index) { alert(index + ': ' + $(this).text()); }); Và $('li').each(function(index, element) { alert(index + ': ' + $(element).text()); }); Cho kết Và không cần sử dụng tới index thì ch ỉ c ần khai báo function(){…} Cũng foreach, each cho phép ngắt vòng lặp n ửa ch ừng Ng vòng l ặp b ằng cách thêm lệnh return false vào thân function: $('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 cây DOM Mặc dù cấu trúc select jQuery đã mạnh v ẫn ch ưa thoã mãn đ ược số nhu cầu nâng cao muốn chọn các phần tử l ại thoả m ột s ố ràng buộc chẳng hạn ràng buộc cha, 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 nh di chuy ển t ập h ợp kết sang cha, con, anh em 1.1.2.5.1 Chỉnh sửa tập kết  .add()  .andSelf()  .contents()  .end() 1.1.2.5.2 Di chuyển tập kết  .children()  .closest()  .find()  .next()  .nextAll()  .nextUntil()  .offsetParent()  .parent()  .parents()  .parentsUntil()  .prev()  .prevAll()  .prevUntil()  .siblings() 1.1.2.5.3 Lọc kết  .eq()  .filter()  .first()  .has()  .is()  .last()  .not()  .map()  .slice() 1.1.3 SỰ KIỆN JavaScript có số cách lập sẵn để phản ứng với tương tác ng ười dùng và kiện khác jQuery nâng cao và mở r ộng c ch ế qu ản lý s ự ki ệ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 m ạnh mẽ so với JavaScript truyền thống nhiều 1.1.3.1 Định thời gian thực thi code $(document).ready() là cách jQuery thực các tác vụ tương đương với cách mà JavaScript thực tác vụ với onload event lập sẵn Thực tế thì hai cách này có tác dụng giống nhau, chúng lại kích hoạt tác vụ th ời ểm h khác Sự kiện window.onload kích hoạt mà trình duyệt đã hoàn toàn load xong tài liệu Điều này có nghĩa phần tử trên trang đã sẵn sàng để thao tác b ởi JavaScript Đây chính là điểm thuận lợi để chúng ta viết code mà không ph ải lo lắng trật tự load Mặt khác, quản lý đăng ký sử dụng $(document).ready() kích hoạt DOM hoàn toàn sẵn sàng để sử dụng Điều này có nghĩa thành phần có th ể truy cập code chúng ta, không nhât thiết là tài li ệu liên quan (flash và image) đã download Ngay sau HTML download và chuy ển qua cây DOM, code có thể thực thi Lưu ý: Để đảm bảo trang web có định dạng trước code JavaScript đ ược thực hiện, người ta thường đặt <link rel=”stylesheet”> đằng tr ước th ẻ <script> phần <head> tài liệu Ví dụ: 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 thao tác với jQuery Nếu bây gi thi ết l ập giao diện sử dụng kiện onload, thì người dùng phải đợi hình đã download trước họ có thể sử dụng trang web Hoặc tệ hơn, cách xử lý chưa gán cho các phần tử có cách xử lý mặc định riêng là các đ ường liên kết, thì việc tương tác với người dùng tạo ều không mong đ ợi Tuy nhiên sử dụng $(document).ready(), thì giao diện sẵn sàng để s dụng s ớm nhiều với cách xử lý mong muốn Lưu ý: Cách sử dụng $(document).ready() luôn ưa chuộng là s dụng b ộ quản lý onload, vì tệp tin hỗ trợ có thể ch ưa load, cho nên thuộc tính độ cao và chiều rộng hình có thể chưa có s ẵn lúc này Nếu thực cần thiết, có thể sử dụng quản lý onload (hoặc hay h ơn có th ể s dụng jQuery để thiết lập quản lý cho load event) Hai cách này hoàn toàn t ương thích với 1.1.3.2 Nhiều đoạn mã trên cùng trang Cách thường dùng để đăng ký quản lý kiện thông qua JavaScript là gán hàm cho thuộc tính tương ứng phần tử DOM Giả sử đã định nghĩa hàm: function doStuff() { //làm cái gì đó } Sau đó gán nó phần code HTML sau: <body onload=”doStuff();”> Hoặc gán nó code JavaScript: window.onload = doStuff; Hai cách này thực thi hàm trang load Nhưng điểm mạnh c cách th ứ hai nằm chỗ cách xử lý tách rời khỏi mã HTML Nếu với hàm thì cách này sử dụng Nhưng thêm hàm nữa: function doOtherStuff() { //làm tác vụ khác } Sau đó thử chạy hàm này trang load window.load = doOtherStuff; Hàm thứ hai thắng hàm đầu tiên Thuộc tính onload có th ể 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ý t ại C ch ế $ (document).ready() giải trường hợp này êm xuôi Mỗi lần phương thức gọi, nó thêm hàm vào danh sách cách xử lý n ội bộ, nên trang load, tất các hàm thực Các hàm th ực hi ện theo th ứ t ự mà chúng đă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 đối tượng jQuery đã tạo từ phần tử DOM Hàm $() cung cấp cách viết t b ởi vì nó là tác vụ phổ biến Khi gọi mà không có tham số, thì hàm này ho ạt đ ộng 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 hàm khác làm tham số cho nó Cho cách viết nh sau cho kết tương tự: $(function() //code đây{ }); 1.1.3.4 Cùng làm việc với thư viện khác Trong vài trường hợp cần phải sử dụng nhiều thư viện JavaScript trên cùng trang Bởi vì nhiều thư viện cùng sử dụng ký hi ệu nh ận d ạng $ nó ngắn và thuận tiện, cho nên phải tránh xảy xung đột tên này jQuery cung cấp phương thức gọi là noConflict() để trả ký hiệu nhận dạng $ cho các thư viện khác Cách sử dụng phương thức noConflict() 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 gọi Sau đó là thân jQuery gọi và nó s dụng $ cho nó Tiếp theo phương pháp noConflict() gọi để giải phóng $, quyền điều khiển bây lại quay trở với thư viện gọi đầu tiên, đây là Prototype Bây code có thể sử dụng hai thư viện, 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ó điểm có thể giúp trường hợp này Function ready có thể nhận tham số đơn: chính là 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ó nhiều lúc người lập trình muốn thực tác v ụ nào đó vào nh ững th ời ểm mà không là lúc trang load Cũng với JavaScript cho phép chúng ta đón chặn kiện load trang với <body onload=””> window.onload Nó cung cấp điểm neo cho kiện 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 gán trực tiếp vào các phần từ DOM, cách này có m ặt h ạn ch ế giống điều đã nói onload Cho nên, jQuery có cách c ải ti ến h ơn để xử lý kiện này Cơ là sử dụng hàm blind(Tên kiện, hàm xử lý) theo sau jQuery selector sau: $(document).ready(function() { $('#switcher-green').bind('click', function() { $('body').addClass('green'); }); }); Đoạn mã trên bắt kiện click DOM Element có id là switcher-green, s ự ki ện click bắt thì thêm Class cho thẻ body 1.1.3.6 Những kiện viết tắt Gắn xử lý cho kiện (ví dụ là kiện click) th ường xảy ra, cho nên jQuery cung cấp cách ngắn gọn Đ ó chính là phương pháp viết tắt kiện, nó hoạt động giống sử dụng bind() tiết kiệm vài chữ Ví dụ, có thể sử dụng click() thay vì bind() sau: $(document).ready(function() { $('#switcher button').click(function() { $('body').removeClass(); }); }); Những phương pháp viết tắt kiện này tồn với tất 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 gán xử lý vào kiện với tên tương ứng 1.1.3.7 Sự kiện phức hợp Mỗi phương thức xử lý kiện jQuery tương ứng trực tiếp với kiện JavaScript Tuy nhiên, jQuery có vài xử lý riêng 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 nh ững ph ương thức này chính là ready() Hai phương thức toggle() và hover() là hai x lý s ự ki ện tuỳ chỉnh jQuery Chúng gọi là xử lý 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àm 1.1.3.7.1 Phương thức toggle() Phương thức toggle() có thể lấy hai nhiều tham số, tham số là m ột hàm Khi nhấp chuột lần đầu chạy hàm thứ nhất, nhấp chuột lần thứ hai kích hoạt hàm thứ hai v.v Khi hàm đã kích hoạt, vòng l ặp l ại b đ ầu t hàm nhứ 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: $(document).ready(function() { $('#switcher h3').toggle(function() { $('#switcher button').addClass('hidden'); }, function() { $('#switcher button').removeClass('hidden'); }); }); Sau nhấp chuột lần nút thêm class hidden, Nhấp chuột thêm lần bỏ class hidden Có thể sử dụng phương thức toggleClass() để tự động kiểm tra diện class trước thêm 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, toggle() là cách linh hoạt tiến hành hai nhiều tác vụ khác 1.1.3.7.2 Phương thức hover() CSS cung cấp pseudo-class gọi là :hover, cho phép styesheet chi phối m ột thành phần người dùng di chuột qua nó Nhưng IE6, ch ức này b ị gi ới h ạn với đườ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 Thay vào đó, jQuery cho phép chúng ta sử dụng JavaScript đ ể thay đổi kiểu dáng phần tử và có thể tiến hành tác v ụ nào lên nó Kể di chuột lên phần tử và di chuột khỏi phần tử đó Phương thức hover() lấy hai tham số, giống ví dụ toggle() trên Trong trường hợp này, hàm đầu tiên thực chuột di qua nó và hàm thứ hai kích hoạt chuột khỏi nó Chúng ta có thể thay đổi class cho các nút thời điểm này để tạo hiệu ứng rollover: $(document).ready(function() { $('#switcher h3').hover(function() { $('#switcher button').addClass('hover'); }, function() { $('#switcher button').removeClass('hover'); }); }); Sử dụng hover() giúp chúng ta tránh rắc rối tạo lan truy ền kiện (event propagation) JavaScript 1.1.3.8 Đường kiện Khi kiện xảy trên trang, toàn cấu trúc bậc thang các phần tử DOM có hội để xử lý kiện Ví dụ có mô hình sau: Hình 4.1 - Mô hình tab trên trang web Với kiện, có nhiều phần tử có thể chịu trách nhiệm x lý Ví d ụ đường link ví dụ trên bấm thì ba thành phần <div>, <span> và <a> có hội để phản ứng lại click đó Bởi vì thành phần trên nằm tr ỏ chuột người dùng Có cách cho phép nhiều phần tử phản ứng lại v ới click đ ược g ọi là Event Capturing Với Event Capturing, thì kiện gửi tới phần tử chung sau đó nó dần vào phần tử cụ thể Ở ví dụ, thì kiện ch ạy qua thẻ div, sau đó đến span và cuối cùng là thẻ a Hình 4.2 - Luồng kiện Cách đối lập với cách trên gọi là Even Bubbling (sự kiện bong bóng :-s) Sự kiện gửi tới thành phần cụ thể nhất, và sau phần tử này đã có h ội đ ể ph ản ứng, kiện “thổi bong bóng” lên thành phần chung Trong ví dụ chúng ta thì thẻ a xử lý kiện trước, sau đó là thẻ span và div là cuối cùng Chẳng có gì là ngạc nhiên người phát triển trình ệt quy ết đ ịnh nh ững mô hình khác cho lan truyền kiện Hệ thống DOM tiêu chu ẩn sau này m ới dần phát triển thì định nghĩa hai cách trên nên là sau: đ ầu tiên s ự kiện bị “bắt” thành phần chung đến phần tử cụ thể hơn, sau đó kiện “nổi bong bóng” lên trên đỉnh cây DOM B ộ x lý s ự kiện có thể đăng ký hai quá trình trên Tiếc là không phải toàn các trình duyệt áp dụng tiêu chu ẩn m ới này, và trình duyệt có hỗ trợ Capture thì người ta phải tự tay bật tính đó Đ ể tương thích với trình duyệt, jQuery luôn đăng ký x lý s ự ki ện quá trình “bong bóng” mô hình 1.1.3.9 Xử lý kiện với tham số event Khai báo và sử dụng tham số event sau: $('#switcher').click(function(event) { if(event.target == this) { $('#switcher button').toggleClass('hidden') } } Đoạn code này đảm bảo đối tượng click vào là <div id=’switcher’>, không phải là các phần tử phụ nó 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 quá trình lan truyền kiện Chứa liệu tuỳ chọn để hàm blink xử lý kiện Trả true event.preventDefault() gọi Trả true event.stopImmediatePropagation() gọi Trả true event.stopPropagation() gọi Vị trí chuột tương đối so với cạnh trái tài liệu Vị trí chuột tương đối so với cạnh trên tài liệu Ngăn chặn các hành động mặc định kiện (ví dụ mở link bấm vào link từ thẻ a) DOM element khác tham gia vào kiện, có Thuộc tính này chứa giá trị cuối cùng event.result trả hàm xử lý kiện kích hoạt event.stopImmediatePropagation() event.stopPropagation() event.target kiện này, trừ giá trị là undefined Ngăn chặn xử lý kiện khác gọi Chặn lan truyền kiện trên cây DOM DOM element đã cài đặt kiện này Thuộc tính này trả số mili giây kể từ event.timeStamp ngày 01 tháng 1970, kiện kích event.type hoạt Mô tả chất kiện Nút phí nhấn cho kiện nút event.which phím Bảng 4.3 - Các phương thức có thể gọi từ tham số event 1.1.3.10 Loại bỏ xử lý kiện Có lúc cần loại bỏ xử lý kiện mà đã đăng ký từ tr ước, ví d ụ trạng thái trang đã thay đổi mà kiện đó không còn phù h ợp n ữa Jquey cung cấp lệnh unbind để xoá xử lý kiện $(‘#switcher’).unbind(‘click’); Sẽ gỡ bỏ xử lý kiện click #switcher và cháu nó 1.1.4 HIỆU ỨNG Các hiệu ứng động jQuery 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, chí tự tạo hi ệu ứng cho các thành phần trang web, có thể cho nó xảy cùng lúc theo thứ tự định trước 1.1.4.1 Ẩn 1.1.4.1.1 hide() và show() jQuery cho phép ẩ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ệu ứng ẩn và có thể nhận giá trị sau đây: "slow", "fast", là số mili giây Tham số tuỳ chọn callback là hàm chạy sau thực xong hiệu ứng Ví dụ sử dụng tham số speed: $("button").click(function(){ $("p").hide(1000); }); 1.1.4.1.2 toggle() jQuery cho phép chuyển đổi qua lại hiệu ứng hide() và show() ph ương thức toggle() Ví dụ ẩn thẻ p nó hiển thị và hiển thị thẻ p nó 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 để lại phần tử HTML bị ẩn, nó tương đối giống với phương thức show(), khác chỗ là hiệu ứng có khác đôi chút, hi ệu ứng là tăng dần độ suốt để hiển thị lại phần tử Cú pháp: $(selector).fadeIn(speed,callback); Ví dụ 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 phần tử hiển thị cách giảm dần độ suốt nó Cú pháp: $(selector).fadeOut(speed,callback); Ví dụ 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 hiệu ứng fadeIn() và fadeOut() phương thức fadeToggle() Cú pháp: $(selector).fadeToggle(speed,callback); Ví dụ 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 phương thức trên, jQuery cung cấp thêm 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() gây hiệu ứng thay đổi độ suốt hành sang đ ộ suốt khác với tốc độ thiết lập trước (value between 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 độ suốt đích (Nhận giá trị từ tới 1) Ví dụ 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); }); 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 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 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 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() dùng để tạo nên hiệu ứng theo ý thích Đây là phương thức tạo hiệu ứng tuyệt jQuery Cú pháp: $(selector).animate({params},speed,callback); Tham số bắt buộc params dùng để định nghĩa các thuộc tính CSS tr thành hi ệu ứng 1.1.4.4.2 Hiệu ứng 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 định nghĩa là thay đổi thông số left 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í nó CSS thành relative, fixed absolute 1.1.4.4.3 Thao tác với nhiều thuộc tính: Lưu ý nhiều thuộc tính CSS có thể sử dụng kết hợp v ới đ ể t ạo thành hiệu ứng cùng 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 thuộc tính CSS 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 tên thuộc tính có chút thay đổi 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 hiệu ứng để thay đ ổi màu sắc không kèm 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 từ jQuery.com 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 nhiều, vì ohương thức animate hỗ trợ để xác định giá trị tương đối (giá trị là tương đối so với giá trị ph ần tử) Điều này thực cách đặt += -= 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ị đị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 Theo mặc định, jQuery sử dụng chức hàng đợi để chạy các hiệu ứng Đi ều này có nghĩa là các hiệu ứng chạy cái theo th ức t ự đ ược cài đặt Vì khai báo nhiều hiệu ứng cho cùng m ột đ ối t ượng, jQuery dinh hàng đợi nội 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"); }); 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ữ thẻ <div> đó lên: $("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() jQuery sử dụng để dừng hiệu ứng phần tử HTML mà thực hiệu ứng, trước hiệu ứng đó kết thúc Ph ương thức stop() hoạt động với tất các kiểu hiệu ứng jQuery bao gồm 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à có các hiệu ứng đ ược ngừng lại, cho phép hiệu ứng nào đợi thực 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 l ập t ức hiệu ứng trên phần tử 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 thực dòng Tuy nhiên, với các hiệu ứng, dòng ti ếp theo mã có thể chạy mặc dù hiệu ứng chưa thực xong Điều này có th ể tạo các lỗi Để ngăn chặn điều này, jQuery cung cấp chức g ọi lại (callback) Một chức gọi lại thực sau hiệu ứng kết thúc Cú pháp điển hình: $(selector).hide(speed,callback); Ví dụ đây minh hoạ các sử dụng tham số callback để gọi thông báo hi ệu ứng kết thúc: $("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); }); Ví dụ đây không sử dụng tham số callback và thông báo trước 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 phương thức mạnh mẽ để thay đổi thao tác với các phần tử HTML và các thuộc tính chúng 1.1.5.1.1 Lấy nội dung: text(), html() và val() Đơn giản lại hữu dụng, phương thức jQuery để thao tác trên DOM là: text() Lấy gán nội dung văn các phần tử chọn html( Lấy gán nội dung các phần tử chọn (Bao ) val() gồm các thẻ HTML) Lấy gán giá trị cho các trường trên biểu mẫu Bảng 4.4 - Ba phương thức jQuery để thao tác trên DOM Ví dụ sử dụng phương thức text() and html() để lấy giá trị phần tử HTML và val() để lấy giá trị phần tử trên biểu mẫu: $("#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() jQuery dùng để lấy giá trị thu ộc tính phần tử HTML Ví dụ cách lấy giá trị thuộc tính href 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 trình bày trên sử dụng đ ể gán nội dung tương ứng Ví dụ cách sử dụng 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 ba phương pháp jQuery trên: text(), html() và val(), có th ể kèm v ới hàm callback Hàm callback có hai tham số: số ph ần t hi ện t ại và giá 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 giá trị 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 sử dụng để gán sửa đổi nội dung các thu ộc tính phần tử HTML Ví dụ đây minh hoạ cách thay đổi (hoặc gán) giá trị cho thuộc tính href c liên kết từ thẻ a: $("button").click(function(){ $("#w3s").attr("href","http://jquery.com"); }); Phương thức attr() còn cho chép gán nhiều thuộc tính lúc Ví dụ: $("button").click(function(){ $("#w3s").attr({ "href" : "http://jquery.com", "title" : "jQuery Tutorial" }); }); 1.1.5.2.4 Hàm Callback cho attr() Phương thức attr() còn có thể kèm với hàm callback Hàm callback này có tham số bắt buộc là số phần tử xử lý và m ột tham số tuỳ chọn là giá trị cũ thuộc tính Trong hàm callback người lập trình có th ể trả chuỗi cần sử dụng giá trị 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 Với jQuery, thật là dễ dàng để thêm phần tử nội dung vào trang web append( Chèn nội dung vào cuối các phần tử ) prepend chọn Chèn nội dung vào cuối các phần tử () chọn Chèn nội dung vào phía sau các phần tử after() before() chọn Chèn nội dung vào phía trước các phần tử chọn Bảng 4.5 - Bốn phương thức jQuery sử dụng để thêm nôi dung 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, là chèn vào chuỗi văn bản, ch ỉ là m ột đo ạn mã HTML đ ơn Sẽ thật rắc rối thứ cần chèn lại là nhiều th ẻ HTML ch ẳng h ạn nh cái bảng là phần tử DOM hay jQuery Để giải 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 các đối tượng tạo từ jQuery với mã JavaScript và các phần tử DOM Ví dụ : function appendText() { var txt1="<p>Text.</p>"; // Tạo phần tử HTML var txt2=$("<p></p>").text("Text."); // tạo với jQuery var txt3=document.createElement("p"); // tạo với DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // chèn vào } function afterText() { var txt1="<b>I </b>"; // Tạo phần tử với HTML var txt2=$("<i></i>").text("love "); // tạo jQuery var txt3=document.createElement("big"); // tạo 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 chèn phần tử mới, việc xoá bớt phần tử HTML đơn giản với jQuery Có hai phương thức chính jQuery đảm nhận việc xoá nội dung / phần tử HTML: remove() Xoá các phần tử chọn (và cháu empty() nó) Xoá cháu phần tử 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 tham số tuỳ chọn để lọc phần tử cần xoá Tham số này có kiểu string và là jQuery selector Ví dụ đây xoá tất các thẻ <p> có class="italic": $("p").remove(".italic"); 1.1.5.5 Lấy và gán CSS Classes Với jQuery, dễ dàng để theo tác với định dạng CSS các phần tử HTML jQuery có số phương pháp để thao tác CSS: addClass() Thêm nhiều lớp vào phần tử HTML removeClass chọn Xoá nhiều lớp phần tử HTML đuợc chọn () toggleClass() Chuyển qua lại thêm/xoá lớp phần tử HTML css() đuợ chọn Gán trả thuộc tính CSS 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 lớp là danh sách các lớp, lớp cách 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") 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ị 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 phần tử đầu tiên các phần tử chọn: $("p").css("background-color"); 1.1.5.5.4.2 Gán giá trị cho 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 phần tử 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 phần tử 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 đối tượng HTML nó hi ển th ị trên cửa sổ trình duyệt 1.1.5.6.1 Phương thức width() và height() Phương thức width() gán lấy giá trị độ rộng phần tử HTML Phương thức height() gán lấy giá trị độ cao phần tử HTML Ví dụ sau biểu diễn cách lấy độ rộng và độ cao 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 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 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 phần tử HTML (tính c ả padding) Phương thức innerHeight() lấy giá trị độ cao 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 phần tử <div>: $("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 phần tử HTML (tính c ả padding và border) Phương thức outerHeight() lấy giá trị độ rộng 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 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 phần t HTML (tính c ả padding, border, và margin) Phương thức outerHeight(true lấy giá trị độ rộng 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); }); 1.1.6 AJAX 1.1.6.1 AJAX là gì? AJAX = Asynchronous JavaScript and XML (JavaScript bất đồng và XML) AJAX là nghệ thuật trao đổi liệu với máy chủ, và cập nhật các thành ph ần c m ột trang web mà không cần tải lại toàn trang Hiện đa phần các trang web tương tác với người dùng trên Internet đ ề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 mạnh mẽ, nhiên để viết code thực 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 trình ệt khác 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 cách đơn giản và nhanh chóng Với jQuery, việc sử dụng AJAX là gọi 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 liệu và b ỏ vào phần t HTML chọn! 1.1.6.2 Phương thức AJAX lõi jQuery: jQuery.ajax() Cú pháp: jQuery.ajax( url [, settings] ) Mô tả: Thực yêu cầu HTTP bất đồng (Ajax) Tham số: url: Chuỗi chứa địa để 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ấu hình là tuỳ chọn, không khai báo, giá tr ị mặc định đ ược s dụng Các thiết lập mặc đinh có thể thiết lập phương thức $.ajaxSetup() Hàm $.ajax() là tảng tất các yêu cầu Ajax gởi jQuery Th ường thì nó ít gọi mà thường thay các hàm cao cấp h ơn $.get() hay load() mặc dù trực tiếp sử dụng thì $.ajax() linh hoạt nhiều Cách đơn giản để sử dụng $.ajax() là gọi nó mà không có tham số, lúc này nó tải nội dung trang tại, không xử lý kết Để s dụng k ết qu ả c ần dùng hàm gọi lại Ví dụ: Lưu số liệu vào máy chủ và thông báo cho người sử dụng nó đã hoàn thành $.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); }); Ví dụ: Lấy phiên 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 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 số liệu trên máy chủ, và thông báo cho ng ười sử dụng 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 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 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 liệu từ máy chủ cách sử dụng yêu cầu HTTP GET Tham số: url: Tham số bắt buộc Là chuỗi chứa địa cần gởi yêu cầu data: Tham số tuỳ chọn Dữ liệu gởi lên máy chủ success(data, textStatus, jqXHR): Một hàm gọi lại thực thi yêu cầu thực thành công dataType: Loại liệu dự kiến từ máy chủ Mặc định: Tự đoán là xml, json, script, html Đây là hàm Ajax viết tắt, nó tương đương với: $.ajax({ url: url, data: data, success: success, dataType: dataType }); Một ví dụ đơn giản hàm gọi lại, lấy liệu và chèn vào phần tử chọn: $.get('ajax/test.html', function(data) { $('.result').html(data); alert('Load was performed.'); }); Ví dụ: Yêu cầu trang test.php, bỏ qua các kết gởi $.get("test.php"); Ví dụ: Yêu cầu trang test.php và gửi thêm số 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 từ yêu cầu test.php (HTML hay XML, tùy thu ộc vào nh ững gì đã trả lại) $.get("test.php", function(data){ alert("Data Loaded: " + data); }); Ví dụ: Lấy nội dung trang test.php, trả đị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" ); 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à hàm Ajax 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 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 liệu, tạo 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 mèo gần đây từ JSONP Flickr API <!DOCTYPE html> <html> <head> <style>img{ height: 100px; float: left; }</style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="images"></div> <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { tags: "cat", tagmode: "any", format: "json" }, function(data) { $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == ) return false; }); }); </script> </body> </html> Ví dụ: Nạp liệu JSON từ test.js và truy cập tên từ các liệu JSON đ ược tr ả l ại $.getJSON("test.js", function(json) { alert("JSON Data: " + json.users[3].name); }); Ví dụ: Nạp liệu JSON từ test.js kèm theo liệu đầu vào và truy cập tên t các liệu JSON trả lại $.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 liệu lên sever HTTP POST request Đây là hàm Ajax 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 yêu cầu lên test.php không có tham số và không bắt kiện hoàn tất $.post("test.php"); Gởi yêu cầu lên test.php kèm theo tham số, không bắt kiện hoàn tất $.post("test.php", { name: "John", time: "2pm" } ); Gởi yêu cầu lên test.php kèm theo mảng, không bắt kiện hoàn tất $.post("test.php", { 'choices[]': ["Jon", "Susan"] }); Gởi liêu form: $.post("test.php", $("#testform").serialize()); Bắt kiện hoàn tất $.post("test.php", function(data) { alert("Data Loaded: " + data); }); Gởi tham số, hoàn tất thì thông báo $.post("test.php", { name: "John", time: "2pm" }, function(data) { alert("Data Loaded: " + data); }); Lấy nội dung test.php lưu nó 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ý liệu Json trả $.post("test.php", { "func": "getNameAndTime" }, function(data){ console.log(data.name); // John console.log(data.time); // 2pm }, "json"); Gởi liệu form và ghi kết trả vào div <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </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> /* 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>