Tìm hiểu về cơ chế hoạt động của jQuery

1. Cơ bản: Bài thử nghiệm dưới đây được xây dựng để giúp các bạn mới bắt đầu sử dụng jQuery. Nếu chưa có sẵn 1 trang chuyên để test thì hãy bắt đầu bằng cách tạo trang HTML mới với mã nguồn như dưới đây: Demo jQuery src="jquery.js" html Thay đổi thuộc tính src trong thẻ script để trỏ tới file jquery.js của bạn. Ví dụ, nếu file jquery.js nằm cùng thư mục với file HTML thì chúng ta có thể sử dụng: Phiên ban jQuery mới nhất được download...
Nội dung trích xuất từ tài liệu:
Tìm hiểu về cơ chế hoạt động của jQuery Tìm hiểu về cơ chế hoạt động của jQuery1. Cơ bản:Bài thử nghiệm dưới đây được xây dựng để giúp các bạn mới bắt đầu sửdụng jQuery. Nếu chưa có sẵn 1 trang chuyên để test thì hãy bắt đầu bằng cáchtạo trang HTML mới với mã nguồn như dưới đây: Demo jQuery Thay đổi thuộc tính src trong thẻ script để trỏ tới file jquery.js của bạn. Ví dụ, nếufile jquery.js nằm cùng thư mục với file HTML thì chúng ta có thể sử dụng: Phiên ban jQuery mới nhất được download tại đây.2. Ghép code trên trang có sẵn:Một trong những việc đầu tiên mà hầu hết các lập trình viên Javascript đều muốnlàm là ghép code tới chương trình, ứng dụng chính của họ. Chẳng hạn như sau: window.onload = function(){ alert(welcome); }Bên trong đoạn code đó là những gì chúng ta muốn trình duyệt hoạt động khiwebsite được tải. Nhưng vấn đề xảy ra ở đây là đoạn mã Javascript sẽ không chạycho tới khi tất cả các file ảnh đã được tải hết về máy (có bao gồm các bannerquảng cáo). Lý do sử dụng window.onload l à vì các văn bản HTML vẫn chưađược tải hết trong lần hoạt động đầu tiên.Để giải quyết vấn đề trên thì jQuery đã có sẵn 1 mệnh đề có khả năng kiểm tracác biến document và chờ đợi cho tới khi được cố định, đó chính là event ready:$(document).ready(function(){ // Your code here});Bên trong event ready đó, chúng ta chèn thêm s ự kiện handler click tới đườngdẫn:$(document).ready(function(){ $(a).click(function(event){ alert(Thanks for visiting!); });});Lưu lại file HTML và tải lại trang test này, nhấn vào đường dẫn trên trang đó sẽhiển thị cửa sổ cảnh báo dưới dạng pop up trước khi chuyển tới trang jQuerychính. Đối với các click cũng như nhiều event khác, chúng ta có thể chặn các thaotác mặc định tại đây, như ví dụ trên thì sau đường dẫn nhấn vào làtrang jquery.com bằng cách gọi event.preventDefault() trong handler event:$(document).ready(function(){ $(a).click(function(event){ alert(As you can see, the link no longer took you to jquery.com); event.preventDefault(); });});3. Ví dụ hoàn chỉnh:Dưới đây là 1 ví dụ hoàn chỉnh của file HTML dựa theo các đoạn mã trên. Lưu ýrằng đường dẫn tại đây sẽ kết nối tới CDN của Google để tải file gốc của jQuery.Bên cạnh đó, đoạn script tùy chỉnh của chúng ta được bao gồm trong thẻ ,thì thích hợp hơn là đặt nó vào 1 file riêng biệt, sau đó truyền thông số tới file đóqua thuộc tính src tương ứng của element: jQuery demo jQuery $(document).ready(function(){ $(a).click(function(event){ alert(As you can see, the link no longer took you to jquery.com); event.preventDefault(); }); }); 4. Xóa bỏ hoặc gán thêm class HTML:Lưu ý rằng một số đoạn mã jQuery ví dụ dưới đây cần phải đặt bên trong eventready để được thực thi khi website sẵn sàng trong trạng thái “làm việc”. Một trongnhững tác vụ phổ biến là gán thêm hoặc xóa bớt class.Trước tiên, hãy thử gán 1 số thông tin style vào trong thẻ của trang web,chẳng hạn như sau: a.test { font-weight: bold; }Tiếp theo, gán thêm addClass vào trong đoạn mã: $(a).addClass(test);Toàn bộ các thành phần đó sẽ được bôi đậm. Còn nếu muốn gõ bỏ class, sửdụng removeClass: $(a).removeClass(test);HTML cho phép gán nhiều class vào 1 element.5. Một số hiệu ứng đặc biệt:Trong jQuery đã có sẵn một số hiệu ứng khá đặc biệt để làm cho trang web củabạn trở nên đặc biệt. Để chèn vào tra ...