What is jQuery
jQuery is nothing but a JavaScript library that comes with rich functionalities. It's small and faster than many JavaScript codes written by an average web developer. By using jQuery we can write less code and do more things, it makes web developer's tasks very easy. In simple words, jQuery is a collection of several useful methods, which can be used to accomplish many common tasks in JavaScript. A couple of lines of jQuery code can do things that need too many JavaScript lines to accomplish. The true power of jQuery comes from its CSS-like selector, which allows it to select any element from DOM and modify, update or manipulate it.
jQuery is nothing but a JavaScript library that comes with rich functionalities. It's small and faster than many JavaScript codes written by an average web developer. By using jQuery we can write less code and do more things, it makes web developer's tasks very easy. In simple words, jQuery is a collection of several useful methods, which can be used to accomplish many common tasks in JavaScript. A couple of lines of jQuery code can do things that need too many JavaScript lines to accomplish. The true power of jQuery comes from its CSS-like selector, which allows it to select any element from DOM and modify, update or manipulate it.
You can use jQuery to do cool animations like fade in or fade out. You can also change the CSS class of a component dynamically e.g. making a component active or inactive. I have used this technique to implement tabbed UI in HTML.
I can vouch for jQuery that once you start using it, you will never go back to plain old JavaScript, it's clear, concise, and powerful. You will even regret why you are not using jQuery before.
By using jQuery you can add a new element into DOM, update existing elements from DOM, and can easily remove any element. jQuery's powerful class and id selector allow you to select any HTML element or group of elements for selective manipulation. jQuery also allows you to select and modify attributes from any HTML element in DOM.
When we want to use this we have to include this file to our program file(i.e HTML file). For example, this example loads jQuery from a local drive rather than downloading it from the internet. By the way, there are some advantages of downloading jQuery using CDN networks. CDN stands for content delivery network. Some time web developer also confuses where to put the script tag e.g. should we put the script tag on head or body.
Well, you can put it anywhere but putting it on the body make more sense from a performance perspective, because in that case jQuery library will be downloaded after all HTML, CSS, Images are downloaded and the page is rendered. Even if it is stuck downloading jQuery from the internet you will not see the blank page, which is the case when you put a script tag on the head.
By the way, this consideration will only occur, if you decide to download jQuery from the internet rather than from a local drive, and if you the one who likes to see all JavaScript dependency at the top of the page, then put it in the head. I like to put jQuery download code, right at the top section, on the head.
and here is the output, or how does it look like in your browser like internet explorer, chrome, or Firefox :
What we can handle using jQuery
jQuery is very powerful, it provides methods and API to do almost all kinds of things you can do with JavaScript. Though jQuery is particularly good in the following area- HTML and DOM manipulation
- CSS manipulation
- HTML event methods
- AJAX
- Utilities
By using jQuery you can add a new element into DOM, update existing elements from DOM, and can easily remove any element. jQuery's powerful class and id selector allow you to select any HTML element or group of elements for selective manipulation. jQuery also allows you to select and modify attributes from any HTML element in DOM.
How to Use jQuery
If you want to use jQuery, you just need to get jQuery file e.g jquery-1.2.6.min.js or latest version from its official site or any of three popular CDN URL which provides jQuery download. For example <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script> downloads jQuery from Google's content delivery network. You can even ship the jQuery library along with your app by saving the downloaded files to your file-system location.When we want to use this we have to include this file to our program file(i.e HTML file). For example, this example loads jQuery from a local drive rather than downloading it from the internet. By the way, there are some advantages of downloading jQuery using CDN networks. CDN stands for content delivery network. Some time web developer also confuses where to put the script tag e.g. should we put the script tag on head or body.
Well, you can put it anywhere but putting it on the body make more sense from a performance perspective, because in that case jQuery library will be downloaded after all HTML, CSS, Images are downloaded and the page is rendered. Even if it is stuck downloading jQuery from the internet you will not see the blank page, which is the case when you put a script tag on the head.
By the way, this consideration will only occur, if you decide to download jQuery from the internet rather than from a local drive, and if you the one who likes to see all JavaScript dependency at the top of the page, then put it in the head. I like to put jQuery download code, right at the top section, on the head.
jQuery Helloworld Example
Here is our first jQuery program, which does the really simple thing. There is a button, you just need to click it and suddenly you see a welcome message on your screen. This is a good example of how you can get a DOM element and add new HTML code there. In the next section, you will see a full explanation of this jQuery program.<html> <head> <title>My First jQuery Program</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" > </script> </head> <body> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("#bClick").html("<h1>Hurry!!! </h1><h2>Welcome to wonderful world of jQuery</h2>"); }); }); </script> Click the button to see demo <button>Click me</button> <div id="bClick"></div> </body> </html>
and here is the output, or how does it look like in your browser like internet explorer, chrome, or Firefox :
Explanation of code:
jQuery syntax is made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action(), here $ sign is short-cut of jQuery() method and used to define/access jQuery. (selector) is used to "query (or find)" HTML elements, and can be any CSS style selector or special jQuery selectors.The jQuery action() is the task to be performed on the selected element(s). For example, in our program, we have $(document).ready(function() { ...}); which is where your all jQuery code should go.
This method is executed once the browser finished loading the HTML page and DOM is ready to be accessed. $("button") is used to get all HTML button elements since there is only one here, we will get a reference of that. click() is used to listen to a click event, and it registers the listener the anonymous function you passed to it.
The code here is executed when the button is clicked. If you look at our code, you will see that we are again getting reference of an HTML element whose id is bClick, $("#bClick") returns a DIV with id bClick, # is used to denote ID, and this type of selector is known as ID selector.
Once you get this element, you set its HTML by passing the HTML text to it, which is what is displayed when you click the button.
Good for a first jQuery program, I am sure the more you do, the more started loving it. If you want to start serious development in jQuery, I suggest going through this list of some good jQuery books and courses to find one you like. It makes sense for all front-end web developers to at least know jQuery.
Good for a first jQuery program, I am sure the more you do, the more started loving it. If you want to start serious development in jQuery, I suggest going through this list of some good jQuery books and courses to find one you like. It makes sense for all front-end web developers to at least know jQuery.
By the way, JavaScript is getting tons of good libraries, which is driving a lot of good development. A couple of other useful JavaScript libraries are Angular.js and Node.js, I am sure you heard about them as well. Comparing to jQuery there still in the early state, on the other hand, jQuery has almost captured all JavaScript front-end markets.
nice explanation of jquery i just started learning
ReplyDeleteVery good, explication
ReplyDeletenice explanation..today i am started with jquery learning...
ReplyDeleteunable to get the output
ReplyDeleteWhat is the error you are getting?
Delete