Tài liệu jQuery tiếng Việt

Tài liệu jQuery tiếng ViệtTài liệu jQuery tiếng Việt giới thiệu đến các bạn những nội dung về jQuery, tổng quan về jQuery, thuộc tính trong jQuery, thao tác DOM trong jQuery, xử lý sự kiện trong jQuery,... Với các bạn đang học và nghiên cứu về Hệ điều hành mày tính thì đây là tài liệu tham khảo hữu ích.

http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Mục lục Giới thiệu jQuery Đối với độc giả Điều kiện tiền đề . Thực hành trực tuyến . Tổng quan jQuery jQuery gì? Cách sử dụng jQuery? Cài đặt jQuery nội Ví dụ Sử dụng CDN . Ví dụ Cách để gọi hàm thư viện jQuery? . Cách sử dụng Custom Script jQuery? Sử dụng nhiều thư viện jQuery 10 Những có Trang sau? 10 Cơ jQuery . 11 Đối tượng String . 11 Đối tượng Number jQuery . 11 Đối tượng Boolean jQuery . 11 Đối tượng Object jQuery 12 Đối tượng Array jQuery 12 Hàm (Function) jQuery . 12 Các tham số jQuery . 13 Context jQuery . 14 Phạm vi (Scope) jQuery . 14 Callback jQuery 15 Các Closure jQuery 15 http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Proxy Pattern jQuery 16 Các hàm có sẵn jQuery . 17 Document Object Model (DOM) . 18 Selector jQuery 19 Hàm sở $() jQuery 20 Ví dụ 20 Cách sử dụng Selector jQuery? 21 Ví dụ Selector jQuery 22 Thuộc tính jQuery 28 Nhận giá trị thuộc tính jQuery . 28 Ví dụ 28 Thiết lập giá trị thuộc tính jQuery . 29 Ví dụ 29 Áp dụng Style jQuery . 30 Ví dụ 30 Các phương thức Atribute jQuery 31 Ví dụ . 33 Truy cập DOM jQuery 35 Tìm kiếm phần tử mục (index) jQuery 35 Ví dụ 36 Lọc phần tử jQuery 37 Ví dụ 38 Xác định vị trí phần tử jQuery 39 Ví dụ 39 Các phương thức DOM Filter jQuery . 40 Các phương thức DOM Traversing jQuery 41 CSS Selector jQuery 43 Áp dụng thuộc tính CSS jQuery . 43 Ví dụ 43 http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Áp dụng nhiều thuộc tính CSS jQuery 45 Ví dụ 45 Thiết lập độ rộng chiều cao phần tử jQuery . 46 Ví dụ 46 Các phương thức CSS jQuery . 47 Thao tác DOM jQuery 49 Thao tác nội dung jQuery . 50 Ví dụ 50 Thay phần tử DOM jQuery . 51 Ví dụ 51 Gỡ bỏ phần tử DOM jQuery 52 Ví dụ 53 Chèn phần tử DOM jQuery . 54 Ví dụ 54 Các phương thức thao tác DOM jQuery 55 Xử lý kiện jQuery 58 Bind Event Handler jQuery 59 Gỡ bỏ Event Handler jQuery 60 Các loại kiện jQuery 61 Đối tượng Event jQuery . 63 Các thuộc tính đối tượng Event jQuery 63 Ví dụ . 65 Các phương thức đối tượng Event jQuery 67 Các phương thức thao tác đối tượng Event jQuery . 67 Các phương thức Event Helper jQuery 69 Các phương thức Trigger jQuery . 69 Phương thức Binding jQuery . 69 jQuery Ajax . 73 Tải liệu cách đơn giản với jQuery 73 http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Cú pháp 73 Ví dụ 74 Nhận liệu JSON jQuery 75 Cú pháp 75 Ví dụ 75 Truyền liệu tới Server jQuery 77 Ví dụ 77 Các phương thức jQuery AJAX 78 Các kiện jQuery AJAX . 80 Hiệu ứng jQuery 80 Hiển thị ẩn phần tử jQuery 81 Cú pháp 81 Ví dụ 81 Toggle phần tử jQuery . 83 Cú pháp 83 Ví dụ 83 Các phương thức jQuery Effect 84 Các hiệu ứng sở UI Library jQuery . 87 Plugins jQuery 88 Cách sử dụng Plugins jQuery 89 Cách để phát triển Plug-in jQuery 90 Ví dụ . 90 Tài liệu tham khảo jQuery . 92 Các đường link hữu ích jQuery 92 Các JavaScript Framework khác 92 http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Giới thiệu jQuery jQuery thư viện kiểu JavaScript, tạo John Resig vào năm 2006. jQuery làm đơn giản hóa việc truyền tải HTML, xử lý kiện, tạo hiệu ứng động tương tác Ajax. Với jQuery, khái niệm Rapid Web Development không xa lạ. Loạt hướng dẫn dựa nguồn tài liệu của: Tutorialspoint Đối với độc giả Loạt hướng dẫn thiết kế cho nhà lập trình muốn học kiến thức jQuery khái niệm chương trình theo bước đơn giản dễ dàng. Bài hướng dẫn cung cấp cho bạn hiểu biết đầy đủ jQuery với ví dụ phù hợp. Điều kiện tiền đề Trước tiến hành học tập với loạt này, bạn nên có kiến thức HTML, CSS, JavaScript, Document Object Model (DOM) soạn thảo (Text Editor) khác. Khi phát triển ứng dụng web sử dụng jQuery, tốt bạn hiểu cách ứng dụng web internet làm việc. Thực hành trực tuyến Với chủ đề học, cung cấp cho bạn ví dụ minh họa, từ giúp bạn hiểu sâu cảm giác thích thú với hướng dẫn chúng tôi. Hãy chọn tùy chọn Try it góc bên phải ví dụ để thực hành ngay. Tổng quan jQuery jQuery gì? jQuery thư viện kiểu JavaScript, tạo John Resig vào năm 2006 với phương châm tuyệt vời: Write less, more. jQuery làm đơn giản hóa việc truyền tải HTML, xử lý kiện, tạo hiệu ứng động tương tác Ajax. Với jQuery, khái niệm Rapid Web Development không xa lạ. jQuery công cụ tiện ích JavaScript làm đơn giản hóa tác vụ đa dạng với việc viết code hơn. Dưới liệt kê số tính tối quan trọng hỗ trợ jQuery: http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp  Copyright © vietjack.com Thao tác DOM − jQuery giúp dễ dàng lựa chọn phần tử DOM để traverse cách dễ dàng sử dụng CSS, chỉnh sửa nội dung chúng sử dụng phương tiện Selector mã nguồn mở, mà gọi Sizzle.  Xử lý kiện − jQuery giúp tương tác với người dùng tốt việc xử lý kiện đa dạng mà không làm cho HTML code rối tung lên với Event Handler.  Hỗ trợ AJAX − jQuery giúp bạn nhiều để phát triển site giàu tính phản hồi tốt sử dụng công nghệ AJAX.  Hiệu ứng − jQuery kèm với nhiều hiệu ứng đa dạng đẹp mắt mà bạn sử dụng Website mình.  Gọn nhẹ − jQuery thư viện gọn nhẹ - có kích cỡ khoảng 19KB (gzipped).  Được hỗ trợ hầu hết trình duyệt đại − jQuery hỗ trợ hầu hết trình duyệt đại, làm việc tốt IE 6.0+, FF 2.0+, Safari 3.0+, Chrome Opera 9.0+  Cập nhật hỗ trợ công nghệ − jQuery hỗ trợ CSS3 Selector cú pháp XPath bản. Cách sử dụng jQuery? Có hai cách để sử dụng jQuery:  Cài đặt nội − Bạn tải jQuery Library thiết bị nội bạn include HTML code.  Sử dụng từ CDN (CDN Based Version) − Bạn include thư viện jQuery vào HTML code cách trực tiếp từ Content Delivery Network (CDN). Cài đặt jQuery nội  Truy cập trang https://jquery.com/download/ để tải phiên jQuery nhất.  Bây đặt file jquery-2.1.3.min.js vào thư mục Website bạn, ví dụ /jquery. http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Ví dụ Bây bạn include thư viện jquery vào HTML file bạn sau: The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello Nó cho kết quả: Sử dụng CDN Bạn include thư viện jQuery vào HTML code cách trực tiếp từ Content Delivery Network (CDN). Google Microsoft cung cấp phiên nhất. Trong loạt này, sử dụng Google CDN. Ví dụ Bây viết lại ví dụ sử dụng thư viện jQuery từ Google CDN. http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello Nó cho kết quả: Cách để gọi hàm thư viện jQuery? Cũng tương tự JavaScript, trước sử dụng đoạn code jQuery để đọc hay chỉnh sửa đối tượng DOM, cần đảm bảo bắt đầu thêm kiện sau DOM sẵn sàng. Nếu bạn muốn kiện làm việc trang bạn, bạn nên gọi bên hàm $(document).ready(). Mọi thứ bên tải sau DOM tải trước nội dung trang tải. Để làm điều này, đăng ký kiện sẵn sàng cho tài liệu sau: $(document).ready(function() { // stuff when DOM is ready }); http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Để gọi hàm thư viện jQuery nào, sử dụng thẻ HTML script đây: The jQuery Example $(document).ready(function() { $("div").click(function() {alert("Hello, world!");}); }); Click on this to see a dialogue box. Nó cho kết sau: Cách sử dụng Custom Script jQuery? Nó thực tốt viết riêng cho bạn Custom Code Custom JavaScript file:custom.js, sau: /* Filename: custom.js */ $(document).ready(function() { $("div").click(function() { alert("Hello, world!"); http://vietjack.com/ Trang chia sẻ học online miễn phí Trang http://vietjack.com/jquery/index.jsp Copyright © vietjack.com }); }); Bây bao custom.js vào HTML file sau: The jQuery Example Click on this to see a dialogue box. Nó cho kết sau: Sử dụng nhiều thư viện jQuery Bạn sử dụng nhiều thư viện mà không xảy xung đột chúng. Ví dụ, bạn sử dụng thư viện jQuery thư viện MooTool JavaScript với nhau. Bạn kiểm tra phương thức: jQuery - Phương thức noConflict để biết thêm chi tiết. Những có Trang sau? Đừng bận tâm nhiều bạn không hiểu ví dụ trên. Bạn sớm hiểu chúng chương tiếp theo. Trong chương tới, đề cập số khái niệm mà đến từ qui ước JavaScript. http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 10 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Enter your name and click on the button: STAGE Còn code viết result.php script:; Bây giờ, bạn nhập text vào hộp input cho sau nhấn nút Show Result để xem bạn nhập Input box. Các phương thức jQuery AJAX Bạn thấy khái niệm AJAX sử dụng jQuery. Bảng sau liệt kê tất phương thức jQuery AJAX mà bạn sử dụng tùy theo yêu cầu bạn: STT Phương thức & Miêu tả http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 78 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com jQuery.ajax( options ) Tải trang từ xa sử dụng HTTP Request jQuery.ajaxSetup( options ) Setup thiết lập global cho AJAX Request jQuery.get( url, [data], [callback], [type] ) Tải trang từ xa sử dụng HTTP GET Request jQuery.getJSON( url, [data], [callback] ) Tải liệu JSON sử dụng HTTP GET Request jQuery.getScript( url, [callback] ) Tải thực thi JavaScript file sử dụng HTTP GET request. jQuery.post( url, [data], [callback], [type] ) Tải trang từ xa sử dụng HTTP POST request. load( url, [data], [callback] ) Tải HTML từ file từ xa inject vào DOM. serialize( ) Sắp xếp theo thứ tự tập hợp phần tử input vào chuỗi liệu serializeArray( ) Xếp theo thứ tự tất Form phần tử Form phương thức .serialize() trả cấu trúc liệu JSON để bạn làm việc với nó. http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 79 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Các kiện jQuery AJAX Bạn gọi nhiều phương thức jQuery đa dạng suốt vòng đời tiến trình gọi AJAX. Dựa sở Event/Stage khác nhau, phương thức sau có sẵn: Bạn truy cập vào trang sau để xem tất AJAX Event jQuery. STT Phương thức & Miêu tả ajaxComplete( callback ) Đính kèm hàm để thực thi AJAX Request hoàn thành ajaxStart( callback ) Đính kèm hàm để thực thi AJAX Request bắt đầu hoạt động sẵn sàng ajaxError( callback ) Đính kèm hàm để thực thi AJAX Request thất bại ajaxSend( callback ) Đính kèm hàm để thực thi trước AJAX Request gửi ajaxStop( callback ) Đính kèm hàm để thực thi tất AJAX Request kết thúc ajaxSuccess( callback ) Đính kèm hàm để thực thi AJAX Request kết thúc thành công Hiệu ứng jQuery http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 80 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com jQuery cung cấp giao diện đơn giản để thực loại hiệu ứng tuyệt vời đa dạng. Các phương thức jQuery cho phép áp dụng nhanh chóng hiệu ứng phổ biến với cấu hình tối thiểu. Chương bàn luận tất phương thức jQuery quan trọng để tạo Visual Effect. Hiển thị ẩn phần tử jQuery Các lệnh để hiển thị ẩn phần tử gọn mong muốn:show() để hiển thị phần tử tập hợp wrap hide() để ẩn chúng. Cú pháp Sau cú pháp đơn giản cho phương thức show() jQuery: [selector].show( speed, [callback] ); Miêu tả chi tiết tham số:  speed − Một chuỗi biểu diễn tốc độ định trước ("slow", "normal", "fast") số mili giây để chạy hiệu ứng (ví dụ: 1000).  callback − tham số tùy ý biểu diễn hàm để thực thi hiệu ứng hoàn thành; thực thi lần cho hiệu ứng. Còn cú pháp đơn giản cho phương thức hide() jQuery: [selector].hide( speed, [callback] ); Miêu tả chi tiết tham số:  speed − Một chuỗi biểu diễn tốc độ định trước ("slow", "normal", "fast") số mili giây để chạy hiệu ứng (ví dụ: 1000).  callback − tham số tùy ý biểu diễn hàm để thực thi hiệu ứng hoàn thành; thực thi lần cho hiệu ứng. Ví dụ Bạn xem xét HTML file sau với jQuery code nhỏ: http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 81 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com The jQuery Example $(document).ready(function() { $("#show").click(function () { $(".mydiv").show( 1000 ); }); $("#hide").click(function () { $(".mydiv").hide( 1000 ); }); }); .mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:100px;} This is a SQUARE http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 82 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Nó cho kết sau: Toggle phần tử jQuery jQuery cung cấp phương thức để toggle trạng thái hiển thị phần tử hiển thị ẩn. Nếu phần tử khởi tạo hiển thị, ẩn; ẩn, hiển thị. Cú pháp Cú pháp đơn giản cho phương thức toggle() jQuery: [selector] toggle([speed][, callback]); Dưới miêu tả tham số:  speed − Một chuỗi biểu diễn tốc độ định trước ("slow", "normal", "fast") số mili giây để chạy hiệu ứng (ví dụ: 1000).  callback − tham số tùy ý biểu diễn hàm để thực thi hiệu ứng hoàn thành; thực thi lần cho hiệu ứng. Ví dụ Chúng ta tạo hiệu ứng cho phần tử nào, ví dụ phần tử div chứa hình ảnh: The jQuery Example $(document).ready(function() { $(".clickme").click(function(event){ $(".target").toggle('slow', function(){ $(".log").text('Transition Complete'); http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 83 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com }); }); }); .clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:50px;} Click Me Nó cho kết sau: Các phương thức jQuery Effect Ở phần trên, bạn theo dõi khái niệm jQuery Effect. Bảng liệt kê tất phương thức để tạo kiểu hiệu ứng khác nhau: STT Phương thức & Miêu tả animate( params, [duration, easing, callback] ) http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 84 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Một hàm để tạo hiệu ứng custom fadeIn( speed, [callback] ) Fade in tất phần tử kết nối việc điều chỉnh opacity (độ chắn sáng) kích hoạt callback tùy ý sau hoàn thành. fadeOut( speed, [callback] ) Fade out tất phần tử kết nối điều chỉnh opacity 0, sau thiết lập hiển thị “none” kích hoạt callback tùy ý sau hoàn thành fadeTo( speed, opacity, callback ) Fade độ chắn sáng tất phần tử kết nối tới opacity cho kích hoạt callback tùy ý sau hoàn thành. hide( ) Ẩn phần tử tập hợp kết nối chúng hiển thị hide( speed, [callback] ) Ẩn tất phần tử kết nối sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành show( ) Hiển thị phần tử tập hợp kết nối chúng bị ẩn show( speed, [callback] ) Hiển thị tất phần tử kết nối sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành 10 slideDown( speed, [callback] ) Bộc lộ tất phần tử kết nối điều chỉnh chiều cao chúng kích hoạt http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 85 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com callback tùy ý sau hoàn thành 11 slideToggle( speed, [callback] ) Toggle nhìn thấy tất phần tử kết nối điều chỉnh chiều cao kích hoạt callback tùy ý sau hoàn thành 12 slideUp( speed, [callback] ) Ẩn tất phần tử kết nối điều chỉnh chiều cao chúng kích hoạt callback tùy ý sau hoàn thành. 13 stop( [clearQueue, gotoEnd ]) Dừng tất hiệu ứng chạy tất phần tử xác định 14 toggle( ) Toggle hiển thị phần tử tập hợp phần tử kết nối 15 toggle( speed, [callback] ) Toggle hiển thị phần tử tập hợp phần tử kết nối sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành 16 toggle( switch ) Toggle hiển thị phần tử tập hợp kết nối dựa việc chuyển mạch giữa: true hiển thị tất phần tử, false ẩn tất phần tử 17 jQuery.fx.off Vô hiệu hóa toàn tất hiệu ứng http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 86 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Các hiệu ứng sở UI Library jQuery Để sử dụng hiệu ứng này, bạn tải jQuery UI Library jquery-ui1.11.4.custom.zip từ trang jQuery UI Library sử dụng Google CDN để sử dụng theo cách tương tự thực cho jQuery. Chúng sử dụng Google CDN cho jQuery UI sử dụng đoạn trích code sau trang HTML: STT Phương thức & Miêu tả Blind Blind away phần tử hiển thị blind in Bounce Bounce phần tử theo chiều dọc chiều ngang n lần Clip Clip on clip off phần tử, theo chiều dọc chiều ngang Drop Drop away phần tử hiển thị drop in Explode Explode phần tử thành nhiều phần Fold http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 87 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Fold phần tử phần tờ giấy Highlight Highlight với màu cho Puff Scale fade out hiệu ứng tạo hiệu ứng puff Pulsate Pulsate độ chắn sáng phần tử nhiều lần 10 Scale Shrink grow phần tử tỷ lệ phần trăm 11 Shake Shake phần tử theo chiều dọc chiều ngang n lần. 12 Size Đưa phần tử chiều cao rộng xác định 13 Slide Slide out phần tử khỏi cửa nhìn 14 Transfer Chuyển hình dáng phần tử cho phần tử khác Plugins jQuery http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 88 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Plug-in phần code viết theo JavaScript file chuẩn. Những file cung cấp phương thức jQuery hữu ích mà sử dụng với phương thức jQuery Library. Có nhiều jQuery plug-in có sẵn để bạn tải từ kho lưu tại:http://jquery.com/plugins. Cách sử dụng Plugins jQuery Để tạo phương thức plugin có sẵn, bao plugin file (tương tự jQuery Library file) vào phần tử tài liệu. Chúng phải chắn xuất sau jQuery file nguồn chính, trước JavaScript code mà custom. Ví dụ sau cách để bao jquery.plug-in.js plugin − The jQuery Example $(document).ready(function() { .your custom code . }); . http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 89 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Cách để phát triển Plug-in jQuery Đó đơn giản để viết plug-in cho riêng bạn. Bạn theo cú pháp sau để tạo phương thức: jQuery.fn.methodName = methodDefinition; Ở đây, methodNameM tên phương thức methodDefinition định nghĩa phương thức thực sự. jQuery team đề nghị Guideline sau:  Bất kỳ phương thức hàm bạn đính kèm phải có dấu chấm phảy (;) cuối cùng.  Phương thức bạn phải trả đối tượng jQuery, trừ có ghi khác.  Bạn nên sử dụng this.each để lặp lại tập hợp phần tử kết nối tại. Nó làm cho code rõ ràng tương thích.  Đặt trước filename với jquery, theo sau tên plugin kết thúc với .js  Luôn đính kèm plugin tới jQuery cách trực tiếp thay sử dụng $, người sử dụng dùng biệt hiệu custom thông qua phương thức noConflict(). Ví dụ, viết plugin mà muốn đặt tên debug, tên JavaScript file cho plugin là: jquery.debug.js Sự sử dụng tiền tố jquery. loại bỏ xung đột tên với file dự định để sử dụng với thư viện khác. Ví dụ Sau plug-in nhỏ để có phương thức warning() cho mục đích debug. Bạn giữ code jquery.debug.js file: jQuery.fn.warning = function() { http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 90 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com return this.each(function() { alert('Tag Name:"' + $(this).prop("tagName") + '".'); }); }; Ví dụ sau minh họa cách sử dụng phương thức warning(). Giả sử chúng ta đặtjquery.debug.js thư mục với trang HTML. The jQuery Example $(document).ready(function() { $("div").warning(); $("p").warning(); }); This is paragraph This is division Nó cảnh báo bạn sau: Tag Name:"DIV" http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 91 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Tag Name:"P" Tài liệu tham khảo jQuery Dưới nguồn tài liệu hữu ích jQuery, bạn nên sử dụng chúng để hiểu sâu chủ đề đề cập loạt này. Các đường link hữu ích jQuery  Tutorialspoint − Loạt hướng dẫn xây dựng dựa nguồn này.  jQuery Official Site - Nguồn bạn phiên jQuery nhất, plug-in, hướng dẫn, tin tức blog, …  jQuery Documentation - Link đưa bạn tới trang jQuery Documentation bao gồm văn kiện đầy đủ jQuery.  jQuery User Interface - Tạo UI (User Interface) cho trang web bạn sử dụng jQuery UI.  jQuery Plug-ins - Kho lưu jQuery Plug-ins  jQuery @ wiki - Trang jQuery Wikipedia.  ECMAScript - Trang web thức ECMAScript. Các JavaScript Framework khác  Prototype - Trang chứa văn kiện API, đầy đủ với ví dụ tham chiếu chéo. Bạn tìm thấy hướng dẫn đa dạng làm quen với thành viên Prototype Core.  script.aculo.us - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  DoJo - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  Ext JS - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  Rico - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  Qooxdoo - qooxdoo AJAX Application Framework toàn diện mẻ. http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 92 http://vietjack.com/jquery/index.jsp Copyright © vietjack.com http://vietjack.com/ Trang chia sẻ học online miễn phí Trang 93 [...]... và Banana Truy cập DOM trong jQuery jQuery là một công cụ vô cùng mạnh mẽ Nó cung cấp các phương thức đa dạng để truy cập DOM (DOM Traversal Method), giúp chúng ta chọn các phần tử trong một tài liệu một cách ngẫu nhiên hoặc theo phương thức liên tục Hầu hết DOM Traversal Method không sửa đổi đối tượng jQuery và chúng được sử dụng để lọc các phần tử của chúng từ một tài liệu trên cơ sở các điều kiện... một tài liệu đã cho STT Selector & Miêu tả 1 Tag Name Biểu diễn một tên thẻ có sẵn trong DOM Ví dụ: $(‘p’) chọn tất cả đoạn văn trong phần tử 2 Tag ID Biểu diễn một tên thẻ có sẵn với ID đã cho trong DOM Ví dụ $('#some-id') chọn tất cả phần tử đơn trong tài liệu mà có một ID là some-id 3 Tag Class Biểu diễn một thẻ có sẵn với lớp đã cho trong DOM Ví dụ $('.some-class') chọn tất cả các phần tử trong tài. ..http://vietjack.com /jquery/ index.jsp Copyright © vietjack.com Cơ bản về jQuery jQuery là một Framework được xây dựng dựa trên các tính năng của JavaScript Vì thế trong khi phát triển các ứng dụng sử dụng jQuery, bạn có thể sử dụng tất cả các hàm và các tính năng khác được bổ trợ trong JavaScript Chương này sẽ giải thích hầu hết khái niệm cơ bản thường được sử dụng trong các ứng dụng xây dựng trên jQuery Đối... liệu trên cơ sở các điều kiện đã cho Tìm kiếm các phần tử bởi chỉ mục (index) trong jQuery Bạn xem xét ví dụ sau về một tài liệu đơn giản với nội dung HTML sau: The JQuery Example http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 35 http://vietjack.com /jquery/ index.jsp Copyright © vietjack.com list item 1 list item... lưu giữ phương thức setArray của jQuery trong một Closure và viết đè lên (overwrite) nó như sau: (function() { // log all calls to setArray var proxied = jQuery. fn.setArray; jQuery. fn.setArray = function() { console.log(this, arguments); return proxied.apply(this, arguments); }; http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 16 http://vietjack.com /jquery/ index.jsp Copyright © vietjack.com... có thể đổi ký hiệu $ thành jQuery và bạn có thể sử dụng hàm jQuery( ) thay cho hàm$() Ví dụ Sau đây là ví dụ đơn giản sử dụng Tag Selecor Nó sẽ chọn tất cả phần tử vởi tên thẻ p và sẽ thiết lập màu nền thành “yellow” http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 20 http://vietjack.com /jquery/ index.jsp Copyright © vietjack.com The jQuery Example $(document).ready(function() { var title... src="http://ajax.googleapis.com/ajax/libs /jquery/ 2.1.3 /jquery. min.js"> $(document).ready(function() { $("#myimg").attr("src", " /images /jquery. jpg"); }); Nó sẽ cho kết quả sau: Áp dụng Style trong jQuery Phương thức addClass( classes... Ví dụ đơn giản sau thiết lập thuộc tính class của một thẻ : The jQuery Example http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 30 http://vietjack.com /jquery/ index.jsp Copyright © vietjack.com . Array trong jQuery 12 Hàm (Function) trong jQuery 12 Các tham số trong jQuery 13 Context trong jQuery 14 Phạm vi (Scope) trong jQuery 14 Callback trong jQuery 15 Các Closure trong jQuery 15. Traversing trong jQuery 41 CSS Selector trong jQuery 43 Áp dụng các thuộc tính CSS trong jQuery 43 Ví dụ 43 http://vietjack.com /jquery/ index.jsp Copyright © vietjack.com http://vietjack.com/. http://vietjack.com /jquery/ index.jsp Copyright © vietjack.com http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 2 Proxy Pattern trong jQuery 16 Các hàm có sẵn trong jQuery