jQuery - Getting Started
jQuery
This is the getting started tutorial on jQuery a JavaScript library.
The DOM
The DOM or Document Object Model is a programming interface for HTML and it represents the document in a tree structure and provides methods that allows us to add, edit, fetch and remove content from the page.
Consider the following HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
So, we have a paragraph inside the body. The DOM representation is given below.
When the page loads in the browser the above DOM gets created. Each boxes represent a node. So, we have the DOCUMENT node and it has a child node html.
Under the html node we have the head node. Under the head we have the title node which has a text node Getting Started.
Also, under the html node we have the body node. Under the body we have a p paragraph node which has a text node Hello World.
Types of node
We can have three types of node.
- Child node
- Parent node
- Sibling node
A node that is a direct decendant of any other node is called a child node. In the above image we can easily say that the body node is a child node as it is a direct decendant of html node.
A node that has direct decendant is called a parent node. In the above image the html node is a parent node as it has direct decendant (body node).
Nodes that share a same parent are called sibling nodes. In the above image we can say that the body and head nodes are siblings as they share a same parent html node.
Including jQuery
To avoid delaying the content loading it is a good practice to include JavaScript and jQuery file at the end before the closing body tag.
The $ symbol
After including the jQuery file in our html page we get a $ symbol. It is a shorthand notation for jQuery.
Run jQuery after DOM is ready
When we request a page the server sends the HTML response which is then used by the browser to construct the DOM. When the DOM gets completed an event is fired to signal that it is ready. We can listen to this ready event using jQuery and run our jQuery code only after this event.
The document
The document holds the reference to all the HTML elements in a given page. To get the document we write the following code.
$(document);
Document ready event
To check the ready event for the document we use the ready method.
$(document).ready();
The ready method takes a function which is executed only after the ready event is fired.
$(document).ready(function(){
//your code goes here...
//this is executed after the ready event is fired
});
Sample code
Project structure
Lets say we have the following HTML code in the getting-started.html file.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<!-- script -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
We have included app.js file which is inside the js folder. It contains the following code.
$(document).ready(function(){
$("body").prepend("<p>Hello World</p>");
});
The above code will create a p element having "Hello World" content.
ADVERTISEMENT