Tieu Luan Jquery 8858

Tiu lun Tm hiu cc chc nng v thnh phn ca JQuery
Mc lc:
I) Ni dung.................................................................................................................... 1 1) Gii thiu..............................................................................................................1 2) Selectors B chn lc (nu c), nu v d (demo ri chp hnh)...................2 3) Events S kin (nu c), nu v d (demo ri chp hnh).............................. 4 4) Effects Hiu ng (nu c), nu v d (demo ri chp hnh)...........................5 5) Ajax (nu c), nu v d (demo ri chp hnh)...................................................7 6) Form Validation (nu c), nu v d (demo ri chp hnh)................................9 7) Plugin/Add-ons (nu c), nu v d (demo ri chp hnh)............................... 11 8) Cc thnh phn c bn khc (ng vi mi Framework)..................................14 II) Tai liu tham khao..................................................................................................15
Tiu lun JQuery Web
Mn Lp Trnh
I) Ni dung
1) Gii thiu
Th vin jQuery c nghin cu v pht trin bi John Resig,
ng l mt chuyn gia lp trnh cng c JavaScript (JavaScript Tool Developer) cho Mozilla Corporation v tc gi ca cun sch Pro JavaScript Techniques, Secrets of the JavaScript Ninja. Hin ti, John sinh sng Boston. Mt s ngi dng ni rng th vin jQuery gip to d n pht trin AJAX (XML v JavaScript khng ng b) gn h n nh vi c s dng JavaScript d dng hn mc d JavaScript ni ting l kh lm vic cng. Th vin jQuery l kiu th vin JavaScript mi cn thit cho php cc nh pht trin lm vic khim tn vi JavaScript. Th vin jQuery khng phi l mt framework c ln tt nh t trong AJAX v cng khng phi l cc ci tin phc tp v ch. Th vin jQuery c thit k thay i cch vit JavaScript. Th vin jQuery c phin bn 1.0 ra i ngy 26/08/2006, phin bn gn y l 1.4.2 (19/02/2010), l d n m ngun m tun theo giy php ca MIT v GPL. Th vin jQuery tng thch vi nhiu trnh duyt (Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+ v Chrome). C ng ng pht trin mnh m v c s dng rng ri nh Dell, ESPN, BBC, Reuters, WordPress, Digg,
Nhng g Jquery c th lm: Hng ti cc thnh phn trong ti liu HTML. Nu khng
s dng th vin JavaScript ny, chng ta phi vit rt nhiu dng code mi c th t c mc tiu l di chuyn trong cu trc cy (hay cn gi l DOM = Document Object Model) ca mt ti liu HTML v chn ra cc thnh phn lin quan. Jquery cho php chng ta chn bt c thnh phn no ca ti liu vc mt cch d dng nh s dng CSS.
Thay i giao din ca mt trang web. CSS l cng c rt
mnh nh dng mt trang web nhng n c mt nhc im l khng phi tt c cc trnh duyt u hin th ging nhau. Cho nn jQuery ra i lp ch trng ny,v vy chng ta c th s dng Jquery gip trang web c th hin th tt
Trang 1
Tiu lun JQuery Web
Mn Lp Trnh
trn hu ht cc trnh duyt. Hn na jQuery cng c th thay i class hoc nhng nh dng CSS c p dng ln bt c thnh phn no ca ti liu HTML ngay c khi trang web c trnh duyt load thnh cng. Thay i ni dung ca ti liu. Jquery khng phi ch c th thay i b ngoi ca trang web, n cng c th thay i ni dung ca chnh ti liu ch vi vi dng code. N c th thm hoc bt ni dung trn trang, hnh nh c th c thm vo hoc i sang hnh khc, danh sch c th c sp xp li hoc thm ch c cu trc HTML ca mt trang web cng c th c vit li v m rng. Tt c nhng iu ny bn hon ton c th lm c nh s gip ca API (Application Programming Interface = Giao din lp trnh ng dng).
2) Selectors B chn lc (nu c), nu v d (demo ri chp hnh).

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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
Tiu lun JQuery Web
Mn Lp Trnh
</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> Trc khi chon Run
Sau khi chon Run
Trang 3
Tiu lun JQuery Web
Mn Lp Trnh
3) Events S kin (nu c), nu v d (demo ri chp hnh).

JQuery cho chng ta nhiu cch tng tc vi ngi dng v d nh khi ngi dng nhp chut vo ng link th s c g xy ra,nhng ci hay ch nh vo cc Event Handlers m code HTML khng b ri tung ln. 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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">Nhng tup lu tranh gia canh ng</p> <p align="center">Quanh he mp u tr say bng</p> <p align="center">Bao la bat ngat hng tinh m</p> <p align="center">Trng ngp men say gia canh ng...</p>
Trang 4
Tiu lun JQuery Web
Mn Lp Trnh
<script> $("p").click(function () { $(this).slideUp(); }); $("p").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); }); </script> </body> </html> Trc khi click
Sau khi click vao se n oan vn o
4) Effects Hiu ng (nu c), nu v d (demo ri chp hnh).

