Exploring jQuery .addClass()

The purpose of this fiddle is to explore the use of the jQuery .addClass method. <a href="http://api.jquery.com/addclass/" target="_blank">jQuery Add</a>

by psyne

HTML

<!-- Reset and Style our Base using the yui CSS base. http://yuilibrary.com/yui/docs/cssbase/ -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssbase/cssbase-min.css">

<!-- Sample Content to Plugin to Template -->
<h1>Exploring jQuery addClass</h1>
 
<p>The purpose of this fiddle is to explore the use of the jQuery .addClass method. <a href="http://api.jquery.com/addclass/" target="_blank">jQuery addClass</a></p><br />

<p id="summary_paragraph">Summary of jQuery addClass: <em>Adds the specified class(es) to each of the set of matched elements.</em></p>

<button id="clickToHide">Click Me to Hide the Image</button>

<hr />
 
<h1 id="headings">Headings</h1>
 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1 class="heading_to_clone">Heading to be cloned</h1>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
 
<h1 id="paragraph">Paragraph</h1>
 
<img style="width:250px;height:125px;float:right" src="http://lorempixel.com/250/125/" alt="CSS | God's Language" />
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
 
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat...

CSS

.danger{ 
    color: red;
}

.highlight{
    background: yellow;
}

.hidden{
    display: none;
}

.boldTitle{
    font-weight: bold;
}

JavaScript

$(document).ready(function() {
    //Lets select all the H1 elements and then add a class of 'boldTitle'
    $('h1').addClass('boldTitle');

    //Next lets make click a button hide all the images
    $('#clickToHide').click(function() {
        $('img').addClass('hidden');
    });

    //Finally lets add some html after the summary and add the class of danger and highlight summary paragraph
    $('<p>Danger Will Robinson</p>').insertAfter($('#summary_paragraph').addClass('highlight')).addClass('danger');

})