Sampler of jQuery Methods and Effects

The object of this page is to give you some jQuery experiments to try on your own, and to point you toward other resources that might give you even more ideas.

If you're still feeling a little shaky about jQuery and selectors, you might find it helpful to start by glancing at this tutorial: www.impressivewebs.com/jquery-tutorial-for-beginners/

Next, here's a list of jQuery ideas, with links to demos and some code samples. (You can find the code for all of the actions on this page on this Github repo.)

Hide Content

.hide()

If you click on the button below, this image will vanish.

Kellar and Lady

This is the code:

HTML

<img src="img/Kellar.jpg" id="hideID"/>
<button type="button" name="button" id="hideButton">HIDE</button>

jQuery

$("#hideButton").click(function(){
$("#hideID").hide();
});

Show Content

.show()

So what do you think will happen if you click on this button?

This is the code to reveal a previously hidden div:

HTML

<div id="showID"> [Your content here.] </div>
<button type="button" name="button" id="showButton">SHOW</button>

CSS

#showID {
display: none;
}

jQuery

$("#showButton").click(function(){
$("#showID").show(); });

Toggle Content On and Off

.toggle()

Maybe you want to toggle content on and off, which could be useful for things like:

HTML

<button type="button" name="button" id="toggleButton">TOGGLE</button> <div id="toggler" class="listHide">
<ul>
<li>Menus</li>
<li>Navigation</li>
<li>Tables of Contents</li>
</ul>
</div>

CSS

.listHide {
display: none;
}
 .listShow {
display: block;
}

jQuery

$("#toggleButton").click(function(){
$("#toggler").toggleClass("listShow");
});

Add a Class

.addClass()

Now perhaps you're tired of such drab surroundings and would like to add a little texture to the background...

Or maybe you'd like a different font color...

Or a fancy new font...

Or change everything at Once...

HTML

<button type="button" name="button" id="changeEverythingButton">Change EVERYTHING!</button>

CSS

.secondTexture {
background-image: url(../img/CementTileable03_Thumb.jpg);
}
 .secondFontColor {
color: yellow;
}
 .secondFont {
font-family: 'Permanent Marker', cursive;
font-size: 1.2rem;
font-weight: bold;
}

jQuery

$("#changeEverythingButton").click(function(){
$("body" ).addClass("secondTexture").addClass("secondFontColor").addClass("secondFont");
});

Reload the Page

location.reload();

Or maybe you're sorry about the mess your page has turned into and just want to reload it:

jQuery

$("#reloadButton").click(function(){
location.reload();
});

Slide Content on and Off Screen

You can also slide parts of the page on and off screen. There are many ways to do this; here's one that uses .toggleClass() and some fancy CSS:

 

This is the code:

HTML

<button type="button" name="button" id="sliderButton">Slide Me!</button>
<div class="slidingBox off">
  </div>

CSS

.slidingBox {
position: relative;
background: #0a0;
height: 250px;
margin-right: auto;
margin-top: 15px;
width: 250px;
z-index: 100;
left: 0;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

.slidingBox.off {
left: -350px;
}

jQuery

$('#sliderButton').click(function() {
$(".slidingBox").toggleClass('off');
});

Insert New HTML Content

.html()

You can use jQuery to find and replace HTML. Say you're not a fan of Charles Dickens, and would rather read Mark Twain:

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way--in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

HTML

<button type="button" name="button" id="changeMyAuthor">Change My Author</button>
<blockquote class="authorText"> [Original text here.] </blockquote>

CSS

.authorText {
font-family: 'Tangerine', cursive;
font-size: 2rem;
}
 .twainFont {
font-family: 'Architects Daughter', cursive;
font-size: 1.5rem;
}

jQuery

$("#changeMyAuthor").click(function() {
$(".authorText").html("[New Text Here]").addClass("twainFont");
});

More jQuery Resources