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) 3
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) Tài liệu tham khảo 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
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>
</head>
<body>
<button id="run">Run</button>
Trang 2
Tiểu luận JQuery Môn Lập Trình Web
<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>
<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 túp lều tranh giữa cánh đồng</p>
<p align="center">Quanh hè mướp đậu trổ say bông</p>
<p align="center">Bao la bát ngát hương tình đượm</p>
<p align="center">Trắng ngập men say giữa cánh đồng </p>
<script>
$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
Trang 4
Tiểu luận JQuery Môn Lập Trình Web
$(this).removeClass("hilite");
});
</script>
</body>
</html>
</head>
<body>
<button id="go">» Run</button>
<button id="go1">» Reset</button>
<div id="block" align="center">Chào mừng bạn đến với Jquery!</div>
<script>
$( "#go" ).click(function(){
$( "#block" ).animate( { width: "90%" }, { queue: false, duration:
3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
//hàm reset
$( "#go1" ).click(function(){
$( "div" ).css({ width: "",fontSize: "", borderWidth: ""});
});
Trang 6
Tiểu luận JQuery Môn Lập Trình Web
</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
(Chạy bằng vertrigo)
Code:
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv" ><h2>Chào mừng bạn đến với Ajax</h2></div>
<button type="button" onclick="loadXMLDoc()">Change</button>
</body>
</html>
Trước khi click Change:
Trang 8
Tiểu luận JQuery Môn Lập Trình Web
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>
<style>
p { margin:0; color:blue; font-size:20px;}
div,p { margin-left:10px; }
span { color:red; }
t{color:red;}
</style>
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>
<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 src="js/jquery-latest.min.js"></script>
Trang 11
Tiểu luận JQuery Môn Lập Trình Web
<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>
selectedItem.tmpl = $( "#detailTemplate" ).template();
/* Refresh rendering */
selectedItem.update();
})
.delegate( ".movieDetail", "click", function () {
/* Unselect - switch to the summaryTemplate */
selectedItem.tmpl = $( "#summaryTemplate" ).template();
/* Refresh rendering */
selectedItem.update();
selectedItem = null;
});
</script>
</body>
</html>
Trước khi chọn:
Sau khi chọn:
Trang 13
Tiểu luận JQuery Môn Lập Trình Web
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
o .bind() Attach a handler to an event for the elements.
o .change() Bind an event handler to the "change" JavaScript event,
Copyright: Tài liệu đại học ©