Tài liệu Jquery tiếng Việt dễ hiểu

jQuery là một thư viện Java Script mới với rất nhiềufunctions và classes được dựng sẵn.• jQuery nhanh chóng, ngắn gọn giúp việc duyệt các tàiliệu HTML, gỡ rỗi sự kiện, thực hiện các hoạt hình và bổsung tương tác Ajax vào Website trở lên đơn giản. jQueryđược thiết kế để thay đổi cách chúng ta viết JavaScript.Đặc biệt Jquery hỗ trợ mạnh khả năng làm việc với API.• Nếu chuyên về thiết kế web và biết một chút vềJavaScript thì khi dùng jQuery sẽ thấy dễ dàng và rất tiệnlợi

Nguyễn Văn Hùng 299252 1.Giới thiệu về jquery  jQuery là một thư viện Java Script mới với rất nhiều functions và classes được dựng sẵn. • jQuery nhanh chóng, ngắn gọn giúp việc duyệt các tài liệu HTML, gỡ rỗi sự kiện, thực hiện các hoạt hình và bổ sung tương tác Ajax vào Website trở lên đơn giản. jQuery được thiết kế để thay đổi cách chúng ta viết JavaScript. Đặc biệt Jquery hỗ trợ mạnh khả năng làm việc với API. • Nếu chuyên về thiết kế web và biết một chút về JavaScript thì khi dùng jQuery sẽ thấy dễ dàng và rất tiện lợi. 2. Các yêu cầu để tìm hiểu jQuery  1) Kiến thức cần có • Các kiến thức cơ bản về HTML và CSS. • Không cần biết nhiều về javaScript và các thư viện JavaScript khác.  2) Bắt đầu với JQuery • Để có thể làm việc với jQuery chúng ta cần có thư viện • jQuery có thể tải về từ trang http://www.jquery.com 2. Các yêu cầu để tìm hiểu jQuery - Để có thể sử dụng jQuery thì trang web phải liên hệ đến thư viện jQuery như sau <script type="text/javascript" src="jquery.js" mce_src="jquery.js"> </script> - Các đoạn mã jQuery được đặt trong đoạn mã sau để đảm bảo rằng chúng chỉ thực thi sau khi tài liệu đã được tải xong $(document).ready(function(){ // Your code here }); 3. Các chủ điểm chính trong jQuery  - jQuery Selectors  - Attributes  - Sự kiện  - Hiệu ứng  - Ajax 3.1 JQuery selectors a) Các thành phần trong JQuery Selectors  Ba thành phần quan trọng nhất của jQuery Selector là tên thẻ HTML, ID và Class. Người lập trình có thể chỉ sử dụng nó hoặc kết hợp với những Selector khác để chọn  Ví dụ 1: Chọn thẻ HTML Tô màu đỏ cho tất cả các thẻ <a> $("a").css("background", "red"); 3.1 JQuery selectors  Ví dụ 2: Chọn ID  Tô màu đỏ cho thẻ a với ID = foo $("a#foo").css("background", "red"); Ví dụ 3: Chọn Class Tô màu đỏ cho các thẻ a với các class = bar $("a.bar").css("background", "red"); 3.1.1.Các Selector cơ bản  Một số Selector cơ bản của jQuery 1.#id:Trả về một đối tượng có thuộc tính id được truyền vào ví dụ: $("#myId").addClass("myClass"); 2. element :Trả về tất cả các phần tử có tên được chỉ ra ví dụ: $("div").addClass("myClass"); 3. Class : Trả về tất cả các phần tử thuộc lớp có tên được chỉ ra ví dụ: $(".wrapper").addClass("myClass"); 3.1.1.Các Selector cơ bản 4) selector1, selector2, selectorN: Trả về dãy các Selector được liệt kê Ví dụ: $("select,input,p").css("border","1px solid #f00");  5) * : Trả về tất cả các phần tử Ví dụ: $("*").css("color","#f00"); 6) ^ : Tìm những thành phần bắt đầu bằng chuỗi sau dấu ^ Ví dụ: $('a[href^=mailto:]').addClass('email'); 7) $ : Tìm chuỗi kết thúc với cụm từ sau $ Ví dụ: $('a[href$=„.pdf]‟'').addClass('ebook'); 3.1.2 Các yếu tố chọn lọc cơ bản  1. :first Tương ứng với phần tử đầu tiên được chọn Ví dụ: $("tr:first").fadeTo("slow",1);  2. :last Tương ứng với phần tử cuối cùng được chọn Ví dụ: $("ul li:last").fadeTo("slow",1);  3. :not(selector) Bỏ các phần tử tương ứng với selector Ví dụ: $("ul li:not(.active)").addClass("myClass");  4. :even Tương ứng với các phần tử chẵn Ví dụ: $("tr:even").css("color","#f00");  5. :odd Tương ứng với các phần tử lẻ Ví dụ: $("tr:odd").css("color","#0f0"); [...]... cửa sổ trình duyệt và tài liệu hiện hành đang được load trong trang web, các hành động của user khi nhập dữ liệu vào form và khi click vào các button trong form Khi sử dụng bộ quản lý sự kiện chúng ta có thể viết các hàm để biểu diễn cho các hành động dựa vào các sự kiện đựoc chọn 3.3.Sự kiện  Các sự kiện trong jQuery  So sánh giữa sự kiện của JavaScript và jQuery JavaScript jQuery onblur onchange... trang web  http://api .jquery. com/category/events/ 3.4 Hiệu ứng  Các hiệu ứng động của jQuery sẽ làm cho trang web của bạn thêm phần sinh động Jquery cho phép bạn ẩn hiện, trượt lên trượt xuống các thành phần của trang web Bạn cũng có thể cho nó xảy ra cùng một lúc hoặc theo thứ tự định trước 3.4 Hiệu ứng  Các hiệu ứng cơ bản trong jQuery 1) Hiệu ứng ẩn và hiện trong jQuery Với jQuery, chúng ta có thể... callback Sau khi hiển thị dữ liệu xong chúng ta sẽ hiện một câu thông báo „Tải dữ liệu thành công‟  $(document).ready(function( ){ $("div").load("files/message.txt",callback); });  function callback(){ $("#targetDiv").text("Tải dữ liệu thành công."); }  3.5 Ajax với jQuery  Một số hàm thao tác với ajax bằng jQuery  1 load(url, parameters, callback) Jquery có một số chức năng để... 3.5 Ajax với jQuery  3) Sử dụng $.ajax( )  Cú pháp : $.ajax( url, [ settings ] ) Các tham số: type: POST hoặc GET url: đường dẫn đến file xử lý(server side) data: dữ liệu truyền đi dataType: kiểu dữ liệu trả về, bao gồm: xml, json, script, hoặc html  async: kiểu gọi: đồng bộ(synchronous) hoặc bất đồng bộ(asynchronous)  success: hàm callback xử lý dữ liệu trả về      3.5 Ajax với jQuery  Ví... biến nhất là hàm load().Bạn sử dụng hàm load() để hiện thị những dữ liệu tải xuống trong một tập hợp các phần tử trực tiếp  Url: là địa chỉ của trang nguồn bạn đang cần lấy Parameters: là một đối tượng lưu giữ các giá trị mà bạn muốn gửi đến máy chủ Callback: là một hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành 3.5 Ajax với jQuery  2) Sử dụng $.post( ) để gửi dữ liện đến Server  Bạn có thể... hoặc GET được sử dụng, và bạn có thể muốn lấy bằng tay dữ liệu được tải về thoát khỏi sự tải về không cần thiết Để làm điều này, jQuery cung cấp 2 phương thức $.get và $.post Các chức năng này cho phép bạn giao tiếp với máy chủ sử dụng phương thức POST và GET Và chúng cho phép bạn truy cập mà không tự động nạp nó vào phần tử nào hết 3.5 Ajax với jQuery  Ví dụ:  $(document).ready(function( ){    $.post("action.php",... ra những đối tượng được checked Ví dụ: $("input[type=checkbox]:checked").attr("disabled","disabled"); Trên đây là một số Selector cơ bản của jQuery chi tiết có thể xem tại http://api .jquery. com/category/selectors/ 3.2.Attributes  Các thuộc tính cơ bản trong jQuery 3.2.Attributes Thuộc tính Chi tiết thuộc tính Ví dụ addClass(Class) Thêm mỗi class đã xác định vào các phần tử phù hợp nếu có nhiều class... $("p").toggle(); });  Tham số callback là tên của một hàm được thực hiện sau khi hiệu ứng ẩn (hiện) xảy ra 3.4 Hiệu ứng  3) Các hiệu ứng jQuery Slide - slideDown, slideUp,      slideToggle Các phương thức slide cho phép dần dần thay đổi độ cao (height) của thẻ HTML được chọn Trong jQuery có các phương thức slide như sau: $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)... $(".panel").slideUp() })  Ví dụ về slideToggle() $(".flip").click(function(){ $(".panel").slideToggle(); }); 3.4 Hiệu ứng  4) Các hiệu ứng jQuery Fade - fadeIn, fadeOut, fadeTo  Các phương tức fade sẽ dần dần thay đổi độ mờ (có thể nhìn thấy        được) của 1 thẻ HTML Trong jQuery, các phương thức fade bao gồm: $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)... $("button").click(function(){ $("div").fadeTo("slow",0.25); });  Ví dụ fadeOut()  $("button").click(function(){ $("div").fadeOut(4000); }); 3.4 Hiệu ứng  5) Hiệu ứng hoạt hình tự tạo trong jQuery (Custom Animations)  Cú pháp của phương thức jQuery dùng cho tạo 1 đối tượng hoạt hình như sau:  $(selector).animate({params},[duration],[easing],[callba ck])  Tham số chính là params Tham số này định nghĩa các thuộc . đầu với JQuery • Để có thể làm việc với jQuery chúng ta cần có thư viện • jQuery có thể tải về từ trang http://www .jquery. com 2. Các yêu cầu để tìm hiểu jQuery - Để có thể sử dụng jQuery. trong jQuery  - jQuery Selectors  - Attributes  - Sự kiện  - Hiệu ứng  - Ajax 3.1 JQuery selectors a) Các thành phần trong JQuery Selectors  Ba thành phần quan trọng nhất của jQuery. liên hệ đến thư viện jQuery như sau <script type="text/javascript" src=" ;jquery. js" mce_src=" ;jquery. js"> </script> - Các đoạn mã jQuery được đặt trong