.addClass()

.addClass(className) Dönen Değer : JQuery Nesnesi

Açıklama : Seçilen eleman(lar)a belirtilen sınıf(lar)ı ekler.

.addClass(className)

className
Tip : String
Seçilen elemanların her birine bir ya da boşlukla ayrılmış şekilde yazılmış birden fazla sınıf adı eklenir.

.addClass(classNames)

classNames
Tip : Array
Seçilen elemanların her birine bir array içinde verilen sınıf adları eklenir.

.addClass(function)

function
Tip : Function( Integer index, String currentClassName ) => String
Bir ya da boşlukla ayrılmış birden fazla sınıf adı içeren bir String değer dönen fonksiyondur. index değeri fonksiyon içinde seçilmiş elemanın index numarası olarak kullanılabilir, currentClassName ise seçilmiş elemanın o anki class değeri olarak fonksiyon içinde kullanılabilir. Ayrıca tabi ki this fonksiyon içinde o anda işlenmekte olan elemanı ifade eder.

.addClass(function)

function
Tip : Function( Integer index, String currentClassName ) => String | Array
Bir ya da boşlukla ayrılmış birden fazla sınıf adı içeren bir String değer ya da class adlarının olduğu bir array dönen fonksiyondur. index değeri fonksiyon içinde seçilmiş elemanın index numarası olarak kullanılabilir, currentClassName ise seçilmiş elemanın o anki class değeri olarak fonksiyon içinde kullanılabilir. Ayrıca tabi ki this fonksiyon içinde o anda işlenmekte olan elemanı ifade eder.

Dikkat edilmesi gereken nokta, bu metod bir class değerini değiştirmez. Basit şekilde , verilen sınıfları elemana ekler. Daha önceden elemanda mevcut olan sınıflar olsa da yine ekler.

Birden fazla sınıf adı değiştirmek için boşluklarla ayrılmış sınıf adları kullanılabilir.

$( "p" ).addClass( "myClass yourClass" );

Bu metod sıklıkla removeClass() metodu ile birlikte elemanların sınıf değerlerini bir değerden diğerine değiştirmek için kullanılır.

$("p").removeClass("myClass noClass").addClass("yourClass");

Burada myClass ve noClass sınıf isimleri elemandan silinir ve yourClass sınıfı elemana eklenir.

Fonksiyon kullanan addClass() metodu kullanımı da şöyle :

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

Verilen numarasız listede ilk elemana item-0 sınıfı, ikinciye item-1 sınıfı ekler vs.

Örnekler :

Seçilen eleman(lar)a selected sınıfını ekler.

<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <script>
            $(function() {
                $("p").last().addClass("selected");
            });
        </script>
        <style>
            p {
                margin: 8px;
                font-size: 16px;
            }
            .selected {
                color: blue;
            }
            .highlight {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <p>Merhaba</p>
        <p>ve</p>
        <p>Hoşçakal</p>
    </body>
</html>

Merhaba

Hoşçakal

Seçilen eleman(lar)a selected ve highlight sınıflarını ekler.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <script>
            $(function() {
                $("p").last().addClass("selected highlight");
            });
        </script>
        <style>
            p {
                margin: 8px;
                font-size: 16px;
            }
            .selected {
                color: red;
            }
            .highlight {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <p>Merhaba</p>
        <p>ve</p>
        <p>Hoşçakal</p>
    </body>
</html>

Merhaba

Hoşçakal

Seçilen eleman(lar)a selected ve highlight sınıflarını array olarak verilen parametre ile ekler.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <script>
            $(function() {
                $("p").last().addClass(["selected", "highlight"]);
            });
        </script>
        <style>
            p {
                margin: 8px;
                font-size: 16px;
            }
            .selected {
                color: red;
            }
            .highlight {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <p>Merhaba</p>
        <p>ve</p>
        <p>Hoşçakal</p>
    </body>
</html>

Merhaba

Hoşçakal

.addClass() metodu parametresinde bir fonksiyon vererek , bir <div> elemanının mevcut "red" sınıfına "green" sınıfı eklenmesi

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <script>
            $(function() {
                $( "div" ).addClass(function( index, currentClass ) {
                    var addedClass;
                    
                    if ( currentClass === "red" ) {
                        addedClass = "green";
                        $( "p" ).text( "Bir tane yeşil div var" );
                    }
                    
                    return addedClass;
                });
            });
        </script>
        <style>
            .red {
                background: red;
            }
            .red.green {
                background: green;
            }
        </style>
    </head>
    <body>
        <div>Bu eleman beyaz arkaplan rengi</div>
        <div class="red">
            Bu eleman sayfa yüklendikten sonra jQuery kod ile "green" ve "red" sınıflarının ikisine de sahip olacağı 
            için yeşil arkaplan rengi olacaktır. Eğer kırmızı ise addClass() metodu çalışmamıştır.
        </div>
        <div>Bu eleman beyaz arkaplan rengi</div>
        <p>Sıfır tane yeşil div yok</p>
    </body>
</html>

Bu eleman beyaz arkaplan rengi

Bu eleman sayfa yüklendikten sonra jQuery kod ile "green" ve "red" sınıflarının ikisine de sahip olacağı için yeşil arkaplan rengi olacaktır. Eğer kırmızı ise addClass() metodu çalışmamıştır.

Bu eleman beyaz arkaplan rengi

Sıfır tane yeşil div yok