JQuery

JQuery is a standard DOM manipulation tool. It abstracts the browser differences and gives you a clean cross browser DOM API.

Downloads

JQuery gives us just one function, the $ function. The $ function behave differently depending on the parameters we pass it.

We can pass $ another function like this:

$(function() {
            alert("Hello from jQuery");
          });

This function is a callback. It will be executed when the DOM is loaded. Within it we have access to the DOM.

We can select elements from the page using CSS syntax:

$(function() {
            $("p") // this gives us an array of all the paragraphs
          });

When we select from the page we get back an array of all the matched elements.

We can change the content of the DOM like this:

$(function() {
            $("p").html("Hello jQuery");
          });

We can add attributes to an element like this:

$(function() {
            $("a").attr('href', 'http://www.google.com');
          });

We can add styling like this:

$(function() {
            $("p").css('color', 'red')
          });

We can append to a DOM node like this:

$(function() {
            $("p").append('<strong>Hi from jQuery</strong>')
          });

This will append a strong tag to every paragraph.

Use jQuery to select the body element
Use the .css() function to style the body. Give it a red background and blue text.

Use jQuery to select the body element
Use the .html() function to change the body text. Replace the DOM with a new one.

We can completely rewrite our page.

Use jQuery to select the body element
Use the .append() function to append a new hyperlink.
Use the .attr() function to set an href attribute on the hyperlink. Open it in your DOM and check it's clickable.

We can add elements to our DOM.