![Seçiciler
$("*") Tüm elementleri seçer.
$(this) Aktif HTML elementini seçer.
$("p.giris") Tüm class="giris" elementlerini seçer.
$("p:first") ilk <p> elementini seçer.
$("ul li:first") HTML’de ilk <ul> elementinin ilk <li>
elementini seçer.
$("ul li:first-child") Her bir <ul> elementinin ilk <li>
elementini seçer.
$("[href]") Burda href özelliğine sahip tüm
elementleri seçer.](https://image.slidesharecdn.com/jquery-170122161141/85/Jquery-Giris-12-320.jpg)
![Seçiciler
$("a[target='_blank']") Tüm <a> elementlerinde
target özelliği "_blank" e eşit olanları seçer.
$("a[target!='_blank']") Tüm <a> elementlerinde
target özelliği "_blank" e eşit olmayanları seçer.
$(":button") Tüm <button> elementlerini seçer, yani
<input type="button"> olanları seçer.
$("tr:even") Tüm çift <tr> elementlerini seçer.
$("tr:odd") Tüm tek <tr> elementlerini seçer.](https://image.slidesharecdn.com/jquery-170122161141/85/Jquery-Giris-13-320.jpg)
![Jquery
$(document).ready( function() {
$("#kayitform").submit(function() {
if ($("#alan").val()=='') {
alert("Lütfen, alan 1 doldurunuz.");
return false;
}
if ($("input[@name=‘onaykutu']:checked").val()==null)
{
alert("seçenek 1 veya seçenek 2 işaretleyiniz.");
return false;
}
if ($("#secimlistesi").val()=='') {
alert("Lütfen, bir değer seçiniz.");
return false;
}
});
});](https://image.slidesharecdn.com/jquery-170122161141/85/Jquery-Giris-27-320.jpg)
Jquery Giriş
- 1.
- 2. Jquery Giriş Az kodlaçok iş yapmayı sağlayan bir kullanıcı tarafında çalışan bir kütüphanedir. İstemci tarafında yazılan JavaScript kütüphaneleri azaltak amaçlarından biridir, tek satır kodla onlarca satır Javascript kütüphanesinin yaptığı işi yapabilirsiniz. HTML/DOM manipülasyonu, CSS manipülasyonu, HTML olay metodları, efekt ve animasyonlar, AJAX Her türlü ortamda, Mobil, Tablet PC vs. sorunsuz çalışmaktadır. Birçok site Google, Microsoft, IBM, Netflix Jquery kullanır.
- 3. Jquery Giriş http://jquery.com/ adresindeücretsiz olarak indirilebilir. Jquery.min.js kütüphanesi minimize edildiğinden hızlı yüklenir, Jquery.js kütüphanesi ise geliştiriciler için full source code içerir. Normal Çağırım <script src="jquery-1.8.3.min.js"></script> Google CDN <script src="//ajax.googleapis.com/ajax/libs/ jquery/1.8.3/jquery.min.js"> </script> Yükleme zamanı açısından CDN kullanmak daha avantajlıdır. Tarayıcının ön bellek-cache bölgesinde daha önce ziyaret ettiği popüler sitelerden bu kütüphaneler indirilmiştir.
- 4. Jquery Kullanım (Syntax) JqueryHTML elementleri (tag’lerini) seçerek onlara kolayca eylemler uygulayabilir. Kullanım şekli aşağıdaki gibidir. $(selector).action() Örnek kullanım şekilleri; $(this).hide() – mevcut elementi gizler. $("p").hide() – tüm <p> elementlerini gizler. $(".bul").hide() – bul isimli tüm class elementlerini gizler. $("#bul").hide() –Tüm bul isimli id’leri gizler..
- 5. Document ready olayı $(document).ready(function(){ // jQuery metodları buraya... }); Örneklerimizdeki tüm kodlar document.ready olayının içerisinde meydana gelecek. Bu işlem doküman yüklenmeden Jquery kodlarının çalışmasını engeller. Aşağıdaki örnekler doküman yüklenmeden çalıştırılan ve hata ile sonuçlanacak durumlara örnek verilebilir; - Oluşturulmayan bir elementin gizlenmeye çalışılması, - Yüklenmeyen bir resmin boyutlandırılmaya çalışılması gibi..
- 6. Jquery Selector Jquery selector(seçicileri)ile HTML elementlerini değiştirebilirsiniz. Jquery’de tüm seçiciler dolar işareti ve parantezle başlar. $(), Örneği p elementini seçmek için $("p")
- 7. Jquery Olay Sözdizimi(Syntax) Bir paragrafa tıklanması olayına ilişkin syntax şöyledir. $("p").click(); Sonraki adım olay ateşlendiğinde (gerçekleştiğinde) ne olacağıdır. Bunun için olaya bir fonksiyon parametre olarak geçirilir. $("p").click(function(){ //burada eylemler yer alır. });
- 8. Paragrafa tıklayınca gizleme <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script>
- 9. Paragrafa tıklayınca gizleme <!DOCTYPEhtml> <head> Buraya önceki sayfadaki Jquery kodlarını yazınız. </head> <body> <p>Buraya tıklarsanız ben kaybolurum.</p> <p>Lütfen tıklayın!</p> <p>Buraya da tıklayın!</p> </body> </html>
- 10. id seçicileri #id seçicileriHTML tag’i içinde belli bir elemente ulaşmak için kullanılır. Bildiğiniz gibi #id’ler eşsiz olmalıdır, yani aynı isimde birden fazla olamaz. Aşağıdaki kodda butona tıklanınca #bul isimli id gizleniyor. $(document).ready(function(){ $(":button").click(function(){ $("#bul").hide(); }); });
- 11. <html><head><script src="jquery-1.8.3.js"></script> <script> $(document).ready(function(){ $(":button").click(function(){ $("#bul").hide(); }); }); </script> <style type="text/css" > #bul{ color:green; background-color:yellow; } </style> </head><body> <input type="button" id="button" value="bana tıkla!"> <div id="bul"><h3>burası kaybolacak</h3></div> </body></html>
- 12. Seçiciler $("*") Tüm elementleriseçer. $(this) Aktif HTML elementini seçer. $("p.giris") Tüm class="giris" elementlerini seçer. $("p:first") ilk <p> elementini seçer. $("ul li:first") HTML’de ilk <ul> elementinin ilk <li> elementini seçer. $("ul li:first-child") Her bir <ul> elementinin ilk <li> elementini seçer. $("[href]") Burda href özelliğine sahip tüm elementleri seçer.
- 13. Seçiciler $("a[target='_blank']") Tüm <a>elementlerinde target özelliği "_blank" e eşit olanları seçer. $("a[target!='_blank']") Tüm <a> elementlerinde target özelliği "_blank" e eşit olmayanları seçer. $(":button") Tüm <button> elementlerini seçer, yani <input type="button"> olanları seçer. $("tr:even") Tüm çift <tr> elementlerini seçer. $("tr:odd") Tüm tek <tr> elementlerini seçer.
- 14. Olaylar (Events -Actions) Farklı ziyaretçilerin yaptıkları eylemlere web sayfasını cevap vermesi olay olarak adlandırılır. Örneğin; - Bir farenin bir HTML elementi üzerinde gezdirilmesi, yani mouse over olayı - Bir radyo düğmesinin seçilmesi, - Bir onay kutusuna tıklanması. • Yukarıdaki olayların herbirinde bir ateşleme(fire) meydana gelir.
- 15. Bazı DOM Olayları Mouseolayları: click, dblclick, mouseenter, mouseleave Klavye Olayları: keypress, keydown, keyup Form olayları: submit, change, focus, blur Document/Windows Olayları Load,resize, scroll, unload
- 16. En çok kullanılanmetodlar $(document).ready() Daha önce açıklandı. click() $("p").click(function(){ $(this).hide(); }); dblclick() $("p").dblclick(function(){ $(this).hide(); }); • mouseenter() $("#p1").mouseenter(function(){ alert("p1 elementine tıkladınız!"); });
- 17. En çok kullanılanmetodlar mouseleave() $("#p1").mouseleave(function(){ alert("Güle güle, p1 elementinden ayrıldınız!"); }); mousedown() $("#p1").mousedown(function(){ alert("p1 elementinin üzerine tıkladınız!"); }); • mouseup() $("#p1").mouseup(function(){ alert("p1 in üzerine tıklanıp bırakıldı!"); });
- 18. En çok kullanılanmetodlar hover() Bu metod aslında mouseenter() ve mouseleave() fonksiyonlarının birleşimidir. $("#p1").hover(function(){ alert("p1 elementine gelindi!"); }, function(){ alert("Güle güle! p1 elementinden ayrıldınız!"); }); • focus() Bir HTML elementine odaklanıldığında işler. $("input").focus(function(){ $(this).css("background-color","#cccccc"); });
- 19. En çok kullanılanmetodlar blur() HTML elementini focus olayını kaybettiğinde ateşlenir. $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); hide() ve show() metodları $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
- 20. show() ve hide()metodları $(seçici adı).hide(hız,callback); $(seçici adı).show(hız,callback); Yukarıdaki yazım şekline göre show ve hide metodlarını kullanabiliriz. hız parametresi "slow", "fast" veya milisaniye(saniyenin binde biri) olabilir. callback parametresi gizleme veya gösterme işlemi bittikten sonra çağrılacak fonksiyonun adıdır. $("button").click(function(){ $("p").hide(1000); });
- 21. <!DOCTYPE html><html> <head> <style> p {color:red; margin:5px; cursor:pointer; } p:hover { background:yellow; } </style> <script src="jquery-1.8.3.js"></script> </head><body> <p>İlk paragraf</p> <p>İkinci paragraf</p> <script> $("p").click(function () { $(this).slideUp(); }); </script> </body></html> Buton tıklama Örneği
- 22. <html><head> <script src="jquery-1.8.3.js"></script> <script> $(document).ready(function(){ $("#gs").click(function(){ alert("Sarı-kırmızı"); }); $("#bjk").click(function(){ alert("Siyah-Beyaz"); }); $("#fb").click(function(){ alert("Sarı-Larcivert"); }); }); </script> Div’e tıklama ve mesaj verme
- 23. <style type="text/css" > #gs,#fb,#bjk{ color:white;background-color:#666; width:100px; height:100px; float:left; margin:10px; } </style> </head> <body> <div id="gs"><h3>Galatasaray</h3></div> <div id="fb"><h3>Fenerbahçe</h3></div> <div id="bjk"><h3>Beşiktaş</h3></div> </body> </html> Div’e tıklama ve mesaj verme
- 24. toggle() Bir nesneye hertıklamada çalışacak fonksiyonları belirtir. Çift fonksiyon yazılırsa tıklama işi meydana gelir, aksi halde küçük bir animasyon görülür. <style> .link{color:red; background-color:blue;} </style> $(‘a’).toggle( function(){ $(this).addClass("link"); }, function(){ $(this).removeClass(«link"); })
- 25. toggle metodu <scripttype="text/javascript"> jQuery().ready(function() { jQuery(".div1").toggle( function(){ jQuery(".div2").fadeIn("fast"); }, function(){ jQuery(".div2").fadeOut("fast"); } ); }); </script>
- 26. Form Kontrolü <formaction="sayfa2.php" method="post" id="kayitform"> <input type="text" name="alan" id="alan" /> <input type="radio" name="onaykutu" id="sec" value="1" />Seçenek 1 <input type="radio" name="onaykutu" id="sec" value="2" />Seçenek 2 Seçiniz <select name="secimlistesi" id="secimkutu"> <option value="">Seçiniz</option> <option value="1">Değer 1</option> <option value="2">Değer 2</option> </select> </label> <input type="submit" name="button" id="button" value="Gonder" /> </form>
- 27. Jquery $(document).ready( function(){ $("#kayitform").submit(function() { if ($("#alan").val()=='') { alert("Lütfen, alan 1 doldurunuz."); return false; } if ($("input[@name=‘onaykutu']:checked").val()==null) { alert("seçenek 1 veya seçenek 2 işaretleyiniz."); return false; } if ($("#secimlistesi").val()=='') { alert("Lütfen, bir değer seçiniz."); return false; } }); });