15 Dakikada jQuery

2,403 views

Published on

15 dakikada jQuery öğrenmek...

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,403
On SlideShare
0
From Embeds
0
Number of Embeds
886
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

15 Dakikada jQuery

  1. 1. 15 Dakikada jQuery Orijinal Yazım Tarihi: 7 Ağustos 2007 Çeviri Tarihi: 26 Haziran 2009 Mavigenc.Com
  2. 2. jQuery Ne İlginçlikleri Yapar? <ul><li>CSS seçicilerin etrafında oluşturur. </li></ul><ul><li>Pek usludur. </li></ul><ul><li>Senin küresel adına sızmaz. </li></ul><ul><li>Başka kütüphaneler ile iyi çalar. </li></ul><ul><li>API gücü kullanan faktörlere rahatlıkla kullanır. </li></ul>Mavigenc.Com
  3. 3. jQuery () Fonksiyonu <ul><li>jQuery('div#intro h2') </li></ul><ul><li>jQuery('div.section > p') </li></ul><ul><li>jQuery('input:radio') </li></ul><ul><li>$('div#intro h2') </li></ul>Mavigenc.Com
  4. 4. jQuery Koleksiyonları <ul><li>$('div.section') jQuery koleksiyonuna döner. </li></ul><ul><li>Bu yöntemler üzerinde arama yapabilirsiniz: </li></ul><ul><li>$('div.section').size() = no. of matched </li></ul><ul><li>elements $('div.section').each(function(div) { // Manipulate the div </li></ul><ul><li>} </li></ul>Mavigenc.Com
  5. 5. Koleksiyonları Kurgulama <ul><li>En çok jQuery methodu, koleksiyon içinde </li></ul><ul><li>eşlenen elemanların hepsinde çalıştırır. </li></ul><ul><li>$('div.section').addClass('highlighted') </li></ul><ul><li>$('img.photo').attr('src', '/default.png'); </li></ul><ul><li>$('a.foo').html('<em>Bana Tıklayın!</em>'); </li></ul><ul><li>$('p:odd').css('background-color', '#ccc'); </li></ul>Mavigenc.Com
  6. 6. Değerleri Kapma <ul><li>İlk eşlenen öğedeki bazı metot dönüşleri </li></ul><ul><li>sonuç verir. </li></ul><ul><li>var height = $('div#intro').height(); </li></ul><ul><li>var src =$('img.photo').attr('src'); </li></ul><ul><li>var lastP =$('p:last').html() </li></ul>Mavigenc.Com
  7. 7. DOM Geçişi <ul><li>DOM geçişinde jQuery gelişmiş yöntemler </li></ul><ul><li>sağlar. </li></ul><ul><li>$('div.section').next() </li></ul><ul><li>$('div.section').prev() </li></ul><ul><li>('div.section').prev('a') </li></ul><ul><li>$('div.section').parent() </li></ul><ul><li>('div.section').parents() </li></ul>Mavigenc.Com
  8. 8. Olay İdaresi <ul><li>jQuery bir çapraz tarayıcı için olay tutucu </li></ul><ul><li>atama metodları sağlar. </li></ul><ul><li>$('a').click(function(ev) { </li></ul><ul><li>$(this).css({backgroundColor: 'orange'}); </li></ul><ul><li>ev.preventDefault(); </li></ul>Mavigenc.Com
  9. 9. Mütevazılık Göstermek <ul><li>$(document).ready(function() </li></ul><ul><li>{ alert('DOM hazır!'); }); </li></ul><ul><li>$(function() { alert(‘Bu bir kısayoldur.') }); </li></ul>Mavigenc.Com
  10. 10. Zincirleme <ul><li>En çok jQuery metodu, başka bir taneye </li></ul><ul><li>jQuery nesnesini döndürür — çoğunlukla bir </li></ul><ul><li>temsil etme, aynı koleksiyondadır. </li></ul><ul><li>Bu, senin, bir arada metotları zincire </li></ul><ul><li>vurabildiğini ifade eder: </li></ul><ul><li>$('div.section').hide().addClass('gone'); </li></ul>Mavigenc.Com
  11. 11. Çılgın Zincirleme <ul><li>$('form#login') </li></ul><ul><li>// opsiyonel sınıfında form içindeki tüm etiketler gizlemek </li></ul><ul><li>.find('label.optional').hide().end() </li></ul><ul><li>// formdaki şifre alanlarını kırmızı sınırla belirtmek </li></ul><ul><li>.find('input:password').css('border', '1px solid red').end() </li></ul><ul><li>// bir formu göndermek için işleyici eklemek </li></ul><ul><li>.submit(function(){ </li></ul><ul><li>return confirm('Are you sure you want to submit?'); </li></ul><ul><li>}); </li></ul>Mavigenc.Com
  12. 12. Ajax <ul><li>jQuery, Ajax için mükemmel bir desteğe sahip </li></ul><ul><li>$('div#intro').load('/some/file.html'); </li></ul><ul><li>Daha gelişmiş yöntemler şunlardır: </li></ul><ul><li>$.get(url, params, callback) </li></ul><ul><li>$.post(url, params, callback) </li></ul><ul><li>$.getJSON(url, params, callback) </li></ul><ul><li>$.getScript(url, callback) </li></ul>Mavigenc.Com
  13. 13. Eklentiler <ul><li>jQuery eklentileri ile genişletilebilir olan bu jQuery nesne için yeni yöntemler ekleyebilirsiniz. </li></ul><ul><li>Form : Daha iyi form idaresi </li></ul><ul><li>Dimensions : Bir sürü tarayıcı ölçümleri </li></ul><ul><li>Interface : Süslü etkiler, akordeonlar </li></ul><ul><li>UI : Sürükleme ve bırakma, ve dahası </li></ul>Mavigenc.Com
  14. 14. Daha Fazlası <ul><li>http://jquery.com/ - Resmi Sitesi </li></ul><ul><li>http://visualjquery.com/ - Kullanılabilir API Referansı </li></ul>Mavigenc.Com
  15. 15. Çeviri <ul><li>Bu çeviri jQuery severler adına; </li></ul><ul><li>Mert Can Oral </li></ul><ul><li>tarafından 26 Haziran 2009 </li></ul><ul><li>tarihinde yapılmıştır. </li></ul>Mavigenc.Com

×