NTM Solutions

Chủ Nhật, 22 tháng 1, 2017

TỰ HỌC JQUERY – CƠ BẢN - BÀI 2 - CÚ PHÁP

Với jQuery bạn chọn các đối tượng HTML và xử lý các sự kiện trên chúng.

Cú pháp jQuery




Cú pháp cơ bản là: $(selector).action()
  • Dấu $ đế xác định/truy cập jQuery
  • 01 (selector) để "truy vấn (hoặc tìm)" các phần tử HTML.
  • 01 jQuery action() để thực hiện thao tác trên các đối tượng(s)
Ví dụ:
$(this).hide() - ẩn phần tử hiện hành.
$("p").hide() - ẩn tất cả thẻ <p>.
$(".test").hide() - ẩn tất cả phần tử có class="test".
$("#test").hide() - ẩn tất cả phần tử có id="test".
Bạn có quen thuộc với CSS selectors?

jQuery sử dụng cú pháp CSS để chọn lựa các phần tử. Bạn sẽ học thêm về cú pháp selector trong bài tiếp theo.

Sự kiện Document Ready

Bạn có thể thấy rằng tất cả các phương thức jQuery trong các ví dụ, được đặt trong:
$(document).ready(function(){

   // phương thức jQuery đặt ở đây...

});
Điều này để ngăn ngừa bất kỳ đoạn mã jQuery nào chạy trước khi trang web tải xong (is ready = sẵn sàng).
Đây là 01 thói quen tốt. Nó cũng cho phép mã JavaScript chạy trước thẻ body, trong phần <head>.
Đây là vài ví dụ về hành động có thể chạy sai khi trang web chưa được tải xuống:
  • Cố ẩn đi 01 phần tử chưa được tạo ra.
  • Cố thay đổi kích thước của 01 hình ảnh chưa được tải.
Mẹo: Nhóm phát triển jQuery cũng tạo ra 01 phương thức ngắn hơn phương thức document ready event:
$(function(){

   // jQuery methods go here...

});

Bạn có thể dùng 01 trong 02 phương thức trên tùy bạn thấy cái nào dễ hiểu hơn.