Introducing jQuery
by Mauvis
jQuery is a powerful, lightweight JavaScript library that you can use to add behaviors to your KickApps-powered pages. Its concise syntax makes it easy to add sophisticated effects and animations with just a few lines of code! jQuery is baked right into your pages (accessible via the $j variable), so you can get started right away.
Getting started with jQuery
While it takes a day or two to really get a handle on how jQuery works, the end result is well worth it. If you learn how to set a certain html property one way using jQuery, setting the css property is probably very similar. Here are some examples of using jQuery:
$j('#myDiv').css('background-color');
//find a div called #myDiv and set its CSS background color to red
$j('#myDiv').css('background-color','red');
//find a link with the id of #myLink and get its href attribute
$j('#myLink').attr('href');
//find a link with the id of #myLink and set its href attribute to http://www.kickapps.com
$j('#myLink').attr('href','http://www.kickapps.com');
//find all divs on the page and make all their background colors light-blue
$j('div').css('backgroundColor','#CEE9F4');
Notice here that I used backgroundColor (camel caps) instead of background-color (dash). In JavaScript programming, camelcaps is the standard, whereas in CSS dashes are. jQuery was built with the CSS developer in mind so either way works.
$j('#mainContent p.myParagraph a').attr('title','hello there');
//Find all paragraph tags that are the direct children of #mainContent, find all a links that are the direct children of those p tags, and change all links inside of them to have a title attribute of hello there
$j('#mainContent > p > a').attr('title','hello there');
jQuery is chainable
This is the coolest part of jQuery. Every time you use jQuery it always returns a reference to itself along with “the answer” (known as the JQuery wrapped-set.) To better explain, let’s use this snippet of HTML as an example:
When we say $j('#ka_relatedList > li'); we are grabbing a reference to all list items directly inside #ka_relatedList but they are wrapped in the jQuery object itself. If you viewed this in firebug, it looks like this:
From the above code, you can see that if you did:
It would return you the first list item in plain html. Just like if you did relatedList.getElementsByTagName('li')[0], but the magic of jQuery is that because every answer is wrapped in the jQuery object, you can chain it up like so:
To format a litte more cleanly we can do:
- $j('#ka_relatedList > li')
- .css('backgroundColor','lightblue')
- .css('border','solid 1px black')
- .css('paddingBottom','3px');
Notice for simplicity that I’m only using the css jQuery method but I could have used any of jQuery’s methods one after another to keep modifying the wrapped set including adding click event listeners, modifying text, etc.
For a little bit more complex example and comparing it to the regular JavaScript method let’s try to do something a little more detailed:
Say we wanted to get the list of LI elements inside of ul#ka_relatedMediaList above and make a series of changes to them. Normally one would have to traverse the DOM with a series of for loops adding additional loops within loops for other changes.
For example, using regular JavaScript, let’s change all links inside of each related media item to red, then change the first link’s text to ‘Click here to view!’:
var relatedUL = document.getElementById('ka_relatedList');
//set variable for li array
var relatedLI = relatedUL.getElementsByTagName('li');
//for each li in array make modifications
for (var i=0;i<relatedLI.length;i++){
//loop through all links to change them to red
var allLinks = relatedLI[i].getElementsByTagName('a');
for(var z=0;z<allLinks.length;z++){
allLinks[z].style.color ='red';
}
var mainLink = relatedLI[i].getElementsByTagName('div')[0].getElementsByTagName('a')[0];
//Change link text
mainLink.innerHTML = 'Click here to view!';
}
Using jQuery it would look like this:
- $j('#ka_relatedList > li > div')
-
- .find('a:first')
- .text('Click here to view!')
- .end()
- .find('a').css('color','red');
The find method above is used as a way to filter the initial wrapped set further. The end method allows us to jump back to the previous wrapped set (before we modified it). As you can see, the code is a lot smaller and once you understand the jQuery methods available to you – it's quite easy to use! We have only used a tiny percentage of the available jQuery methods. To see a complete list you can go here:
http://visualjquery.com/1.1.2.html
Most of the methods you’d want to start playing with are under the DOM section.
Our jQuery lesson stops here but fear not – there is a wealth of jQuery information out there! If you’d like to learn more, check out the following links:
jQuery.com
http://docs.jquery.com/Main_Page
http://www.learningjquery.com/
Additionally there are currently 3 books out on jQuery:
Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques
Karl Swedberg, Jonathan Chaffer
(packt publishing)
jQuery Reference Guide
Karl Swedberg, Jonathan Chaffer
(packt publishing)
And my favorite:
jQuery in Action
Bear Bibeault and Yahuda Katz
(Manning)
Why jQuery?
Before our 3.0 release, we were using a combination of the Prototype and Scriptaculous JavaScript libraries for our animations and effects. We weren't making much use of these libraries beyond everyday JavaScript and found that not many affiliates were either. We decided to migrate to jQuery because:
- jQuery is small:
- jQuery is small, 14kb gzipped, and can mimic most all of the popular functionality in the combined Prototype/Scriptaculous libraries out of the box.
- jQuery is self-contained:
- Many JavaScript libraries work by adding a lot of new functions to the global namespace, extending/augmenting existing ones, and adding properties to native HTML elements. The end result is “souped-up” html and JavaScript. While this can be extremely helpful for web development, after using one of these libraries for an extended amount of time, one can come to rely on it and forget which methods and properties are native to JavaScript and HTML. jQuery circumvents this problem by encapsulating all its functionality in one variable: jquery. It then uses a shortcut reference $ (the dollar sign) to make referencing jQuery shorter. This not only lets you know when you’re reading or using jQuery, but it also assists in coding efficiency/chainability (as discussed above).
- jQuery plays nicely with others:
- Many libraries share a set of common naming conventions which prevent you from having more than one library on your page (they will overwrite each other). For example, most all libraries create a function called $, which is often just a handy shortcut to the regular JavaScript method document.getElementById (though sometimes more complex). jQuery does this too (although slightly differently), but unlike most libraries, jQuery also allows you to move the whole jQuery object to another variable, allowing you to add other libraries to the page if you so wish. As you can see in the examples above, we've made such an adjustment on our platform: our jQuery is accessible by both jquery and $j, so that $ remains as a shortcut to document.getElementById. Any affiliate that wants to use another framework can drop it in their AC header without any needed modification (as long as that framework uses $ as a reference to document.getElementById – which most do).
Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.