chức năng và thành phần 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 (234.86 KB, 16 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) 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
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 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
Trang 1
Tiểu luận JQuery Môn Lập Trình Web
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>
</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>
<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 chọn Run
Sau khi chọn Run
3) Events – Sự kiện (nếu có), nêu ví dụ (demo rồi chụp hình).
Trang 3
Tiểu luận JQuery Môn Lập Trình Web
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 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>
Trước khi click
Sau khi click vào sẽ ẩn đoạn 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:
<!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>
Trang 5
Tiểu luận JQuery Môn Lập Trình Web
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">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:
<!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()
Trang 7
Tiểu luận JQuery Môn Lập Trình Web
{
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.responseText
;
}
}
xmlhttp.open("GET","ajax/info.txt",true);
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>
<script src="js/jquery-1.5.js"></script>
</head>
<body>
<p>Giá trị đúng: <t>Nam</t> hoặc <t>An</t>.</p>
Trang 9
Tiểu luận JQuery Môn Lập Trình Web
<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>
Trước khi chọn:
Nhập vào giá trị khác Nam, An:
Nhập vào giá trị đúng:
Trang 10
Tiểu luận JQuery Môn Lập Trình Web
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>
</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 = [
{ Name: "Nguyễn Bình 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();
Trang 12
Tiểu luận JQuery Môn Lập Trình Web
/* 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();
/* 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,
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
Trang 14
Tiểu luận JQuery Môn Lập Trình Web
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) Tài liệu tham khảo
1)
2)
3)
4)
tao-form-validation-voi-jquery-t2401.html
5)
6)
Trang 15
