Jquery Örnekleri


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- yazilimbilisim.net</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      
    </head>
    <body>
        <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h1>Jquery Örnekleri</h1>
            </div> 
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h1 class="alert-info" id="zemin">mesaj</h1>
            </div>
        </div>
        
        
        <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
                /*
                id değeri zemin olan nesnenin 
                içine merhaba dünya yaz
                */
                $('#zemin').html('merhaba dünya');           
            });
        </script>
        </div>
    </body>
</html>

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

<!doctype html>

<head>

<title>Jquery Örnekleri- yazilimbilisim.net</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

<h1 class="alert-info" id="zemin">mesaj</h1>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

/*

id değeri zemin olan nesnenin

içine merhaba dünya yaz

*/

$('#zemin').html('merhaba dünya');

});

</script>

</div>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- yazilimbilisim.net</title>
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h1>Jquery Örnekleri</h1>
            </div> 
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <button class="btn btn-primary" id="uyari">Uyarı Yap</button>
            </div>
        </div>
       <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
                 
                //id değeri uyarı olan nesneye tıklandığında
                //ekrana merhaba dünya uyarısını verme
                $("#uyari").on('click',function(){
                    window.alert("merhaba dünya");
                });
            });
        </script>
        </div>
    </body>
</html>

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

<!doctype html>

<head>

<title>Jquery Örnekleri- yazilimbilisim.net</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

<button class="btn btn-primary" id="uyari">Uyarı Yap</button>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//id değeri uyarı olan nesneye tıklandığında

//ekrana merhaba dünya uyarısını verme

$("#uyari").on('click',function(){

window.alert("merhaba dünya");

});

</script>

</div>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                    <label for="mesaj">Mesaj:</label>
                    <input type="text" class="form-control" id="mesaj" placeholder="Mesajı Girin">
                  </div>
                  <div class="form-group">
                      <button class="btn btn-primary" id="uyari">Mesajı Yaz</button>
                  </div>
                </div>
            </div>
        </div>
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
                 //id değeri uyarı olan nesneye tıklandığında
                //ekrana merhaba dünya uyarısını verme
                $("#uyari").on('click',function(){
                    
                    //value değeri olan nesnelerin okumak için val() metodu kullanılır.
                    var mesaj=$("#mesaj").val();
                    window.alert(mesaj);
                });         
            });
        </script>
        
    </body>
</html>

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

46

<!doctype html>

<head>

<title>Jquery Örnekleri</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

<label for="mesaj">Mesaj:</label>

</div>

<button class="btn btn-primary" id="uyari">Mesajı Yaz</button>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//id değeri uyarı olan nesneye tıklandığında

//ekrana merhaba dünya uyarısını verme

$("#uyari").on('click',function(){

//value değeri olan nesnelerin okumak için val() metodu kullanılır.

var mesaj=$("#mesaj").val();

window.alert(mesaj);

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                    <label for="mesaj">Mesaj:</label>
                    <input type="text" class="form-control" id="mesaj" placeholder="Mesajı Girin">
                  </div>
                  <div class="form-group">
                      <button class="btn btn-primary" id="uyari">Mesajı Yaz</button>
                  </div>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h2 id="mesaj-yaz"></h2>
                </div>
            </div>
        </div>
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
                 //id değeri uyarı olan nesneye tıklandığında
                //ekrana merhaba dünya uyarısını verme
                $("#uyari").on('click',function(){
                    
                    //value değeri olan nesnelerin okumak için val() metodu kullanılır.
                    var mesaj=$("#mesaj").val();
                    //açılıp kapanan etiketlerin içine değer girmek için
                    //html metodu kullanılır.
                    $("#mesaj-yaz").html(mesaj);
                   
                });         
            });
        </script>
        
    </body>
</html>

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

46

47

48

49

50

51

52

<!doctype html>

<head>

<title>Jquery Örnekleri</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

<label for="mesaj">Mesaj:</label>

</div>

<button class="btn btn-primary" id="uyari">Mesajı Yaz</button>

</div>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//id değeri uyarı olan nesneye tıklandığında

//ekrana merhaba dünya uyarısını verme

