1 / 71

IT50 4 Javascript çerçeveleri

IT50 4 Javascript çerçeveleri. Yrd. Doç. Dr. Yuriy Mishchenko. Javascript çerçeveleri nedir ?. Javascript çerçeveleri, RIA geliştirmede kullanılan ve temel Javascript DOM işleri için daha kolay veya komforlu yöntemleri sunan javascript kütüphaneleri. Javascript çerçeveleri nedir ?.

davis
Download Presentation

IT50 4 Javascript çerçeveleri

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. IT504Javascriptçerçeveleri Yrd. Doç. Dr. Yuriy Mishchenko

  2. Javascriptçerçevelerinedir? • Javascript çerçeveleri, RIA geliştirmede kullanılan ve temel Javascript DOM işleri için daha kolay veya komforlu yöntemleri sunan javascript kütüphaneleri http://www.scinetcentral.com/~mishchenko/MIT504.html

  3. Javascriptçerçevelerinedir? • Javascript çerçeveleri HTML veya Javascript DOM'dan ayrı bir teknolojiler değil • Javascript çerçeveleri temel olarak HTML, CSS veya Javascript DOM araçları tarafından çözülebilir işleri çözmekte http://www.scinetcentral.com/~mishchenko/MIT504.html

  4. Javascriptçerçevelerinedir? • Javascript çerçeveleri, HTML, CSS ve Javascript DOM araçları, RIA geliştirme için daha mantıklı, kolay ve kullanılabilir yapıda oluşturur • Bu yapıları kullanarak tipik RIA geliştirme hızlandırılabilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  5. Javascriptçerçevelerinedir? Javascript çerçeveleri genellikle bir javascript kütüphane olarak geliştirilip tek veya birkaç .js dosya olarak yayınlanır Javascript çerçevesinden yararlanmak için, ya ilgili js dosyası web sayfanız ile birlikte sunucunuzdan indirilebilir veya genellikle javascript çerçevenin yazarısının web sitesinden HTML script tagındaki "src" komutunu kullanarak direkt olarak bağlanabilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  6. Javascriptçerçevesi kullanım örneği <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  7. En önemli javascriptçerçeveleri • jQuery • MooTools • Prototype • YUI • DOJO • ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  8. jQuery kod örneği <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $('#btnSlideUp').click(function() { $('#slideMe').slideUp('slow'); }); $('#btnSlideDown').click(function() { $('#slideMe').slideUp(); }); $('#btnSlideToggle').click(function() { $('#slideMe').slideToggle('fast'); }); </script> </head> <body> <div id="slideMe"> Kayan metin kutusu!!! </div> <input type="button" id="btnSlideUp" value="Slide Up"> <input type="button" id="btnSlideDown" value="Slide Down"> <input type="button" id="btnSlideToggle" value="Slide Toggle"> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  9. Prototype Kod örneği <!DOCTYPE html> <html> <head> <script src="js/prototype.js"></script> <style> div { padding: 10px; margin: 5px; border: 1px solid black; width: 75%; } </style> <script>document.observe('dom:loaded', function() { $$('ol#meyvelisteli').each(function(elmt) { elmt.observe('click', function(ev) { varlistitem = ev.target; varaboveitems = listitem.previousSiblings(); if (aboveitems.length > 0) { varitemtext = aboveitems[0].innerHTML; aboveitems[0].innerHTML = listitem.innerHTML; listitem.innerHTML= itemtext; } }); }); }); </script> </head> <body><ol id="meyveliste"><li>Elma</li><li>Armut</li><li>Muz</li></ol></body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  10. MootTools Kod örneği <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <script src="js/mootools.js" type="text/javascript"></script> <script> window.addEvent('domready', function() { $('mainnav').getElements('li a').each( function(item){ if ( !item.hasClass('clicked') ) { item.setStyle('opacity',0.01).addEvent('mouseenter', function() {this.fade(1)}).addEvent('mouseleave', function(){this.fade(0.01)}); } }) }) </script> </head> <body> <ul id="mainnav"> <li><a href="/" >home</a></li> <li><a href="#">products</a></li> <li><a href="#">contact</a></li></ul> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  11. Javascriptçerçevelerinedir? • Javascript çerçeveleri tipik olarak standart javascript DOM işleri için farklı araçlar sunar • DOM taranması ve DOM'da navigasyon • DOM hierarşi güncelleştirilmesi • Javascript olay işlemleri ve animasyon • AJAX iletişim • Nesne tabanlı programlama (OOP) ile ilgili işler http://www.scinetcentral.com/~mishchenko/MIT504.html

  12. Javascriptçerçevelerinedir? • jQuery • jQueryen popüler js-çerçevelerinden biridir • Temiz dil yapıları, kolay DOM taranması, iyi olay işlem ve animasyon araçları ve AJAX; standart UI kütüphanesi (jquery.ui) • Web uygulama hızlandıran araç kolleksiyonu • MooTools • OOP tabanlı programlamaya odaklayan js platformu • Zengin modüller, nesne ve nesne devralma araçları • Javascript için OOP odaklı web uygulama geliştirme çerçevesi • Prototype • OOP tabanlı programlamaya odaklayan js platformu • Zengin nesneler ve nesne devralma araçları • Genişletilmiş DOM, standart DOM elemanlarına yeni metotlar tanımlanmış http://www.scinetcentral.com/~mishchenko/MIT504.html

  13. jQuery • Cross-platform javascript kütüphanesi • 2006'da John Resig tarafından tasarımlanmış • Şu anda en popüler js çerçevesi, İnternette var olan web sitelerinin %75'inde kullanılmakta (http://www.similartech.com/categories/javascript) http://www.scinetcentral.com/~mishchenko/MIT504.html

  14. jQuery • jQueryözellikleri: • Kolay DOM elemanlarının taranması • DOMda navigasyon ve DOM elemanları güncelleştirme • CSS selektörler kullanarak DOM taranması • DOM olay işleme • Animasyon • AJAX • JSON analizi • Plug-in'leri kullanarak genişletilmesi • Çarpaz tarayıcı uyumluluk • Standart UI kütüphanesi http://www.scinetcentral.com/~mishchenko/MIT504.html

  15. jQuery • jQueryana kısımları: • Animasyon efektleri • DOM tarama • DOM güncelleştirme • AJAX işlemeleri • UI aletleri http://www.scinetcentral.com/~mishchenko/MIT504.html

  16. jQuery temelleri • İndirme • Özel kopyası, web sitesinden sunulduğu, (http://jquery.com/download/) • jQuery CDN<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> • Google CDN<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> • Microsoft CDN<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script> http://www.scinetcentral.com/~mishchenko/MIT504.html

  17. jQuery temelleri • Tipik jquery komutunun yapısı: • $(selectör).eylem(parametreler) • Selektör, DOM elemanlarının altkümesini belirtilen bir ifade • Eylem, ilgili DOM elemanlarının üzerinde yapılacak işlem • Bu ölçüde, jQuery temel tasarım kavramı ve dil yapıların odak noktası, farklı ve esnek DOM elemanlarının kümeleri üzerinde işlem yapılması dır http://www.scinetcentral.com/~mishchenko/MIT504.html

  18. jQuery temelleri • jQuery selektörleri, DOM hierarşisinde elemanları bulup elde etmek için kullanılır; jQuery selektörleri: • metin satır şeklindedir • CSS selektör notasyonu ile uyumludur • Özel jQuery selektörleri de vardır http://www.scinetcentral.com/~mishchenko/MIT504.html

  19. jQuery temelleri • jQuery selektörleri: • $("a"), CSS tag selektörü (tüm ilgili taglar) • $(".blue"), CSS sınıfselektörü (tüm "class=blue" elemanları) • $("#menu"), CSS idselektörü ("id=menü" elemanı) • $("a.blue"), CSS tag+sınıfselektörü (tüm "class=blue" alan "a" elemanları) • $("ul li a"), CSS iç-içe selektörleri (bir ul içindeki bir li elemanının içinde olan a elemanları) • CSS düzen selektörleri • $("div + p")– div yanında olan p elemanları • $(".altemenu ~ a") - .altmenu elemanlarının kardeş olan a elemanları • CSS hierarşi selektörleri • $(".menu > a") - .menu elemanlarının direkt çocuğu olan a elemanları • $("p:first-child") – ana elemanının ilk çocuğu olan p elemanları • $("a:first-of-type") – ana elemanının a çocuk-elemanları arasında ilk olan çocuk a elemanı • $("a:last-child") - ana elemanının son çocuğu olan p elemanları • $("p:last-of-type") – ana elemanının a çocuk-elemanları arasında son olan çocuk a elemanı • $("div:nth-child(2)")- ana elemanının 2. çocuğu olan div elemanı • $("a:nth-type(2)")- ana elemanının a çocuk-elemanları arasında 2. olan çocuk a elemanı • $("ul li:first-child") – ilk olan ul li çocuklar http://www.scinetcentral.com/~mishchenko/MIT504.html

  20. jQuery temelleri • özel selektörler: • $("*"), tüm elemanlar • $(this), şuanki eleman (olay işlemcileri içinde kullanılır) • $("tr:even"), bir tabloda çift satırlar • $("tr:odd"), bir tabloda tek satırlar • $("p:contains('Hello')"), 'Hello' metni içeren p elemanları • $("li:has(.altmenu)"), .altmenu elemanı içeren li elemanları • $("p:hidden"), saklanmış p elemanları • $(":input"), tüm "input" elemanları (form) • $(":button"), tüm "button" ve "input button" elemanları (form) • $(":checkbox"), tüm "checkbox" elemanları (form) • $(":selected"), tüm tıklanmış select veya radiobutton elemanları (form) • $(":checked"), tüm tıklanmış checkbox elemanları (form) • $(":enabled"), tüm "enabled" elemanları (form) http://www.scinetcentral.com/~mishchenko/MIT504.html

  21. jQuery temelleri • özel selektörler: • $("[href]"), href özelliğini tanımlayan elemanlar • $("a[href='değer']"), href='değer' alan a elemanları • $("[href$='.jpg']"), '.jpg' ile biten href özelliğini alan elemanlar • $("[title|='yarın']"), 'yarın'e eşit veya 'yarın-' ile başlayan "title" özelliğini alan elemanlar • $("[title^='bugun']"), 'bugun' ile başlayan title özelliğini alan elemanlar • $("[title~='hello']"), 'hello' kelimesi içeren title özelliğini alan elemanlar • $("[title*='hello']"), 'hello' metniiçeren title özelliğini alan elemanlar http://www.scinetcentral.com/~mishchenko/MIT504.html

  22. jQuery olaylarla çalışma örneği <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){$(this).hide();}); $("p").dblclick(function(){$(this).hide();}); $("#p1").mouseenter(function(){alert("p1 e girdiniz!");}); $("#p1").mouseleave(function(){  alert("p1 den ayrildiniz");}); $("#p1").mousedown(function(){  alert("p1 de mousedown!");}); $("#p1").mouseup(function(){  alert("p1 de mouseup!");}); }); </script> </head> <body> <p>Tıkandığımda saklanacağım!</p> <p id="p1">Ben de!</p> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  23. jQuery DOMda navigasyon • özel selektörler: • $(selektör).parent(), elemanın ana elemanları • $(selektör).parents(), elemanın tüm yukarıda olan elemanlar (DOM köküne kadar) • $(selektör).parentsUntil(selektör), belirli elemana kadar tüm yukarıdaki ana elemanları http://www.scinetcentral.com/~mishchenko/MIT504.html

  24. jQuery DOMda navigasyon • özel selektörler: • $(selektör).children(), elemanın direkt çocukları • $(selektör).children(selektör), elemanın belirli tipten direkt çocukları • $(selektör).find(selektör), elemanın belirli tipten tüm alttaki çocukları http://www.scinetcentral.com/~mishchenko/MIT504.html

  25. jQuery DOMda navigasyon • özel selektörler: • $(selektör).siblings(), elemanın kardeşleri • $(selektör).siblings(selektör), elemanın belirli tipten kardeşleri • $(selektör).next(), elemanın sonraki kardeş • $(selektör).nextAll(), elemanın tüm sonraki kardeşler • $(selektör).nextUntil(selektör), bir elemana kadar elemanın tüm sonraki kardeşler • $(selektör).prev(), $(selektör).prevAll(), $(selektör).prevUntil(selektör), benzer şekilde http://www.scinetcentral.com/~mishchenko/MIT504.html

  26. jQuery DOMda navigasyon • özel selektörler: • $(selektör).first(), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin ilk elemanı • $(selektör).last(), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin son elemanı • $(selektör).eq(index), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin belirli indexte olan elemanı • $(selektör).filter(selektör), selektör kullanarak elde edilmiş DOM elemanlarının kümesinin altkümesi • $(selektör).not(selektör), filter'nin tersi http://www.scinetcentral.com/~mishchenko/MIT504.html

  27. jQuery DOMda navigasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div p").first().css("background-color","yellow"); }); </script> </head> <body> <p>Ilk paragraf.</p> <div> <p>divde ilk paragraf.</p><!– butekarkaplanirengi sari olacak --> <p>divde son paragraf.</p> </div><br> <div> <p>başka divde ilk paragraf.</p> <p>başka divde son paragraf.</p> </div> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  28. jQuery DOMda navigasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color","red"); }); </script> </head> <body> <h1>Merhaba</h1> <p>Ben Donald Duck'im.</p> <p class="intro">Ben Duckburg'deyasiyorum.</p> <!– bunlarkirmiziolacak --> <p class="intro">Ben Duckburg'iseviyorum.</p> <!– bunlarkirmiziolacak --> <p>Mickey Fare benim en iyiarkadasim!</p> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  29. jQuery komutlarının zincirlenmesi jQuery komutlarının sonucu tipik olarak aynı jQuery nesnesidir; bu nedenle jQuery komutları tipik olarak zincirlenebilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  30. jQuery komutlarının zincirlenmesi <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color","red"); }); </script> </head> <body> <h1>Merhaba</h1> <p>Ben Donald Duck'im.</p> <p class="intro">Ben Duckburg'deyasiyorum.</p> <!– bunlarkirmiziolacak --> <p class="intro">Ben Duckburg'iseviyorum.</p> <!– bunlarkirmiziolacak --> <p>Mickey Fare benim en iyiarkadasim!</p> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  31. jQuery komutlarının zincirlenmesi <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){$(this).hide();}).dblclick(function(){$(this).hide();}); $("#p1").mouseenter(function(){alert("p1 e girdiniz!");}).mouseleave(function(){alert("p1 den ayrildiniz");}).mousedown(function(){alert("p1 de mousedown!");}).mouseup(function(){alert("p1 de mouseup!");}); }); </script> </head> <body> <p>Tıkandığımda saklanacağım!</p> <p id="p1">Ben de!</p> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  32. jQuery DOMu güncelletirme • DOM güncelleştirme komutları: • $(selektör).text(), elemanın metni elde etmek veya değiştirmek • $(selektör).html(), elemanın html'i elde etmek veya değiştirmek • $(selektör).val(), elemanın value özelliğini elde etmek veya değiştirmek • $(selektör).attr(isim), elemanın "isim"li özelliğini elde etmek veya değiştirmek http://www.scinetcentral.com/~mishchenko/MIT504.html

  33. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script> </head> <body> <p id="test1">Bu bir paragraf.</p> <p id="test2">Bu baska bir paragraf.</p> <p>Input field: <input type="text" id="test3" value="Mickey Fare"></p> <button id="btn1">Metin değiştir</button> <button id="btn2">HTML değiştir</button> <button id="btn3">Value değiştir</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  34. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#but1").click(function(){  $("#w3s").attr("href","http://www.w3schools.com/jquery");}); $("#but2").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" }); }); }); </script> </head> <body> <p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button id=but1>href değiştir</button> <button id=but2>href ve title değiştir</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  35. jQuery DOMu güncelletirme • DOM güncelleştirme komutları: • $(selektör).append(), elemanın sonuna yeni html ekle • $(selektör).prepend(), elemanın başına yeni html ekle • $(selektör).after(), elemanın sonrasına yeni html • $(selektör).before(), elemanın öncesine yeni html ekle http://www.scinetcentral.com/~mishchenko/MIT504.html

  36. jQuery DOMu güncelletirme • DOM güncelleştirme komutları: • $(selektör).remove(), elemanı sil • $(selektör).empty(), elemanın çocuklarını sil • $(selektör).remove(filtre), belirli elemanlar sil http://www.scinetcentral.com/~mishchenko/MIT504.html

  37. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <style> .italic {font-style:italic;}</style> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <p>Bu bir paragraf</p> <!-- busilinmeyecek--> <p class="italic">Bu italik paragraf</p> <!-- bunlarsilinecek --> <p class="italic">Bu italik paragraf</p> <!-- bunlarsilinecek --> <button>italik paragrafları sil</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  38. jQuery DOMu güncelletirme • DOM güncelleştirme komutları: • $(selektör).css(), elemanın stili değiştir • $(selektör).addClass(), elemanlara yeni sınıflar ekle • $(selektör).removeClass(), elemanlardan belirli sınıflar sil http://www.scinetcentral.com/~mishchenko/MIT504.html

  39. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Background color = " + $("p").css("background-color")); }); }); </script> </head> <body> <p style="background-color:#ff0000">Paragraf</p> <button>Rengi goster</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  40. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button:first-of-type").click(function(){ $("p").first().css("background-color","yellow"); }); $("button:nth-of-type(2)").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); }); </script> </head> <body> <p style="background-color:#ff0000"> Paragraf </p> <p style="background-color:#00ff00"> Paragraf </p> <p style="background-color:#0000ff"> Paragraf </p> <button>birrengidegistir</button> <button>tumrenklervefontlardegistir</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  41. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button:first-of-type").click(function(){ $("p").first().css("background-color","yellow"); }); $("button:nth-of-type(2)").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); }); </script> </head> <body> <p style="background-color:#ff0000"> Paragraf </p> <p style="background-color:#00ff00"> Paragraf </p> <p style="background-color:#0000ff"> Paragraf </p> <button>birrengidegistir</button> <button>tumrenklervefontlardegistir</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  42. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").eq(0).click(function(){ $("p").first().css("background-color","yellow"); }); $("button").eq(1).click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); }); </script> </head> <body> <p style="background-color:#ff0000"> Paragraf </p> <p style="background-color:#00ff00"> Paragraf </p> <p style="background-color:#0000ff"> Paragraf </p> <button>birrengidegistir</button> <button>tumrenklervefontlardegistir</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  43. jQuery DOMu güncelletirme <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style type="text/css"> .important{font-weight:bold;font-size:xx-large;} .blue{color:blue;} </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>Paragraph 1</p> <p>Paragraph 2</p> <div>Önemli metin!</div><button>Işle</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  44. jQuery DOMu güncelletirme • DOM güncelleştirme komutları (boyutları) • $(selektör).width() • $(selektör).height() • $(selektör).innerWidth() • $(selektör).innerHeight() • $(selektör).outerWidth() • $(selektör).outerHeight() http://www.scinetcentral.com/~mishchenko/MIT504.html

  45. jQuery Animasyon • jQuery saklama komutları • $(selektör).hide(hız,callback-fonksiyonu), sakla • $(selektör).show(hız,callback-fonksiyonu), göster • $(selektör).toggle(hız,callback-fonksiyonu), sakla/göster • Callback-fonksiyonu, komut gerçekleştikten sonra çağırılacak fonksiyonun ismi (zorunlu değil) http://www.scinetcentral.com/~mishchenko/MIT504.html

  46. jQuery Animasyon • jQuery saklama komutları • $(selektör).fadeIn(hız,callback-fonksiyonu) • $(selektör).fadeOut(hız,callback-fonksiyonu) • $(selektör).fadeToggle(hız,callback-fonksiyonu) • $(selektör).fadeTo(hız,opacity,callback-fonksiyonu) http://www.scinetcentral.com/~mishchenko/MIT504.html

  47. jQuery Animasyon • jQuery saklama komutları • $(selektör).slideDown(hız,callback-fonksiyonu) • $(selektör).slideUp(hız,callback-fonksiyonu) • $(selektör).slideToggle(hız,callback-fonksiyonu) http://www.scinetcentral.com/~mishchenko/MIT504.html

  48. jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); }); </script> </head> <body> <button>Toggle</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  49. jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").fadeToggle(1000); }); }); </script> </head> <body> <button>Toggle</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  50. jQuery Animasyon <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;} #panel{padding:50px;display:none;} </style> </head> <body> <div id="flip">Kaydır paneli</div> <div id="panel">Hello world!</div> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

More Related