Tiêu
luân
Tìm
hiể u
các
chức
năng
và
thành
phần
của
JQuery
M
ụ
c
l
hình)
11
8) Các thành phần cơ bản khác (ứng vớ
i
mỗi Framework)
14
II) Tai liêu tham khao
̉
̣
̣
́ ̣
̀ ̣ ̉
15
Tiểu luận JQuery Môn Lập
Trình
Web
I)
Nôi
dung
1)
Giơi
thiêu
Mozilla
Corporation
và
tác
giả
của
cuốn
sách
Pro
JavaScript
Techniques,
Secrets
of
the
JavaScript
đây
là
1.4.2
(19/02/2010),
là
dự
án
mã
nguồn
mở
tuân
theo
giấy phép của MIT và GPL.
ϖ
Thư
viện
2+
và
Chrome).
Cộng
đồng
phát triển mạnh mẽ và được sử dụng rộng rãi như Dell, ESPN, BBC,
Reuters, WordPress, Digg,
…
ϖ
Những
gì
Jquery
có
thể
làm
:
¬
Hướng
đổi
giao
diện
của
m
ột
trang
web.
CSS là công cụ rất
̣
́
̣
̀
mạnh để định dạng một trang web nhưng nó có một nhược
điểm là không phải tất cả các trình duyệt đều hiển thị giống
nhau. Cho nên jQuery ra đời để lấp chỗ trống này,vì vậy chúng
ta có thể sử dụng Jquery để giúp trang web có thể hiển thị tốt
Trang
1
Tiểu luận JQuery Môn Lập
Trình
Web
trên hầu hết các trình duyệt. Hơn nữa jQuery cũng có thể thay
đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ
ví
dụ
(demo
rồi
chụp
hình).
VD: animated selector
Description: Select all elements that are in the progress of an animation
at the time the selector is run.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " />transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=UTF-8"
/>
<title>Demo Jquery - animated selector</title>
<style>
div {background:yellow; border:1px solid #AAA; width:80px;
height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
</style>
<script src="js/jquery-1.5.js"></script>
Trang
Tiểu luận JQuery Môn Lập
Trình
Web
3)
Events
–
Sự
kiện
(nếu
có),
nêu
ví
dụ
(demo
rồi
chụp
hình).
<p align="center">Trăng ngâp men say giưa canh đông </p>
Trang
4
Tiểu luận JQuery Môn Lập
Trình
Web
<script>
$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
</script>
</body>
</html>
̃ ́ ̀ ̃ ́ ̀
́ ̣
́ ́ ̀ ̣
́ ̣ ̃ ́ ̀
Trước khi click
Sau khi click vao sẽ ân đoan văn đó
4)
Effects
–
Transitional//EN" " />transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=UTF-8"
/>
<title>Demo Jquery - effects animate</title>
<style>
̀ ̉ ̣
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="js/jquery-1.5.js"></script>
</head>
<body>
<button id="go">» Run</button>
<button id="go1">» Reset</button>
<div id="block" align="center">Chao mưng ban đên vơi Jquery!
</div>
<script>
nêu
ví
dụ
(demo
rồi
chụp
hình).
VD: Create a simple XMLHttpRequest, and retrieve data from a TXT
file
Trang
7
Tiểu luận JQuery Môn Lập
Trình
Web
̀
(Chay băng vertrigo)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " />transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-
8"
/>
</script>
</head>
<body>
<div id="myDiv" ><h2>Chao mưng ban đên vơi Ajax</h2></div>
<button type="button" onclick="loadXMLDoc()">Change</button>
</body>
</html>
Trước khi click Change:
Sau khi click Change:
6)
Form
Validation
(nếu
có),
nêu
ví
dụ
(demo
rồi
chụp
<form action="javascript:alert('success!');">
<div>
<input type="text"
/>
<input type="submit"
/>
</div>
</form>
<span></span>
<script>
$("form").submit(function() {
if ($("input:first").val()
==
"Nam"
||
$("input:first").val()
==
"An")
{
$("span").text("Validated ").show();
́ ̣
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
</script>
</body>
</html>
Trang 1
compiled template.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " />transitional.dtd">
<html>
<head>
Trang 1
1
Tiểu luận JQuery Môn Lập
Trình
Web
<meta http-equiv="Content-type" content="text/html;
charset=UTF-8"
/>
<title>Demo Jquery - plusin template</title>
<style>
table { cursor:pointer; border-collapse:collapse; border:2px solid blue;
width:300px; margin:8px; }
table tr { border:1px solid blue; color:blue; background-color:#f8f8f8;
}
table td { padding:3px; } table tr:hover { color:red; }
.movieDetail { background-color:yellow; }
.movieDetail.row1 { border-bottom:none; } .movieDetail.row2
{ border-top:none; }
</style>
<script -latest.min.js"></script>
<script src="js/jquery.tmpl.min.js"></script>
</head>
<body>
<script id="summaryTemplate" type="text/x-jquery-tmpl">
̃ ̀
̀
if (selectedItem) {
/* Switch previously selected item back to the summaryTemplate */
selectedItem.tmpl
=
$( "#summaryTemplate" ).template();
/* Update rendering of previous selected item */
selectedItem.update();
}
/* Make this the selected item
*/
selectedItem
=
$.tmplItem(this);
/* Switch this template item to the detailTemplate */
selectedItem.tmpl
=
$( "#detailTemplate" ).template();
/* Refresh rendering */
selectedItem.update();
})
.delegate( ".movieDetail", "click", function () {
/* Unselect - switch to the summaryTemplate */
selectedItem.tmpl
=
$( "#summaryTemplate" ).template();
Trang 1
3
với
m
ỗi
Framework).
Selectors
o
Attribute
Contains
Prefix
Selector
[name|="value"]
Selects
elements
that
have
the
specified
by
a
hyphen
(-).
o
Attribute
Equals
Selector
[name="value"]
Selects
elements
that
have
the
specified
attribute
with
to
an
event
for
the
elements.
o
.change()
Bind
an
event
handler
to
the
"change"
JavaScript
them
to
opaque.
o
.show()
Display
the
matched
elements.
Ajax
o
.ajaxError()
Register
a
handler
to
be
called
function
to
be
executed
whenever
an
Ajax
request
completes
successfully.
This
is
an
Ajax
Event.
Form
an
element.
o
.change()
Bind
an
event
handler
to
the
"change"
JavaScript
event,
or
trigger
that
its
content
as
a
template,
using
the
specified
data.
o
.link()
Link
changes
to
the
matched
4) />
tao-form-validation-voi-jquery-t2401.html
5)
6)
̀
̣
̉
Trang
15
Copyright: Tài liệu đại học ©