Scribd
Upload
0 views

JQuery Örnekler

The document provides various examples of using jQuery for different functionalities, such as displaying character count in a text box, managing checkboxes, changing background colors, and dynamically adding input fields and options to a select list. Each example includes HTML and jQuery code snippets demonstrating the implementation of the described functionality. The document serves as a practical guide for learning jQuery through hands-on coding examples.

Uploaded by

GÜLSÜM KAMER
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

JQuery Örnekler

The document provides various examples of using jQuery for different functionalities, such as displaying character count in a text box, managing checkboxes, changing background colors, and dynamically adding input fields and options to a select list. Each example includes HTML and jQuery code snippets demonstrating the implementation of the described functionality. The document serves as a practical guide for learning jQuery through hands-on coding examples.

Uploaded by

GÜLSÜM KAMER
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

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
1
<!DOCTYPE html>
0
<html>
1
<head>
1
<meta charset="utf-8">
1
<title> </title>
2
<script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
1
<script>
3
$(document).ready(function() {
1
$("#t1").on("keyup", function() {
4
var yazi = $("#t1").val();
1
$("#d1").html(yazi.length);
5
});
1
});
6
1
</script>
7
</head>
1
8
<body>
1
<input type="text" id="t1"><br>
9
<div id="d1">Buraya Eklenecek</div>
2
</body>
0
</html>
2
1
2
2
2
3
2
4
2
5
-Çıktı

2-Jquery kullanarak kaç karakter kaldığını yazdırma;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 var enfazla = $("#t1").attr("maxlength");
0 $("#t1").on("keyup", function() {
1 var yazi = $("#t1").val();
1 $("#d1").html(enfazla - yazi.length);
1 });
2 });
1
3 </script>
1 </head>
4
1 <body>
5 <input type="text" id="t1" maxlength="15"><br>
1 <div id="d1">Buraya Eklenecek</div>
6 </body>
1 </html>
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6

-Çıktı

3-Jquery kullanarak buton ile chekedbox kontrol etme;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9
1 $(document).ready(function() {
0 $("#b1").click(function() {
1 $("#chk").attr("checked", true);
1 });
1 $("#b2").click(function() {
2 $("#chk").attr("checked", false);
1 });
3
1
4
1
5
1
6
1
7
1
});
8
1
</script>
9
</head>
2
0
<body>
2
<input type="button" id="b1" value="İşaretle"><br>
1
<input type="button" id="b2" value="Kaldır"><br>
2
<input type="checkbox" id="chk"><br>
2
</body>
2
</html>
3
2
4
2
5
2
6
2
7
2
8

-Çı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 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 $("#chk").on("change", function() {
0 if ($(this).prop("checked") == true) {
1 $("#resim").slideDown(2000);
1 } else {
1 $("#resim").slideUp(2000);
2 }
1 });
3 });
1
4
1 </script>
5 </head>
1
6 <body>
1 <input type="checkbox" id="chk" checked>
7 <img src="resim/1.jpg" id="resim">
1 </body>
8 </html>
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9

-Çıktısı;

5-Jquery kullanarak color nesnesinden seçilen renk sayfanın


rengi olsun;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9
1 $(document).ready(function() {
0 $("#renk").on("change", function() {
1 var secilenrenk = $("#renk").val();
1 $("body").css("backgroundColor", secilenrenk);
1 });
2 });
1
3
1
4
1
5
1
6
1
7
1 </script>
8 </head>
1
9 <body>
2 <input type="color" id="renk">
0 </body>
2 </html>
1
2
2
2
3
2
4
2
5

-Çıktı
6-Jquery kullanarak 10 tane div nesnesi olsun tıkladığımız div
nesnesi renk nesnesinin secilen renginde olsun;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 $(".kutu").click(function() {
0 var secilenrenk = $("#renk").val();
1 $(this).css("backgroundColor", secilenrenk);
1 });
1 });
2
1
3 </script>
1 <style>
4 .kutu {
1 width: 200px;
5 height: 200px;
1 float: left;
6 border: #000 solid 2px;
1 margin: 3px;
7 }
1 </style>
8 </head>
1
9 <body>
2 <input type="color" id="renk"><br>
0 <div class="kutu"></div>
2 <div class="kutu"></div>
1 <div class="kutu"></div>
2 <div class="kutu"></div>
2 <div class="kutu"></div>
2 <div class="kutu"></div>
3 <div class="kutu"></div>
2 <div class="kutu"></div>
4 <div class="kutu"></div>
2 <div class="kutu"></div>
5 <div class="kutu"></div>
2 </body>
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
</html>
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5

