tài liệu tìm hiểu jquery dành cho người mới bắt đầu

PLIB

THƯ VIỆN JAVASCRIPT

TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU

Biên soạn Đặng Văn Lel

Email [email protected]

Facebook https://facebook.com/dangvanlel

Ngày 03.12.2012

Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU

2 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn

TÓM TẮT NỘI DUNG

CHƯƠNG 1: GIỚI THIỆU TỔNG QUÁT .................................................................................... 3

1. jQuery là gì? ............................................................................................................................................................... 3

2. Để sử dụng jQuery bạn cần những hiểu biết gì? .................................................................................. 3

3. Tại sao nên sử dụng jQuery? ........................................................................................................................... 3

4. Làm sao để sử dụng jQuery? ........................................................................................................................... 3

CHƯƠNG 2: JQUERY HOẠT ĐỘNG NHƯ THẾ NÀO? ................................................................... 5

1. Cú pháp để chọn đối tượng. .............................................................................................................................. 5

2. Điều khiển CSS của đối tượng ......................................................................................................................... 5

2.1. Lấy giá trị của một thuộc tính CSS .............................................................................................................. 5

2.2. Đặt giá trị mới cho CSS .................................................................................................................................... 6

3. Điều khiển thuộc tính của đối tượng ........................................................................................................... 7

3.1. Lấy giá trị thuộc tính của đối tượng ............................................................................................................. 7

3.2. Gán giá trị mới cho thuộc tính ....................................................................................................................... 7

4. Gán sự kiện và xử lý sự kiện ............................................................................................................................ 8

4.1. Gán sự kiện vào đối tượng. ............................................................................................................................. 8

4.2. Hủy sự kiện đã gán vào đối tượng ............................................................................................................. 10

4.3. Vài ví dụ về sự kiện để tham khảo ............................................................................................................. 10

5. Chuyển động, thay đổi hình dạng của đối tượng. .............................................................................. 13

6. Một vài hàm API phổ biến hay dùng. ........................................................................................................ 15

CHƯƠNG 3: DANH SÁCH TRA CỨU JQUERY API ............................................................... 18



CHƯƠNG 1: GIỚI THIỆU TỔNG QUÁT

1. jQuery là gì?

jQuery là một thư viện javascript miễn phí dùng để hỗ trợ cho người lập trình có thể viết

javascript nhanh hơn, dễ dàng hơn, ngắn gọn hơn nhưng kết quả thực thi lại tốt hơn. jQuery sẽ

làm đơn giản hóa việc quản lý HTML/DOM, điều khiển sự kiện, chuyển động, CSS và việc sử

dụng công nghệ AJAX.

jQuery tạo ra một hướng đi mới và thay đổi cách mà bạn viết javascript. jQuery tổ chức lại

những mục đích mà bạn phải dùng rất nhiều câu lệnh javascript để thực hiện thành một câu

lệnh đơn giản duy nhất.

2. Để sử dụng jQuery bạn cần những hiểu biết gì?

jQuery không phải là một ngôn ngữ mới mà chỉ là thư viện hàm javascript. jQuery hướng tới

mục đích làm đơn giản hóa những công việc phức tạp trước đây khi dùng javascript để điều

khiển DOM, CSS,… Do vậy, để học jQuery bạn cần tối thiểu nắm bắt được những kiến thức sau:

HTML

JAVASCRIPT

CSS

3. Tại sao nên sử dụng jQuery?

Mặc dù có rất nhiều những thư viện javascript trên thế giới nhưng jQuery được sử dụng rộng

rãi và phổ biến nhất. Đặc biệt với các hãng lớn Google, Microsoft, IBM, … cũng s ử dụng jQuery

trên những webiste và công nghệ của họ.

4. Làm sao để sử dụng jQuery?

jQuery đơn thuần là một tập tin javascript, để sử dụng các hàm jQuery, bạn cần tải về tập tin

này rồi dùng thẻ <script> để chèn vào trang web mà bạn muốn dùng cũng giống như chèn

những tập tin javascript do bạn viết vậy.

Có thể tải về tập tin jQuery phiên bản mới nhất tại trang web chính thức của jQuery tại đây:

http://jquery.com/

Truy cập vào website rồi ấn nút “Download (jQuery);” để tải về.

http://jquery.com/�



(Thông thường khi ấn vào nút này thì trình duyệt sẽ mở lên nội dung của tập tin chứ không tải

về. Bạn chỉ việc bấm Ctrl+S để lưu lại nội dung thành một tập tin *.js)



CHƯƠNG 2: JQUERY HOẠT ĐỘNG NHƯ THẾ NÀO?

Phần này tập trung mô tả những cú pháp cơ bản của jQuery cùng với vài mục đích sử dụng phổ

biến. Sau đó, dựa vào những giới thiệu trong phần này mà bạn có thể tự mình nghĩ ra những mục

đích dùng khác trong việc khai thác triệt để các hàm API sẽ được liệt kê đầy đủ và chi tiết trong

phần sau.

1. Cú pháp để chọn đối tượng.

jQuery sử dụng cùng một cách như CSS để lựa chọn những phần tử HTML (thẻ HTML) và thực

hiện vài việc gì đó lên những đối tượng được chọn. Việc chọn đối tượng có thể thực hiện theo

kiểu chọn một đối tượng duy nhất (đơn lẻ) hoặc một tập hợp các đối tượng có cùng đặc điểm

(nhiều thành phần). Nguyên tắc để chọn cụ thể như sau:

Cú pháp | Chọn đối tượng để thao tác

$(doi_tuong) ---------------------------------------------------------------------------------------

$ : ký tự bắt đầu của jQuery trong việc xác định đối tượng.

doi_tuong : tiêu chí để xác định đối tượng. Liệt kê cụ thể những trường hợp như bên dưới.

Sau đây là bảng liệt kê các tiêu chuẩn mẫu để chọn đối tượng:

$(this) Chọn đối tượng hiện tại (đối tượng đặc biệt) | đơn lẻ

$(document) Chọn đối tượng toàn bộ tài liệu (đối tượng đặc biệt) | đơn lẻ

$(window) Chọn đối tượng về cửa sổ hiện hành (đối tượng đặc biệt) | đơn lẻ

$('p') Chọn tất cả thẻ <p> | nhiều thành phần

$('.ClassName') Chọn tất cả thẻ HTML có class=’ClassName’ | nhiều thành phần

$('#IdValue') Chọn thẻ HTML có id=’IdValue’ | đơn lẻ

2. Điều khiển CSS của đối tượng

2.1.

Khi dùng jQuery, việc tác động trực tiếp và lấy giá trị một thuộc tính CSS của đối tượng đang

được chọn vô cùng đơn giản vì bạn sẽ sử dụng tên thuộc tính và giá trị lấy được sẽ có định

dạng y như khi định nghĩa CSS thuần.

Lấy giá trị của một thuộc tính CSS



Cú pháp | Lấy giá trị của một thuộc tính CSS

$(doi_tuong).css('ten_css'); ---------------------------------------------------------------------------------------

doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên.

ten_css : là tên của thuộc tính css như font-size, color, background-color, …

Ví dụ, để lấy giá trị thuộc tính CSS font-family của tất cả thẻ <p> ta có câu lệnh jQuery sau:

Code

var value = $('p').css('font-family');

Giá trị trả về của câu lệnh trên là chuỗi tên của font đang dùng như “Verdana” hay “Arial”

Chú ý: giá trị của thuộc tính css trả về sẽ là của cái đầu tiên được tìm thấy trong trường hợp bạn dùng tiêu chí chọn đối tượng theo số nhiều. Trong ví dụ trên, nếu các thẻ <p> trong toàn trang có nhiều font-family khác nhau thì giá trị trả về là của thẻ <p> xuất hiện đầu tiên.

2.2.

Tương tự như lấy giá trị của thuộc tính CSS, việc gán giá trị cho nó cũng khá là đơn giản.

Đặt giá trị mới cho CSS

Cú pháp | Gán giá trị cho một thuộc tính CSS

$(doi_tuong).css('ten_css','gia_tri'); ---------------------------------------------------------------------------------------

doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên.

ten_css : là tên của thuộc tính css như font-size, color, background-color, …

