[12TH01][09050001-09050022-09020025]Tìm hiểu về sử dụng jquery

Submitted by quangphiit001 on Fri, 10/19/2012 - 22:23

Forums:

web và công nghệ Web

Nội dung thuyết trình:

1.

Tổng quát về jquery.

2.

Tìm hiểu về jquery slide.

3.

Tìm hiểu về jquery hide and show.

4.

Tìm hiểu về jquery event.

Tổng quát về jquery.

jQuery là một thư viện Javascript kiểu mới, giúp chúng ta đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web. Để thực hiện một chức năng nào đó, thay vì viết vài chục dòng lệnh DOM JavaScript chán ngắt cũ kỹ, với jQuery chỉ cần vài dòng.

Query làm được những gì?

   1. Truy cập (access) các phần tử (elements) trong nội dung trang web (document)
   2. Thay đổi hình thức/giao diện (appearance) của trang web: Thay đổi class hoặc style riêng lẽ...
   3. Thay đổi nội dung (content) trang web.
   4. Tương tác với người dùng.
   5. Hiệu ứng động: fades, wipes, ...
   6. Lấy thông tin từ Server mà không cần load lại trang web (AJAX)
   7. Đơn giản hoá tác vụ của JavaScript

Ví dụ đầu tiên về jquery:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

Trước tiên chúng ta hãy xem hiệu ứng trong Jquery là gì? Hiệu ứng được hiểu một cách đơn giản là việc tạo ra các chuyển động cho phần tử HTML với những trạng thái và cách thức khác nhau. Những hiệu ứng này sẽ giúp web của bạn trở nên sinh động hơn. Trong Jquery có những hiệu ứng cơ bản sau: Show, Hide, Slide, Toogle, Fade, Animate.

Tìm hiểu về jquery slide.

Jquery slide gồm các phương thức:

a.

SlideUp:

Dùng để thu các phần tử nhỏ lại cho đến khi không nhìn thấy.
cú pháp: Cú pháp: $(selector).slideUp(speed,callback);

b. SlideDown

dùng để đưa các phần tử trở lại kích thước ban đầu.
Cú pháp: $(selector).slideDown(speed,callback);

c.SlideToogle

dùng để đưa phần tử về kích thước ngược lại với kích thước hiện tại. Đây là hàm kết hợp giữa SlideUp và SlideDown. Ví dụ nếu bạn đưa phần tử về kích thước về 0:0 bằng SlideUp thì dùng SlideToogle thì phần tử sẽ trở lại với kích thước ban đầu giống với khi dùng SlideDown.
Cú pháp: $(selector).slideToogle(speed,callback);

Tìm hiểu về jquery hide and show.

Phương thức Hide() trong Jquery.

Cú pháp: $(selector).action()

Chúng ta hãy cùng phân tích cú pháp này một chút:
$: dấu dollar này được dùng để định nghĩa rằng chúng ta sẽ sử dụng jquery cho đoạn script này.
selector: là thành phần mà chúng ta sẽ truy cập đến như document, p, h1,a..
action: là phương thức mà chúng ta sẽ dùng cho selector bên trên ví dụ như read(),click(),hide()...
Ví dụ:

$(document).ready(function(){
// thực hiện câu lệnh hoặc gọi hàm thao tác với các thành phần HTML ở đây.
});

Phương thức Hide giống với Show nhưng mà là làm ngược lại. Show là hiển thị ra còn Hide là làm ẩn đi.

Phương thức Show() trong Jquery.

Show() là phương thức giúp bạn hiện ra một phần tử HTML nào đó đã bị ẩn đi.

Cú pháp: $(selector).show(speed, callback);

Selector ở đây là phần tử bạn muốn hiển thị.

Speed: ở đây là tốc độ hiển thị phần tử. Bạn có thể dùng slow, normal, fast hoặc thời gian tính bằng mili giây.

Callback: đây là hàm mà chúng ta sẽ thực thi khi show được thực hiện.

http://www.mediafire.com/?7vb3jv6vj5721cd