Hayling Island Internet Marketing and Technology Blog

Sep 15, 2009

Web pages tend to have more and more content these days, with faster internet connections and companies competing for search rankings on Google. Keeping web pages interesting and concise by managing page content through Javascript, used to be an art, and at times even a challenge for experienced programmers to master, due to its inconsistancy  and poorly formed structure. Jquery has made my life so easy and is making web pages around the world more interesting.

Let me take you on a brief guide to getting started with Jquery. Jquery is a Javascript framework, that makes up for the short comings of the core Javascript language, which frankly missed out on so many features some of which I consider to be very basic. Javascript will allow you to select elements on a web page by tag like <p> or <a> and by an id value but it does not have support for selecting by a class, Jquerys solution is:

 

$(".myClass").css("border","3px solid red");

 

and voila every element on the page with class .myClass now has a 3px solid red border. Other selectors like odd used as below:

 

$("tr:odd").css("background-color", "#bbbbff");

 

Using the odd selector in this way will apply a background color to every odd row of the table, getting the same effect with traditional Javascript would require lengthy amounts of code. Chaining events together is another powerful feature of Jquery.

 

$("div#container p.paragraph:has(i)").hasClass("bold").html("<strong>this is the new text</strong>");

 

This will select the p tag with class paragraph and has a tag <I> inside, inside the <DIV> with id container. If this <P> tag has class bold it will remove the HTML code inside and replace with my <STRONG> tag and text, phew bit of a mouthful, and this example is probably completely useless in any real world situation but it goes to show how quickly and easily you can build up highly complex ways to navigate your content.