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
I. Jquery là gì ?

jQuery
 !"#$%&'()
"*+',#'-

.!/0,'('12334)56786
9.John Resig 

:";<=9%>?("@3 333A0,
BC0D!/0,EDF
";<=,,
I. Jquery là gì ?

G!/0,H'*"0I

6JK(''LMGNO

G('P6

6'"K#(MGNO

6'0H()Q(

MGNORSN

TTU'*#'

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

6V'!/0,<W$J'LMGNO%''
P'L

6V'%&D%&"0I.
$(selector).action();

RD0X$YZ!/0,

[\+"(-\Q'LMGNO]^0_L0*
P<

[\(+-\K('LMGNO"0#Q

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 :

Jquery.com

en.wikipedia.org/wiki/Jquery
Cảm ơn thầy và các bạn
đã chú ý lắng nghe