Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 302 Ders Programı
Sınava Gir

jQuery addClass() Metodu

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

Aşağıdaki örnek, bir sınıf özelliğinin farklı elemanlara nasıl eklenebileceğini göstermektedir:

$("button").click(function(){
  $("h1,h2,p").addClass("pink");
  $("div").addClass("xx");
});

Ayrıca, addClass() metodu içinde çok sayıda sınıf da belirleyebilirsiniz.

$("button").click(function(){
  $("#div1").addClass("xx pink");
});

addClass(): için örnek HTML5 kodumuzu dikkatle inceleyelim:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                              $("button").click(function(){
                                                $("#bol").addClass("xx pink");
                                                });
                              });
            </script>
        <style>
            .xx
            {
                font-weight:bold;
                font-size:xx-large;
            }
        .pink
        {
            color:pink;
        }
        </style>
    </head>
    <body>
        
        <div id="bol">O KADAR HIZLI DUSER KI MARTI</div>
        <div id="bolx">ASILI KALIR BEYAZLIGI HAVADA </div>
        <br>
        <button>ILK SATIRA SINIFLARI EKLE</button>
        
    </body>
</html>

Burada, İLK SATIRA SINIFLARI EKLE düğmesine tıklayınca xx ve pink ile belirlenmiş CSS özellikleri ilk satıra uygulanacak ve sayfa aşağıdaki şekle dönüşecektir.

Sınava Gir