tiểu luận tìm hiểu các chức năng và thành phần ứng dụng của jquery
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (309.51 KB, 19 trang )
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
ụ
c:
I) Nôi dung
1
1) Giơ
i
thiêu
1
2) Selectors – Bộ chọn lọc (nếu có), nêu ví dụ (demo rồi chụp hình)
2
3) Events – Sự kiện (nếu có), nêu ví dụ (demo rồi chụp hình)
4
4) Effects – Hiệu ứng (nếu có), nêu ví dụ (demo rồi chụp hình)
5
5) Ajax (nếu có), nêu ví dụ (demo rồi chụp hình)
7
6) Form Validation (nếu có), nêu ví dụ (demo rồi chụp hình)
9
7) Plugin/Add-ons (nếu có), nêu ví dụ (demo rồi chụp
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
ϖ
Thư viện jQuery được nghiên cứu và phát triển bởi John Resig
,
ông
là
một
chuyên
gia
lập
trình
công
cụ
JavaScript
(JavaScript
Tool
Developer)
cho
Mozilla
Corporation
và
tác
giả
của
cuốn
sách
Pro
JavaScript
Techniques,
Secrets
of
the
JavaScript
Ninja.
Hiện
tại,
John
sinh sống ở Boston.
ϖ
Một số người dùng nói rằng thư viện jQuery giúp tạo dự án phát
triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử
dụng JavaScript
dễ dàng
hơn mặc dù JavaScript
nổi tiếng là khó làm
việc cùng. Thư viện jQuery là kiểu thư viện JavaScript mới cần thiết
cho phép các nhà phát triển làm việc “khiêm tốn” với JavaScript. Thư
viện jQuery không phải là một framework cỡ lớn tốt nhất trong AJAX
và cũng không phải là các cải tiến phức tạp vô ích. Thư viện jQuery
được thiết kế để thay đổi cách viết JavaScript.
ϖ
Thư viện jQuery có phiên bản 1.0 ra đời ngày 26/08/2006, phiên
bản
gân
đâ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
jQuery
tương
thích
với
nhiều
trình
duyệt
(Internet
Explorer
6+,
Firefox
2+,
Opera
9+,
Safari
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
tới
các
thành
phần
trong
tài
liệu
HTML
. Nếu không
sử dụng thư viện JavaScript này, chúng ta
phải viết rất nhiều
dòng code mới có thể đạt được mục tiêu là di chuyển trong cấu
trúc cây (hay còn gọi là DOM
=
Document Object Model) của
một tài liệu HTML và chọn ra các thành phần liên quan. Jquery
cho phép chúng ta chọn bất cứ thành phần nào của tài liệu để
“vọc” một cách dễ dàng như sử dụng CSS.
¬
Thay
đổ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ứ
thành phần nào của tài liệu HTML ngay cả khi trang web đó đã
được trình duyệt load thành công. Thay đổi nội dung của tài
liệu. Jquery không phải chỉ có thể thay đổi bề ngoài của trang
web, nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ
với vài dòng code. Nó có thể thêm hoặc bớt nội dung trên trang,
hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh
sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML
của một trang web cũng có thể được viết lại và mở rộng. Tất cả
những điều này bạn hoàn toàn có thể làm được nhờ sự giúp đỡ
của API (Application Programming Interface
=
Giao diện lập
trình ứng dụng).
2)
Selectors
–
Bộ
chọn
lọc
(nếu
có),
nêu
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
2
Tiểu luận JQuery Môn Lập
Trình
Web
</head>
<body>
<button id="run">Run</button>
<div align="center">Nam</div>
<div id="mover" align="center">Mover slow</div>
<div align="center">Tr.An</div>
<div id="mover1" align="center">Mover fast</div>
<script>
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
function animateIt1() {
$("#mover1").slideToggle("fast", animateIt1);
}
animateIt1();
</script>
</body>
</html>
Trước khi chon Run
Sau khi chon Run
Trang
3
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).
JQuery cho chúng ta
nhiều cách để tương tác với người dùng ví dụ
như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy
ra,nhưng cái hay ở chỗ nhờ vào các Event Handlers mà code HTML
không bị rối tung lên.
VD: .click( handler(eventObject) )
Description: Bind an event handler to the "click" JavaScript event, or
trigger that event on an element.
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 - events click</title>
<style>
p { color:red; margin:5px; cursor:pointer; font-size:20px;}
p.hilite { background:yellow; }
</style>
<script src="js/jquery-1.5.js"></script>
</head>
<body>
<p align="center">Nhưng tup lêu tranh giưa canh đông</p>
<p align="center">Quanh hè mươp đâu trổ say bông</p>
<p align="center">Bao la bat ngat hương tinh đươm</p>
<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
–
Hiệu
ứng
(nếu
có),
nêu
ví
dụ
(demo
rồi
chụp
hình).
VD: animate()
Description: Perform a custom animation of a set of CSS properties.
Code:
Trang
5
Tiểu luận JQuery Môn Lập
Trình
Web
<!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 - 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>
$( "#go" ).click(function(){
Trang
6
Tiểu luận JQuery Môn Lập
Trình
Web
$( "#block" ).animate( { width: "90%" }, { queue: false, duration:
3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
̀ ̀ ̣ ́ ́
});
//ham reset
$( "#go1" ).click(function(){
$( "div" ).css({ width: "",fontSize: "", borderWidth: ""});
});
</script>
</body>
</html>
Trước khi click Run:
Sau khi click Run:
Khi click Reset:
5)
Ajax
(nếu
có),
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"
/>
<title>Demo Jquery - ajax</title>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.response
Text;
}
}
xmlhttp.open("GET","ajax/info.txt",true);
xmlhttp.send();
}
̣ ̀
Trang
8
Tiểu luận JQuery Môn Lập
Trình
Web
</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
hình).
VD: .submit( handler(eventObject) )
Description: Bind an event handler to the "submit" JavaScript event, or
trigger that event on an element.
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 - form submit</title>
Trang
9
Tiểu luận JQuery Môn Lập
Trình
Web
<style>
p { margin:0; color:blue; font-size:20px;}
div,p { margin-left:10px; }
span { color:red; }
t{color:red;}
</style>
<script src="js/jquery-1.5.js"></script>
</head>
<body>
<p>Giá trị đung: <t>Nam</t> hoăc <t>An</t>.</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
0
Tiểu luận JQuery Môn Lập
Trình
Web
Trước khi chọn:
Nhập vào giá trị khác Nam, An:
Nhập vào giá trị đúng:
7)
Plugin/Add-ons
(nếu
có),
nêu
ví
dụ
(demo
rồi
chụp
hình).
VD: .template( [ name ] )
Description: Compile the contents of the matched element as a reusable
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">
<tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
</script>
<script id="detailTemplate" type="text/x-jquery-tmpl">
<tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr
class='movieDetail row2'><td>Year: ${Year}</td><td>MSSV: $
{MSSV}</td></tr>
</script>
Click for details:
<table><tbody id="movieList"></tbody></table>
<script>
var movies
=
[
Trang 1
2
Tiểu luận JQuery Môn Lập
Trình
Web
{ Name: "Nguyên Binh Nam", Year: "1989", MSSV:
"DTH082050" },
{ Name: "Lê Thị Trương An", Year: "1990", MSSV:
"DTH082034" },
];
var selectedItem
=
null;
/* Render the summaryTemplate with the "movies" data */
$( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );
$("#movieList")
.delegate( ".movieSummary", "click", function () {
̃ ̀
̀
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
Tiểu luận JQuery Môn Lập
Trình
Web
/* Refresh rendering */
selectedItem.update();
selectedItem
=
null;
});
</script>
</body>
</html>
Trước khi chọn:
Sau khi chọn:
8)
Các
thành
phần
cơ
bản
khác
(
ứng
với
m
ỗi
Framework).
Selectors
o
Attribute
Contains
Prefix
Selector
[name|="value"]
Selects
elements
that
have
the
specified
attribute
with
a
value
either
equal
to
a
given
string
or
starting
with
that
string
followed
by
a
hyphen
(-).
o
Attribute
Equals
Selector
[name="value"]
Selects
elements
that
have
the
specified
attribute
with
a
value
exactly
equal
to
a
certain
value.
Events
Trang 1
4
Tiểu luận JQuery Môn Lập
Trình
Web
o
.bind()
Attach
a
handler
to
an
event
for
the
elements.
o
.change()
Bind
an
event
handler
to
the
"change"
JavaScript
event,
or
trigger
that
event
on
an
element.
Effects
o
.fadeIn()
Display
the
matched
elements
by
fading
them
to
opaque.
o
.show()
Display
the
matched
elements.
Ajax
o
.ajaxError()
Register
a
handler
to
be
called
when
Ajax
requests
complete
with
an
error.
This
is
an
Ajax
Event.
o
.ajaxSuccess()
Attach
a
function
to
be
executed
whenever
an
Ajax
request
completes
successfully.
This
is
an
Ajax
Event.
Form
validition
o
.focus()
Bind
an
event
handler
to
the
"focus"
JavaScript
event,
or
trigger
that
event
on
an
element.
o
.change()
Bind
an
event
handler
to
the
"change"
JavaScript
event,
or
trigger
that
event
on
an
element.
Plug-ins
o
.tmpl()
Take
the
first
element
in
the
matched
set
and
render
its
content
as
a
template,
using
the
specified
data.
o
.link()
Link
changes
to
the
matched
elements
to
an
object.
II)
Tai
liêu
tham
khao
1)
/>
2)
3)
4)
/>
tao-form-validation-voi-jquery-t2401.html
5)
6)
̀
̣
̉
Trang
15
