<< other stuff

jQuery Demo: Basic Content Changes

Last updated: 22 Mar 2012

Note: These examples are written with/for jQuery 1.7. Examples 2 also makes use of jQuery UI 1.8.16.


Example 1: Modifying Content - Moody Text


HTML Code <div class="exampleBox" id="moodyText"> This text, strangely, is feeling rather <strong>happy</strong>; it's as <strong>happy</strong> as a lifeless block of text could possibly be. </div> <input type="button" onclick="jsMoodSwing();" value="Press me"> <input type="button" onclick="jqMoodSwing();" value="Press me too"> JavaScript Code function jsMoodSwing() { var moodyText = document.getElementById("moodyText"); moodyText.innerHTML = moodyText.innerHTML.toLowerCase().indexOf("happy") != -1 ? moodyText.innerHTML.replace(/happy/gi, "upset") : moodyText.innerHTML.replace(/upset/gi, "happy"); } JavaScript + jQuery Code function jqMoodSwing() { $('#moodyText').html( $('#moodyText').html().toLowerCase().indexOf('happy') != -1 ? $('#moodyText').html().replace(/happy/gi, 'upset') : $('#moodyText').html().replace(/upset/gi, 'happy') ); }

Live Examples

This text, strangely, is feeling rather happy; it's as happy as a lifeless block of text could possibly be.
Click either of the buttons below to give the above text a mood swing:
Plain JavaScript JavaScript + jQuery

For this simple text manipulation example, the code with/without jQuery are fairly similar. The primary difference is the use of $() method in the jQuery case instead of document.getElementById(). In both cases the HTML code of the moodyText div is checked for the existence of "happy", then using the ternary operator (?:), replaced with either "upset" or "happy".

The jQuery method basically simplifies this slightly by allowing the selecting of elements using a syntax similar to CSS's selector syntax. In this case, '#moodyText' selects the element with id "moodyText".

By the way, you may have noticed that I used double quotes for the JavaScript example and single quotes for the jQuery example. I am simply following what seems to me like the popular convention within the respective developer communities. It is perfectly fine to switch between the two, but try not to mix and match as that makes the code slightly more confusing to read.

Example 2: Class Toggling - Pokéball


HTML Code <div id="pokeballBox" class="exampleBox" style=""> <img id="pokeball" src="jquery_demo_content_changes/pokeball.png" class=""> </div> <input type="button" onclick="jsPokeball();" value="Press me"> <input type="button" onclick="jqPokeball();" value="Press me"> CSS Code #pokeballBox { position: relative; text-align: right; height: 100px; } #pokeball { width: 48px; height: 48px; position: absolute; bottom: 0; right: 0; } #pokeball.big { width: 72px; height: 72px; } JavaScript Code function jsPokeball() { var pokeball = document.getElementById("pokeball"); pokeball.className = pokeball.className == "" ? "big" : ""; } JavaScript + jQuery Code function jqPokeball() { $('#pokeball').toggleClass('big', 500); }

Live Examples

Click either of these buttons to change the size of the pokéball.
Plain JavaScript JavaScript + jQuery

In this example we can more clearly see the benefit of using jQuery on top of JavaScript.

Notice that while it is fairly straightforward in vanilla JavaScript to change an element's class, jQuery actually comes with a method to toggle the class.

Also, while looking at the code gives the impression that both are doing essentially the same — switching classes — the jQuery example actually animates between the class styles. This is done simply by importing the jQuery UI library and calling toggleClass() with the additional duration argument. The same effect could be achieved with JavaScript but not without quite a bit extra code, and therein lies the attractiveness of using jQuery in addition to native JavaScript.

An alternative method for setting the click event to an element can be seen in this page's source. View source and look under where the pokéball image is.

Example 3: Content and Class Toggling - Hello Dotty World!


HTML Code <div class="exampleBox" id="hello"> Hello, World. </div> <input type="button" onclick="jsDottify();" value="Press me"> <input type="button" onclick="jqDottify();" value="Press me"> CSS Code @font-face{ font-family: "DOTMATRI"; src: url('jquery_demo_content_changes/DOTMATRI.eot'); src: local("Dot Matrix"), url('jquery_demo_content_changes/DOTMATRI.TTF') format("truetype"); } #hello { font-size: 3em; /* Set to make the dots in the font more obvious. */ } .dotty { font-family: 'DOTMATRI'; } JavaScript Code function jsDottify() { var hello = document.getElementById("hello"); hello.innerHTML = hello.innerHTML.toLowerCase().indexOf("dotty") != -1 ? hello.innerHTML.replace(/dotty world/gi, "World").replace(/!/g, ".") : hello.innerHTML.replace(/world/gi, "Dotty World").replace(/\./g, "!"); if (hello.className.indexOf("dotty") != -1) { hello.className = hello.className.replace(" dotty", ""); } else { hello.className += " dotty"; } } JavaScript + jQuery Code function jqDottify() { $('#hello').toggleClass('dotty').text( $('#hello').text().toLowerCase().indexOf('dotty') != -1 ? $('#hello').text().replace(/dotty world/gi, "World").replace(/!/g, ".") : $('#hello').text().replace(/world/gi, "Dotty World").replace(/\./g, "!") ); }

Live Examples

Hello, World.
Click either of these buttons to switch the above between regular and dotty. (Effect may take some time.)
Plain JavaScript JavaScript + jQuery

The jQuery library allows the developer to chain together many methods to manipulate the same object, like in this case with .toggleClass() and .text().

In the JavaScript example, we need to check className and append or remove the dotty class because the element containing the text also has another class exampleBox (the class I use to give my examples the light green border). Contrast this with the JavaScript class toggling in example 2, which is simpler due to only having one class. jQuery's .toggleClass() removes the need for this checking.

You may notice some lag due to the use of @font-face in this example to load the Dot Matrix font. There are probably ways you could mitigate the lag before a new font appears but since that is beyond the scope of this writeup I'm not using them here.

Final Notes

jQuery simplifies the writing of several scripting features on webpages, as in example 2 wherein a class change can be animated simply by importing a library.

While native JavaScript may be adequate for features of simple-to-medium complexity, as the complexity required increases, the case for using jQuery or some other JavaScript library becomes increasingly stronger.

jQuery's strength lies not only in the simplifying of development tasks, but also in its ubiquity on the web (note: at the time of writing I am having difficulty finding a source to back this claim but it seems to me at least that jQuery is incredibly common). This means that learning and using jQuery will make it easier to understand the source code of many websites — for example, Microsoft, Google and IBM all use jQuery — and that's always a good thing.

References / Extra Reading

jQuery API

This page and the included examples were created by Quentin Pan (www.qponstuff.com).

Assets by the following were used: