Tiểu luận Lập trình ứng dụng web Tìm hiểu về Jquery

TÌM HIỂU VỀ JQUERY Thành viên trong nhóm : - Lý Bảo Huy - Lương Trọng Nghĩa... JQUERY LÀ GÌ ? jQuery là một thư viện JavaScript, viết bằng mã JavaScript và được đóng gói thành 1 file *

TÌM HIỂU

VỀ JQUERY

Thành viên trong nhóm :

- Lý Bảo Huy

- Lương Trọng Nghĩa

I JQUERY LÀ GÌ ?

 jQuery là một thư viện JavaScript, viết

bằng mã JavaScript và được đóng gói

thành 1 file *.js, được thiết kế để đơn giản hóa các đoạn script phía client (máy

khách)

  jQuery được phát hành vào tháng 1 năm

2006 tại BarCamp NYC bởi John Resig

 Được sử dụng bởi hơn 41% trong số 10.000 trang web được truy cập nhiều nhất,

jQuery là thư viện phổ biến nhất của

JavaScript được sử dụng ngày nay

I JQUERY LÀ GÌ ?

Thư viện jQuery chứa các tiện ích sau:

Chọn lựa và thao tác các thẻ HTML

Thao tác với CSS

Các hàm sự kiện trong HTML

Các hiệu ứng hoạt hình trong

JavaScript

HTML DOM

AJAX và các tiện ích khác

I JQUERY LÀ GÌ ?

Câu lệnh để thêm file thư viện jquery vào file php :

<script type="text/javascript“

src=“…"></script>

Trong đó src là đường dẫn đến file thư viện jquery Ví dụ : jquery.1.8.2

Trong file code (.php, java….), các câu

lệnh jquery được viết trong cặp thẻ <script type=“text/javascript”></script>

II CÚ PHÁP JQUERY

 Cú pháp jQuery được dùng để chọn các thẻ HTML và tương tác các hành vi với các thẻ đó

 Cú pháp cơ bản rất đơn giản như sau: 

$(selector).action();

 Dấu $ là để định nghĩa jQuery.

 Phần (selector) là phần tìm các thẻ HTML

thông qua tên thẻ, thuộc tính, lớp, id

 Phần action() là hành vi cần thực hiện cho

các thẻ HTML sau khi tìm được.

II CÚ PHÁP JQUERY

Ví dụ (demo1)

Selector là thẻ HTML :

$(“div”).hide();

Selector là ID :

$(“#Main”).hide();

Selector là class :

$(“.main”).hide();

 Ngoài ra ta còn có thể chọn các selector theo cú pháp CSS như : div: first,

div.main, div#main…

III MỘT SỐ KIỂU HÀM THÔNG DỤNG

A) Chain Method ( hàm mắt xích )

$(“ ”).method1().method2();

Vd:

 $

("#divChainMethod").removeClass("HiddenDiv") addClass("NewDivColor");

B) One Method…Many use

$(“ ”).method(“abc”);

$(“ ”).method(“xyz”);

III MỘT SỐ KIỂU HÀM THÔNG DỤNG

C) Moving Element

Append(), appendTo(), before(),…

Vd:

$("#DemoAppend").append("<p>Text thêm bởi hàm append</p>");

D) Attribute

Attr(), html(), addClass, …

Vd:

III MỘT SỐ KIỂU HÀM THÔNG DỤNG

E) Event

Click(), bind(), unbind()…

Vd:

$(“…”).bind(“click”, function(){…});

$(“…”).bind(click:function()

{},mouseenter:function(){});

$(“…”).unbind(“click”);

III MỘT SỐ KIỂU HÀM THÔNG DỤNG

F) Effect

Show(), hide() , slideToggle(), fadeOut()…

Vd:

$(“…").show();

$("div").hide();

$(“…”).slideToggle();

$(“…").fadeOut("slow");

III MỘT SỐ KIỂU HÀM THÔNG DỤNG

F) Cách để thực thi câu lệnh Jquery khi load page :

Cách 1 : $(function(){Hàm xử lý});

Cách 2 : $(“document”).ready(function() {Hàm xử lý});

III MỘT SỐ KIỂU HÀM THÔNG DỤNG

G) Traversing :

Find(), is() , next()…

Vd:

<table>

<tr>

<td>Ô thứ 1</td>

<td id="othu2">Ô thứ 2</td>

</tr>

</table>

<p></p>

 $(“table”).next().find(“p”);

IV KẾT THÚC

Tài liệu tham khảo :

en.wikipedia.org/wiki/Jquery

Cảm ơn thầy và các bạn

đã chú ý lắng nghe