Jquery Phan 1

MC LC
1.
JQUERY l g? .................................................................................................................. 2
2.
Download jQuery.............................................................................................................. 2
3.
S dng jQuery trong trang web...................................................................................... 3
4.
jQuery hot ng nh th no?...................................................................................... 3

4.1.
4.2.
5.
Chy m khi Document Ready (trang sn sng) ..................................................................... 3

Function $().................................................................................................................................. 4
Mt s API trong jQuery .................................................................................................. 4

5.1. Selectors ....................................................................................................................................... 4
5.1.1. Basic ..................................................................................................................................... 4
5.1.2. HIERACHY.......................................................................................................................... 5
5.1.3. Basic Filters (Cc yu t chn lc c bn) ........................................................................... 6
5.1.4. Content Filters (Chn lc ni dung) ..................................................................................... 7
5.1.5. Visibility Filters .................................................................................................................... 8
5.2 Attributes...................................................................................................................................... 9
5.2.1 Class...................................................................................................................................... 9
5.2.2 HTML, Text........................................................................................................................ 10
5.3 Events......................................................................................................................................... 10
6.
Cu hi n tp ................................................................................................................ 12
7.
Ti liu tham kho .......................................................................................................... 13
JQUERY
Chng ny gii thiu tng quan jQuery.
1. JQUERY l g?
jQuery l mt th vin kiu mi ca Javascript gip n gin ha cch vit JavaScript v tng tc x
l cc s kin trn trang web. Cc th vin jQuery cung cp mt mc ch chung l s tru tng ho cc lp
ph bin cho cc trang web scripting, do n hu ch trong hu ht cc tnh hung scripting.
Cc chc nng jQuery bao gm:
Chn mt tag hoc mt tp hp cc tag trn trang web.
Cung cp cc hm tin ch thng dng.
Nhanh chng to ra cc tag mi.
Quan trng nht l phn tch vic thit k v lp trnh web trn pha client.
2. Download jQuery
jQuery l mt th vin script, do chng ta c th thm vo trang web. Chng ta c th download phin
bn mi nht ca jQuery t http://docs.jquery.com/Downloading_jQuery.
Hnh 1: Downdload jQuery

Nh hnh 1 trn phin bn mi nht ca jQuery l 1.3.2, sau khi download v chng ta c file jquery1.3.2.js, sau vit ng dng bn ch cn nhng file jquery-1.3.2.js vo phn javascript ca trang.
Microsoft Vietnam DPE Team | Bi s 9: jQuery
3. S dng jQuery trong trang web

Chng ta to mt website, sau to mt th mc c tn js cha m file jquery v cc file javascript khc.
Trc khi vit cc cu lnh jQuery l bn ch cn khai bo s dng th vin jQuery bng cu lnh javascript trong
trang web nh sau:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Vi_du_jquery</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
4. jQuery hot ng nh th no?

4.1. Chy m khi Document Ready (trang sn sng)
C th thy rng hu ht khi lp trnh vi Javascript, kt thc m thc thi bng cch thm cc dng m vo
script, tng t nh sau:
window.onload = function() { }
Cc m bn trong s c thc thi khi trang c ti xong. Tuy nhin, m Javascript khng chy cho n
khi tt c cc hnh nh trong trang c ti xong (k c banner qung co). L do cho vic s dng
window.onload l chc chn rng HTML 'document' phi c ti xung ht, sau mi chy m kia.
gii quyt, jQuery c cu lnh n gin, c bit nh:
$(document).ready(function() {
//M ca chng ta
});
M ny kim tra document v i cho n khi n sn sng s dng - theo chng ta mun.
4.2. Function $()

Khi chng ta lm vic vi CSS, Xpath hoc custom, jQuery s dng function $() (du $ v cp du
ngoc). Di dy l mt s thnh phn trong $():
$("p"): p l tn ca mt th (tag).
$("#id"): id l tn ca mt id.
$(".class"): class l tn ca mt lp.
5. Mt s API trong jQuery

5.1. Selectors
5.1.1.
Basic
id #
Tr v mt phn t ca mng: Array <Element>
N tng ng vi mt phn t duy nht c gn bi thuc tnh id.
Nu id cha cc k t nh du chm (.) hoc 2 du [] th chng phi thm 2 du ngch cho (\\)
vo trc cc k t .
Nu l $("#some.id") th phi vit thnh $("#some\\.id")
Nu l $("#some[id]") th phi vit thnh $("#some\\[id]\\")
element
Kiu tr v: Array<Element(s)>
Tng ng vi tt c cc phn t vi tn c gn.
.class
Tng ng vi tt c cc phn t vi tn lp.
*
Tng ng vi tt c cc phn t.
selector1, selector2, selectorN

