Transcript JQuery
Jquery-ын тухай
Бэлтгэсэн: Б.Мөнхжин
Содон Солушн ХХК
Агуулга
JQuery гэж юу вэ?
Яагаад Jquery-г сонгох ёстой вэ?
Хэрэгцээт функцуудын талаар
Зорилго
Jquery-ын талаар ерөнхий ойлголт өгөх. Эхлэн
суралцагчид туслах зорилгоор бэлдлээ.
JQuery гэж юу вэ?
2006 оны нэг сард John Resig анх танилцуулжээ.
“JQuery нь хурдан вэб хөгжүүлэлтэнд HTML
document traversing,event handling,animating,ajax
зэргийг хялбаршуулсан өмнөхөөсөө илүү
хурдан,хэмжээ нь багассан Javascript сан юм.
JQuery нь таныг Javascript дээр бичдэг хэв маягыг
өөрчлөхгүй.”
Яагаад Jquery-г сонгох ёстой вэ?
IE6+, firefox, safari 2+, and opera 9+ гээд бүгдэн дээр
нь ажиллана.
CSS 3-тай зохицон ажилладаг.
Бага хэмжээтэй.(29kb)
Full Documetation
Community сайтай
Jquery-ийн бусдаас давуутай хоёр зүйл
$(“div”).addClass(“sodon”).fadeOut(); - дараалуулан
(chain) бичих
2. $(...).html(); - нэг методыг олон дахин хэрэглэх
1.
$(...).html(“<p>sodonsolution</p>”);
$(...).html(function(i){
return “<p>hello “ + i + “</p>”;
});
Хамгийн чухал метод
$(function(){
Dom бэлэн болмогч ажиллаж эхэлнэ.
Dom нь хуудас бүрэн ачаалагдаж дуусахаас өмнө
ажилладаг.
});
jQuery Philosophy
#1. Find some HTML
#2. Do something to it
Select хийх (элементээ олох)
$() – selector ашиглаад
$(“#myId”) – Id-аар
$(“.myClass”) - class
$(“table”)- dom element-ээр
$(“li:first”)
$(“tr:odd”)
$(“a[target=_blank]”)
$(“#myId, .myClass, table”) – олон
Үйлдэл хийх : Хэрэгцээт методууд
Moving Elements:
append(), appendTo(), before(), after(),
Attributes
css(), attr(), html(), val(), addClass()
Traversing
find(), is(), prevAll(), next(), hasClass()
Effects
show(), fadeOut(), toggle(), animate()
Events
bind(), trigger(), unbind(), live(), click()
Ajax
get(), getJSON(), post(), ajax(), load()
Moving Elements - жишээ
Доорхи html өгөгджээ.
<p>moving</p>
<div id=“sodondiv”>hi</div>
$(“#mydiv”) .append(“<p>test</p>”);
Үр дүнд :<div id=“sodondiv”>hi<p>test</p></div>
$(“p”).appendTo(“#sodondiv”);
Үр дүнд : <div id=“sodondiv”>hi<p>moving</p></div>
Attributes - жишээ
Олон property
зэрэг олгож
болно.
$(...).css({
“background”:
“yellow”,
“height”: “400px”
});
GET
SET
.attr(“id”)
.attr(‘id’,sodondiv’)
.html()
.html(“hi”)
.val()
.val(“hi”)
.css(“top”)
.css(“top”,”80px”)
.width()
.width(60)
Events - жишээ
Товч дарахад ямар нэгэн юм хийнэ.
$(“button”).click(function(){
sodonsolution();
});
Хэрэглэгч өөрийн хүссэн event-ийг үүсгэж чадна.
$(“button“).bind(“expand”, function(){
sodonsolution();
});
$(“button:first“).trigger(“expand”);
Events – зөвлөмж
$("#sodon-details").click(function() {
$("#txt").slideToggle("slow");
});
Click-ийн оронд live хэрэглэ.
$("#sodon-details").live(‘click’,function() {
$("#txt").slideToggle("slow");
});
Учир нь: click() нь html-д кодоор нэмэгдсэн
элементийн даралтыг мэдэрч чаддаггүй.
Animation / Effects
Effect-ийн гурван төрөл байна.
Hide and Show
Fade In and Out
Slide Up and Down
Дарах бүрд slide up, slide down үйлдлийг
ээлжлэн гүйцэтгэнэ.
$(...).click(function(){
$(“div:first”).slideToggle();
});
Traversing - жишээ
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
Table-ийн дараагийн элементээс “foo” id-тай
элементийг олохдоо : $(“table”).next().find(“p”);
Traversing - зөвлөмж
var panels = $('div.panel', $('#content'));
var panels = $('#content').find('div.panel');
Context(эхний арга)-оос илүү find()-ийг хэрэглэ.
Ajax
$.ajax({
url: “sodon.shtml”,
type: ”get”,
dataType: “html”,
Complete : function(data){
Alert(“complete”);
}
})
Жич: Бусад(get,post …) функцуудынхаа бүх үүргийг
$.ajax функц нь хийж чаддаг учир олон функцын
нэр цээжлэлгүй үүнийг л мэдэхэд хангалттай.
CSS – зөвлөмж
eg $("p").css("color");
css( properties ) eg $("p").css({ color: "red",
background: "blue" });
css( name, value ) eg $("p").css("color","red");
css( name )
15 болон түүнээс дээш аттрибттай бол style
тагийг хэрэглэсэн нь дээр
$('<style type="text/css"> div.class { color: red; }
</style>') .appendTo('head');
Jquery UI / Plugins
http://ui.jquery.com сайтаас Jquery UI project-ыг
татаж авч болно. http://jqueryui.com/themeroller/
ашиглаад өөрийн шаардлаганд нийцсэн
дизайныг гарган авч болно.
http://plugins.jquery.com/ сайтаас өөрийн
хэрэглээнд тохирсон plugin-уудыг аваад хэрэглэж
болно. Хэрэв шаардлагатай plugin чинь байхгүй
бол өөр бичнэ дээ.
Бичихдээ : $.fn.sodonplugin = function(){}
Ашиглахдаа : $().sodonplugin();
Анхаарал тавьсанд баярлалаа