JQuery làm việc như thế nào?
Căn bản
Để làm quen với JQuery, trước tiên, bạn nên tạo một file html với nội dung như sau:
Bạn cần điều chỉnh lại src (nguồn) của file jquery.js. Thí dụ, nếu như file jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ giống như sau:
1. Chạy code khi tài liệu sẵn sàng
Theo cách viết javascript thông thường, coder đặt code muốn browser xử lý tương tự như sau:
Khi sử dụng JQuery, chúng ta sẽ làm việc tương tự bằng cách sau:
Chú ý: Từ nay, chúg ta gọi vùng (**) ở đoạn code trên là vùng javascript chính.
Sử dụng JQuery, bạn sẽ thấy quen thuộc với cách viết code này. Bây giờ, bạn hãy đặt đoạn code trên vào phần (*) trong file html hiện thời của bạn.
Thêm thuộc tính onclick
Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời để hiển thị một liên kết
<a href='http://www.hp-aptech.edu.vn'/> Hell world</a>
Đoạn code javascript sau vào phần (**) để thêm thuộc tính onclick cho các thẻ "a":
Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng thông báo "Cảm ơn đã ghé thăm!". Bạn có thể thêm thuộc tính onclick này cho bất kỳ thẻ nào trong trang web của mình.
Thủ thuật
Thay đoạn code javascript trên bằng đoạn code jquery sau, khi click vào một liên kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ không chuyển sang trang web http://www.hp-aptech.edu.vn/.
2. Thêm class
Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class vào một (nhiều) đối tượng DOM.
Thêm code sau vào phần header của trang web (định dạng cách trình bày cho class 'test' của các thẻ HTML có tên 'a')
Thay thế vùng javascript chính bằng đoạn code sau (xóa tất cả nội dung cũ), với mục đích: khi trang web được tải xong, nội dung của các thẻ 'a' sẽ được trình bày bằng định nghĩa ở đoạn code trên.
Bạn cũng có thể xóa class ra khỏi một DOM
3. Các hiệu ứng đặc biệt
Bây giờ bạn thử đặt đoạn code sau vào vùng javascript chính để thử xem:
Cách gọi dây chuyền
Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình hướng đối tượng với JQuery:
Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối tượng JQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương thức có thể cho tập các phần tử hiện thời. Khi tương đối thành thạo JQuery, bạn có thể sẽ thấy quen thuộc đoạn code sau:
Bạn có thể dùng trang tham khảo API để biết các API mà JQuery hỗ trợ.
Hàm hồi quy, Hàm, và ‘this’
Hàm hồi quy (callback) được truyền như là một thông số cho một hàm khác (hàm gọi/hàm bao ngoài) và sẽ được thực thi sau khi hàm gọi hoàn tất. Điều đáng lưu ý về hàm hồi quy là tất cả những hàm xuất hiện sau “hàm gọi” có thể thực thi trước hàm hồi quy.
Một điều quan trọng khác cần lưu ý là làm thế nào dùng đúng hàm hồi quy. Đây là điều mà tôi thường hay quên cú pháp câu lệnh.
Dùng hàm hồi quy không tham số
Đối với một hàm hồi quy không thông số, bạn có thể gọi theo cách sau:
Lưu ý thông số thứ hai chỉ đơn giản là tên hàm (không truyền như một giá trị chuỗi ký tự và không có dấu ngoặc đơn). Các hàm trong Javascript được xem là những ‘khách hàng hạng sang’ và vì vậy có thể truyền như một biến số và sẽ được thực thi sau đó.
Dùng hàm hồi quy có thông số
Bạn sẽ thắc mắc “Bạn sẽ phải gọi hàm hồi quy như thế nào nếu có thông số?”.
Cách dùng sai (không hoạt động):
Cách này không hoạt động vì bạn gọi myCallBack(param1, param2) sau đó lại truyền giá trị trả về như là một thông số mới cho hàm $.get().
Cách dùng đúng:
Lý do, bằng cách truyền một hàm vô danh (đoạn mã với…
…sẽ tự động gọi hàm cần thực thi với những thông số cần thiết), bạn đã hoàn tất việc gọi hàm hồi quy.
Cách dùng này đúng vì bạn truyền hàm vô danh như thông số thứ hai cho hàm $.get() mà không phải thực thi hàm đó trước khi truyền.
[HaiPhong-Aptech] st