Ph hp vi s kt hp ca tt c cc kt qu xc nh selectors, s lng selectors l bt k, trt t
ca cc phn t DOM trong i tng jQuery khng nht thit phi ng th t.
V d: Vi_du_1.htm
<head id="Head1" runat="server">
<title>Vi_du_1</title>
<!
Chn th vin jquery
-->
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<!-M Jquery c bn t trong code sau
-->
<script type="text/javascript" language="javascript">
$("#div1").css("color", "red");
$("#div3\\.1\\.\\[0\\]").css("color", "red");
$("div").css("width", "200px");
$("div").css("height", "100px");
$(".Class1").css("color", "red");
$("*").css("border", "1px solid blue");
$("div,span").css("background-color", "#EEEEEE");
});
</script>
<style type="text/css" >
div {
float:left;padding: 5px;margin: 5px;
}
.Class1{
}
</style>
</head>
<body >
<div id="div1" align="center" >Visual Studio 2008</div>
<div id="div2" align="center">ASP.NET 3.5</div>
<div id="div3.1.[0]" align="center"> <a
href="http://docs.jquery.com/Downloading_jQuery"> Download jQuery </a></div>
<br />
<span class="Class1">Cho mng bn n vi jQuery</span>
</body>
</html>
5.1.2.
HIERACHY
ancestor descendant
Tng ng vi tt c cc phn t vi danh ngha descendant ca cc phn t xc nh bi danh ngha

ancestor.
V d:
$("form input").css("border", "2px dotted blue");
parent > child
Tng ng vi cc phn t con di danh ngha child ca phn t c xc nh vi danh ngha

parent.
V d:
$("#main > *").css("border", "3px double red");
prev + next
Ph hp vi tt c cc yu t sau c xc nh bi "k tip" bn cnh l yu t xc nh bi

"prev".
V d:
$("label + input").css("color", "blue").val("Labeled!");
prev ~ siblings Kiu tr v: Array<Element(s)>

Ph hp vi tt c cc yu t sau "prev" v vi cc yu t lc "siblings" (lin quan) ca selector.
V d:
$("#prev ~ div").css("border", "3px groove blue");
V d:
Vi_du_9_2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Vi_du_9_1</title>
$("form input").css("border", "1px solid blue");
$("#submit > *").css("border", "1px solid red");
$("label + input").css("background-color", "#EEEEEE");
});
</script>
body { font-size:14px; }
form { border:2px green solid; padding:2px; margin:0; background:#efe; }
div { color:red; }
fieldset { margin:1px; padding:3px; }
</style>
</head>
<body>
<form id="form1" runat ="server" >
<div id="main">Nhp thng tin c nhn </div>
<br />
H v tn:<input type="text" size="50" />
<fieldset>
<legend>Ni cng tc</legend>
<label>Tn cng ty:</label>
<input type="text" size="50" /><br />
<label>a ch:</label>
<input type="text" size="100" /><br />
</fieldset>
<br />
H khu thng tr: <input type="text" size="100" /><br /><br />
<div id="submit">
<button>Cp nht</button>

<button>Hy b</button>
</div>
</form>
</body>
</html>
5.1.3.
Basic Filters (Cc yu t chn lc c bn)
:first
Tng ng vi phn t u tin c chn.

V d:
$("tr:first").css("font-style", "italic");
:last
Tng ng vi phn t cui cng c chn.

V d:
$("tr:last").css("background-color", "yellow");
:not(selector)
B ra tt c cc phn t tng ng cho selector.

V d:
$("input:not(:checked)+span").css("background-color", "yellow");
:even
Tng ng vi cc phn t chn, ch s 0, 2, 4,

V d:
$("tr:even").css("background-color", "#bbbbff");
:odd
Tng ng vi cc phn t l, ch s 1, 3, 5,
V d:
$("tr:odd").css("background-color", "#bbbbff");
:eq(index)
Tng ng vi mt phn t ring l bi ch s ca n.

V d:
$("td:eq(2)").css("color", "red");
:gt(index) Kiu tr v: Array<Element(s)>

Tng ng vi tt c cc phn trn ch s c gn.
V d:
$("td:gt(2)").css("color", "red");
:lt(index) Kiu tr v: Array<Element(s)>

Tng ng vi tt c cc phn di ch s c gn.
V d:
$("td:lt(2)").css("color", "blue");
:header
Tng ng vi tt c cc phn t tiu , ging nh h1, h2, h3

V d:
$(":header").css({ background: '#CCC', color: 'blue' });
V d: Vi_du_9_3.aspx
$("tr:first").css("font-style", "italic");
$("tr:last").css({ backgroundColor: 'yellow', fontWeight: 'bolder' });
$("tr:even").css("color", "red");
$("tr:odd").css("color", "blue");
$("tr:eq(4)").css("text-decoration", "line-through");
$("tr:gt(6)").css("font-size", "30px");
$("tr:lt(3)").css("font-size", "25px");
$(":header").css({ background: '#CCC', color: 'blue' });
});
</script>
</head>
<body>
<table border="1">
<tr><td>Dng th 1</td></tr>
</table>
<h1>Tiu 1</h1>
<p>Ni dung 1</p>
<h2>Tiu 2</h2>
<p>Ni dung 2</p>
<p></p>
<p></p>
</body>
</html>
5.1.4.
Content Filters (Chn lc ni dung)
:contains(text) Kiu tr v: Array<Element(s)>

