jquery Button Onclick Kullanımı ve Örnekleri

Aşağıdaki iki örnekte jquery ile buton tıklama işlemi yapılmıştır.

Örnek 1: İlk olarak basit bir örnekle başlayalım.


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tasarimkodlama.com</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="btn">Uyarı Yap</button>

    <script>
        
        //butonu seçip, on metodu ile tıklama olayını tetikliyoruz.
        $("#btn").on("click",function(){

            //çalıştırılacak kodlar
            alert("Butona tıkladığınız...")
        })

    </script>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>tasarimkodlama.com</title>

</head>

<body>

<button id="btn">Uyarı Yap</button>

//butonu seçip, on metodu ile tıklama olayını tetikliyoruz.

$("#btn").on("click",function(){

//çalıştırılacak kodlar

alert("Butona tıkladığınız...")

})

</script>

</body>

</html>

Örnek 2: Bu örnekte butonun içindeki değer this anahtarı ile gönderilerek div içinde sayılar toplanmıştır.

jquery Button Onclick Kullanımı ve Örnekleri


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #sonuc{
            width: 300px;
            height: 250px;
            font-size:2rem;
            background-color: yellow;
        }
    </style>
</head>
<body>

    <button id="btn1" class="hesapla">1</button>
    <button id="btn2" class="hesapla">10</button>
    <button id="btn3" class="hesapla">10</button>
    <button id="btn4" class="hesapla">100</button>
    <button id="btn5" class="hesapla">1000</button>
    <div id="sonuc">0</div>


    <script>

    $(".hesapla").on("click",function(){ 
       var sayi = Number($(this).text()) + Number($("#sonuc").text()) 
       $("#sonuc").text(sayi)
    })

    $("#sonuc").on("click",function(){
        $(this).text(0)
    })


    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#sonuc{

width: 300px;

height: 250px;

font-size:2rem;

background-color: yellow;

}

</style>

</head>

<body>

$(".hesapla").on("click",function(){

var sayi = Number($(this).text()) + Number($("#sonuc").text())

$("#sonuc").text(sayi)

})

$("#sonuc").on("click",function(){

$(this).text(0)

})

</script>

</body>

</html>

Örnek 3: Bootstrap tasarım ile birlikte jquery buttonlara tıklandığında panel gösterip gizleyen örnek uygulama


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <title>Çalışma</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-2">
                <button id="btn1" class="btn btn-warning">Panel 1</button>
                <button id="btn2" class="btn btn-warning">Panel 2</button>
                <button id="btn3" class="btn btn-warning">Panel 3</button>
                <button id="btn4" class="btn btn-warning">Panel 4</button>
            </div>
        </div>
        <div class="row">
            <div id="panel1" class="panel col-12 alert alert-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>
            <div id="panel2" class="panel col-12 alert alert-success">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>
            <div id="panel3" class="panel col-12 alert alert-warning">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>
            <div id="panel4" class="panel col-12 alert alert-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>
        </div>
    </div>

    <script>

        //panelleri gizle
        $(".panel").hide()

        //btn1 tıklanınca
        $("#btn1").on("click",function(){

            //önce açık panelleri gizle
            $(".panel").hide()
            //panel1 aç
            $("#panel1").show()
        })

        //btn2 tıklanınca
        $("#btn2").on("click",function(){

            //önce açık panelleri gizle
            $(".panel").hide()
            //panel2 aç
            $("#panel2").show()
        })

        //btn3 tıklanınca
        $("#btn3").on("click",function(){

            //önce açık panelleri gizle
            $(".panel").hide()
            //panel3 aç
            $("#panel3").show()
        })

        //btn4 tıklanınca
        $("#btn4").on("click",function(){

            //önce açık panelleri gizle
            $(".panel").hide()
            //panel4 aç
            $("#panel4").show()
        })


    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

<!doctype html>

<head>

<title>Çalışma</title>

</head>

<body>

<button id="btn1" class="btn btn-warning">Panel 1</button>

<button id="btn2" class="btn btn-warning">Panel 2</button>

<button id="btn3" class="btn btn-warning">Panel 3</button>

<button id="btn4" class="btn btn-warning">Panel 4</button>

</div>

<div id="panel1" class="panel col-12 alert alert-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>

<div id="panel2" class="panel col-12 alert alert-success">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>

<div id="panel3" class="panel col-12 alert alert-warning">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>

<div id="panel4" class="panel col-12 alert alert-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta mollitia est accusamus incidunt reiciendis laborum? Alias minus ipsum quas inventore vero expedita cum ab laborum, similique aperiam dolor provident voluptate!</div>

</div>

//panelleri gizle

$(".panel").hide()

//btn1 tıklanınca

$("#btn1").on("click",function(){

//önce açık panelleri gizle

$(".panel").hide()

//panel1 aç

$("#panel1").show()

})

//btn2 tıklanınca

$("#btn2").on("click",function(){

//önce açık panelleri gizle

$(".panel").hide()

//panel2 aç

$("#panel2").show()

})

//btn3 tıklanınca

$("#btn3").on("click",function(){

//önce açık panelleri gizle

$(".panel").hide()

//panel3 aç

$("#panel3").show()

})

//btn4 tıklanınca

$("#btn4").on("click",function(){

//önce açık panelleri gizle

$(".panel").hide()

//panel4 aç

$("#panel4").show()

})

</script>

<!--

-->

</body>

</html>

jquery Button Onclick Kullanımı ve Örnekleri

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap