NTM Solutions

Thứ Tư, 25 tháng 1, 2017

Tự học JQuery - Hiệu Ứng - Bài 1 - Ẩn Hiện

Xem Mục lục lập trình JQuery

jQuery hide() và show()

Với jQuery, bạn có thể ẩn và hiện phần tử HTML với phương thức hide() và show()

Ví dụ:
$("#hide").click(function(){
    $(
"p").hide();
});

$(
"#show").click(function(){
    $(
"p").show();
});
Cú pháp:
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
Tham số speed xác định tốc độ ẩn/hiện, gồm các giá trị sau: "slow", "fast", hoặc milliseconds.

Tham số callback là 01 hàm được thực hiện sau khi phương thức hide() hoặc show() hoàn thành (bạn sẽ học về các hàm callback trong chương sau).

Trong ví dụ sau sẽ mô tả tốc độ của phương thức hide()

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

TỰ HỌC JQUERY – CƠ BẢN - BÀI 4 – XỬ LÝ CÁC SỰ KIỆN

Xem Mục lục lập trình JQuery

Sự kiện là gì?

Tất cả các hành động của người dùng mà 01 trang web có thể đáp ứng được gọi là sự kiện.

01 sự kiện diễn tả chính xác khoảnh khắc khi 01 cái gì đó xảy ra.

Ví dụ:
  • Di chuyển chuột trên 01 phần tử nào đó.
  • Chọn 01 nút radio.
  • Bấm chuột trái lên 01 phần tử.

02 thời điểm "fires/fired"( xảy ra/đã xảy ra) thường được dùng với sự kiện.

Ví dụ: "Sự kiện nhấn phím đã xảy ra, là khoảnh khắc khi bạn bấm 01 phím (chưa nhả ra)".

Sau đây là 01 vài sự kiện thông dụng của DOM:

Sự kiện chuột
Sự kiện bàn phím
Sự kiện Form
Sự kiện trên tài liệu/Cửa sổ
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
mouseleave

blur
unload


Cú pháp jQuery cho các hàm sự kiện

Trong jQuery, hầu hết sự kiện DOM đều có hàm jQuery giống nhau.

Để gán sự kiện click chuột vào tất cả các đoạn trong 01 trang, bạn dùng cách sau:
$("p").click();

Tiếp theo, để xác định những gì xảy ra khi sự kiện xảy ra. Bạn phải dùng hàm sau:
$("p").click(function(){
  // action goes here!!});

Các hàm sự kiện hay dùng trong jQuery

$(document).ready()

TỰ HỌC JQUERY – CƠ BẢN - BÀI 3 - SELECTORS


Xem Mục lục lập trình JQuery


jQuery selectors là phần quan trọng nhất trong thư viện jQuery.

jQuery Selectors

jQuery selectors cho phép bạn chọn và xử lý các phần tử HTML(s).

jQuery selectors dùng để "tìm" (hoặc chọn) phần tử HTML dựa trên tên, id, class, loại, thuộc tính, giá trị của các thuộc tính và nhiều hơn nữa.

Nó dựa vào thư viện các CSS Selectors, và phần selectors tự định nghĩa.

Tất cả selectors trong jQuery bắt đầu với dấu $ và cặp dấu ngoặc đơn: $().


Selector phần tử

jQuery chọn phần tử HTML dựa trên tên thẻ.

Bạn có thể chọn tất cả thẻ <p> trên 01 trang bằng cú pháp:
$("p")
Ví dụ:
Khi người dùng bấm chuột lên 01 nút , tất cả thẻ <p> sẽ ẩn đi:

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


Xem Mục lục lập trình JQuery


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.

Thứ Bảy, 21 tháng 1, 2017

Tự học Jquery – Cơ Bản - Bài 1 – Giới thiệu

Xem Mục lục lập trình JQuery

Mục đích của jQuery để làm cho việc sử dụng JavaScript dễ dàng hơn trên trang web của bạn.

Những thứ cần thiết:

Trước khi bắt đầu học jQuery, bạn cần những kiến thức cơ bản sau:

  • HTML
  • CSS
  • JavaScript
  • Bạn có thể xem các hướng dẫn của tôi trên website http://www.lophocvitinh.com
  • Jquery là gì?

jQuery là 01 thư viện JavaScript cực nhẹ với tiêu chí "write less, do more" (viết ít, được nhiều).

Mục đích của jQuery là làm cho việc sử dụng JavaScript trên trang web dễ dàng hơn.

jQuery có thể làm được nhiều thao tác thông dụng mà nếu viết bằng JavaScript sẽ tốn rất nhiều dòng lệnh, và đóng gói chúng thành các hàm để chúng ta có thể gọi chúng bằng 01 dòng lệnh ngắn.

jQuery cũng giúp đơn giản hóa rất nhiều thứ trong JavaScript, ví dụ gọi AJAX và xử lý DOM.

Thư viện jQuery gồm các tính năng sau:

  • Xử lý HTML/DOM
  • Xử lý CSS
  • Các hàm xử lý sự kiện HTML
  • Hiệu ứng và chuyển động.
  • AJAX
  • Các tiện ích khác.

Mẹo: Hơn nữa, jQuery có những plugins cho hầu hết các thao tác.

Facebook Youtube RSS