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