$("#uyari").on('click',function(){

//value değeri olan nesnelerin okumak için val() metodu kullanılır.

var mesaj=$("#mesaj").val();

//açılıp kapanan etiketlerin içine değer girmek için

//html metodu kullanılır.

$("#mesaj-yaz").html(mesaj);

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
        </div>
         <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
             $(document).ready(function() {
                 $('body').css({
                     'background':'#cdfadd'
                 });
         });
        </script>
    </body>
</html>

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>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

</div>

src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

//belge yüklendikten sonra çalıştırılacağını söyler

$(document).ready(function() {

$('body').css({

'background':'#cdfadd'

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <ul id="parca-listesi">
                        <li>Anakart</li>
                        <li>Harddisk</li>
                        <li>Ram</li>
                        <li>İşlemci</li>
                        <li>Ekran Kartı</li>
                    </ul>
                </div>
            </div>
        </div>
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
               
                //css seçim yöntemi ile seçme işlemi yapılır.
                $("#parca-listesi li").css({
                    'background':'#F04903',
                    'margin':'3px'
                });
            });
        </script>
        
    </body>
</html>

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

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

<li>Anakart</li>

<li>Harddisk</li>

<li>İşlemci</li>

<li>Ekran Kartı</li>

</ul>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//css seçim yöntemi ile seçme işlemi yapılır.

$("#parca-listesi li").css({

'background':'#F04903',

'margin':'3px'

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="text-center">1</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="text-center">2</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="text-center">3</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="text-center">4</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="text-center">5</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="text-center">6</h1>
                </div>
            </div>
        </div>
        
        
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
               
                //class seçici ile ekrandaki tüm .kutu h1 nesnelerini seçtip
                // zemin rengini ve yazı rengini değiştirdik.
                $(".kutu h1 ").css({
                    'background':'#F04903',
                    'color':'#fff',
                    'padding':'5px'
                });
            });
        </script>
    </body>
</html>

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

46

47

48

49

50

51

52

53

54

55

56

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//class seçici ile ekrandaki tüm .kutu h1 nesnelerini seçtip

// zemin rengini ve yazı rengini değiştirdik.

$(".kutu h1 ").css({

'background':'#F04903',

'color':'#fff',

'padding':'5px'

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">1</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">2</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">3</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">4</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">5</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">6</h1>
                </div>
            </div>
            <div class="row">
               <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 id="yaz"></h1>
                </div> 
            </div>
        </div>
        
        
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
               
                //on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
                $(".kutu h1 ").on('click',function(){
                    
                    // div içindeki değerleri okumak için html() metodu kullanılır. 
                    //$(this) aktif olan nesneyi ifade eder.
                    //$(this) ile tıkladığımız nesneyi seçeriz.
                    var deger=$(this).html();
                    
                    //deger değişkenindeki yazıyı #yaz nesnesinin içine yazarız.
                    $("#yaz").html(deger);
                    
                });
            });
        </script>
    </body>
</html>

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

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..

$(".kutu h1 ").on('click',function(){

// div içindeki değerleri okumak için html() metodu kullanılır.

//$(this) aktif olan nesneyi ifade eder.

//$(this) ile tıkladığımız nesneyi seçeriz.

var deger=$(this).html();

//deger değişkenindeki yazıyı #yaz nesnesinin içine yazarız.

$("#yaz").html(deger);

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">10</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">20</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">30</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">40</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">50</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">60</h1>
                </div>
            </div>
            <div class="row">
               <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 id="yaz"></h1>
                </div> 
            </div>
        </div>
        
        
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
               
                //on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
                $(".kutu h1 ").on('click',function(){
                    
                    // div içindeki değerleri okumak için html() metodu kullanılır. 
                    //$(this) aktif olan nesneyi ifade eder.
                    //$(this) ile tıkladığımız nesneyi seçeriz.
                    var sayi1=Number($(this).html());
                    var sayi2=Number($("#yaz").html());
                    
                    //deger değişkenindeki yazıyı #yaz nesnesinin içine yazarız.
                    $("#yaz").html(sayi1+sayi2);
                    
                });
            });
        </script>
    </body>
</html>

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

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..

$(".kutu h1 ").on('click',function(){

// div içindeki değerleri okumak için html() metodu kullanılır.

//$(this) aktif olan nesneyi ifade eder.

//$(this) ile tıkladığımız nesneyi seçeriz.

var sayi1=Number($(this).html());

var sayi2=Number($("#yaz").html());

//deger değişkenindeki yazıyı #yaz nesnesinin içine yazarız.

$("#yaz").html(sayi1+sayi2);

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">10</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">20</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">30</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">40</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">50</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">60</h1>
                </div>
            </div>
            <div class="row">
                <div class="checkbox">
                  <label>
                    <input type="radio" id="arti" checked name="isaret"  value="">
                        Topla
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="radio" id="eksi" name="isaret"  value="">
                        Çıkar
                  </label>
                </div>
               <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 id="yaz"></h1>
                </div> 
            </div>
        </div>
        
        
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
               
                //on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
                $(".kutu h1 ").on('click',function(){
                    
                    // div içindeki değerleri okumak için html() metodu kullanılır. 
                    //$(this) aktif olan nesneyi ifade eder.
                    //$(this) ile tıkladığımız nesneyi seçeriz.
                    var sayi1=Number($(this).html());
                    var sayi2=Number($("#yaz").html());
                   
                    /*   if($("#arti:checked").length==1) alternatif*/
 
                    if($("#arti").prop('checked')==true)  
                        $("#yaz").html(sayi1+sayi2);
                    else
                       $("#yaz").html(sayi2-sayi1); 
                    
                });
            });
        </script>
    </body>
</html>

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

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<label>

Topla

</label>

</div>

<label>

Çıkar

</label>

</div>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..

$(".kutu h1 ").on('click',function(){

// div içindeki değerleri okumak için html() metodu kullanılır.

//$(this) aktif olan nesneyi ifade eder.

//$(this) ile tıkladığımız nesneyi seçeriz.

var sayi1=Number($(this).html());

var sayi2=Number($("#yaz").html());

/* if($("#arti:checked").length==1) alternatif*/

if($("#arti").prop('checked')==true)

$("#yaz").html(sayi1+sayi2);

else

$("#yaz").html(sayi2-sayi1);

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">10</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">20</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">30</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">40</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">50</h1>
                </div>
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 class="alert-info text-center">60</h1>
                </div>
            </div>
        </div>
        
        
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
               
                //on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
                $(".kutu h1 ").on('click',function(){
                    
                     //tıklanan nesneyi seçme   
                    $(this).css({
                        'background':'#D33257',
                        'color':'#fff'
                    });
                    
                });
            });
        </script>
    </body>
</html>

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

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..

$(".kutu h1 ").on('click',function(){

//tıklanan nesneyi seçme

$(this).css({

'background':'#D33257',

'color':'#fff'

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="kutu col-md-3 col-sm-12 col-xs-12">
                   <div class="form-group">
                        <textarea id="mesaj" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="row">
               <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 id="yaz"></h1>
                </div> 
            </div>
        </div>
        
        
         <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(function(){
               
                //on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
                $("#mesaj").on('keyup',function(){
                    
                  $("#yaz").html($(this).val().length);
                    
                });
            });
        </script>
    </body>
</html>

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

46

47

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

</div>

</div>

//belge yüklendikten sonra çalıştırılacağını söyler

$(function(){

//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..

$("#mesaj").on('keyup',function(){

$("#yaz").html($(this).val().length);

});

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
        </div>
         <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
            $(document).ready(function() {

              setInterval(renkDegistir, 1000); 
             });
       
        function renkDegistir(){
            
            var renk='rgb('+sayiUret(255)+','+sayiUret(255)+','+sayiUret(255)+')';
            $('body').css({
                 'background':renk
             });
        }
        function sayiUret(maks){
          return Math.floor(Math.random()*maks);
        }
        </script>
    </body>
</html>

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

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

</div>

src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

//belge yüklendikten sonra çalıştırılacağını söyler

$(document).ready(function() {

setInterval(renkDegistir, 1000);

});

function renkDegistir(){

var renk='rgb('+sayiUret(255)+','+sayiUret(255)+','+sayiUret(255)+')';

$('body').css({

'background':renk

});

}

function sayiUret(maks){

return Math.floor(Math.random()*maks);

}

</script>

</body>

</html>


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jquery Örnekleri- Yazılım Bilişim</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Jquery Örnekleri</h1>
                </div> 
            </div>
            <div class="row">
                <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <button id="tikla" class="btn btn-info">Tıkla</button>
                </div>
            </div>
            <div class="row">
               <div class="kutu col-md-3 col-sm-4 col-xs-4">
                    <h1 id="yaz"></h1>
                </div> 
            </div>
        </div>
        
        
         <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        <script>
            //belge yüklendikten sonra çalıştırılacağını söyler
             $(document).ready(function() {
            $("#tikla").click(function(event){
                
                //doğrudan bir nesne metin olarak yükleme
                //genellikle html sayfaları yüklemek için kullanılır
              // $('#yaz').load('http://ip.jsontest.com/');
                
                //JSON formatında okuma için kullanılır.
                //{ip: "78.xxx.xxx.xxx"} gelen verinin yapısı
               $.get('http://ip.jsontest.com/',function(gelen){

                   $('#yaz').html(gelen.ip);
                   
               });
                
            });
         });
        </script>
    </body>
</html>

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

46

47

48

49

50

51

52

53

54

55

<!doctype html>

<head>

<title>Jquery Örnekleri- Yazılım Bilişim</title>

</head>

<body>

<h1>Jquery Örnekleri</h1>

</div>

<button id="tikla" class="btn btn-info">Tıkla</button>

</div>

</div>

src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

//belge yüklendikten sonra çalıştırılacağını söyler

$(document).ready(function() {

$("#tikla").click(function(event){

//doğrudan bir nesne metin olarak yükleme

//genellikle html sayfaları yüklemek için kullanılır

// $('#yaz').load('http://ip.jsontest.com/');

//JSON formatında okuma için kullanılır.

//{ip: "78.xxx.xxx.xxx"} gelen verinin yapısı

$.get('http://ip.jsontest.com/',function(gelen){

$('#yaz').html(gelen.ip);

});

</script>

</body>

</html>

Jquery Örnekleri

Site içindeki diğer Jquery Örnekleri