gia_tri : là giá trị bạn muốn gán cho thuộc tính css

Ví dụ, ta muốn gán giá trị thuộc tính font-family thành Verdana cho toàn bộ thẻ <p>. Câu

lệnh jQuery sẽ như thế này:

Code

$('p').css('font-family','Verdana’);

Câu lệnh trên sẽ thay thế toàn bộ thuộc tính font-family của tất cả thẻ <p> thành Verdana.

Chú ý: Không giống như lấy giá trị, trong trường hợp bạn dùng tiêu chí chọn đối tượng số nhiều thì việc thay thế sẽ làm thay thế toàn bộ các giá trị của các đối tượng chứ không chỉ thay thế cái đầu tiên tìm thấy. Như ví dụ trên, có thể các thẻ <p> trong toàn trang có nhiều thuộc tính font-family khác nhau, nhưng tất cả sẽ bị đổi thành Verdana sau câu lệnh đó.



3. Điều khiển thuộc tính của đối tượng

3.1. Lấy giá trị thuộc tính của đối tượng

Cú pháp | Lấy giá trị một thuộc tính HTML của đối tượng

$(doi_tuong).attr('thuoc_tinh'); ---------------------------------------------------------------------------------------

doi_tuong : tiêu chuẩn xác định đối tượng như mô tả ở trên.

thuoc_tinh : tên của thuộc tính của thẻ html.

Ví dụ 1, ta có thẻ <img id='vidu_image' src='simple.jpg' /> Nếu muốn lấy thuộc tính src của

thẻ này, ta dùng:

Code

var value = $('#vidu_image').attr('src');

Ví dụ 2, ta có thẻ <input type='txtUID' id='vidu' /> , nếu muốn lấy giá trị thuộc tính value

của thẻ này. Ta có thể dùng câu lệnh jQuery tương tự.

Code

var value = $('#txtUID').attr('value');

Tuy nhiên, đối với ví dụ 2, bạn cũng có thể dùng câu lệnh jQuery như sau để lấy giá trị của

thuộc tính value.

Code

var value = $('#txtUID').val();

Chú ý: đối với các thẻ nhập dữ liệu liệu của FORM, người ta thường dùng hàm val() để lấy giá trị của thuộc tính value của chúng. Không có sự khác biệt nào về kết quả giữa cách dùng attr() và val().

Tùy vào đối tượng là thẻ nào mà thuộc tính chỉ định sẽ có tồn tại hay không. Nếu không tồn tại

thì câu lệnh trả về undefined. Ví dụ, nếu bạn cố gắng lấy thuộc tính color của thẻ <img> thì

kết quả trả về là undefined vì thẻ <img> không có thuộc tính color.

3.2.

Việc gán lại giá trị của thuộc tính cũng đơn giản và tương tự như lấy giá trị thuộc tính. Chỉ khác

biệt là ta sẽ có 2 tham số bên trong attr(). Nếu bạn cố gắng gán một thuộc tính cho một đối

tượng HTML không hỗ trợ thuộc tính đó thì câu lệnh sẽ không được thực thi.

Gán giá trị mới cho thuộc tính



Cú pháp | Gán lại giá trị của một thuộc tính HTML cho đối tượng

$(doi_tuong).attr('thuoc_tinh','gia_tri'); ---------------------------------------------------------------------------------------

doi_tuong : tiêu chuẩn xác định đối tượng như mô tả ở trên.

thuoc_tinh : tên của thuộc tính của thẻ html.

gia_tri : giá trị muốn gán cho thuộc tính.

Ví dụ, ta có thẻ html <img id='vidu_image' src='simple.jpg' />. Ta muốn đổi thuộc tính src

thành new_image.jpg ta viết:

Code

$('#vidu_image').attr('src','new_image.jpg');

4. Gán sự kiện và xử lý sự kiện

Phần này sẽ trình bày việc dùng jQuery để gán sự kiện lên đối tượng và điều khiển xử lý sự

kiện đó khi nó xãy ra. Nội dung ở đây đề cập đến chỉ bao gồm những cách dùng phổ thông

nhất để giúp bạn nắm bắt và làm quen. Những nội dung chi tiết hơn về các sự kiện sẽ được đề

cập đầy đủ trong những phần tiếp theo trong tài liệu này.

4.1.

Cú pháp phổ biến cho việc gán và xử lý sự kiện như sau:

Gán sự kiện vào đối tượng.

Cú pháp | Gán sự kiện và hàm điều khiển cho sự kiện vào đối tượng

$(doi_tuong).ten_su_kien(ham_dieu_khien);

---------------------------------------------------------------------------------------------------- doi_tuong : Tiêu chí xác định đối tượng như đã nói trong phần giới thiệu. ten_su_kien : Tên của sự kiện (được liệt kê đầy đủ ở 4.4) ham_dieu_khien : Hàm điều khiển của sự kiện khi sự kiện phát sinh.

Hàm điều khiển có thể định nghĩa mới ngay bên trong câu lệnh gán sự kiện hoặc có thể khai báo hàm đã được định nghĩa riêng bên ngoài.

Ví dụ, bạn muốn khi website load lên sẽ hiển thị hộp thoại thông báo dòng chữ “Xin Chào”.

Code | Theo cách dùng Javascript thông thường

<body onload="alert('Xin Chào')">

Code | Theo cách dùng jQuery

$(document).ready(function () { alert('Xin Chào');});



Ví dụ trên bắt sự kiện onload (khi html đã được load xong và sẵng sàng để trình duyệt hiển thị)

và thực thi hàm được định nghĩa ngay bên trong câu lệnh gán sự kiện, hàm này chỉ có một câu

lệnh alert() để hiển thị hộp thoại có câu “Xin chào”.

Để hiểu rõ hơn về cú pháp này, ta sẽ lần lượt xét các ví dụ về sử dụng hàm xử lý sự kiện được

định nghĩa riêng bên ngoài câu lệnh gán sự kiện:

Ví dụ về sử dụng hàm điều khiển định nghĩa riêng (không có tham số)

Code

// Định nghĩa hàm hiển thị câu Xin Chào

function Display_Message() { alert('Xin Chào'); } // Gán sự kiện ready (onload) cho document và gọi hàm định nghĩa trên khi sự kiện xãy ra $(document).ready(Display_Message);

Ví dụ về sử dụng hàm điều khiển định nghĩa riêng (có tham số)

Code

// Định nghĩa hàm hiển thị nội dung được cung cấp qua tham số thong_diep

function Display_Message(thong_diep) { alert(thong_diep); } /* Gán sự kiện và gọi hàm Display_Message (kèm theo giá trị tham số là câu ‘Xin Chào, Đặng Văn Lel’) khi sự kiện xãy ra */ $(document).ready(Display_Message('Xin Chào, Đặng Văn Lel'));



4.2.

Khi đã gán sự kiện cho một đối tượng rồi, nhưng trong một số trường hợp hoặc vì vài lý do nào

đó mà bạn muốn hủy sự kiện đó thì jQuery giúp bạn làm việc này khá đơn giản.

Hủy sự kiện đã gán vào đối tượng

Cú pháp | hủy xử lý sự kiện theo tên sự kiện

$(doi_tuong).unbind('ten_su_kien'); ----------------------------------------------------------------------------------------------------- doi_tuong : Tiêu chí xác định đối tượng như đã nói trong phần giới thiệu. ten_su_kien : Tên sự kiện theo chuẩn javascript như click, focus,load,…

Còn muốn hủy bỏ xử lý toàn bộ sự kiện của một đối tượng, ta dùng cú pháp này:

Cú pháp | hủy xử lý toàn bộ sự kiện

$(doi_tuong).unbind();

Kết hợp những kiến thức trên về sự kiện, ta sẽ lần lượt đi qua vài ví dụ trong phần 4.3 để có

thể hiểu rõ hơn và biết cách dùng thành thạo hơn đối với từng trường hợp và vấn đề phát sinh.

Chủ yếu là vấn đề gán và hủy sự kiện.

4.3.

Ví dụ 1 :

Gán sự kiện click lên một button, khi người ta click vào button thì bật hộp thoại có dòng chữ

“Xin Chào” lên.

Vài ví dụ về sự kiện để tham khảo

Code

<html> <head>  <script language="javascript" src="jquery.js"></script> <script language="javascript">  $(document).ready(function(){  $('#btb_1').click(function(){ alert('Xin Chào'); }); }); </script> </head> <body> <input type="button" id="btb_1" value="Hiển thị hộp thoại" /> </body> </html>

Có lẽ các bạn sẽ đặt câu hỏi ở ví dụ trên là “Tại sao lại đặt lệnh gán sự kiện cho nút btb_1 nằm

trong sự kiện ready() của document?”. Câu trả lời là vì khi trang web đư ợc tải xong thì đ ối

tượng btb_1 mới tồn tại. Nếu bạn không đặt câu lệnh gán sự kiện cho btb_1 bên trong sự kiện

ready của document thì sẽ không có tác dụng gì hết khi đoạn script xuất hiện trước đoạn định

nghĩa btb_1 như ở ví dụ trên.

Trong trường hợp bạn muốn định nghĩa sự kiện cho btb_1 mà không muốn đặt bên trong sự

kiện ready của document, bạn cần chèn script định nghĩa sự kiện xuất hiện sau đoạn HTML

định nghĩa đối tượng btb_1 như sau:

Code

<html> <head>  <script language="javascript" src="jquery.js"></script> </head> <body>  <input type="button" id="btb_1" value="Hiển thị hộp thoại" />  <script language="javascript"> $('#btb_1').click(function () { alert('Xin Chào'); }); </script> </body> </html>

Kết quả của cả 2 code trên là như nhau:

Ví dụ 2: Sử dụng ví dụ 1, bổ sung thêm một button nữa. Điều kiện là khi người dùng click

lên button 1 thì vẫn hiển thị hộp thoại “Xin Chào”. Nhưng khi người dùng click lên button thứ 2

thì hủy bỏ sự kiện click của button thứ nhất. Lúc này, nếu người dùng click lên button 1 thì sẽ

không nhìn thấy hộp thoại “Xin Chào” nữa.

Code

<html> <head>  <script language="javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> </head> <body>  <input type="button" id="btb_1" value="Hiển thị hộp thoại" />  <input type="button" id="btb_2" value="Hủy bỏ sự kiện của button 1" /> <script language="javascript">  $('#btb_1').click(function () { alert('Xin Chào'); });  $('#btb_2').click(function () { $('#btb_1').unbind('click'); }); </script> </body> </html>



5. Chuyển động, thay đổi hình dạng của đối tượng.

Chuyển động (animation) là một trong những API thú vị nhất trong jQuery. Bạn sẽ dễ dàng

điều hướng, thay đổi hình dạng, vị trí của đối tượng vô cùng dễ dàng và thuận tiện.

Cú pháp

$(doi_tuong).stop(true).animate( { danh_sach_thuoc_tinh }, thoi_gian_chuyen [,dieu_khien]);

----------------------------------------------------------------------------------------------------

stop(true) để đảm bảo dừng xử lý mọi hiệu ứng chuyển động đang chạy của đối tượng.

danh_sach_thuoc_tinh là danh sách những thuộc tính và giá trị muốn thay đổi đến,

danh sách này khai báo theo định dạng ten:gia_tri và nếu có nhiều cặp như thế thì sẽ

cách nhau bởi dấu phẩy “,” như là ten1:gia_tri1, ten2:gia_tri2

thoi_gian_chuyen là thời gian mà bạn muốn quá trình chuyển hoàn thành tính bằng

1/1000 giây

dieu_khien là hàm điều khiển sẽ được thực thi sau khi quá trình chuyển kết thúc. Hàm

này có thể bỏ trống.

Để có thể nắm rõ hơn v ề animate(). Chúng ta sẽ lần lượt đi qua một vài ví dụ trong nhiều

trường hợp sử dụng như sau:

Ví dụ 1:

Đoạn code sau đây sẽ thay đổi chiều cao của đối tượng có id=”vidu” từ chiều cao hiện tại

thành 500pixel trong vòng 5 giây. Sau khi thay đổi xong thì hiển thị thông báo “Đã xong”

bằng một hộp thoại.



Code

$('#vidu').stop(true).animate( { height:'500px' },5000, function(){ alert('Đã xong');});

Ví dụ 2:

Đoạn code sau đây sẽ thay đổi cùng lúc chiều cao và chiều rộng của đối tượng có id=”vidu” từ

chiều cao và chiều rộng hiện tại thành 500px(cao) và 700px(rộng) trong vòng 3 giây. Sau

khi chuyển đổi xong thì không làm gì cả.

Code

$('#vidu').stop(true).animate( { height :'500px', width :'700px' },3000);

Ví dụ 3: Thực hiện công việc như như mô tả sau:

Thay đổi cùng lúc chiều cao và chiều rộng của đối tượng có id=”vidu1” từ chiều cao và chiều

rộng hiện tại thành 300px(cao) và 400px(rộng) trong vòng 7 giây. Sau khi chuyển đổi xong

thì thực hiện một chuyển đổi khác làm thay đổi chiều cao của một đối tượng có id=”vidu2” từ

chiều cao hiện tại thành 300px trong vòng 2 giây. Sau khi chuyển đổi xong lại thực hiện

chuyển đổi khác làm thay đổi chiều rộng của một đối tượng có id=”vidu3” từ chiều rộng hiện

tại thành 250px trong vòng 3.5 giây.Sau khi quá trình chuyển đổi này kết thúc thì thông báo

câu “Đã xong” bằng một hộp thoại. Đoạn code cho công việc trên sẽ như thế này:

Code

$('#vidu1').stop(true).animate( { Height : '300px', width : '400px' }, 7000 , function () { $('#vidu2').stop(true).animate( { height : '300px' }, 2000 , function(){ $('#vidu3').stop(true).animate() { width : '250px' }, 3500, function(){ alert('Đã xong');}); }); });