Tng ng vi cc phn t cha ni dung vn bn.
V d:
Gch chn tt c cc th div c cha t John.
$("div:contains('John')").css("text-decoration", "underline");
:empty
Tng ng vi tt c cc phn t khng c phn t con

V d:
Chn xu Khng c ni dung mu vo cc th td khng c phn t con.
$("td:empty").text("Khng c ni dung!").css('color','red');
:has(selector)
Tng ng vi cc phn t bao gm t nht mt phn t ph hp vi nh danh selector.

V d:
t c ch l 30px cho on vn c nm trong cc th div c cha th p.
$("div:has(p)").css("font-size", "30px");
:parent
Tng ng vi tt c cc phn t l cha (cha cc phn t con, gm c phn t vn bn).
V d:
t c ch l 30px cho cc th td cha c phn t con.
$("td:parent)").css("font-size", "30px");
V d: Vi_du4.html
$("div:contains('Th')").css("text-decoration", "underline");
$("td:empty").css("background-color", "#EEEEEE");
$("div:has(p)").css("font-size", "30px");
$("td:parent").css("color", "yellow");
});
</script>
td {width:200px;background:green; }
</style>
</head>
<body>
<div><h2>Danh sch lp 12A3</h2></div>
<div> Th Thu Hng</div>
<div>L Vn Bnh</div>
<div>Trn Th Hng</div>
<div>Nguyn Hi Nam</div>
<div>Hong Thu Bnh</div>
<br />
<table border="1">
<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>
</table>
<div><p>Cho bn n vi jQuery</p></div>
<div>Cho bn n vi jQuery</div>
<div> </div>
<div>
</body>
</html>
5.1.5.
Visibility Filters
:hidden
Tng ng vi tt c cc phn t c n i hoc phn t vo c dng n hidden.

V d:
n cc th div.
$("div:hidden").show(3000);
:visble
Tng ng vi cc phn t nhn thy c

V d:
Click chut vo cc th div nhn thy c.
$("div:visible").click(function() {$(this).css("background", "yellow");});
V d: Vi_du_9_5.aspx

$("span:first").text("Tm thy " + $(":hidden", document.body).length +
" phn t n.");
$("div:hidden").show(3000);
$("span:last").text("Tm thy " + $("input:hidden").length + " inputs
n.");
$("div:visible").click(function() {
$(this).css("background", "yellow");
});
});
</script>
<style type ="text/css" >
div { width:70px; height:40px; background:#ee77ff; margin:5px;
float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">n</div>
<div></div>
<div class="starthidden">n</div>
<div></div>
<input type="hidden" />
<span></span>
</body>
</html>
5.2
Attributes
5.2.1
Class
addClass( class )
Kiu tr v: jQuery
Thm cc class xc nh vo mi tp phn t ph hp. Nu c thm nhiu class th cc class c

cc nhau bi khong trng.
V d:
Thm class Maudo vo cc th p.
$("p").addClass("Maudo");
removeClass( class ) Kiu tr v: jQuery

Loi b tt c hoc cc class xc nh khi tp phn t ph hp.
V d:
Loi b lass Maudo khi cc th p.
$("p").removeClass("Maudo");
toggleClass( class )
Kiu tr v: jQuery
Thm class nu class cha tn ti hoc loi b nu class tn ti.

V d:
Thm class Maudo vo th p nu class Maudo cha tn ti trong th p hoc loi b
class Maudo khi th p nu n tn ti.
$("p").toggleClass("Maudo");
V d: Vi_du_9_6.aspx
JQuery

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
$("p").addClass("under");
$("p:last").removeClass("highlight");
$("p").click(function() {
$("p").removeClass("highlight");
$(this).toggleClass("highlight");
});
});
</script>
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p class="blue">Visual Studio 2000</p>
<p class="blue">ASP.NET 3.5</p>
<p class="blue highlight">Cho mng bn n vi jQuery</p>
</body>
</html>
5.2.2
html()
HTML, Text
Kiu tr v: String
Ly ni dung html (innerHTML) ca phn t.