-Çıktı
7.1-Jquery kullanarak text kutusu ekleme;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 var sayac = 1;
0 $("#b1").click(function() {
1 $("#d1").append('<input type=\' \'>');
1 sayac++;
1 });
2 });
1
3
1 </script>
4
1 </head>
5
1 <body>
6 <input type="button" id="b1" value="Ekle"><br>
1 <div id="d1"></div>
7 </body>
1 </html>
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8

-Çıktı

7.2-Jquery kullanarak text kutusu ekleme;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 var sayac = 1;
0 $("#b1").click(function() {
1 var tkutu = $("<input>", {
1 type: "text",
1 name: "t" + sayac,
2 id: "t" + sayac,
1 placeHolder: "Adınızı Giriniz"
3 });
1 $("#d1").append("<br>").append(tkutu);
4 sayac++;
1 });
5 });
1
6
1 </script>
7
1 </head>
8
1 <body>
9 <input type="button" id="b1" value="Ekle"><br>
2 <div id="d1"></div>
0 </body>
2 </html>
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4

-Çıktı

8-Jquery kullanarak select listesine öğe ekleme;

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 $("#b1").click(function() {
0 var o = $("<option>", {
1 value: $("#t1").val(),
1 text: $("#t1").val()
1 });
2 $("#iller").append(o);
1 });
3 });
1
4
1 </script>
5
1
6
1
7
1
8
1
9
2
0
2
1
2
</head>
2
2
<body>
3
<input type="button" id="b1" value="Ekle"><br>
2
<input type="text" id="t1">
4
<select id="iller">
2
<option value="0">Seçiniz</option>
5
</select>
2
</body>
6
</html>
2
7
2
8
2
9
3
0
3
1
3
2
3
3

-Çıktı
9-Jquery ile diziler;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 var gunler = ["Pazartesi", "Salı", "Çarşamba", "Perşembe",
0 "Cuma", "Cumartesi", "Pazar"];
1 $("#b1").click(function() {
1
1 for (var i = 0; i <gunler.length;i++)
2 {
1 var li=$("<li>",{
3 html:(gunler[i])
1 });
4 $("#liste").append(li);
1 }
5
1 });
6 });
1 </script>
7
1 </head>
8
1 <body>
9 <input type="button" id="b1" value="Ekle"><br>
2 <ul id="liste">
0 </ul>
2 </body>
1 </html>
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4

-Çıktı

10-Jquery kullanarak diziye değer ekleme;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4
5
6
7
8
9
1
0
1
1
<head>
1
<meta charset="utf-8">
2
<title> </title>
1
<script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
3
<script>
1
$(document).ready(function() {
4
var gunler = ["Pazartesi", "Salı", "Çarşamba"];
1
$("#b1").click(function() {
5
gunler.push($("#t1").val());
1
console.log(gunler);
6
});
1
});
7
1
</script>
8
1
</head>
9
2
<body>
0
<input type="button" id="b1" value="Ekle"><br>
2
<input type="text" id="t1">
1
</body>
2
</html>
2
2
3
2
4
2
5
2
6
2
7

-Çıktı
11-Jquery kullanarak diziden son değeri silip alma;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9
1 $(document).ready(function() {
0 var gunler = ["Pazartesi", "Salı", "Çarşamba"];
1 $("#b1").click(function() {
1 gunler.forEach(function(gun, index) {
1 console.log(gun);
2 console.log(index);
1 });
3 });
1 });
4
1 </script>
5
1 </head>
6
1 <body>
7 <input type="button" id="b1" value="Ekle"><br>
1 <input type="text" id="t1">
8 </body>
1 </html>
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9

-Çıktı

12-Jquery kullanarak nesne oluşturma;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>< title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9
1 $(document).ready(function() {
0 var ogrenci = {
1 ad: "Ali",
1 soyad: "Can",
1 yas: 15,
2 sinif: "10A"
1 }
3 $("#b1").click(function() {
1 console.log(ogrenci);
4
1
5
1
6
1
7
1
8
1
9
2 });
0 });
2
1 </script>
2
2 </head>
2
3 <body>
2 <input type="button" id="b1" value="Ekle"><br>
4 <input type="text" id="t1">
2 </body>
5 </html>
2
6
2
7
2
8
2
9
3
0
3
1

-Çıktı

14-Jquery kullanarak Matematik Kütüphanesinden rastgele


sayı seçme;

-Kod