Đoạn code trên khá phức tạp khi lồng dieu_khien vào nhau. Để cho đơn giản và dễ quản lý,

bạn có thể chia nhỏ ra bằng định nghĩa hàm như code sau:

Code

// Hàm thay đổi chiều rộng cho đối tượng có id="vidu3" function Animate_Vidu3(){ $('#vidu3').stop(true).animate( { width : '250px' }, 3500, function(){ alert('Đã xong');}); } // Hàm thay đổi chiều cao cho đối tượng có id="vidu2" function Animate_Vidu2() { $('#vidu2').stop(true).animate( { height : '300px' }, 2000 , Animate_Vidu3 ); } // Chạy thực thi thay đổi chiều rộng và chiều cao của đối tượng có id="vidu1" $('#vidu1').stop(true).animate( { height: '300px', width: '400px' }, 7000 , Animate_Vidu2 );

Mô tả chu trình chạy của code trên:

Khi vidu1 bị đổi xong, nó sẽ gọi Animate_Vidu2

Khi Animate_Vidu2 bị gọi thì vidu2 bị đổi, khi vidu2 bị đổi xong, nó sẽ gọi Animate_Vidu3

Khi Animate_Vidu3 bị gọi thì vidu3 bị đổi, khi vidu3 bị đổi xong, nó gọi hàm alert để hiển thị

