By admin/development, javascript, jquery/September 18, 2014

JQUERY INTRODUCTION

JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

What you can do with jQuery?

jQuery makes it easy to:

Find elements in an HTML document HTML content
Change HTML content
Listen to what a user does and react accordingly
Animate content on the page
Talk over the network to fetch new content

Document Object Model

Document Object Model (DOM) is a tree-like structure created by browsers so we can quickly find HTML Elements using JavaScript.

So, What does that DOM structure look like?

Inside the DOM, HTML elements become nodes which have relationships with one another.

How do we search through the DOM?

JavaScript gives developers a language to interact with the DOM. But, each browser has a slightly different DOM interface. So if our JavaScript uses jQuery to interact with the DOM then it will work on most modern browsers.

Basic jQuery usage

jQuery();

This is the jQuery function. To make jQuery Access The DOM, we need to use CSS selectors

<!DOCTYPE html>
<html>
<head>
<title>jQuery Introduction</title>
</head>
<body>
    <h1>What does jQuery do?</h1>
    Find out yourself.
</body>
</html>

Here, the CSS selectors can be:

h1 { font-size: 2em; }

and

p { color: black; }

Using the jQuery function to find nodes,

jQuery("h1");
jQuery("p");

By using short syntax, we can change above to:

$("h1");
$("p");

Changing the content of an element

How can we modify the text of the h1 element?

Find it* Change it

Selecting by HTML element name:

$("h1");

Fetching an element’s text:

$("h1").text()

Result is What does jQuery do?

Above, text() is a method offered by jQuery.

Modifying an element’s text

text() also allows to modify the text node.

$("h1").text("Where to?");

The DOM ready event

JavaScript may execute before the DOM loads. We need to make sure the DOM has finished loading the HTML content before we can reliably use jQuery. To do this, we have to listen for the document ready event.

jQuery(document).ready(function(){
});

What it means is only run this code once the DOM is ready. So let's change our code to:

jQuery(document).ready(function(){
    $("h1").text("Where to?");
});

Installing jQuery

First, download jQuery from <a href='jQuery.com'>jQuery.com</a>.

Now load it in your HTML document.

<script src="jquery.min.js"></script>

Changing multiple elements at once

How do we change the text of every * in this page?

<h1>Where do you want to go?</h1>
<h2><Travel Destinations</h2>
Plan your next adventure.
<ul id="destinations">
    <li>Rome</li>
    <li>Paris</li>
    <li class='promo'>Rio
</ul>

Find them, modify their text, and then load HTML into the DOM.

Select multiple elements:

$("li")

Modify each of their text nodes:

$("li").text("Orlando");

We can find elements by ID or Class.

<table>
    <tr><th style="width:100px">css</th><th>jQuery</th></tr>
    <tr><td>p { ... }</td><td>$("p");</td></tr>
    <tr><td>#container { ... }</td><td>$("#container");</td></tr>
    <tr><td>.articles { ... }</td><td>$(".articles");</td></tr> 
</table>

Selecting by unique ID:

Find it using the ID.

$("#destinations");

Selecting by the class:

Find it using the class.

$(".promo");

Stay tuned for more jQuery posts.