What is jQuery?

 What is jQuery?

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:

jQuery also has a very nice method of detecting events.

Example:

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:

Hi there

Welcome to my site

Enjoy yourself

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

This is the code you need:

$("h1")

Example (Hiding elements)

Hi there

Welcome to my site

Enjoy yourself

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

Code:

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

If this is your document?

Code:

Hi there

Welcome to my site

Enjoy yourself

I am learning jQuery!

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

How?

Answer: Give it an id.

Lets give it the ID "Lorem".

So this is our document now:

Code:

Hi there

Welcome to my site

Enjoy yourself

I am learning jQuery!

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

Then to hide it, you'd have:

Code:

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:

Hi there

Welcome to my site

Enjoy yourself

I am learning jQuery!

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

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

Code: 

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:

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

Consider this HTML document.

Code:

The page

Click here.

lol

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

To hide it, you have

Code:

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:

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.......

 What is jQuery?