jQuery with Examples

What is jQuery?

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 with less of code.

It was released January 2006 at BarCamp New York City by John Resig.

jQuery contains the following features:

DOM element selections
DOM traversal and modification, (including support for CSS and basic XPath)
Events
CSS manipulation
Effects and animations
Ajax
Extensibility
Utilities - such as browser version and the each function.
JavaScript Plugins

jQuery has an interesting concept called chainability.

Example:

$("#something").addClass("smalltext").removeClass("largetext").show();

That one line of code finds elements that have the ID 'something', adds the class 'smalltext' to them, removes the class 'largetext' from them and then shows them if they are hidden.

jQuery also has a number of awesome effects.

Example:

$("h1").hide();

</script>

jQuery also has a very nice method of detecting events.

Example:

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

alert("You clicked a link!");

});

</script>

That code, placed in your headers, will alert the user whenever a link is clicked.

Identify elements:

jQuery has the same way that CSS identify elements. If you know CSS, It'll be easier for you.

Example:

<html>

<head>

</head>

<body>

<h1> Hi there </h1>

<h4>Welcome to my site</h4>

<b> Enjoy yourself </b>

</body>

</html>

Lets try to isolate the 'Hi there' text first.

This is the code you need:

$("h1")

Example (Hiding elements)

<html>

<head>

</head>

<body>

<h1> Hi there </h1>

<h4>Welcome to my site</h4>

<b> Enjoy yourself </b>

$("h1").hide();

</script>

</body>

</html>

That was pretty easy, wasn't it? Now let's hide the bold stuff.

Code:

$("b").hide();

</script>

But, what if we had two bold elements and wanted to hide only one?

If this is your document?

Code:

<html>

<head>

</head>

<body>

<h1> Hi there </h1>

<h4>Welcome to my site</h4>

<b> Enjoy yourself </b>

<i>I am learning jQuery!</i>

<b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>

</body>

</html>

How?

Answer: Give it an id.

Lets give it the ID "Lorem".

So this is our document now:

Code:

<html>

<head>

</head>

<body>

<h1> Hi there </h1>

<h4>Welcome to my site</h4>

<b> Enjoy yourself </b>

<i>I am learning jQuery!</i>

<b id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>

</body>

</html>

Then to hide it, you'd have:

Code:

$("b#lorem").hide();

</script>

Understood? We affix the id after a '#'.

There are another two methods: using the contains function and using a class.

Lets see how to use a class first.

Let's give the part to hide a class. Classes are usually used by CSS to give element specific properties.

Code:

<html>

<head>

</head>

<body>

<h1> Hi there </h1>

<h4>Welcome to my site</h4>

<b> Enjoy yourself </b>

<i>I am learning jQuery!</i>

<b class="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>

</body>

</html>

As you can see, the lorem ipsum dolor paragraph now has a class, 'lorem'. Now to hide it, you'd have

Code:

$("b.lorem").hide();

</script>

It's almost the same as the thing we did for using and id. This time we used a '.' Instead of a '#'.

Contains

It's the same except that the lorem part doesn't have any class or ID. We will be using ': contains' to identify it.

This is the code you have:

Code:

$("b:contains('lorem')").hide();

</script>

Now lets look at another method of identifying a nested element.

Consider this HTML document.

Code:

<html>

<head>

<title>Hi again.</title>

</head>

<body>

Click <a href="#somewhere">here</a>.

</div>

</body>

</html>

We want to hide the link. It contains the text 'here'.

To hide it, you have

Code:

$("div.wrapper a").hide();

</script>

That code looks for an element that is an 'a' within a div having the class 'wrapper'. But what if there were 2 'a's within div.wrapper?

We will need to add something that gets only the anchors which link to #somewhere.

Code:

$("div.wrapper a[href='#something']")

</script>

The thing in the [square] brackets? Basically, that makes it match only the elements with the property 'href' that is exactly the same as the string '#somthing'.

More info on that:

[attribute]

Matches elements that have the specified attribute.

[attribute=value]

Matches elements that have the specified attribute with a certain value.

[attribute!=value]

Matches elements that don't have the specified attribute with a certain value.

[attribute^=value]

Matches elements that have the specified attribute and it starts with a certain value.

[attribute$=value]

Matches elements that have the specified attribute and it ends with a certain value.

[attribute*=value]

Matches elements that have the specified attribute and it contains a certain value.

Manipulating elements.

I. Inserting inside

We'll look at two things here - appending and prepending.

1. Appending

This is used to add some text at the end of all matched elements.

For example,

$("div.wrapper").append("<b>Hello!</b>");

will add Hello! at the end of divs that have the class 'wrapper'.

2. Prepending

This will add something to the beginning of matched elements.

Example:

$("div.wrapper").prepend("<b>Hello!</b>");

will add Hello! at the start of divs with the class 'wrapper'.

II. Hiding, Showing and Toggling

1. Hide

We already know what this does, no need to repeat.

Code:

$("#something").hide();

will hide all elements with the id '#something'.

2. Show

Will display hidden elements.

Code:

$("#something").show();

will show the #something that we hidden above.

3. Toggle

Will toggle elements. If the element is hidden, it will show the element and if it is visible it will hide the element.

Code:

$("#something").toggle();

III. Changing contents

1. HTML

Used to set the HTML inside matched elements to something else.

Code:

$("#something").html("<b>Hello!</b>");

2. TEXT

Used to Set the text contents of all matched elements.

Code:

$("#something").text("HTML will not work here.");

Another example:

Code:

$("p").text("<i>Some<i> <b>thing</b>");

Result:

Quote

<i>Some<i> <b>thing</b>

Code is executed the moment it is downloaded, and if the code is below it, it is downloaded later and so the code can not find it at that time. Here is a way

Code:

$(document).ready(function(){

// Code here

});

</script>

That will make the code execute only after the whole document has loaded.

Reference:

http://docs.jquery.com/Tutorials
http://www.learningjquery.com/2007/11/tutorials-elsewhere
http://docs.jquery.com/Using_jQuery_with_Other_Libraries (using overriding with prototype)
http://docs.jquery.com/Sites_Using_jQuery (Sites Using jQuery)
http://plugins.jquery.com/project/Plugins/ (Plug- ins)
http://www.gotapi.com(great help site)