Thông tin tài liệu
Tiêu luân Tìm hiể u các chức năng và thành phần của JQuery M ụ c l ụ c: I) Nôi dung 1 1) Giơ i thiêu 1 2) Selectors – Bộ chọn lọc (nếu có), nêu ví dụ (demo rồi chụp hình) 2 3) Events – Sự kiện (nếu có), nêu ví dụ (demo rồi chụp hình) 4 4) Effects – Hiệu ứng (nếu có), nêu ví dụ (demo rồi chụp hình) 5 5) Ajax (nếu có), nêu ví dụ (demo rồi chụp hình) 7 6) Form Validation (nếu có), nêu ví dụ (demo rồi chụp hình) 9 7) Plugin/Add-ons (nếu có), nêu ví dụ (demo rồi chụp hình) 11 8) Các thành phần cơ bản khác (ứng vớ i mỗi Framework) 14 II) Tai liêu tham khao ̉ ̣ ̣ ́ ̣ ̀ ̣ ̉ 15 Tiểu luận JQuery Môn Lập Trình Web I) Nôi dung 1) Giơi thiêu ϖ Thư viện jQuery được nghiên cứu và phát triển bởi John Resig , ông là một chuyên gia lập trình công cụ JavaScript (JavaScript Tool Developer) cho Mozilla Corporation và tác giả của cuốn sách Pro JavaScript Techniques, Secrets of the JavaScript Ninja. Hiện tại, John sinh sống ở Boston. ϖ Một số người dùng nói rằng thư viện jQuery giúp tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là khó làm việc cùng. Thư viện jQuery là kiểu thư viện JavaScript mới cần thiết cho phép các nhà phát triển làm việc “khiêm tốn” với JavaScript. Thư viện jQuery không phải là một framework cỡ lớn tốt nhất trong AJAX và cũng không phải là các cải tiến phức tạp vô ích. Thư viện jQuery được thiết kế để thay đổi cách viết JavaScript. ϖ Thư viện jQuery có phiên bản 1.0 ra đời ngày 26/08/2006, phiên bản gân đây là 1.4.2 (19/02/2010), là dự án mã nguồn mở tuân theo giấy phép của MIT và GPL. ϖ Thư viện jQuery tương thích với nhiều trình duyệt (Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+ và Chrome). Cộng đồng phát triển mạnh mẽ và được sử dụng rộng rãi như Dell, ESPN, BBC, Reuters, WordPress, Digg, … ϖ Những gì Jquery có thể làm : ¬ Hướng tới các thành phần trong tài liệu HTML . Nếu không sử dụng thư viện JavaScript này, chúng ta 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 chúng ta chọn bất cứ thành phần nào của tài liệu để “vọc” một cách dễ dàng như sử dụng CSS. ¬ Thay đổi giao diện của m ột trang web. CSS là công cụ rất ̣ ́ ̣ ̀ mạnh để định dạng một trang web nhưng nó có một nhược điểm là không phải tất cả các trình duyệt đều hiển thị giống nhau. Cho nên jQuery ra đời để lấp chỗ trống này,vì vậy chúng ta có thể sử dụng Jquery để giúp trang web có thể hiển thị tốt Trang 1 Tiểu luận JQuery Môn Lập Trình Web trên hầu hết các trình duyệt. Hơn nữa jQuery cũng có thể thay đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào của tài liệu HTML ngay cả khi trang web đó đã được trình duyệt load thành công. Thay đổi nội dung của tài liệu. Jquery không phải chỉ có thể thay đổi bề ngoài của trang web, nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ với vài dòng code. Nó có thể thêm hoặc bớt nội dung trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng có thể được viết lại và mở rộng. Tất cả những điều này bạn hoàn toàn có thể làm được nhờ sự giúp đỡ của API (Application Programming Interface = Giao diện lập trình ứng dụng). 2) Selectors – Bộ chọn lọc (nếu có), nêu ví dụ (demo rồi chụp hình). VD: animated selector Description: Select all elements that are in the progress of an animation at the time the selector is run. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Demo Jquery - animated selector</title> <style> div {background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; } div.colored { background:green; } </style> <script src="js/jquery-1.5.js"></script> Trang 2 Tiểu luận JQuery Môn Lập Trình Web </head> <body> <button id="run">Run</button> <div align="center">Nam</div> <div id="mover" align="center">Mover slow</div> <div align="center">Tr.An</div> <div id="mover1" align="center">Mover fast</div> <script> $("#run").click(function(){ $("div:animated").toggleClass("colored"); }); function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt(); function animateIt1() { $("#mover1").slideToggle("fast", animateIt1); } animateIt1(); </script> </body> </html> Trước khi chon Run Sau khi chon Run Trang 3 Tiểu luận JQuery Môn Lập Trình Web 3) Events – Sự kiện (nếu có), nêu ví dụ (demo rồi chụp hình). JQuery cho chúng ta 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 ở chỗ nhờ vào các Event Handlers mà code HTML không bị rối tung lên. VD: .click( handler(eventObject) ) Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> ̣ ̣ <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Demo Jquery - events click</title> <style> p { color:red; margin:5px; cursor:pointer; font-size:20px;} p.hilite { background:yellow; } </style> <script src="js/jquery-1.5.js"></script> </head> <body> <p align="center">Nhưng tup lêu tranh giưa canh đông</p> <p align="center">Quanh hè mươp đâu trổ say bông</p> <p align="center">Bao la bat ngat hương tinh đươm</p> <p align="center">Trăng ngâp men say giưa canh đông </p> Trang 4 Tiểu luận JQuery Môn Lập Trình Web <script> $("p").click(function () { $(this).slideUp(); }); $("p").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); }); </script> </body> </html> ̃ ́ ̀ ̃ ́ ̀ ́ ̣ ́ ́ ̀ ̣ ́ ̣ ̃ ́ ̀ Trước khi click Sau khi click vao sẽ ân đoan văn đó 4) Effects – Hiệu ứng (nếu có), nêu ví dụ (demo rồi chụp hình). VD: animate() Description: Perform a custom animation of a set of CSS properties. Code: Trang 5 Tiểu luận JQuery Môn Lập Trình Web <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Demo Jquery - effects animate</title> <style> ̀ ̉ ̣ div { background-color:#bca; width:200px; height:1.1em; text-align:center; border:2px solid green; margin:3px; font-size:14px; } button { font-size:14px; } </style> <script src="js/jquery-1.5.js"></script> </head> <body> <button id="go">» Run</button> <button id="go1">» Reset</button> <div id="block" align="center">Chao mưng ban đên vơi Jquery! </div> <script> $( "#go" ).click(function(){ Trang 6 Tiểu luận JQuery Môn Lập Trình Web $( "#block" ).animate( { width: "90%" }, { queue: false, duration: 3000 }) .animate({ fontSize: "24px" }, 1500 ) .animate({ borderRightWidth: "15px" }, 1500 ); ̀ ̀ ̣ ́ ́ }); //ham reset $( "#go1" ).click(function(){ $( "div" ).css({ width: "",fontSize: "", borderWidth: ""}); }); </script> </body> </html> Trước khi click Run: Sau khi click Run: Khi click Reset: 5) Ajax (nếu có), nêu ví dụ (demo rồi chụp hình). VD: Create a simple XMLHttpRequest, and retrieve data from a TXT file Trang 7 Tiểu luận JQuery Môn Lập Trình Web ̀ (Chay băng vertrigo) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF- 8" /> <title>Demo Jquery - ajax</title> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.response Text; } } xmlhttp.open("GET","ajax/info.txt",true); xmlhttp.send(); } ̣ ̀ [...]... Unselect - switch to the summaryTemplate */ selectedItem.tmpl = $( "#summaryTemplate" ).template(); Trang 1 3 Tiểu luận JQuery Trình Web /* Refresh rendering */ selectedItem.update(); selectedItem = null; }); Môn L ập Trước khi chọn: Sau khi chọn: 8) Các thành phần cơ bản khác (ứng với mỗi Framework) Selectors o Attribute Contains Prefix Selector [name|="value"] Selects elements... ́ $("span").text("Validated ").show(); ̣ return true; } $("span").text("Not valid!").show().fadeOut(1000); return false; }); Trang 1 0 Tiểu luận JQuery Trình Web Trước khi chọn: Nhậ p vào giá trị khác Nam, An: Nhậ p vào giá trị đúng: Môn L ập 7) Plugin/Add-ons (nế u có), nêu ví dụ (demo rồi chụp hình) VD: template( [ name ] ) Description: Compile the contents of the matched... ́ ́ Demo Jquery - form submit Trang 9 Tiểu luận JQuery Trình Web Môn L ập p { margin:0; color:blue; font-size:20px;} div,p { margin-left:10px; } span { color:red; } t{color:red;} Giá trị đung: Nam hoăc An. ${Name} ${Name}${Name}Year: ${Year}MSSV: $ {MSSV} Click for details: var movies = [ Trang 1 2 Tiểu luận JQuery Trình Web Môn L ập { Name: "Nguyên Binh Nam", Year: "1989", MSSV: "DTH082050" }, { Name: "Lê Thị Trương An", Year: "1990", MSSV: "DTH082034" }, ̃ ̀ ]; var selectedItem = null; ̀ /* Render...Trang 8 Tiểu luận JQuery Trình Web Môn L ập Chao mưng ban đên vơi Ajax Change Trước khi... with that string followed by a hyphen (-) o Attribute Equals Selector [name="value"] Selects elements that have the specified attribute with a value exactly equal to a certain value Events Trang 1 4 Tiểu luận JQuery Trình Web o bind() Attach a handler to an event for the elements o change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element Effects o fadeIn() Display... template, using the specified data o link() Link changes to the matched elements to an object II) Tai liêu tham khao 1) http:/ /jquery. com/ 2) http://www.laptrinhviet.com 3) http://www.izwebz.com 4) http://vnwebmaster.com/forum/javascript-va-ajax/10-huong-dantao-form-validation-voi -jquery- t2401.html 5) http://www.ibm.com 6) http://www.w3schools.com ̀ ̣ ̉ Trang 15 . liệu HTML và chọn ra các thành phần liên quan. Jquery cho phép chúng ta chọn bất cứ thành phần nào của tài liệu để “vọc” một cách dễ dàng như sử dụng CSS. ¬ Thay đổi giao diện của m ột . Tiêu luân Tìm hiể u các chức năng và thành phần của JQuery M ụ c l ụ c: I) Nôi dung 1 1) Giơ i . ví dụ (demo rồi chụp hình) 11 8) Các thành phần cơ bản khác (ứng vớ i mỗi Framework) 14 II) Tai liêu tham khao ̉ ̣ ̣ ́ ̣ ̀ ̣ ̉ 15 Tiểu luận JQuery Môn Lập Trình Web I) Nôi
Ngày đăng: 24/10/2014, 16:56
Xem thêm: tiểu luận tìm hiểu các chức năng và thành phần ứng dụng của jquery, tiểu luận tìm hiểu các chức năng và thành phần ứng dụng của jquery