V d:
Mi khi click vo th p ly ni dung html ca th p v thng bo ni dung ly c.
$("p").click(function() {alert($(this).html())});
html( val ) Kiu tr v: jQuery

Thit l ni dung html (innerHTML) cho phn t.
V d:
Thit lp ni dung html cho th div.
$("div").html("<b>Cho cc bn!<i> Chc bui hc hm nay th v.</i></b>");
text()
Kiu tr v: String
Ly ni dung text (innerText) ca phn t.

V d:
Mi khi click vo th p ly ni dung text ca th p v thng bo ni dung ly c.
$("p").click(function() {alert($(this).html())});
text( val ) Kiu tr v: jQuery

Thit lp ni dung text (innerText) cho phn t.
V d:
Thit lp ni dung text cho th div.
$("div").text("Cho cc bn! Chc bui hc hm nay th v");
5.3
Events
Bind( type, [data], fn )
Bind mt hander vo mt s kin cho mi phn t ph hp, type l s kin, [data] (ty chn)
thm d liu thng qua s kin, fn l hm x l khi s kin xy ra.
JQuery
10
one( type, [data], fn )

Bind mt hander vo mt s kin v n c thc thi 1 ln cho mi phn t ph hp.
trigger( type, [data] )

Kch mt s kin trn mi phn t ph hp.
unbind( [type], [data] )

Loi b s kin khi phn t
hover( over, out )

over, out l 2 hm x l s kin. Hm over x l khi chut di chuyn trn phn t hm out x l khi
chut ri khi phn t
toogle( fn, fn )
Chuyn i gi hm gia 2 ln click.
V d: Vi_du_7.html
$("p:first").bind("click", function(e) {
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span:first").text("S kin click va xy ra ti v tr " + str);
});
$("p:first").bind("dblclick", function() {
$("span:first").text("S kin click p va xy ra ti th " +
this.tagName);
});
var n = 0;
$("div:lt(2)").one("click", function() {
var index = $("div").index(this) + 1;
$(this).css({ borderStyle: "inset",
cursor: "auto"
});
$("p:last").text("Hnh ch nht th " + index + " va c click."
+
"
Tng cng c " + ++n + " click.");
});
$("button:eq(0)").click(function() {
update($("span:eq(1)"));
});
$("button:eq(1)").click(function() {
$("button:first").trigger('click');
update($("span:eq(2)"));
});
function update(j) {
var n = parseInt(j.text(), 0);
j.text(n + 1);
}
function aClick() {
$("div:last").show().fadeOut("slow");
}
JQuery
11
$("#bind").click(function() {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick).text("C th click");
});
$("#unbind").click(function() {
$("#theone").unbind('click', aClick)
.text("Khng lm g c....");
});
$("li").hover(
function() {
$(this).css("color", "red");
},
function() {
$(this).css("color", "black");
}
);
});
</script>
p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }
span { color:red; }
.div1 { width:60px; height:60px; margin:5px; float:left;
background:green; border:5px outset;
cursor:pointer; }
</style>
</head>
<body>
<p>Click hoc click p vo y.</p>
<span></span>
<p>Hy click vo cc hnh ch nht mu xanh</p>
<div class="div1" ></div>
<div class="div1"></div>
<br /><br /><br /><br /><br />
<button>Button th 1</button>
<button>Button th 2</button>
<div><span>0</span> ln button th 1 c click.</div>
<div><span>0</span> ln button th 2 c clicks.</div>
<button id="theone">Khng lm g c....</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<br />
<p>Hy di chuyn chut ln My bay, t, Xe my, Xe p</p>
<ul>
<li>My bay</li>
<li>t</li>
<li>Xe my</li>
<li>Xe p</li>
</ul>
</body>
</html>
6. Cu hi n tp
1. jQuery l g?
Tr l i:
jQuery l mt th vin kiu mi ca Javascript gip n gin ha cch vit JavaScript v tng tc x
l cc s kin trn trang web. Cc th vin jQuery cung cp mt mc ch chung l s tru tng ho cc lp
ph bin cho cc trang web scripting, do n hu ch trong hu ht cc tnh hung scripting.
Cc chc nng jQuery bao gm:
Chn mt tag hoc mt tp hp cc tag trn trang web.
Cung cp cc hm tin ch thng dng.
JQuery
12
Nhanh chng to ra cc tag mi.

