jQuery 101: Basic examples

Simple examples of selecting based on class and id of elements, binding a function to the click event, and changing css through jQuery.

by webdevem

HTML

<div id="DivOne" class="oddNum">One</div>
<div id="DivTwo" class="evenNum">Two</div>
<div id="DivThree" class="oddNum">Three</div>
<button id="btnOne">Reset odd numbers</button>
<button id="btnTwo">Reset even numbers</button>

CSS

body {
   background-color: #eef; 
   padding: 5px;   
}

JavaScript

$('.oddNum').css('background-color', '#DEA');
$('#DivTwo').css('background-color', '#FCC');

$('#btnOne').click(function() {
    // Action goes here
    $('.oddNum').css('background-color', '#FFF');
});
$('#btnTwo').click(function() {
    // Action goes here
    $('#DivTwo').css('background-color', '#FFF');
});