một thông báo “Đã xong”.

6. Một vài hàm API phổ biến hay dùng.

Đây là danh sách những hàm API jQuery hay dùng nhất để bạn có thể tham khảo nhanh và phục

vụ vài mục đích đơn giản tỏng quá trình làm quen với jQuery cũng như làm cái bài tập. Cũng như

những nội dung bên trên, những cách dùng liệt kê trong phần này cũng ch ỉ là những trường hợp

phổ thông nhất. Để biết thêm chi tiết về các API vui lòng tham khảo chương 3.

6.1. Hàm .fadeIn()

Hiệu ứng hiển thị dần dần một đối tượng từ trạng thái trong suốt. Nghĩa là trạng thái ban đầu

của đối tượng phải là trong suốt (opacity = 0).



Cú pháp

$(doi_tuong).fadeIn(thoi_gian, dieu_khien);

----------------------------------------------------------------------------------------------------

thoi_gian : thời gian chuyển, có thể dùng số (1/1000 giây) hoặc chuỗi ‘slow’ và ‘fast’

dieu_khien : là hàm được thực thi sau khi quá trình đổi kết thúc. Hàm này có thể bỏ trống.

Sau đây là danh sách ví dụ về cách dụng hiệu ứng này.

Hiển thị đàn đối tượng có id=’vidu1’ trong khoảng thời gian 5 giây.