1
2 <!DOCTYPE html>
3
4
5
6
7
8
9
1
0
1 <html>
1 <head>
1 <meta charset="utf-8">
2 <title> </title>
1 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
3 <script>
1 $(document).ready(function() {
4 $("#b1").click(function() {
1 var sayi = Math.random();
5 $("#d").html(sayi);
1 });
6 });
1
7 </script>
1
8 </head>
1
9 <body>
2 <input type="button" id="b1" value="Ekle"><br>
0 <div id="d"></div>
2 </body>
1 </html>
2
2
2
3
2
4
2
5
2
6

-Çıktı
15.1-Jquery kullanarak 0-100 arası rastgele sayı seçme;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9
1 $(document).ready(function() {
0 $("#b1").click(function() {
1 var sayi = Math.random() * 101;
1 $("#d").append("-").append(Math.floor(sayi));
1 });
2 });
1 </script>
3
1 </head>
4
1 <body>
5 <input type="button" id="b1" value="Ekle"><br>
1 <div id="d"></div>
6 </body>
1 </html>
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5

-Çıktı

15.2-Jquery kullanarak 70-100 arası rastgele sayı seçme;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1
0
1
1
1
2
1
3
1
$("#b1").click(function() {
4
var sayi = 70 + Math.random() * 31;
1
$("#d").append("-").append(Math.floor(sayi));
5
});
1
});
6
</script>
1
7
</head>
1
8
<body>
1
<input type="button" id="b1" value="Ekle"><br>
9
<div id="d"></div>
2
</body>
0
</html>
2
1
2
2
2
3
2
4
2
5

-Çıktı

16.1-Jquery kullanarak butona basınca sayfa


rengini rastgele değiştirme;
-Kod

1
2
3
4
5
6
7
8
9
1
0 <!DOCTYPE html>
1 <html>
1 <head>
1 <meta charset="utf-8">
2 <title> </title>
1 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
3 <script>
1 $(document).ready(function() {
4 $("#b1").click(function() {
1 var r = Math.floor(Math.random() * 256);
5 var g = Math.floor(Math.random() * 256);
1 var b = Math.floor(Math.random() * 256);
6 $("body").css("backgroundColor", "rgb(" + r + "," + g + "," + b
1 + ")")
7 });
1 });
8 </script>
1
9 </head>
2
0 <body>
2 <input type="button" id="b1" value="Ekle"><br>
1
2 </body>
2 </html>
2
3
2
4
2
5
2
6
2
7

-Çıktı
16.2-Jquery kullanarak kendi kendine sayfa
rengini rastgele değiştirme;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9
1 $(document).ready(function() {
0 setInterval(function() {
1 var r = Math.floor(Math.random() * 256);
1 var g = Math.floor(Math.random() * 256);
1 var b = Math.floor(Math.random() * 256);
2 $("body").css("backgroundColor", "rgb(" + r + "," + g + "," + b
1 + ")");
3 }, 500);
1
4 });
1 </script>
5
1 </head>
6
1 <body>
7 <input type="button" id="b1" value="Ekle"><br>
1 <div id="d"></div>
8 </body>
1 </html>
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8

17-Jquery kullanarak rastgele günün sözü uygulaması;

-Kod

1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title> </title>
7 <script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
8 <script>
9 $(document).ready(function() {
1 var sozler = ["Başkalarını memnun etmek için yaşarsan herkes
0 seni sever, kendin hariç.",
1 "Doğruluk sonsuzluğun güneşidir, nasıl olsa doğar.",
1 "Bir şeyi yapma gücümüzde saklı olan, bir şeyi yapmama
1 gücümüzde saklıdır.",
2 "Gerçek mutluluk, gecenin karanlığında güneşi pencerene
1 çizebilmektir.",
3 "Aşk bir kadının hayatının tümü, bir erkeğin hayatının ise bir
1 bölümüdür.",
4 "Dertlerinize gülmeyi öğrenirseniz gülecek şeyleriniz hiç
1 bitmez.",
5 "Allah merhalesinde akıl beygirine yol yoktur.",
1 "Yaratılanı hoş gör, Yaradan’dan ötürü."
6 ];
1 var sayi = Math.floor(Math.random() * sozler.length);
7 $("#soz").html(sozler[sayi]);
1 });
8 </script>
1
9
2
0
2
1
2
2
2
3
2 </head>
4
2 <body>
5 <div id="soz"></div>
2 </body>
6 </html>
2
7
2
8
2
9
3
0
3
1

-Çıktı

You might also like