jQuery Tutorials for Beginners

Lesson 5: Adding and Removing CSS Classes With jQuery

Niall Doherty — Tue, 28 Jun 2011 14:59:40 +0000

In this tutorial, we’ll see how you can easily add and remove CSS classes with jQuery.

Click here to view the embedded video.

Video highlights

[0:47] The setup (grab lorem ipsum from here)
[1:24] The directory structure we’re using
[2:00] Going through our starting source code
[3:47] What comes first, .css files or .js files? (detailed explanation here)
[4:19] Writing our CSS code (simple p.highlight class)
[5:30] On click, add the highlight class to every paragraph on the page
[6:15] Highlighting only the second paragraph on the page (with some trial and error)
[7:48] Adding multiple classes with one click
[8:36] Using jQuery’s .css method to achieve the same effect
[10:58] On click, remove the highlight class
[11:49] On click, toggle the highlight class
[12:33] Simple examples, lots of potential

Source code

Here’s the final source code we end up with in the video, with the link adding and removing the highlight class from the second paragraph:

jQuery Test

Do something funky

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac magna purus, a aliquam erat. Duis libero neque, fringilla quis scelerisque in, auctor nec tortor. Mauris blandit blandit enim et lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus id tellus eu quam scelerisque iaculis. Fusce luctus tellus orci, sed iaculis nibh.

Maecenas luctus velit sit amet magna vehicula convallis. Curabitur tellus turpis, condimentum ac pellentesque vel, lacinia in odio. Sed cursus hendrerit eros, vitae semper dui fermentum a. Sed a neque sit amet tellus laoreet auctor non et nulla. Etiam neque erat, facilisis at dignissim et, faucibus ac libero. Suspendisse eget risus erat, bibendum pharetra elit.

And here’s the jQuery snippet we used to create the same on-click effect without the use of CSS:

	$("a").click(function(event){

		$("p:eq(1)").css({background:"#ffff99", fontWeight:"bold"});
		event.preventDefault();

	});

All good? Let me know in the comments if you have any questions.

Lesson 4: jQuery Events

Niall Doherty — Mon, 27 Jun 2011 12:21:10 +0000

In this tutorial, we’ll look at how to use jQuery events, such as click and hover.

Click here to view the embedded video.

Video highlights

[1:10] Creating a link to click
[2:20] Coding a jQuery click event
[3:35] Testing the click event
[3:50] Disabling the default click behavior (return false)
[4:30] Using preventDefault instead of return false (learn why here)
[6:25] More jQuery events (see the full list on jQuery.com)
[6:55] Demonstrating the hover event
[7:31] Demonstrating the mousetover event

Source code

Here’s the final source code for our click event, using preventDefault:

jQuery Test

Look at me. I'm learning jQuery.

First item
Second item

And here are the relevant jQuery snippets for the hover and mouseover events in the tutorial:

      $("a").hover(function(){

        alert("You hovered over the link!");

      });

      $("a").mouseover(function(){

        alert("You mouseover'd the link!");

      });

Mouseover’d? Sure, that’s a word.

Let me know in the comments if you have any questions.

Lesson 3: The Difference Between Internal, External, and Inline Scripting

Niall Doherty — Mon, 27 Jun 2011 10:07:31 +0000

In the following tutorial, we’ll run through the different ways you can have your jQuery code.

Click here to view the embedded video.

Video highlights

[0:34] Similarities with CSS
[1:03] Internal scripting (often better for development)
[2:10] External scripting (best for production)
[4:23] Inline scripting (don’t do this!)
[7:49] The ideal setup
[8:51] Recommended site for learning CSS: w3schools.com

Source code

Here’s the internal example from the tutorial. Note that all our own jQuery code is in the of the HTML document (lines 11-19).

jQuery Test

Look at me. I'm learning jQuery.

Now here’s the external example from the tutorial. First we have index.html, which calls both the jQuery core file (line 9), and our newly-created custom.js file (line 10) from the :

jQuery Test

Look at me. I'm learning jQuery.

And here’s the code we have housed in the custom.js file:

    $(document).ready(function(){

      alert("I'm working!");

    });

As for the inline example, I’m not even going to provide the code here since it has no practical use

Any questions? Let me know in the comments.

Lesson 2: Installing and Using jQuery

Niall Doherty — Fri, 24 Jun 2011 14:51:40 +0000

In the following tutorial, you’ll learn how to install jQuery and get some very simple code working.

Click here to view the embedded video.

Video highlights

[0:37] Folder structure I use for the demo
[1:00] Opening index.html in a text editor (I use TextWrangler. If you’re on Windows, try Notepad++)
[1:37] Downloading jQuery, and the difference between production and development versions
[3:05] Calling the jQuery core file from index.html
[4:49] Writing a simple alert to confirm jQuery is working
[5:55] Fixing an error, and getting the alert working
[6:39] (document).ready alternatives
[7:10] When to use (window).load
[8:36] Using a jQuery CDN to host your core file (info and how-to on jquerycdn.net)
[9:33] How to comment out a line of jQuery code

Source code

Here is the final index.html code from the tutorial:

jQuery Test

Look at me. I'm learning jQuery.

Here are the abbreviated versions of (document).ready:

    $().ready(function(){
      alert("No need to write document!");
    });

    $(function(){
      alert("No need to write ready either!");
    });

And finally, (window).load:

    $(window).load(function(){
      alert("I'll only show once the entire page has finished loading.");
    });

Any questions? Let me know in the comments.

Lesson 1: What is jQuery?

Niall Doherty — Thu, 23 Jun 2011 12:29:15 +0000

In the following tutorial, you’ll learn what jQuery is and see a few nifty examples of use.

Click here to view the embedded video.

Video highlights

[0:32] What the hell is JavaScript?
[0:45] Where JavaScript fits in with HTML and CSS
[1:29] What is jQuery?
[2:33] jQuery in use on Amazon.com
[3:57] jQuery in use on Twitter
[4:50] Other power players that use jQuery
[5:07] Komodo Media‘s foliage-o-meter
[5:46] Subtle nav fade-in/fade-out on Bright Creative
[6:12] Sliding panel from Net Tuts (see the associated tutorial here)
[6:48] Eco Lecom‘s sliding website (built with Coda-Slider)
[7:53] Other great things about jQuery

…

Any questions? Let me know in the comments.