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();
Анхаарал тавьсанд баярлалаа