jQuery .addClass() Metodu

".kutu" sınıflı "div" elementine ".yesil" css sınıfını eklyelim. Böylece, ".kutu" sınıflı elementin arkaplan rengi yeşil olmuş olacak.
Örnek 1 (jQuery)

        jQuery(document).ready(function () {
            //".kutu" sınıflı elemente tıklanıyor
            jQuery(".kutu").click(function () {
                //".kutu" sınıflı elemente ".yesil" css sınıfı ekleniyor
                jQuery(".kutu").addClass("yesil");
            });
        });

Örnek 1 (Css)

        .kutu{width:50px;height:50px;background:blue;}
        .yesil{background:green;}

Örnek 1 (Elementler)

    <div class="kutu"></div>

Örnek 1

---

".kutu" sınıflı "div" elementine ".font-18" css sınıfını eklyelim .
Örnek 2 (jQuery)

        jQuery(document).ready(function () {
            //".kutu" sınıflı elemente tıklanıyor
            jQuery(".kutu").click(function () {
                //".kutu" sınıflı elemente ".yesil" css sınıfı ekleniyor
                jQuery(".kutu").addClass("font-18");
            });
        });

Örnek 2 (Css)

        .kutu{width:200px;height:50px;background:red;color:#fff;}
        .font-18{font-size:18px;}

Örnek 2 (Elementler)

    <div class="kutu">ontedi.com</div>

Örnek 2

---

".yazi" sınıflı "span" elementine ".font-22", ".renk-kirmizi", ".alti-cizili" css sınıflarını eklyelim .
Örnek 3 (jQuery) (Birden fazla sınıf ekleme)

        jQuery(document).ready(function () {
            //"span.yazi" sınıflı elemente tıklanıyor
            jQuery("span.yazi").click(function () {
                //".kutu" sınıflı elemente ".yesil" css sınıfı ekleniyor
                jQuery("span.yazi").addClass("font-22").addClass("renk-kirmizi").addClass("alti-cizili");
                //Diğer bir kullanım örneği
                jQuery("span.yazi").addClass("font-22 renk-kirmizi alti-cizili");
            });
        });

Örnek 3 (Css)

        .font-22{font-size:22px;}
        .renk-kirmizi{color:red;}
        .alti-cizili{text-decoration:underline;}

Örnek 3 (Elementler)

    <span class="yazi">ontedi.com</span>

Örnek 3