RemoveClass AddClass When Page Load [duplicate]

Question

I have several <div> tags with different class names. When the page loads, I want to remove and add another class in a certain <div>, but somehow it doesn't work as expected.

LIVE CODE

HTML

<div class="redBG">
    <div class="yellowIcon"></div>
</div>   
<div class="greenBG">
    <div class="yellowIcon"></div>
</div> 

CSS

.redBG{
    background-color:red;
    width: 300px;
    height:30px;
    z-index: 1;
}
.yellowIcon{
    background-color:yellow;
    width: 20px;
    height:20px;
    cursor: pointer;
    z-index:20;
}
.greenBG{background-color:green}

.black{background-color:black}

JS

$('div, .redBG').load(
    function()
    {
        $(this).removeClass('.redBG').addClass('.black');
    }
);

Answer 1

In jQuery, .load is for loading data from a server and inserting it into an element: http://api.jquery.com/load/

Here's jQuery for the page load and changing the classes:

$(document).ready(function() {
  $('.redBG').removeClass('redBG').addClass('black');
});

Also, don't use a period for the class when using removeClass and addClass.

JSFiddle: http://jsfiddle.net/15jg5hbn/