Code

$('#vidu1').fadeIn(5000);

Hiển thị dần đối tượng có id=’vidu2’ trong khoảng thời gian 200 mili giây (tương ứng ‘fast’)

Code

$('#vidu2').fadeIn('fast');

Hiển thị dần đối tượng có id=’vidu3’ trong khoảng thời gian 600 mili giây(tương ứng ‘slow’).

Sau khi xong thì hiển thị hộp thoại “Đã xong”.

Code

$('#vidu3').fadeIn('slow', function(){alert('Đã Xong');});

6.2. Hàm .fadeOut()

Hàm này có tác dụng gây hiệu ứng ngược lại với hàm .fadeIn(), nghĩa là nó sẽ làm cho một

đối tượng trở nên trong suốt từ từ. Các tham số và cách sử dụng ý như .fadeIn().

6.3. Hàm .fadeTo()

Hàm này có thể sử dụng cho cả hai trường hợp .fadeIn() và .fadeOut() khi nó hướng tới mục

đích chuyển đổi tự trạng thái hiện tại đến một trạng thái được chỉ định. Tùy vào giá trị hiện tại

và giá trị đến mà sẽ có hiệu ứng fadeIn() hay .fadeOut().

Cú pháp

$(doi_tuong).fadeTo(thoi_gian, dich_den, dieu_khien);

