jQuery .addClass() Examples

Welcome To jQuery !!
+_+
Example 1
View
Press the button !

Source
<style type="text/css">
    .css_test {
        margin-top:20px;
    }
    .css_test .border_radius {
        border-radius:50px;
    }
    .css_test .box_shadow {
        box-shadow:0 0 10px black;
    }
    .css_test .border {
        border:5px solid #444;
    }
    .css_test .padding {
        padding:10px;
    }
</style>

Press the button !<br><br>
<button type="button" onclick="$('.css_test img').addClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').addClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').addClass('border')">border</button>
<button type="button" onclick="$('.css_test img').addClass('padding')">padding</button>

<div class="css_test">
    <img src="http://cfile22.uf.tistory.com/image/231F2B38550B923C2D9DB7" />
</div>
jQuery

addClass( 'class name' )

Example 2
View
Press the button !


Source
<style type="text/css">
    .css_test {
        margin-top:20px;
    }
    .css_test img {
        margin-top:5px;
        width:160px;
    }
    .css_test .border_radius {
        border-radius:30px;
    }
    .css_test .box_shadow {
        box-shadow:0 0 5px black;
    }
    .css_test .border {
        border:3px solid #444;
    }
    .css_test .padding {
        padding:3px;
    }
</style>

Press the button !<br><br>
<button type="button" onclick="$('.css_test img').addClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').addClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').addClass('border')">border</button>
<button type="button" onclick="$('.css_test img').addClass('padding')">padding</button>

<div class="css_test">
    <img src="http://cfile29.uf.tistory.com/image/21714438550B923B421996" />
    <img src="http://cfile27.uf.tistory.com/image/246FDB38550B9237055E5B" />
    <img src="http://cfile10.uf.tistory.com/image/224D643854D74C4F158B11" /><br>
    <img src="http://cfile8.uf.tistory.com/image/213D5338550B92391D284F" />
    <img src="http://cfile9.uf.tistory.com/image/2523EC4F54D735163729D9" />
    <img src="http://cfile6.uf.tistory.com/image/217ADA3954D74FB622031B" />
</div>
jQuery .addClass() Documentation : https://api.jquery.com/addclass/