VD: animate() Description: Perform a custom animation of a set of CSS properties. Code:
Trang 5
Tiu lun JQuery Web
Mn Lp Trnh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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 mng ban n vi Jquery! </div> <script> $( "#go" ).click(function(){
Trang 6
Tiu lun JQuery Web
Mn Lp Trnh
$( "#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> Trc khi click Run:
Sau khi click Run:
Khi click Reset:
5) Ajax (nu c), nu v d (demo ri chp hnh).

VD: Create a simple XMLHttpRequest, and retrieve data from a TXT file
Trang 7
Tiu lun JQuery Web
Mn Lp Trnh
(Chay bng vertrigo) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF8" /> <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
Tiu lun JQuery Web
Mn Lp Trnh
</script> </head> <body> <div id="myDiv" ><h2>Chao mng ban n vi Ajax</h2></div> <button type="button" onclick="loadXMLDoc()">Change</button> </body> </html> Trc khi click Change:
Sau khi click Change:
6) Form Validation (nu c), nu v d (demo ri chp hnh).

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF8" /> <title>Demo Jquery - form submit</title>
Trang 9
Tiu lun JQuery Web
Mn Lp Trnh
<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>Gia tri ung: <t>Nam</t> hoc <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 10
Tiu lun JQuery Web
Mn Lp Trnh
Trc khi chn:
Nhp vo gi tr khc Nam, An:
Nhp vo gi tr ng:
7) Plugin/Add-ons (nu c), nu v d (demo ri chp hnh).

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head>
Trang 11
Tiu lun JQuery Web
Mn Lp Trnh
<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> <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 12
Tiu lun JQuery Web
Mn Lp Trnh
{ Name: "Nguyn Binh Nam", Year: "1989", MSSV: "DTH082050" }, { Name: "L Thi Trng 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 13
Tiu lun JQuery Web
Mn Lp Trnh
/* Refresh rendering */ selectedItem.update(); selectedItem = null; }); </script> </body> </html> Trc khi chn:
Sau khi chn:
8) Cc thnh phn c bn khc (ng vi mi 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 (-). Attribute Equals Selector [name="value"] Selects elements that have the specified attribute with a value exactly equal to a certain value.
Events
Trang 14
Tiu lun JQuery Web

o o
Mn Lp Trnh
.bind() Attach a handler to an event for the elements. .change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element. .fadeIn() Display the matched elements by fading them to opaque. .show() Display the matched elements. .ajaxError() Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. .ajaxSuccess() Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event. .focus() Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. .change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element. .tmpl() Take the first element in the matched set and render its content as a template, using the specified data. .link() Link changes to the matched elements to an object.
Effects
o o
Ajax
o
Form validition
o
Plug-ins
o
II) Tai liu tham khao

1) http://jquery.com/ 2) http://www.laptrinhviet.com 3) http://www.izwebz.com 4) http://vnwebmaster.com/forum/javascript-va-ajax/10-huong-dan-
tao-form-validation-voi-jquery-t2401.html
5) http://www.ibm.com 6) http://www.w3schools.com
Trang 15

Tieu Luan Jquery 8858

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tieu Luan Jquery 8858

Uploaded by

Copyright:

Available Formats

Tiu lun Tm hiu cc chc nng v thnh phn ca JQuery

Tiu lun JQuery Web

Tiu lun JQuery Web

2) Selectors B chn lc (nu c), nu v d (demo ri chp hnh).

Tiu lun JQuery Web

Sau khi chon Run

Tiu lun JQuery Web

3) Events S kin (nu c), nu v d (demo ri chp hnh).

Tiu lun JQuery Web

Sau khi click vao se n oan vn o

4) Effects Hiu ng (nu c), nu v d (demo ri chp hnh).

Tiu lun JQuery Web

Tiu lun JQuery Web

Sau khi click Run:

Khi click Reset:

5) Ajax (nu c), nu v d (demo ri chp hnh).

Tiu lun JQuery Web

Tiu lun JQuery Web

Sau khi click Change:

6) Form Validation (nu c), nu v d (demo ri chp hnh).

Tiu lun JQuery Web

Tiu lun JQuery Web

Trc khi chn:

Nhp vo gi tr khc Nam, An:

7) Plugin/Add-ons (nu c), nu v d (demo ri chp hnh).

Tiu lun JQuery Web

Tiu lun JQuery Web

Tiu lun JQuery Web

Sau khi chn:

8) Cc thnh phn c bn khc (ng vi mi Framework).

Tiu lun JQuery Web

II) Tai liu tham khao

You might also like