Jquery Brief for the Front-end Developers

Why jQuery?

If you’ve spent any time at all trying to add dynamic functionality to your pages (as well as figure out browser differences), you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion.
You could be hiding or revealing the elements, adding a CSS class to them,animating them, or modifying their attributes.
Using raw JavaScript can result in dozens of lines of code for each of these tasks. The creators of jQuery specifically created the library to make common tasks trivial.

About jQuery

Jquery is one of the most popular JavaScript libraries around and was created by John Resig during his college days at the Rochester Institute of Technology.

The core features of jQuery are:

• Gives developers a common set of functions for all browsers.
• Uses selectors which is an expression for identifying target elements on a page that allows us to easily identify and grab the elements we need
• Gives access to page elements without having to wait for all images to load in place of using the browser’s onload event, which delays anything you do until the page is fully loaded.
• Let’s you create and delete HTML.
• Has a great selection of animation and visual effect
• Contains enhancements to basic JavaScript constructs such as iteration and array manipulation.

Downloading jQuery

jQuery is available in two versions: a packed version for use in production sites and an uncompressed version that is more readable (if you want to review the source).
No installation is required, to use jQuery you just need to place it in a public location.
Since JavaScript is an interpreted language, there is no compilation or build phase to worry about. Whenever we need a page to have jQuery available, we will simply refer to the file's location from the HTML document.
Just include the file in the same location as your HTML page and you’re ready to use jQuery

Jquery Syntax

<html>
 <head>
  <title>Jquery Introduction</title>
  
  <script src="jquery-2.2.0.min.js"></script>
  <script>
   $(document).ready(function()
   {
   var name="nilkant";
   alert("Hello "+name);
   });
  </script>
 </head>
 <body>
  <h1>Jquery</h1>
 </body>
 
</html>

The $( ) factory function

The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. Typically, it takes a string as a parameter, which can contain any CSS selector expression.
Making Sure the Page is Ready : $(document).ready(function)
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets (images, script, frames and other embedded objects) have been completely loaded.

Comments

Popular Posts