jQuery bir JavaScript Kütüphanesidir.
jQuery, JavaScript programlamasını büyük ölçüde basitleştirir.
Bu bölümde Jquery kullanarak örnekler oluşturacağız.
JQuery Örnekler
1-Jquery kullanarak text kutusuna yazdığımız yazının karakter sayısı text kutusunda gösterme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#t1").on("keyup", function() { var yazi = $("#t1").val(); $("#d1").html(yazi.length); }); }); </script> </head> <body> <input type="text" id="t1"><br> <div id="d1">Buraya Eklenecek</div> </body> </html> |
-Çıktı
2-Jquery kullanarak kaç karakter kaldığını yazdırma;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var enfazla = $("#t1").attr("maxlength"); $("#t1").on("keyup", function() { var yazi = $("#t1").val(); $("#d1").html(enfazla - yazi.length); }); }); </script> </head> <body> <input type="text" id="t1" maxlength="15"><br> <div id="d1">Buraya Eklenecek</div> </body> </html> |
-Çıktı
3-Jquery kullanarak buton ile chekedbox kontrol etme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#b1").click(function() { $("#chk").attr("checked", true); }); $("#b2").click(function() { $("#chk").attr("checked", false); }); }); </script> </head> <body> <input type="button" id="b1" value="İşaretle"><br> <input type="button" id="b2" value="Kaldır"><br> <input type="checkbox" id="chk"><br> </body> </html> |
-Çıktı
4-Jquery kullanarak onay kutusu onaylandığında resim görünsün onayı kaldırıldığında resim görünmesin;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#chk").on("change", function() { if ($(this).prop("checked") == true) { $("#resim").slideDown(2000); } else { $("#resim").slideUp(2000); } }); }); </script> </head> <body> <input type="checkbox" id="chk" checked> <img src="resim/1.jpg" id="resim"> </body> </html> |
-Çıktısı;
5-Jquery kullanarak color nesnesinden seçilen renk sayfanın rengi olsun;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#renk").on("change", function() { var secilenrenk = $("#renk").val(); $("body").css("backgroundColor", secilenrenk); }); }); </script> </head> <body> <input type="color" id="renk"> </body> </html> |
-Çıktı
6-Jquery kullanarak 10 tane div nesnesi olsun tıkladığımız div nesnesi renk nesnesinin secilen renginde olsun;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $(".kutu").click(function() { var secilenrenk = $("#renk").val(); $(this).css("backgroundColor", secilenrenk); }); }); </script> <style> .kutu { width: 200px; height: 200px; float: left; border: #000 solid 2px; margin: 3px; } </style> </head> <body> <input type="color" id="renk"><br> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> </body> </html> |
-Çıktı
7.1-Jquery kullanarak text kutusu ekleme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var sayac = 1; $("#b1").click(function() { $("#d1").append('<input type=\' \'>'); sayac++; }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <div id="d1"></div> </body> </html> |
-Çıktı
7.2-Jquery kullanarak text kutusu ekleme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var sayac = 1; $("#b1").click(function() { var tkutu = $("<input>", { type: "text", name: "t" + sayac, id: "t" + sayac, placeHolder: "Adınızı Giriniz" }); $("#d1").append("<br>").append(tkutu); sayac++; }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <div id="d1"></div> </body> </html> |
-Çıktı
8-Jquery kullanarak select listesine öğe ekleme;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#b1").click(function() { var o = $("<option>", { value: $("#t1").val(), text: $("#t1").val() }); $("#iller").append(o); }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <input type="text" id="t1"> <select id="iller"> <option value="0">Seçiniz</option> </select> </body> </html> |
-Çıktı
9-Jquery ile diziler;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var gunler = ["Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"]; $("#b1").click(function() { for (var i = 0; i <gunler.length;i++) { var li=$("<li>",{ html:(gunler[i]) }); $("#liste").append(li); } }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <ul id="liste"> </ul> </body> </html> |
-Çıktı
10-Jquery kullanarak diziye değer ekleme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var gunler = ["Pazartesi", "Salı", "Çarşamba"]; $("#b1").click(function() { gunler.push($("#t1").val()); console.log(gunler); }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <input type="text" id="t1"> </body> </html> |
-Çıktı
11-Jquery kullanarak diziden son değeri silip alma;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var gunler = ["Pazartesi", "Salı", "Çarşamba"]; $("#b1").click(function() { gunler.forEach(function(gun, index) { console.log(gun); console.log(index); }); }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <input type="text" id="t1"> </body> </html> |
-Çıktı
12-Jquery kullanarak nesne oluşturma;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var ogrenci = { ad: "Ali", soyad: "Can", yas: 15, sinif: "10A" } $("#b1").click(function() { console.log(ogrenci); }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <input type="text" id="t1"> </body> </html> |
-Çıktı
14-Jquery kullanarak Matematik Kütüphanesinden rastgele sayı seçme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#b1").click(function() { var sayi = Math.random(); $("#d").html(sayi); }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <div id="d"></div> </body> </html> |
-Çıktı
15.1-Jquery kullanarak 0-100 arası rastgele sayı seçme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - tasarimkodlama.comt</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#b1").click(function() { var sayi = Math.random() * 101; $("#d").append("-").append(Math.floor(sayi)); }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <div id="d"></div> </body> </html> |
-Çıktı
15.2-Jquery kullanarak 70-100 arası rastgele sayı seçme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#b1").click(function() { var sayi = 70 + Math.random() * 31; $("#d").append("-").append(Math.floor(sayi)); }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <div id="d"></div> </body> </html> |
-Çıktı
16.1-Jquery kullanarak butona basınca sayfa rengini rastgele değiştirme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { $("#b1").click(function() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); $("body").css("backgroundColor", "rgb(" + r + "," + g + "," + b + ")") }); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> </body> </html> |
-Çıktı
16.2-Jquery kullanarak kendi kendine sayfa rengini rastgele değiştirme;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { setInterval(function() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); $("body").css("backgroundColor", "rgb(" + r + "," + g + "," + b + ")"); }, 500); }); </script> </head> <body> <input type="button" id="b1" value="Ekle"><br> <div id="d"></div> </body> </html> |
17-Jquery kullanarak rastgele günün sözü uygulaması;
-Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Örnekleri - www.tasarimkodlama.com</title> <script src="https://code.jquery.com/jquery-3.3.1.js"> </script> <script> /**www.tasarimkodlama.com**/ $(document).ready(function() { var sozler = ["Başkalarını memnun etmek için yaşarsan herkes seni sever, kendin hariç.", "Doğruluk sonsuzluğun güneşidir, nasıl olsa doğar.", "Bir şeyi yapma gücümüzde saklı olan, bir şeyi yapmama gücümüzde saklıdır.", "Gerçek mutluluk, gecenin karanlığında güneşi pencerene çizebilmektir.", "Aşk bir kadının hayatının tümü, bir erkeğin hayatının ise bir bölümüdür.", "Dertlerinize gülmeyi öğrenirseniz gülecek şeyleriniz hiç bitmez.", "Allah merhalesinde akıl beygirine yol yoktur.", "Yaratılanı hoş gör, Yaradan’dan ötürü." ]; var sayi = Math.floor(Math.random() * sozler.length); $("#soz").html(sozler[sayi]); }); </script> </head> <body> <div id="soz"></div> </body> </html> |
-Çıktı
Yorum Yap