1 / 21

J q uery- ын тухай

J q uery- ын тухай. Бэлтгэсэн: Б.Мөнхжин Содон Солушн ХХК. Агуулга. JQuery гэж юу вэ ? Яагаад Jquery -г сонгох ёстой вэ ? Хэрэгцээт функцуудын талаар. Зорилго. Jquery -ын талаар ерөнхий ойлголт өгөх. Эхлэн суралцагчид туслах зорилгоор бэлдлээ. JQuery гэж юу вэ ?.

chaney
Download Presentation

J q uery- ын тухай

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Jquery-ын тухай Бэлтгэсэн: Б.Мөнхжин Содон Солушн ХХК

  2. Агуулга • JQueryгэж юу вэ? • Яагаад Jquery-гсонгох ёстой вэ? • Хэрэгцээт функцуудын талаар

  3. Зорилго • Jquery-ын талаар ерөнхий ойлголт өгөх. Эхлэн суралцагчид туслах зорилгоор бэлдлээ.

  4. JQueryгэж юу вэ? • 2006 оны нэг сард John Resigанх танилцуулжээ. • “JQueryнь хурдан вэб хөгжүүлэлтэнд HTML document traversing,eventhandling,animating,ajaxзэргийг хялбаршуулсан өмнөхөөсөө илүү хурдан,хэмжээ нь багассан Javascriptсан юм. JQueryнь таныг Javascriptдээр бичдэг хэв маягыг өөрчлөхгүй.”

  5. Яагаад Jquery-гсонгох ёстой вэ? • IE6+, firefox, safari 2+, and opera 9+ гээд бүгдэн дээр нь ажиллана. • CSS 3-тай зохицон ажилладаг. • Бага хэмжээтэй.(29kb) • Full Documetation • Community сайтай

  6. Jquery-ийн бусдаас давуутайхоёр зүйл • $(“div”).addClass(“sodon”).fadeOut(); - дараалуулан (chain) бичих • $(...).html(); - нэг методыг олон дахин хэрэглэх • $(...).html(“<p>sodonsolution</p>”); • $(...).html(function(i){ • return “<p>hello “ + i + “</p>”; • });

  7. Хамгийн чухал метод • $(function(){ Dom бэлэн болмогч ажиллаж эхэлнэ. Dom нь хуудас бүрэн ачаалагдаж дуусахаас өмнө ажилладаг. • });

  8. jQuery Philosophy • #1. Find some HTML • #2. Do something to it

  9. Select хийх (элементээ олох) • $() – selector ашиглаад • $(“#myId”) – Id-аар • $(“.myClass”) - class • $(“table”)- domelement-ээр • $(“li:first”) • $(“tr:odd”) • $(“a[target=_blank]”) • $(“#myId, .myClass, table”) – олон

  10. Үйлдэл хийх : Хэрэгцээт методууд • 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()

  11. 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>

  12. Attributes - жишээ Олон property зэрэг олгож болно. $(...).css({ “background”: “yellow”, “height”: “400px” });

  13. Events - жишээ • Товч дарахад ямар нэгэн юм хийнэ. • $(“button”).click(function(){ • sodonsolution(); • }); • Хэрэглэгч өөрийн хүссэн event-ийг үүсгэж чадна. • $(“button“).bind(“expand”, function(){ • sodonsolution(); • }); • $(“button:first“).trigger(“expand”);

  14. Events – зөвлөмж • $("#sodon-details").click(function() { $("#txt").slideToggle("slow"); • }); • Click-ийн оронд live хэрэглэ. • $("#sodon-details").live(‘click’,function() { $("#txt").slideToggle("slow"); • }); • Учир нь:click() нь html-д кодоор нэмэгдсэн элементийндаралтыг мэдэрч чаддаггүй.

  15. Animation / Effects • Effect-ийн гурван төрөл байна. • Hide and Show • Fade In and Out • Slide Up and Down • Дарах бүрд slide up, slide down үйлдлийг ээлжлэн гүйцэтгэнэ. • $(...).click(function(){ • $(“div:first”).slideToggle(); • });

  16. Traversing - жишээ • <table></table> • <div> • <p>foo</p> • <span>bar</span> • </div> • Table-ийн дараагийн элементээс “foo”id-тай элементийг олохдоо : $(“table”).next().find(“p”);

  17. Traversing - зөвлөмж • var panels = $('div.panel', $('#content')); • var panels = $('#content').find('div.panel'); • Context(эхний арга)-оосилүү find()-ийг хэрэглэ.

  18. Ajax • $.ajax({ • url: “sodon.shtml”, • type: ”get”, • dataType: “html”, • Complete : function(data){ • Alert(“complete”); • } }) Жич: Бусад(get,post …) функцуудынхаа бүх үүргийг $.ajax функц нь хийж чаддагучир олон функцын нэр цээжлэлгүй үүнийг л мэдэхэд хангалттай.

  19. CSS – зөвлөмж • css( name ) eg $("p").css("color"); • css( properties ) eg $("p").css({ color: "red", background: "blue" }); • css( name, value ) eg $("p").css("color","red"); • 15 болон түүнээс дээш аттрибттай бол style тагийг хэрэглэсэн нь дээр • $('<style type="text/css"> div.class { color: red; } </style>') .appendTo('head');

  20. Jquery UI / Plugins • http://ui.jquery.comсайтаас Jquery UI project-ыг татаж авч болно. http://jqueryui.com/themeroller/ ашиглаад өөрийн шаардлаганд нийцсэн дизайныг гарган авч болно. • http://plugins.jquery.com/ сайтаас өөрийн хэрэглээнд тохирсон plugin-уудыг аваад хэрэглэж болно. Хэрэв шаардлагатай pluginчинь байхгүй бол өөр бичнэ дээ. • Бичихдээ :$.fn.sodonplugin= function(){} • Ашиглахдаа : $().sodonplugin();

  21. Анхаарал тавьсанд баярлалаа

More Related