Đang tải... (xem toàn văn)
some text here CuuDuongThanCong.com https://fb.com/tailieudientucntt
Lorem ipsum dolor sit ametsome text here
Lorem ipsum dolor sit ametsome text here
©2010 Izwebz - Demon Warlock
Ở đoạn code bạn dễ dàng nhận thấy thư viện jQuery đặt Stylesheet Đây điểm quan trọng mà bạn cần lưu ý thứ tự file gọi Ban đầu phải CSS load trước, trang web load xong phần CSS thêm vào phần thư viện jQuery cuối code jQuery tự viết Nếu không code jQuery bạn không làm việc mong đợi thư viện jQuery chưa load Bắt đầu code jQuery Bây bạn mở trình soạn thảo code lên tạo file tên first-jquery.js file chèn vào dòng code: Gõ vào file vừa tạo dòng code sau: $(document).ready(function() { $('.text').addClass('important'); }); Thao tác jQuery chọn phần tài liệu HTML Bạn tiến hành cách sử dụng hàm $() Thường nằm dấu ngoặc () chuỗi dạng tham số, CSS Selectors Trong ví dụ muốn tìm tất thành phần có class=”text”, cú pháp giống bạn viết code CSS Tất nhiên sau tham khảo thêm nhiều lựa chọn khác hay Trong chương nghiên cứu vài cách khác để lựa chọn thành phần tài liệu HTML Hàm $() jQuery Object, nên móng cho tất học từ Jquery Object bao gồm không nhiều thành phần DOM cho phép tương tác với chúng nhiều cách Trong trường hợp muốn thay đổi cách hiển thị phần trang, thực cách thay đổi class CuuDuongThanCong.com https://fb.com/tailieudientucntt Thêm vào class Phương pháp addClass(), giống hầu hết phương pháp jQuery khác, đặt tên theo chức Khi gọi, thêm class vào thành phần chọn Tham số tên class thêm vào Phương pháp đối ngược với removeClass(), cho phép quan sát jQuery hoạt động khám phá phương pháp lựa chọn có sẵn jQuery Còn bây giờ, code jQuery đơn giản thêm class=”important”, class khai báo stylesheet với thuộc tính viền đỏ hồng nhạt border: 1px solid red; background: pink; Bạn nhận thấy khơng phải chạy vòng lặp để thêm class vào đoạn văn có chung class Đây vòng lặp ẩn phương pháp jQuery, ví dụ addClass(), bạn phải gọi lần có để thay đổi thành phần bạn muốn tài liệu Bây bạn chạy thử trang web vừa tạo trình duyệt bạn thấy đoạn văn có class text bị tơ hồng có viền màu đỏ Đến kết thúc phần loạt jQuery Trong bạn biết jQuery làm gì? Bạn học cách để sử dụng jQuery tài liệ HTML cuối dùng thử phương pháp jQuery addClass() CuuDuongThanCong.com https://fb.com/tailieudientucntt Chương – jQuery Selectors Thư viện jQuery tận dụng kiến thức mạnh CSS Selector phép bạn nhanh chóng dễ dàng truy cập nhiều phần tử nhóm phần tử DOM (Document Object Model) Trong chương khám phá vài Selector Selector jQuery Chúng ta tìm hiểu thêm cách di chuyển thư mục cho thêm linh động để đạt muốn Document Object Model (Mơ hình đối tượng tài liệu) Một tính mạnh mẽ jQuery khả chọn thành phần DOM cách dễ dàng Nói nơm na DOM dạng phả hệ thành phần HTML Các thành phần có mối tương quan với “gia đình” HTML hạnh phúc Khi nói đến mối quan hệ bạn liên tưởng đến mối quan hệ gia đình ơng bà, bố mẹ, anh chị em v.v Bạn xem Hướng đối tượng dựa vào cấp bậc XHTML để biết rõ mối quan hệ thành phần HTML Hàm $() Cho dù bạn sử dụng Selector jQuery, bạn bắt đầu dấu dollar ($) đôi ngoặc đơn như: $() Tất sử dụng CSS lồng vào dấu ngoặc kép (”) đặt vào hai dấu ngoặc đơn, cho phép áp dụng phương pháp jQuery cho tập hợp phần tử phù hợp Ba thành phần quan trọng jQuery Selector tên thẻ HTML, ID Class Bạn sử dụng kết hợp với Selector khác để chọn Dưới ví dụ Selecter sử dụng Như nói chương 1, thêm phương pháp vào hàm $(), phần tử nằm đối tượng jQuery tự động loop diễn “hậu trường” Cho nên không cần phải sử dụng vòng lặp cả, vòng lặp for chẳng hạn, điều thường phải làm viết code DOM Sau bạn nằm bắt khái niệm bản, khám phá thêm tính mạnh mẽ khác jQuery CSS Selector Thư viện jQuery hỗ trợ gần toàn CSS Selector chuẩn từ CSS1 CSS3 Chính việc cho phép người làm web khơng phải lo lắng liệu trình duyệt có hỗ trợ Selector hay khơng (đặc biệt trình duyệt IE) miễn trình duyệt có bật JavaScript CuuDuongThanCong.com https://fb.com/tailieudientucntt Lưu ý: người làm web có kinh nghiệm trách nhiệm ln nên áp dụng nguyên tắc nâng cao luỹ tiến giáng cấp hài hồ cho code họ Họ phải ln chắn trang web ln hiển thị xác, cho dù không đẹp JavaScript bị tắt bật Chúng ta bàn thêm nguyên tắc suốt chiều dài loạt Để tìm hiểu jQuery sử dụng CSS Selector cách tốt làm ví dụ Trong ví dụ sử dụng dạng danh sách thường dùng để làm di chuyển web Code HTML sau Trong đoạn code HTML đơn giản có unorder list với id=”nav” đóng vai trò menu Khi chưa có style áp dụng vào kết xem trình duyệt hình Đây định dạng mặc định trình duyệt cho Unorder List CuuDuongThanCong.com https://fb.com/tailieudientucntt Định dạng list-item Tất nhiên ví dụ bạn hồn tồn sử dụng CSS để định dạng menu này, muốn khám phá jQuery nên tạm thời coi CSS không tồn Giả sử ví dụ bạn muốn list-item có gạch chân mà ul phụ khơng có gạch chân .highlight { border-bottom: 1px solid #e6db55; padding: 5px; } Thay thêm class trực tiếp vào tài liệu HTML, sử dụng jQuery để thêm class vào list-item tầng như: Homepage, About Me, Forum, Ebooks, Tutorials, Photoshop Email $(document).ready(function() { $('#nav > li').addClass('highlight'); }); Như bàn chương 1, bắt đầu đoạn code jQuery với $(document).ready(), chạy DOM load Dòng thứ sử dụng CSS Child selector (>) để thêm class=’highlight’ cho list item tầng Nói theo ngơn ngữ đoạn code có nghĩa sau: jQuery tìm list item (li) trực tiếp (>) thành phần có ID nav (#nav) Với class=’highlight’ thêm vào, menu sau Để định dạng cho list item tầng có nhiều cách Nhưng cách sử dụng phần pseudo-class phủ định Bằng cách xác định tất item mà khơng có class=’highlight’ Chúng ta viết code sau: $(document).ready(function() { CuuDuongThanCong.com https://fb.com/tailieudientucntt $('#nav > li').addClass('highlight'); $('#nav li:not(.highlight)').addClass('background'); }); Đoạn code có nghĩa sau: 1.Chọn tất danh sách trực tiếp #nav 2.Những danh sách phải khơng có class=’highlight’ (:not(.highlight)) Và hình dưới, tất nhiên bạn phải khai báo class=’background’ file CSS Attribute Selectors Attribute Selectors Selector phụ CSS hữu dụng Nó cho phép chọn thành phần dựa vào đặc tính HTML như: thuộc tính Title link thuộc tính Alt image Ví dụ để chọn tất hình có thuộc tính Alt làm sau: $('img[alt]') Định dạng cho đường liên kết Nếu bạn biết sơ qua Regular Expressions ngơn ngữ lập trình PHP Attribute Selector jQuery chịu ảnh hưởng phương pháp Ví dụ dấu (^) dùng để xác định giá trị điểm bắt đầu ($) kết thúc chuỗi Nó sử dụng dấu (*) để giá trị vị trí chuỗi sử dụng dấu chấm than (!) để biểu thị giá trị phủ định Trong phần CSS định dạng đường liên kết sau: a { CuuDuongThanCong.com https://fb.com/tailieudientucntt Hàm strops() tìm từ khóa phù hợp với chuỗi tìm kiếm người dùng Bây phản ứng lại với form gửi tạo tham số truy vấn phù hợp cách di chuyển DOM: ? 1$(document).ready(function() { 2$('#letter-f form').submit(function() { 3$('#dictionary').load('f.php', 4{'term': $('input[name="term"]').val()}); 5return false; 6}); }); Tuy đoạn mã làm việc mong muốn, để tìm trường nhập liệu tên sau gán cho biểu đồ phiền phức Hơn cách khó xử lý mà form trở nên phức tạp Cũng may jQuery có cách giúp trường hợp Phương thức serialize() hoạt động đối tượng jQuery chuyển phần tử DOM phù hợp thành chuỗi truy vấn chuyển với AJAX truy vấn Chúng ta viết mã cho xử lý form sau: ? 1$(document).ready(function() { 2$('#letter-f form').submit(function() { 3$.get('f.php', $(this).serialize(), function(data) { 4$('#dictionary').html(data); 5}); 6return false; 7}); }); Bây đoạn mã gửi form, cho dù số lượng trường nhập liệu có tăng Khi muốn tìm kiếm, mục từ phù hợp hiển thị CuuDuongThanCong.com https://fb.com/tailieudientucntt Nên ý đến lệnh truy vấn Cho đến tạo gọi đến phương thức AJAX kiên nhẫn chờ đợi trả lời Nhưng có lúc muốn biết thêm chút lệnh truy vấn HTTP thực jQuery cho bạn số hàm sử dụng để đăng ký hàm truy hồi nhiều kiện liên quan đến AJAX xảy Hai phương thức ajaxStart() ajaxStop() ví dụ điển hình chức quan sát, gán với đối tượng jQuery Khi lệnh gọi AJAX bắt đầu mà khơng có tải, hàm truy hồi ajaxStart() khởi động Ngược lại, lệnh truy vấn cuối kết thúc, hàm truy hồi gắn với ajaxStop() bắt đầu Tất hàm quan sát dạng hàm toàn cục, chúng gọi giao tiếp AJAX xảy ra, mà không quan tâm đến mã gọi Chúng ta sử dụng phương thức để thông báo cho người dùng biết trường hợp mạng họ không nhanh Đoạn mã HTML có đoạn thơng báo “đang tải liệu”: ? 1 CuuDuongThanCong.com https://fb.com/tailieudientucntt 2Loading 3 Thông báo đoạn mã HTML bình thường, bạn thêm vào hình GIF động kiểu xoay xoay cho chuẩn Chúng ta chỉnh sửa CSS chút để thông báo đưa hiển thị hình Bởi tính làm cho trang thêm đẹp cho người dùng có trình duyệt đại, không chèn đoạn mã HTML trực tiếp vào trang Bởi muốn hiển thị với có bật JavaScript, chèn jQuery ? 1$(document).ready(function() { 2$('Loading ') 3.insertBefore('#dictionary') 4}); Chúng ta khai báo CSS cho thẻ div có display: none; trang tải, thơng báo bị ẩn Để hiển thị lúc cần, cần đăng ký với chức quan sát với ajaxStart(): ? $(document).ready(function() { $('Loading ') insertBefore('#dictionary') CuuDuongThanCong.com https://fb.com/tailieudientucntt 3.ajaxStart(function() { 4$(this).show(); 5}); }); Chúng ta kết hợp phương thức hide() vào ? 1$(document).ready(function() { 2$('Loading ') 3.insertBefore('#dictionary') 4.ajaxStart(function() { 5$(this).show(); 6}).ajaxStop(function() { 7$(this).hide(); }); }); Như có bảng thơng báo Một lần bạn nên lưu ý phương thức khơng liên quan đến cách mà giao tiếp AJAX bắt đầu Chính phương thức load() gán cho chữ A getJSON() gán cho chữ B làm cho giao tiếp AJAX xảy Trong trường hợp này, tập tính tồn cục điều muốn Tuy nhiên muốn cụ thể nữa, có vài lựa chọn để sử dụng Một vài chức quan sát như, ajaxError(), gửi cho hàm truy hồi tham chiếu đến đối tượng XMLHttpRequest Cái dùng để phân biệt lệnh truy vấn với nhau, cung cấp tập tính khác Để có cách xử lý cụ thể bạn sử dụng hàm $.ajax() cấp thấp, mà bàn tới phần Tuy nhiên cách phổ biến để giao tiếp với lệnh truy vấn hàm truy hồi thành cơng, mà nói đến Chúng ta sử dụng vài ví dụ để xử lý liệu quay lại từ server cho hiển thị kết lên trang web Tất nhiên sử dụng cho thông tin phản hổi khác Hãy xem lại ví dụ load(): ? CuuDuongThanCong.com https://fb.com/tailieudientucntt 1$(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').load('a.html'); 4return false; 5}); 6}); Chúng ta cải tiến chút cách làm cho nội dung từ từ thay ầm phát Phương thức load() lấy vào hàm truy hồi kích hoạt hồn thành ? 1$(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').hide().load('a.html', function() { 4$(this).fadeIn(); 5}); 6return false; 7}); }); Trước tiên ta ẩn phần tử đích, sau khởi động q trình tải Khi q trình tải hồn thành, sử dụng hàm truy hồi phần tử vừa tạo từ từ AJAX kiên Giả sử muốn dùng mục từ từ điển để định ẩn định nghĩa từ đó, người dùng nhấp chuột vào từ ẩn định nghĩa kèm với Với kỹ thuật ta học, để làm việc đơn giản ? $(document).ready(function() { $('.term').click(function() { $(this).siblings('.definition').slideToggle(); }); CuuDuongThanCong.com https://fb.com/tailieudientucntt 4}); Khi mục từ bị nhấp chuột, jQuery tìm phần tử “anh em họ” mà có class=’definition’, trượt lên xuống Mọi việc nghe hợp lý, ta nhấp chuột vào khơng xảy việc Vấn đề mục từ chưa thêm vào tài liệu ta gán xử lý kiện Cho dù ta gán xử lý click vào phần tử này, nhấp chuột vào chữ khác xử lý khơng gán cho Đây vấn đề thường thấy phạm vi trang đưa vào AJAX Một giải pháp thông thường gán lại xử lý vùng trang refresh Nhưng cách thời gian đoạn mã gán kiện phải gọi có thành phần làm thay đổi cấu trúc DOM trang Một cách thay hay cho vấn đề giới thiệu chương 3: Chúng ta áp dụng ủy thác kiện đây, cách gắn kiện cho thành phần bố mẹ thành phần không thay đổi Trong trường hợp này, gán xử lý kiện nhấp chuột vào tài liệu sử dụng phương thức live() ? 1$(document).ready(function() { 2$('.term').live('click', function() { 3$(this).siblings('.definition').slideToggle(); 4}); 5}); Phương thức live() hướng dẫn cho trình duyệt quan sát tất cú nhấp chuột toàn trang web, phần tử phù hợp với chọn term, xử lý kiện thực Bây phương thức slideToggle() hoạt động term nào, cho dù thêm vào sau giao tác AJAX Hạn chế bảo mật Đối với tất tiện ích việc tạo ứng dụng web động, XMLHttprequest (cơng nghệ trình duyệt đằng sau ứng dụng jQuery AJAX) quản lý nghiêm ngặt Thường bạn khơng thể truy vấn tài liệu nằm server khác với server chứa trang gốc bạn, điều để tránh vụ công cross-site Đây thực tế lại việc tốt Ví dụ có người cho cách thực thi phân tích JSON cách sử dụng eval() khơng an tồn Nếu có đoạn mã độc nằm tệp liệu, chạy hàm eval() gọi Vậy nên tệp liệu thân trang web nằm server khả chèn mã độc vào tệp liệu gần tương đương với việc tự chèn CuuDuongThanCong.com https://fb.com/tailieudientucntt mã vào trang Điều có nghĩa là, trường hợp bạn tải tệp JSON không mang mã độc, hàm eval() khơng mối lo cho bảo mật Nhưng nhiều trường hợp lại có lợi bạn tải liệu từ nguồn thứ Có vài cách để bạn làm để tránh khâu giới hạn bảo mật cho phép việc tải liệu thực Cách thứ dựa vào server để tải liệu từ xa sau cung cấp u cầu người dùng Đây cách mạnh server xử lý trước liệu cần Ví dụ tải file XML chứa RSS Feed từ nhiều nguồn, tập hợp chúng lại thành feed server phát hành tệp đến người dùng yêu cầu Để tải liệu từ vị trí từ xa mà khơng cần can thiệp server, phải ‘gian manh’ tí Một cách thường dùng trường hợp bạn muốn tải tệp JavaScript bên chèn cặp thẻ cần Bởi jQuery giúp chèn phần tử DOM mới, nên dễ dàng viết: ? 1$(document.createElement('script')) 2.attr('src', 'http://example.com/example.js') 3.appendTo('head'); Thực tế, phương thức $.getScript() tự động thích nghi với kỹ thuật phát host khác tham số URL, nên kể việc giải cho Trình duyệt chạy đoạn mã tải, khơng có chế lấy kết từ đoạn mã Chính kỹ thuật đòi hỏi cộng tác với host xa Đoạn mã tải phải làm tạo biến tồn cục có hiệu lực môi trường cục Những tạo mã chạy cách cung cấp API để tương tác với mã từ xa Một cách sử dụng thẻ HTML để tải liệu từ xa Phần tử cho phép URL sử dụng làm nguồn để truy xuất liệu nó, cho dù khơng server Dữ liệu dễ dàng tải hiển thị lên trang Nhưng để thao tác với liệu đòi hỏi cộng tác cách sử dụng thẻ Mã nằm cần phải cung cấp liệu cho đối tượng tài liệu gốc cách rõ ràng Sử dụng JSONP cho liệu từ xa Ý tưởng sử dụng thẻ để truy xuất tập JavaScript từ nguồn xa sử dụng để kéo file JSON từ server khác Nhưng để thực được, cần phải chỉnh sửa tệp JSON chút Cũng có vài cách để làm việc này, số hỗ trợ trực tiếp jQuery: JSON với Padding viết tắt JSONP Định dạng tệp JSONP bao gồm tệp JSON tiêu chuẩn đặt dấu ngoặc đơn gán vào đằng sau chuỗi ký tự bình thường Chuỗi này, ‘padding’, CuuDuongThanCong.com https://fb.com/tailieudientucntt xác định người dùng truy vấn liệu Bởi hai dấu ngoặc này, người dùng làm cho hàm gọi biến thiết lập phụ thuộc vào gửi dạng chuỗi padding Một ứng dụng PHP kỹ thuật JSONP đơn giản: ? 1 Ở biến $data chứa chuỗi làm đại diện cho tệp JSON Khi đoạn mã gọi, tham số chuỗi truy vấn callback gán vào trước tệp kết trả cho người dùng Để minh hoạ cho kỹ thuật này, cần sửa đổi chút ví dụ JSON để gọi nguồn liệu từ xa Hàm $.getJSON() tận dụng ký tự giữ chỗ đặc biệt, ?, để làm việc ? $(document).ready(function() { var url = 'http://examples.learningjquery.com/jsonp/g.php'; $('#letter-g a').click(function() { $.getJSON(url + '?callback=?', function(data) { $('#dictionary').empty(); $.each(data, function(entryIndex, entry) { var html = ''; html += '' + entry['term'] + ''; html += '' + entry['part'] + ''; 10 html += ''; 11 html += entry['definition']; 12 if (entry['quote']) { 13 html += ''; 14 $.each(entry['quote'], function(lineIndex, line) { CuuDuongThanCong.com https://fb.com/tailieudientucntt 15html += '' + line 16+ ''; 17}); if (entry['author']) { 18 html += '' 19 + entry['author'] + ''; 20 } 21 html += ''; 22 } 23 html += ''; 24 html += ''; 25 $('#dictionary').append(html); 26}); 27}); 28return false; 29}); 30}); 31 32 Thường không phép truy xuất JSON từ server xa Nhưng file tạo nên để cung cấp liệu dạng JSONP, lấy liệu cách gán chuỗi truy vấn vào URL, sử dụng dấu ? làm nơi lưu giữ cho giá trị tham số hàm truy hồi Khi truy vấn tạo, jQuery thay dấu ? cho chúng ta, phân tích kết quả, chuyển đến hàm dạng liệu thể truy vấn JSON nội Bạn nên lưu ý vấn đề bảo mật trước, server trả đến trình duyệt thực máy tính người dùng Kỹ thuật JSONP nên sử dụng với liệu đến từ nguồn có đáng tin cậy Lựa chọn thêm Bộ công cụ AJAX cung cấp jQuery đầy đủ Chúng ta xem qua số lựa chọn, bề tảng băng Có nhiều thứ để nói đến phần này, khái quát qua số cách phổ biến để tùy biến giao tiếp AJAX CuuDuongThanCong.com https://fb.com/tailieudientucntt Phương pháp AJAX cấp thấp Chúng ta thấy số phương pháp khởi động giao tác AJAX Nhưng đằng sau hậu trường, jQuery gom phương thức vào hàm $.ajax() toàn cục khác Thay đốn dạng kiện AJAX, hàm lấy vào biểu đồ lựa chọn mà sử dụng để tùy biến chế độ Ví dụ mà sử dụng $(‘#dictionary’).load(‘a.html’) để tải đoạn mã HTML Cách thay bàng phương thức $.ajax() sau: ? 1$.ajax({ 2url: 'a.html', 3type: 'GET', 4dataType: 'html', 5success: function(data) { 6$('#dictionary').html(data); 7} }); Chúng ta cần phải cụ thể với phương thức truy vấn, loại liệu trả về, làm với kết liệu Cái tốn cơng sức bù lại với công sức bạn bỏ thành mỹ mãn Một vài số khả đặc biệt sử dụng với phương thức $.ajax() cấp thấp bao gồm: Ngăn khơng cho trình duyệt lưu lại phản hồi từ server Điều có ích mà server tự động tạo liệu Đăng ký riêng biệt hàm truy hồi cho dù lệnh truy vấn thực thành công, bị lỗi tất trường hợp Chặn xử lý toàn cục (như xử lý đăng ký với $.ajaxStart()) mà thường khởi động tất tương tác AJAX Cung cấp Username mật để xác nhận với host từ xa Chú ý: để biết thêm chi tiết cách sử dụng lựa chọn khác, xem thêm phần jQuery Reference Guide xem phần API Reference (http://docs.jquery.com/Ajax/jQuery.ajax) Chỉnh sửa tùy chọn mặc định Hàm $.ajaxSetup() cho phép định rõ giá trị mặc định tùy chọn sử dụng phương thức AJAX gọi Nó lấy vào biểu đồ tùy chọn giống y biểu đồ có thân $.ajax(), làm cho giá trị sử dụng cho truy vấn AJAX sau trừ có khác mạnh CuuDuongThanCong.com https://fb.com/tailieudientucntt ? $.ajaxSetup({ url: 'a.html', type: 'POST', dataType: 'html' }); $.ajax({ type: 'GET', success: function(data) { $('#dictionary').html(data); } 10 }); 11 Dãy thao tác hoạt động giống ví dụ trước $.ajax() Bạn nên ý URL lệnh truy vấn xác định làm giá trị mặc định gọi $.ajaxSetup(), giá trị bỏ trống $.ajax() gọi Ngược lại, tham số type có giá trị mặc định POST, bị đè lên gọi $.ajax() đến GET Tải phần trang HTML Kỹ thuật đơn giản mà thảo luận truy xuất đoạn code HTML chèn vào trang Nhưng có server cung cấp cho ta đoạn HTML cần lại bị bao quanh trang HTML khác mà ta không muốn Khi mà việc yêu cầu server cung cấp định dạng muốn khơng thuận tiện, jQuery giúp phía người dùng Hãy tưởng tượng trường hợp ví dụ đầu tiên, trang chứa từ mục lại trang HTML hoàn chỉnh sau: ? The Devil's Dictionary: H CuuDuongThanCong.com https://fb.com/tailieudientucntt 10 11 The Devil's Dictionary: H 12 by Ambrose Bierce 13 14 15 16 HABEAS CORPUS 17n. 18 19A writ by which a man may be taken out of jail 20when confined for the wrong crime 21 22 23 HABIT 24 n. 25 26 A shackle for the free 27 28 29 30 31 32 33 CuuDuongThanCong.com https://fb.com/tailieudientucntt 34 35 Chúng ta tải tồn tài liệu vào trang cách sử dụng đoạn mã ta viết trước đây: ? 1$(document).ready(function() { 2$('#letter-h a').click(function() { 3$('#dictionary').load('h.html'); 4return false; 5}); 6}); Bạn thấy trang web khơng bình thường chứa đoạn HTML khơng muốn thêm vào CuuDuongThanCong.com https://fb.com/tailieudientucntt Để loại bỏ đoạn dư này, sử dụng tính phương thức load() Khi bạn khai báo URL tài liệu cần tải, cung cấp biểu thức chọn jQuery Nếu khai báo, biểu thức sử dụng để xác định phần mã tài liệu Chỉ phần phù hợp với chọn chèn vào trang Trong trường hợp này, sử dụng kỹ thuật để kéo mục từ nằm tài liệu chèn nó: ? 1$(document).ready(function() { 2$('#letter-h a').click(function() { 3$('#dictionary').load('h.html entry'); 4return false; 5}); 6}); Bây phần không liên quan tài liệu đượ loại bỏ khỏi trang CuuDuongThanCong.com https://fb.com/tailieudientucntt Tóm tắt Chúng ta học phương thức AJAX cung cấp jQuery giúp tải liệu số định dạng khác từ server mà không cần phải refresh lại trang Chúng ta thực mã từ server cần gửi liệu quay lại server Chúng ta học cách để xử lý với khó khăn thường gặp kỹ thuật tải không đồng giữ xử lý nguyên vị trí trình tải bắt đầu tải liệu từ server thứ Chương khép lại phần tutorial sách Chúng ta có đủ cơng cụ chủ yếu jQuery: chọn, kiện, hiệu ứng, thao tác DOM truy vấn server không đồng Đây khơng phải tất jQuery hỗ trợ ta, tìm hiểu thêm vài tính mà jQuery Plugin đem lại chương tới Nhưng trước hết, xem xét kết hợp kỹ thuật học để làm cho trang web hấp dẫn Tài liệu tổng hợp từ: - http://www.izwebz.com/ Microsoft Vietnam – DPE Team CuuDuongThanCong.com https://fb.com/tailieudientucntt ... hầu hết ví dụ sử dụng loạt có thành phần sử dụng nhiều tài liệu HTML, Stylesheet CSS tài liệu JavaScript để thực lệnh Trong ví dụ sử dụng tài liệu HTML đơn giản với header, sidebar, content footer... loạt jQuery Trong bạn biết jQuery làm gì? Bạn học cách để sử dụng jQuery tài liệ HTML cuối dùng thử phương pháp jQuery addClass() CuuDuongThanCong.com https://fb.com/tailieudientucntt Chương – jQuery. .. trang web với hỗ trợ jQuery Bởi jQuery thư viện JavaScript để sử dụng bạn phài chèn vào trang web sử dụng Có hai cách để chèn jQuery vào trang web Tự host jQuery Vào trang chủ jQuery download phiên