Basic JQuery Tutorial

JQuery is a major player in modern day web development.This chapter gives a basic JQuery tutorial .Before starting our discussions in JQuery , lets do a recall some of the basic concepts of web development

Document Object Model(DOM)

As we know web browsers are getting the pages from server in html document format. The nodes of every document is having a tree structure . And that is often referred as DOM.

Consider the following html document.And let us try to find the nodes in the same document.



    Sample Page

This is s text message.

 

1)The DOM tree starts with the the document node.The document node contains an html node.So html node is the child of document node and document node is the parent of html node

2 a)The html node contains a head node

2 b)The html node contains a body node also. So head and body nodes can be considered as sibbling nodes

3 a)The head node contains a title node and which inturn contains a text

3 b)The body node contains a paragraph node as child node and it contains a text in it

So in this way the data is arranged in a DOM.

What is jQuery

Browsers uses Java Script to interact with DOM.Different browsers are having slightly different DOM interfaces.JQuery is a Java Script library which is compatible with all modern day browsers.

Uses of JQuery

  • Fetch contents of  html elements
  • Get user interactions from an html page and react to those interactions
  • Change the contents of html elements
  • Decorate/Animate the web pages
  • JQuery can be used to fetch new content from server without refreshing the web page

Significance of JQuery ready() method

The method $(document).ready(function()  makes a function available after the document is fully loaded.$ is the representation of JQuery.We can use JQuery also in place of $

An example

The following html page elaborates the usage of JQuery.For using the JQuery functions in a page , the page should include the JQuery library.We can either include a downloaded libary or we can point to a remote CDN. We can use an IDE or  a text editor for developing the page.I would prefer Notepad++ for that.

The page we are developing has a link .When  user clicks on the link , a dialogue box will appear to get the user choice.If he clicks on OK , then the page will be redirected to the web page.If he selects cancel option then the navigation won’t happen.



    Sample Page 



Click here to go to coderpanda.com



So in this way JQuery can be used to catch user interactions.In the coming sections we will be looking into more advanced concepts of JQuery