Takip Edin

JQUERY

Jquery HTML-CSS Metotları

Bu bölümde, Jquery’de HTML ve CSS’i değiştirmek için kullanılan

  • text( ),
  • val ( ),
  • attr( ),
  • addClass( ),
  • removeClass( ),
  • toggleClass( )

metotları ile alakalı örnekler yapılmaktadır.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery HTML & CSS Methods</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        .highlight {
            background-color: bisque;
        }

        .highlight2 {
            background-color: khaki;
        }
    </style>
</head>

<body>
    <h1>Jquery Helper Methods</h1>

    <ul>
        <li>Jquery Selectors</li>
        <li>Jquery Methods</li>
        <li>Jquery Animations</li>
    </ul>

    <img src="https://bit.ly/3oVUH4w">

    <br><br><br>
    <input type="text" id="helper" placeholder="Full Name" value="Jquery val fonksiyonu">
    <br>
    <br>
    <br>
    <br>

    <!--**********************************-->

    <input type="text" id="name" placeholder="Name">
    <br><br>
    <input type="text" id="surname" class="highlight2" placeholder="Surname">
    <br><br>
    <button id="btnClick" onclick="namesurname();">Send</button>

    <script>
        // text() Metodu
        console.log($("h1").text());
        console.log($("ul").text()); // Liste elemanları alt alta gelir.
        console.log($("li").text()); // Liste elemanları, aralarında boşluk olmayacak şekilde yan yana gelir.

        // text() set Metodu
        console.log($("h1").text("Yardımcı Metotlar"));

        // val() Metodu
        console.log($("#helper").val());

        // val() set Metodu
        console.log($("#helper").val("val fonksiyonu"));

        // attr() Metodu
        $("img").attr("width","400"); // Resmin genişliğini 400 px yapar.

        // onclick 
        function namesurname() {
            var name = $("#name").val();
            var surname = $("#surname").val();

            console.log(`Your fullname : ${name} ${surname}`);

            // addClass() Metodu
            // $("#name").addClass("highlight"); // Butona tıklandığında name input'unun arka plan rengi değişir.

            // toggleClass() Metodu
            $("#name").toggleClass("highlight"); // Butona her tıklandığında name input'unun arka plan rengi varsa siler yoksa arka plan rengi ekler.

            // removeClass() Metodu
            $("#surname").removeClass("highlight2") // Butona tıklandığında surname input'unun varsayılan arka plan rengini kaldırır.
        }


    </script>
</body>

</html>
Devamını oku

Popüler

error: Content is protected !!