Thông tin tài liệu
Contents Chương1 - Giới thiệu jQuery Chương – jQuery Selectors Chương - Attributes 20 Chương – Sự kiện (Events) 23 Chương – Hiệu ứng (Effects) 42 Chương – Sửa đổi DOM 60 Chương 7: AJAX – Phần 77 Chương – AJAX – Phần 91 Chương1 - Giới thiệu jQuery Với phát triển mau lẹ Internet, người dùng ngày quan tâm đến hình thức trang web Trước trang web cần có banner, nội dung footer hời hợt cho trang web hoàn chỉnh Nhưng trang web phải có banner bắt mắt, nội dung hay nhiều hiệu ứng lạ mắt khác thu hút người đọc Chính web designer bắt đầu ý đến thư viện JavaScript mở jQuery để tạo hiệu ứng tương tác trực tiếp với người đọc cách nhanh chóng dễ dàng nhiều sử dụng JavaScript Nhưng bạn người làm quen với jQuery bạn thấy khơng biết phải đâu jQuery giống thư viện khác có nhiều functions Cho dù bạn có đọc phần tài liệu hướng dẫn sử dụng jQuery bạn thấy phức tạp khó hiểu Nhưng bạn yên tâm điều jQuery có cấu trúc mạch lạc theo hệ thống Cách viết code jQuery vay mượn từ nguồn mà web designer đa phần biết HTML CSS Nếu từ trước đến bạn Designer coder, bạn dễ dàng học jQuery kiến thức CSS giúp bạn nhiều bắt đầu với jQuery Nhận thấy jQuery mẻ với nhiều bạn thư viện đông đảo người sử dụng Izwebz giới thiệu đến bạn loạt jQuery Trong loạt tìm hiểu jQuery tính Trước hết bạn nên biết jQuery làm Những Jquery làm Hướng tới thành phần tài liệu HTML Nếu không sử dụng thư viện JavaScript này, bạn phải viết nhiều dòng code đạt mục tiêu di chuyển cấu CuuDuongThanCong.com https://fb.com/tailieudientucntt trúc (hay gọi DOM = Document Object Model) tài liệu HTML chọn thành phần liên quan Jquery cho phép bạn chọn thành phần tài liệu để “vọc” cách dễ dàng sử dụng CSS Thay đổi giao diện trang web CSS công cụ mạnh để định dạng trang web có nhược điểm khơng phải tất trình duyệt hiển thị giống Cho nên jQuery đời để lấp chỗ trống này, bạn sử dụng để giúp trang web hiển thị tốt hầu hết trình duyệt Hơn jQuery thay đổi class định dạng CSS áp dụng lên thành phần 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 thay đổi bề ngồi trang web, thay đổi nội dung tài liệu với vài dòng code Nó thêm bớt nội dung trang, hình ảnh thêm vào đổi sang hình khác, danh sách xếp lại chí cấu trúc HTML trang web viết lại mở rộng Tất điều bạn hồn tồn làm nhờ giúp đỡ API (Application Programming Interface = Giao diện lập trình ứng dụng) Tương tác với người dùng Cho dù cơng cụ bạn dùng có mạnh mẽ đến mấy, bạn khơng có quyền định sử dụng cơng cụ coi bỏ Với thư viện javaScript jQuery, cho bạn 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 có xảy Nhưng hay khơng làm cho code HTML bạn rối tung lên nhờ Event Handlers Hơn Event Handler API bảo đảm trang web bạn tương thích hầu hết với trình duyệt, điều làm đau đầu nhiều web designer 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, web designer phải cho người dùng thấy hiệu ứng xảy họ làm tác vụ Jquery cho phép bạn sử dụng nhiều hiệu ứng động mờ dần, chạy dọc chạy ngang v.v chưa đủ, cho phép bạn tự tạo hiệu ứng riêng Lấy thơng tin từ server mà khơng cần tải lại trang web Đây cơng nghệ ngày trở nên phổ biến Asynchronous JavaScript And XML (AJAX), giúp người thiết kế web tạo trang web tương tác cực tốt nhiều tính Thư viện jQuery loại bỏ phức tạp trình duyệt trình cho phép người phát triển web tập trung vào tính đầu cuối Đơn giản hố tác vụ javaScript Ngồi tính nêu trên, jQuery cho phép bạn viết code javaScript đơn giản nhiều so với cách truyền thống vòng lặp điều khiển mảng Tại jQuery làm việc tốt Người dùng ngày quan tâm đến Dynamic HTML, móng cho đời javaScript Frameworks Có frameworks tập trung vào vài tính vừa nêu trên, có ráng bao gồm tất hiệu ứng, tập tính nhồi nhét vào package Để đảm bảo thư viện “nhanh gọn nhẹ” “ngon bổ rẻ” với tính nêu trên, jQuery sử dụng chiến lược sau: Tận dụng kiến thức CSS Các jQuery Selector hoạt động y chang CSS Selector với cấu trúc cú pháp Chính thư viện jQuery cửa ngõ cho web designer muốn thêm nhiều tính cho trang web Bởi điều kiện tiên để CuuDuongThanCong.com https://fb.com/tailieudientucntt trở thành web designer chuyên nghiệp khả sử dụng CSS thục Với kiến thức có sẵn CSS, bạn có khởi đầu thuận lợi với jQuery Hỗ trợ Plugin Để tránh bị rơi vào trạng thái tải tính năng, jQuery cho phép người dùng tạo sử dụng Plugin cần Cách tạo plugin đơn giản hướng dẫn cụ thể, cộng đồng sử dụng jQuery tạo loạt plugin đầy tính sáng tạo hữu dụng Xố nhồ khác biệt trình duyệt Một thức tế tồn 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 web designer làm trang web hiển thị tốt 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 trình duyệt phổ biến Jquery giúp bạn thêm lớp bảo vệ cho khác biệt trình duyệt giúp trình diễn dễ dàng nhiều Luôn làm việc với Set Ví dụ u cầu jQuery tìm tất thành phần có class delete ẩn chúng Chúng ta không cần phải loop qua thành phần trả Thay vào đó, phương pháp hide() thiết kế để làm việc với set thay thành phần đơn lẻ Kỹ thuật gọi vòng lặp ẩn, điều có nghĩa khơng phải tự viết code để loop mà thực thi, code ngăn nhiều Cho phép nhiều tác vụ diễn dòng Để tránh phải sử dụng biến tạm tác vụ lặp tốn thời gian, jQuery cho phép bạn sử dụng kiểu lập trình gọi Chaining cho hầu hết method Điều có nghĩa kết tác vụ tiến hành thành phần thành phần đó, sẵn sàng cho tác vụ áp dụng lên Những chiến lược nêu giúp kích thước jQuery nhỏ bé khoảng 20Kb dạng nén Nhưng đảm bảo cung cấp cho kỹ thuật để giúp code trang nhỏ gọn mạch lạc Jquery trở nên phổ biến cách sử dụng đơn giản bên cạnh có cộng đồng sử dụng mạnh mẽ phát triển thêm Plugin hồn thiện tính trọng tâm jQuery Cho dù thực tế vậy, jQuery lại thư viện javaScript hoàn toàn miễn phí cho người sử dụng Tất nhiên bảo vệ luật GNU Public License MIT License, bạn yên tâm bạn sử dụng hầu hết trường hợp kể thương mại lẫn cá nhân Tạo 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 Thường có phiên jQuery cho bạn download Phiên chưa nén dành cho người phát triển học bạn Còn phiên nén dành cho phần sử dụng trực tiếp trang có dung lượng nhỏ nhiều so với phiên chưa nén Bạn không cần phải cài đặt jQuery, bạn cần đặt đường link tới thư viện Bất bạn cần sử dụng jQuery, bạn cần gọi tài liệu HTML đến nơi lưu trữ host bạn CuuDuongThanCong.com https://fb.com/tailieudientucntt Dùng phiên có sẵn server Google Ngồi cách bạn sử dụng phiên nén jQuery có sẵn server Google Sử dụng cách có điều lợi a) tiết kiệm băng thông cho trang web bạn b) jQuery load nhanh máy người dùng cache jQuery Tuy nhiên phần tới sử dụng phiên có sẵn server Google mà khơng cần phải download máy Cú pháp để chèn jQuery sử dụng file có sẵn server Google sau: Chuẩn bị tài liệu HTML Trong 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 Trong phần content có đoạn văn số class có sẵn Tất nhiên bạn phải sử dụng CSS để định dạng cho tài liệu HTML Bởi tutorial jQuery tơi khơng giải thích thuộc tính CSS Nếu có điểm khơng rõ bạn tham khảo phần CSS izwebz jQuery Introduction jQuery Introduction - Home Page
- About Me
- Forum
- Ebooks
- Tutorials
- Photoshop
- Email
Lorem ipsum dolor sit amet some text here CuuDuongThanCong.com https://fb.com/tailieudientucntt
Lorem ipsum dolor sit amet some text here
Lorem ipsum dolor sit amet some 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 - Ebooks
- Tutorials
- Photoshop
- Email
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ầ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
Ngày đăng: 27/12/2019, 19:44
Xem thêm: Tài liệu jQuery