Quan trng nht l phn tch vic thit k v lp trnh web trn pha client.
2. J Query c chy trong php c khng?

.
7. Ti liu tham kho

jQuery, URL: http://docs.jquery.com
JQuery
13

Jquery Phan 1

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Jquery Phan 1

Hochgeladen von

Copyright:

Verfügbare Formate

MC LC

S dng jQuery trong trang web...................................................................................... 3

jQuery hot ng nh th no?...................................................................................... 3

Chy m khi Document Ready (trang sn sng) ..................................................................... 3

Mt s API trong jQuery .................................................................................................. 4

Ti liu tham kho .......................................................................................................... 13

Hnh 1: Downdload jQuery

Microsoft Vietnam DPE Team | Bi s 9: jQuery

3. S dng jQuery trong trang web

4. jQuery hot ng nh th no?

Microsoft Vietnam DPE Team | Bi s 9: jQuery

4.2. Function $()

5. Mt s API trong jQuery

selector1, selector2, selectorN

Tng ng vi tt c cc phn t vi danh ngha descendant ca cc phn t xc nh bi danh ngha

parent > child

Tng ng vi cc phn t con di danh ngha child ca phn t c xc nh vi danh ngha

Ph hp vi tt c cc yu t sau c xc nh bi "k tip" bn cnh l yu t xc nh bi

prev ~ siblings Kiu tr v: Array<Element(s)>

Microsoft Vietnam DPE Team | Bi s 9: jQuery

Basic Filters (Cc yu t chn lc c bn)

Tng ng vi phn t u tin c chn.

Tng ng vi phn t cui cng c chn.

B ra tt c cc phn t tng ng cho selector.

Tng ng vi cc phn t chn, ch s 0, 2, 4,

Tng ng vi mt phn t ring l bi ch s ca n.

:gt(index) Kiu tr v: Array<Element(s)>

:lt(index) Kiu tr v: Array<Element(s)>

Tng ng vi tt c cc phn t tiu , ging nh h1, h2, h3

$(":header").css({ background: '#CCC', color: 'blue' });

Content Filters (Chn lc ni dung)

:contains(text) Kiu tr v: Array<Element(s)>

Tng ng vi tt c cc phn t khng c phn t con

Tng ng vi cc phn t bao gm t nht mt phn t ph hp vi nh danh selector.

Tng ng vi tt c cc phn t l cha (cha cc phn t con, gm c phn t vn bn).

Microsoft Vietnam DPE Team | Bi s 9: jQuery

t c ch l 30px cho cc th td cha c phn t con.

Tng ng vi tt c cc phn t c n i hoc phn t vo c dng n hidden.

Tng ng vi cc phn t nhn thy c

Microsoft Vietnam DPE Team | Bi s 9: jQuery

<script src="jquery-1.3.2.js" type="text/javascript"></script>

Thm cc class xc nh vo mi tp phn t ph hp. Nu c thm nhiu class th cc class c

Thm class Maudo vo cc th p.

removeClass( class ) Kiu tr v: jQuery

Loi b lass Maudo khi cc th p.

Thm class nu class cha tn ti hoc loi b nu class tn ti.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Ly ni dung html (innerHTML) ca phn t.

Mi khi click vo th p ly ni dung html ca th p v thng bo ni dung ly c.

html( val ) Kiu tr v: jQuery

Thit lp ni dung html cho th div.

$("div").html("<b>Cho cc bn!<i> Chc bui hc hm nay th v.</i></b>");

Ly ni dung text (innerText) ca phn t.

Mi khi click vo th p ly ni dung text ca th p v thng bo ni dung ly c.

text( val ) Kiu tr v: jQuery

Thit lp ni dung text cho th div.

$("div").text("Cho cc bn! Chc bui hc hm nay th v");

one( type, [data], fn )

trigger( type, [data] )

unbind( [type], [data] )

hover( over, out )

Tng cng c " + ++n + " click.");

Nhanh chng to ra cc tag mi.