Scribd Logo
Upload

Welcome to Scribd!

  • Başlangıç Için Kısa Jquery

    Uploaded by

    Çağatay Abay
    22 views6 pages

    Original Title

    Başlangıç için Kısa Jquery.docx

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views6 pages

    Başlangıç Için Kısa Jquery

    Uploaded by

    Çağatay Abay

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Balang iin

    Kategori jQuery ekirdek Yaps (jQuery Core) onuracun @ 11:56 am ncelikle jQuery kodlarmz test edebilmemiz iin bir html dokman retelim : Metin olarak gosterKodu kopyalaYazdir? 1. <html> 2. <head> 3. <script type="text/javascript" src="path/to/jquery.js"></script> 4. <script type="text/javascript"> 5. // Kodlarmzn gelecei alan </script> 6. </head> 7. <body> 8. <a href="http://jqueryturk.com/">jQueryTurk</a> 9. </body> 10. </html>

    path/to/ : jQuery dosylarnn nerede olduunu belirten ksmdr. ndirdiiniz js dosylarnn bulunduu alan burada belirtmelisiniz. Kodlarmzn gelecei alan : zel durumlar hari kodlarmz yazacamz alandr.

    Metin olarak gosterKodu kopyalaYazdir? 1. $(document).ready(function(){}); Yukarda verilen kod blou kaba tabirle kandr, candr $(document).ready(callbakFunction) bize kodlarmzn sayfa yklenmesi tamamlandnda alacan garanti eder. Bu da bir ok sorunun stesinden otomatik olarak gelmenizi salar. rnek : Metin olarak gosterKodu kopyalaYazdir? 1. 2. 3. 4. 5. $(document).ready(function(){ $("a").click(function(event){ alert("Merhaba"); }); });

    Yukardaki kod sayfanzdaki tm a taglerine click olay ekler ve javascript alert vermelerini salar.

    jQuerynin Sihiri (The Magic of jQuery)


    Kategori jQuery ekirdek Yaps (jQuery Core) onuracun @ 2:32 pm jQuerynin ilerimizi daha hzl ve kolay yapabilmemiz iin bizlere salad bir ok zellik arasnda biri vardr ki tartlmaz bir haldedir. OOP ile alakadar olanlarn daha abuk kavraya bilecei zincirleme yaps. Bu yap ile bir element zerinde yaptnz bir deiiklii yeni bir satra gemeden hemen ayn satr zerinde yeni bir deiiklik ile gncelleyebilirsiniz. rnek vermek gerekirse : Aadaki kod a taglerine nce test isimli class uygular sonra show eder ve iine wuuuuuu yazar Her fonksiyon bir jQuery objesi geri dndrr.
    $("a").addClass("test").show().html("wuuuuuu");

    Geri Dnler ve Fonksiyonlar (Callbacks and Functions)


    Kategori jQuery ekirdek Yaps (jQuery Core) onuracun @ 2:38 pm Geri Dn (callback), baka bir fonksiyona parametre olarak atanan baka bir fonksiyondur. Ana fonksiyon almasn tamamladnda callback fonksiyonu alr. rnek Kod Blou : Aadaki rnekte myhtmlpage.html dosyas istenmi ve bu ilem tamamlandnda callback olarak gsterilen fonksiyonun almas istenmitir. Metin olarak gosterKodu kopyalaYazdir? 1. $.get('myhtmlpage.html', function(){ 2. myCallBack(param1, param2); 3. });

    Jquery ile form kontrol yapmak


    Kategori Genel, jQuery ekirdek Yaps (jQuery Core) cocum @ 6:24 pm Her programcinin olmazsa olmazlarindan biri forum kontrolleridir. Forma bilgi dogru girildi diye kontrol etmek ister. Iste form kontrol iin jquery de bir ka tane seenek var . Ama en hosuma gideni sizinle paylasmak istedim Hem kullanimi ok basit hemde islev olarak ok genis , ben biraz kodlada oynarak daha hos hale getirdim Simdi ncelikle kullandigimiz plugin jquery.validate yi ve jquery indirin. Yanliz yklerken noktalar silindi onlari linklere bakarak gncelleyin.

    Metin olarak gosterKodu kopyalaYazdir? 1. <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> 2. <script type="text/javascript" src="jquery.validate.js"></script> Indirdikten sonra iste kodumuz tm hali Metin olarak gosterKodu kopyalaYazdir? 1. &lt;html&gt; 2. &lt;head&gt; 3. <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> 4. <script type="text/javascript" src="jquery.validate.js"></script> 5. &lt;script type="text/javascript"&gt; 6. $(document).ready(function() { 7. $('#ziyaretciformu').validate({ 8. rules: { 9. ad: { required: true }, 10. ceptelefon: { required: true, number: true }, 11. email: { required: true, email: true }, 12. gorus: { required: true } 13. }, 14. messages: { 15. ad: { required: 'Ad Soyad Bos Brakmayin' }, 16. ceptelefon: { required: 'Cep Telefonunu Bos Birakmayin', number: 'Ltfen sadece sayi giriniz' }, 17. email: { required: 'E-Posta Adresinizi Bos Birakmayin', email: 'EPosta Adresinizi yanlis girdiniz' }, 18. gorus: { required: 'Grs Kismini Bos Birakmayin' } 19. } 20. }); 21. }); 22. &lt;/script&gt; 23. &lt;style type="text/css"&gt; 24. label.error 25. { 26. color: red; 27. font-size: 10px; 28. white-space: pre; 29. float: left; 30. } 31. div.yazi 32. { 33. width:200px; 34. font-family:Verdana; 35. font-size:12px; 36. color:blue; 37. float:left; 38. 39. }

    40. div.alan 41. { 42. 43. height:60px; 44. } 45. &lt;/style&gt; 46. 47. &lt;/head&gt; 48. &lt;body&gt; 49. <form method="POST" action="?" id="ziyaretciformu"> 50. <div class="yazi">Adiniz Soyadiniz</div><div class="alan"><input type="text" nam e="ad" ></div> 51. <div class="yazi">Mail Adresiniz</div><div class="alan"><input type="text" name= "email"></div> 52. <div class="yazi">Cep Telefonu</div><div class="alan"><input type="text" name="c eptelefon"></div> 53. <div class="yazi">Grs</div><div class="alan"><textarea name="gorus"></textarea ></div> 54. <div class="alan"><input type="submit" value="Gnder"></div> 55. </form> 56. &lt;/body&gt; 57. &lt;/html&gt; simdi nasil alistigini aikliycam ncelikle jquery ve validate ktphanelerini ekiyoruz

    alisma mantigi safya yklendiginde Metin olarak gosterKodu kopyalaYazdir? 1. $(document).ready(function() { idsi ziyaretciformu olan formu seiyoruz Metin olarak gosterKodu kopyalaYazdir? 1. $('#ziyaretciformu').validate({ sonra yapmamiz gerek formun isimlerine ne kontrol yapmak istedigimizi sylemek required: true dersek bosmu dolumu diye kontrol eder required: true, number: true dersek bosmu ve sayimi siye kontrol eder email: true dersek mail kontol yapar

    dikkat etmeniz gereken kisim input taglarinin isimlerini yani name=ad kisimlarini aynen burdada yazmak kontrol parametreleri jquery.validate dosyasinin iinde liste halinde var Metin olarak gosterKodu kopyalaYazdir? 1. 2. 3. 4. 5. 6. rules: { ad: { required: true }, ceptelefon: { required: true, number: true }, email: { required: true, email: true }, gorus: { required: true } },

    messages yani mesajlar kismi ise hata verdiginde ney yazmasini gerektigini sylyor Metin olarak gosterKodu kopyalaYazdir? 1. messages: { 2. ad: { required: 'Ad Soyad Bos Brakmayin' }, 3. ceptelefon: { required: 'Cep Telefonunu Bos Birakmayin', number: 'Ltfen sadece sayi giriniz' }, 4. email: { required: 'E-Posta Adresinizi Bos Birakmayin', email: 'EPosta Adresinizi yanlis girdiniz' }, 5. gorus: { required: 'Grs Kismini Bos Birakmayin' } 6. } label.error kismi ise hata yazisinin css si istediginiz gibi degistebilirsiniz Metin olarak gosterKodu kopyalaYazdir? 1. 2. 3. 4. 5. 6. 7. label.error { color: red; font-size: 10px; white-space: pre; float: left; }

    form kisminda ise dikkat etmeniz gereken formun idsi ve inputlarin isimleri nk jquery ile seerken formun id sine gre seiyor bosmu dolumu diye kontrol ederken inputlarin isimlerine yani name=" kisimlarina bakiyor Metin olarak gosterKodu kopyalaYazdir? 1. <form method="POST" action="?" id="ziyaretciformu"> 2. <div class="yazi">Adiniz Soyadiniz</div><div class="alan"><input type="text" nam e="ad" ></div>

    3. <div class="yazi">Mail Adresiniz</div><div class="alan"><input type="text" name= "email"></div> 4. <div class="yazi">Cep Telefonu</div><div class="alan"><input type="text" name="c eptelefon"></div> 5. <div class="yazi">Grs</div><div class="alan"><textarea name="gorus"></textarea ></div> 6. <div class="alan"><input type="submit" value="Gnder"></div> 7. </form> hepsi bu kadar cappatcha iin ise tavsiyem server tabanli kontrol etmeniz umarim faydali olmustur

    You might also like