JQuery Tutorial

What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
Page | 1
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.
The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
Uses of Jquery
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most
popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
 Google
 Microsoft
 IBM
 Netflix
Will jQuery work in all browsers?
The jQuery team knows all about cross-browser issues, and they have written this knowledge
into the jQuery library. jQuery will run exactly the same in all major browsers, including
Internet Explorer 6!
Do you wonder why we do not have type="text/javascript" inside the <script> tag?
This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all
modern browsers!
One big advantage of using the hosted jQuery from Google or Microsoft:
Many users already have downloaded jQuery from Google or Microsoft when visiting another site.
As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served from the
server closest to them, which also leads to faster loading time Page | 2
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action
on the element(s).
Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery

 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id,
classes, types, attributes, values of attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.
The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us
quickly and easily access elements or groups of elements in the Document Object Model
(DOM).
A jQuery Selector is a function which makes use of expressions to find out matching
elements from a DOM based on the given criteria. Simply you can say, selectors are used to
select one or more HTML elements using jQuery. Once an element is selected then we can
perform various operations on that selected element.
The $() factory function

jQuery selectors start with the dollar sign and parentheses − $(). The factory function $()
makes use of following three building blocks while selecting elements in a given document −
S.N. Selector & Description

1 Tag Name
Represents a tag name available in the DOM. For example $('p') selects all
paragraphs <p> in the document.
2 Tag ID
Represents a tag available with the given ID in the DOM. For example $('#some-id')
selects the single element in the document that has an ID of some-id.
3 Tag Class
Represents a tag available with the given class in the DOM. For example $('.some- Page | 3
class') selects all elements in the document that have a class of some-class.
What are Events?

All the different visitor's actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
 moving a mouse over an element

 selecting a radio button
 clicking on an element
jQuery Effects
 jQuery Hide/Show
The optional speed parameter specifies the speed of the hiding/showing, and can take the
following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show()
method completes
 jQuery Fade
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()
 jQuery Slide
With jQuery you can create a sliding effect on elements.
Page | 4
jQuery has the following slide methods:
 slideDown()
 slideUp()
 slideToggle()
 jQuery Animate
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following
values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the animation completes.
 jQuery stop()
The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom
animations.
 jQuery Callback
JavaScript statements are executed line by line. However, with effects, the next line of code
can be run even though the effect is not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback)

 jQuery Chaining
Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery Page | 5
commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain an action, you simply append the action to the previous action.

JQuery Tutorial

Uploaded by

JQuery Tutorial

Uploaded by

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

The jQuery library contains the following features:

Will jQuery work in all browsers?

Basic syntax is: $(selector).action()

 A $ sign to define/access jQuery

The $() factory function

S.N. Selector & Description

What are Events?

An event represents the precise moment when something happens.

 moving a mouse over an element

jQuery has the following fade methods:

To prevent this, you can create a callback function.

A callback function is executed after the current effect is finished.

Typical syntax: $(selector).hide(speed,callback)

You might also like