Connect with us

Getting started with jQuery

coding

Getting started with jQuery

I first played with jQuery back in the days when I started learning to create WordPress plugins, but it hasn’t been until recently that I’ve had a desire to actually master it and learn how to get the most out of it. Since it was time to get reacquainted with the tool I thought I’d write a brief tutorial aimed at helping those unfamiliar with the jQuery JavaScript library.

What Is jQuery?
jQuery.com says it well…

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Let’s Get Started
Enough mumbo-jumbo, let’s jump into things. First of all, you’ll need to download the latest jQuery compressed library from http://jquery.com/src/jquery-latest.pack.js and save it locally so you can reference it within your head tag similar to this:

<script src="your/path/jquery.js"></script>

Just about everything that we would want to do with jQuery will manipulate the Document Object Module (DOM). If we try to touch the DOM before it’s appropriately loaded we’ll get some messy errors. To avoid that, the first thing we’ll want to do is have jQuery check for the DOM ready state like this:

 $(document).ready(function() {
   // do cool stuff only when the DOM can handle it
 });

Within this ready function we’ll want to load all of our handlers. jQuery uses $() as its variable reference so get used to seeing it. In this case, because document is specified in the parenthesis, jQuery will query the DOM and match the whole document to our request. Since we passed ready() to that document match, jQuery will execute whatever is within ready() when the document has finished loading.

Coding Basics Here are a few additional pointers to get up and running with jQuery:

  • jQuery code starts its code blocks with a dollar sign ($).
  • The dollar sign is followed by an open parenthesis.
  • The parenthesis contains what you tell jQuery to find, such as what elements it should use.
  • The close parenthesis is followed by any event for the specific object.
  • You can define what happens with the event specified. The parenthesis following the method/event includes a function that signals what happens when the event occurs.

Keep an eye out on this web space for some jQuery examples; but until then, here are some basic ones:

Examples:

Example A

Get number of paragraphs in column 2 and display that number in an alert box. Including the one in the red box.

alert($("div.contentToChange p").size());

 

Example B

Animate a paragraph in Column 2 by using a slide animation.

$("div.contentToChange p.firstparagraph:hidden").slideDown("slow");
$("div.contentToChange p.firstparagraph:visible").slideUp("slow");

 

Example C

Add/Remove text from the end of all <p> elements in column 2 except the paragraph in the red box.

$("div.contentToChange p:not(.alert)")
  .append("<strong class="addedtext"> This text was just appended to this paragraph</strong>")});
$("strong.addedtext").remove();

 

Example D

Remove paragraph with fade and animation.

$("div.contentToChange p.thirdparagraph").hide("slow");

 

Example E

Change the font weight and color of all Italic text in column 2 by adding CSS properties and values to all <em> elements.

$("div.contentToChange em").css({color:"#993300", fontWeight:"bold"});

 

Example F

Change the CSS on the first paragraph in Column 2 by adding a class value to the <p> element. Adding this new class value to the first p element will place the paragraph in a absolute position box in the upper left hand corner.

$("p.fifthparagraph").addClass("changeP");
$("p.fifthparagraph").removeClass("changeP");
Continue Reading
You may also like...
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in coding

To Top
Grab the largest plugin bundle from CodeCanyon!