----------------------------------------------------------------------------------------------------



dich_den : có giá trị từ 0-1 (tương ứng 0% 100%) là độ fade muốn chuyển đến.



Ví dụ: Giả sử ta có một thẻ <div id=”vidu”></div> đang có độ opacity là 0.5 , ta sẽ xét hiệu

ứng của những lệnh dưới đây lên đối tượng “vidu” này:

Code | Gây hiệu ứng .fadeIn() do số chuyển đến lón hơn hiện tại (0.5)

$('#vidu').fadeTo('slow', 0.7, function(){alert('Đã Xong');});

Code | Gây hiệu ứng .fadeOut() do số chuyển đến lón hơn hiện tại (0.5)

$('#vidu').fadeTo('slow', 0.2, function(){alert('Đã Xong');});

6.4. Hàm .show()

Về bản chất nếu không có tham số thì hàm này sẽ gọi .css('display', 'block'). Còn nếu có tham

số như cú pháp dưới đây thì nó hoạt động tương tự như .fadeIn().

Cú pháp

$(doi_tuong).show(thoi_gian, dieu_khien);

----------------------------------------------------------------------------------------------------



6.5. Hàm .hide()

Trái ngược với .show(), nếu không có tham số thì hàm này sẽ gọi .css('display', 'none'). Còn

nếu có tham số như cú pháp dưới đây thì nó hoạt động tương tự như .fadeOut().

Cú pháp

$(doi_tuong).hide(thoi_gian, dieu_khien);

----------------------------------------------------------------------------------------------------





CHƯƠNG 3: DANH SÁCH TRA CỨU JQUERY API

Là danh sách tập hợp toàn bộ hàm API trong jQuery dùng cho việc tra cứu. Danh sách này đặt tại địa chỉ

http://api.jquery.com/ và hiện tại chúng tôi đang nổ lực dịch nó lại bằng Tiếng Việt và sẽ sớm đưa vào hoạt

động bản dịch khi khai trương Thư Viện Lập Trình.

Những kiến thức trình bày tính đ ến đây trong tài liệu này là đủ để bạn hiểu và có thể sử dụng jQuery, đồng thời

có khả năng tự mở rộng kiến thức cho bản thân về jQuery như plusin hay những hàm API khác …

Cảm ơn sự quan tâm của bạn đến tài liệu này và chúng tôi sẽ sớm trở lại với phiên bản tài liệu đầy đủ và chi tiết

hơn khi khai trương Thư Viện Lập Trình.

Trân trọng.

HẾT

http://api.jquery.com/�

tài liệu tìm hiểu jquery dành cho người mới bắt đầu

Technology