INTRODUCTION TO Jquery

INTRODUCTION TO jQuery:
To build interesting and interactive sites, developers are turning to JavaScript libraries such as
jQuery to automate common tasks and to simplify complicated ones. One reason the jQuery library
is a popular
choice is its ability to assist in a wide range of tasks.
What jQuery does:

The jQuery library provides a general-purpose abstraction layer for common web scripting, and is
therefore useful in almost every scripting situation.
The core features, though, assist us in accomplishing the following tasks:
• Access elements in a document:
1. Without a JavaScript library, web developers often need to write many lines of code to
traverse the Document Object Model (DOM) tree and locate specific portions of an
HTML document's structure.
2. With jQuery, developers have a robust and efficient selector mechanism at their disposal,
making it easy to retrieve the exact piece of the document that needs to be inspected or
manipulated.
$('div.content').find('p');
• Modify the appearance of a web page: CSS offers a powerful method of influencing the
way a document is rendered, but it falls short when not all web browsers support the same
standards. With jQuery, developers can
bridge this gap, relying on the same standards support across all browsers In addition, jQuery can
change the classes or individual style properties applied to a portion of the document even after the
page has been rendered.
$('ul > li:first').addClass('active');
• Alter the content of a document: Not limited to mere cosmetic changes, jQuery can
modify the content of a document itself with a few keystrokes. Text can be changed, images can be
inserted or swapped, lists can be
reordered, or the entire structure of the HTML can be rewritten and extended—all with a single
easy-to-use Application Programming Interface (API).
$('#container').append('<a href="more.html">more</a>');
• Respond to a user's interaction: Even the most elaborate and powerful behaviors are not
useful if we can't control when they take place. The jQuery library offers an elegant way to intercept
a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code
itself with
event handlers. At the same time, its event-handling API removes browser inconsistencies that often
plague web developers.
$('button.show-details').click(function() {
$('div.details').show();
});
• Animate changes being made to a document: To effectively implement such
interactive behaviors, a designer must also provide visual feedback to the user. The jQuery library
facilitates this by providing an array of effects such as fades and wipes, as well as a toolkit for
crafting new ones.
$('div.details').slideDown();
• Retrieve information from a server without refreshing a page: This code pattern
is known as Ajax, which originally stood for Asynchronous JavaScript and XML, but has
since come to represent a much greater set of technologies for communicating between the client
and the server. The jQuery library removes the browser- specific complexity from this responsive,
feature-rich process, allowing developers to focus on the server-end functionality.
$('div.details').load('more.html #content');
• Simplify common JavaScript tasks: In addition to all of the documentspecific features of
jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array
manipulation.
$.each(obj, function(key, value) {
total += value;
});
Why jQuery works well

With the resurgence of interest in dynamic HTML comes a proliferation of JavaScript frameworks.
Some are specialized, focusing on just one or two of the tasks previously mentioned. Others attempt
to catalog every possible behavior and animation and serve these all up prepackaged. To maintain
the wide range of features outlined earlier while remaining relatively compact, jQuery employs
several strategies:
• Leverage knowledge of CSS: By basing the mechanism for locating page elements on CSS
selectors, jQuery inherits a terse yet legible way of expressing a document's structure. The jQuery
library becomes an entry
point for designers who want to add behaviors to their pages, because a prerequisite for doing
professional web development is knowledge of CSS syntax.
• Support extensions: In order to avoid "feature creep", jQuery relegates special-case uses to
plugins. The method for creating new plugins is simple and well-documented, which has spurred
the development of a wide variety of inventive and useful modules. Even most of the features in the
basic jQuery download are internally realized through the plugin architecture, and can be removed
if desired, yielding an even smaller library.
• Abstract away browser quirks: An unfortunate reality of web development is that each
browser has its own set of deviations from published standards. A significant portion of any web
application can be relegated to handling features differently on each platform. While the ever-
evolving browser landscape makes a perfectly browser-neutral code base impossible for some
advanced features, jQuery adds an abstraction layer that normalizes the common tasks, reducing the
size of code while tremendously simplifying it.
• Always work with sets: When we instruct jQuery to find all elements with the class
collapsible and hide them, there is no need to loop through each returned element. Instead, methods
such as .hide() are designed
to automatically work on sets of objects instead of individual ones. This technique, called implicit
iteration, means that many looping constructs become unnecessary, shortening code considerably.
• Allow multiple actions in one line: To avoid overuse of temporary variables or wasteful
repetition, jQuery employs a programming pattern called chaining for the majority of its methods.
This means that the result
of most operations on an object is the object itself, ready for the next action to be applied to it.
Making our first jQuery-powered web

Page:
1. Downloading jQuery:
No installation is required. To use jQuery, we just need a publicly available copy of the file,
no matter whether that copy is on an external site or our own. Whenever we need a page to have
jQuery available, we will simply refer to the file's location from a <script> element in the HTML
document
1. The official jQuery website (http://jquery.com/) always has the most up-to-date stable version of
the library, which can be downloaded right from the home page of the site. Several versions of
jQuery may be available at any given moment; the most ppropriate for us as site developers will
be the latest uncompressed version of the library. This can be replaced with a compressed
version in production environments.
2. As jQuery's popularity has grown, companies have made the file freely available through
their Content Delivery Networks (CDNs). Most notably,
Google (https://developers.google.com/speed/libraries/devguide),
Microsoft (http://www.asp.net/ajaxlibrary/cdn.ashx), and
the jQuery project itself (http://code.jquery.com) offer the file on powerful, low-latency
servers
distributed around the world for fast download regardless of the user's location.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Download uncompressed download for development.
Save the file to your site. Like you’ve learned to organize your CSS in a separate folder, it can be
helpful to save your JavaScript in a separate folder as well. You can save it to a folder named js.
To start using jQuery, all you must do is include it in your page, like any other script :
<script src="jquery.js"></script>
Note: Unless it needs to be in the <head> for some reason (Modernizr is the most common
example of
a script that needs to be in the <head>), for top performance, JavaScript should be included right
before the closing </body> tag.
Selecting Elements:
Two of the most fundamental parts of the library: the jQuery or $ function and the $
(document ).ready() event.which are using to selecting the elements .
Introducing the $ Function
At the heart of every jQuery operation is the jQuery object. Everything you do with the library
starts there.
1. You can access this function with two different names: jQuery or as the more famous alias
$. In the context of programming with jQuery, they’re equivalent. The rest of the text
refers to $ exclusively.
2. $ is used in two different ways. Called as a function, $(), it enables you to access, create,
and manipulate HTML elements. $ also enables you to access additional methods and
properties of jQuery
3. In order to create a new jQuery object, we use the $() function. This function typically
accepts a CSS selector as its sole parameter and serves as a factory returning a new jQuery
object pointing to the corresponding elements on the page.
4. The three primary building blocks of selectors are tag name, ID, and class. They can be used
either on their own or in combination with others. The following simple examples illustrate
how these three selectors appear in code:
Start Your Scripts the Smart Way with $
( document ).ready()

INTRODUCTION TO Jquery

Uploaded by

INTRODUCTION TO Jquery

Uploaded by

INTRODUCTION TO jQuery:

What jQuery does:

Why jQuery works well

Making our first jQuery-powered web

You might also like