Scribd
Upload
27 views

10.introduction To JQuery

Uploaded by

safia sadaf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

10.introduction To JQuery

Uploaded by

safia sadaf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Introduction To 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.

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

Why jQuery?
o There are lots of other JavaScript libraries out there, but jQuery is
probably the most popular, and also the most extendable. It is very fast
and extensible.

o It facilitates the users to write UI related function codes in minimum


possible lines.

o It improves the performance of an application.

o Browser's compatible web applications can be developed.

o It uses mostly new features of new browsers.

Many of the biggest companies on the Web use jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix

Adding jQuery to Your Web Pages


There are several ways to start using jQuery on your web site. You can:

• Download the jQuery library from jQuery.com


• Include jQuery from a CDN, like Google

Downloading jQuery
There are two versions of jQuery available for downloading:

• Production version - this is for your live website because it has been
minified and compressed
• Development version - this is for testing and development (uncompressed
and readable code)

Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the
HTML <script> tag (notice that the <script> tag should be inside
the <head> section):

<head>
<script src="jquery-3.6.4.min.js"></script>
</head>

jQuery CDN
If you don't want to download and host jQuery yourself, you can include it from
a CDN (Content Delivery Network).

Google is an example of someone who host jQuery:

Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min
.js"></script>
</head>

jQuery Syntax
With jQuery you select (query) HTML elements and perform "actions" on
them.

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)

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

The Document Ready Event


You might have noticed that all jQuery methods in our examples, are inside a
document ready event:

$(document).ready(function(){

// jQuery methods go here...

});

This is to prevent any jQuery code from running before the document is finished
loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before
working with it. This also allows you to have your JavaScript code before the
body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the
document is fully loaded:

• Trying to hide an element that is not created yet


• Trying to get the size of an image that is not loaded yet

• The jQuery team has also created an even shorter method for the
document ready event:
• $(function(){

// jQuery methods go here...

});

jQuery Selectors
jQuery selectors are one of the most important parts of the jQuery library.

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.

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector


The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

Example

When a user clicks on a button, all <p> elements will be hidden:


Example
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

The #id Selector


The jQuery #id selector uses the id attribute of an HTML tag to find the specific
element.

An id should be unique within a page, so you should use the #id selector when
you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id
of the HTML element:

$("#test")

Example

When a user clicks on a button, the element with id="test" will be hidden:

Example
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

The .class Selector


The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the
name of the class:

$(".test")

Example
When a user clicks on a button, the elements with class="test" will be hidden:

Example
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

More Examples of jQuery Selectors


Syntax Description Example

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute


$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to
"_blank"

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal
to "_blank"

$(":button") Selects all <button> elements and <input> elements of


type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements

jQuery Event Methods


jQuery is tailor-made to respond to events in an HTML page.

What are Events?


All the different visitors' 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
The term "fires/fired" is often used with events. Example: "The keypress
event is fired, the moment you press a key".

Here are some common DOM events:

Mouse Events Keyboard Events Form Events Document/Window


Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

jQuery Syntax For Event Methods


In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must
pass a function to the event:

$("p").click(function(){
// action goes here!!
Commonly Used jQuery Event Methods
$(document).ready()

The $(document).ready() method allows us to execute a function when the


document is fully loaded.

click()

The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the
current <p> element:

Example
$("p").click(function(){
$(this).hide();
});

dblclick()

The dblclick() method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element:

Example
$("p").dblclick(function(){
$(this).hide();
});

mouseenter()

The mouseenter() method attaches an event handler function to an HTML


element.

The function is executed when the mouse pointer enters the HTML element:

Example
$("#p1").mouseenter(function(){
alert("You entered p1!");
});

mouseleave()

The mouseleave() method attaches an event handler function to an HTML


element.

The function is executed when the mouse pointer leaves the HTML element:

Example
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

mousedown()

The mousedown() method attaches an event handler function to an HTML


element.

The function is executed, when the left, middle or right mouse button is pressed
down, while the mouse is over the HTML element:

Example
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

mouseup()

The mouseup() method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is
released, while the mouse is over the HTML element:

Example
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

hover()
The hover() method takes two functions and is a combination of
the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and
the second function is executed when the mouse leaves the HTML element:

Example
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()

The focus() method attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus:

Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

blur()

The blur() method attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus:

Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

The on() Method


The on() method attaches one or more event handlers for the selected
elements.
Attach a click event to a <p> element:

Example
$("p").on("click", function(){
$(this).hide();
});

Attach multiple event handlers to a <p> element:

Example
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});

jQuery Effects
jQuery enables us to add effects on a web page. jQuery effects can be categorized into
fading, sliding, hiding/showing and animation effects.
jQuery provides many methods for effects on a web page. A complete list of jQuery
effect methods are given below:

No. Method Description

1) animate() performs animation.

2 clearQueue() It is used to remove all remaining queued functions from the selected
elements.

3) delay() sets delay execution for all the queued functions on the selected
elements.

4 dequeue() It is used to remove the next function from the queue, and then execute
the function.

5) fadein() shows the matched elements by fading it to opaque. In other words, it


fades in the selected elements.

6) fadeout() shows the matched elements by fading it to transparent. In other words,


it fades out the selected elements.

7) fadeto() adjusts opacity for the matched element. In other words, it fades in/out
the selected elements.

8) fadetoggle() shows or hides the matched element. In other words, toggles between
the fadeIn() and fadeOut() methods.

9) finish() It stops, removes and complete all queued animation for the selected
elements.

10) hide() hides the matched or selected elements.

11) queue() shows or manipulates the queue of methods i.e. to be executed on the
selected elements.

12) show() displays or shows the selected elements.

13) slidedown() shows the matched elements with slide.


14) slidetoggle() shows or hides the matched elements with slide. In other words, it is used
to toggle between the slideUp() and slideDown() methods.

15) slideup() hides the matched elements with slide.

16) stop() stops the animation which is running on the matched elements.

17) toggle() shows or hides the matched elements. In other words, it toggles between
the hide() and show() methods.

jQuery hide()
The jQuery hide() method is used to hide the selected elements.

Syntax:

1. $(selector).hide();
2. $(selector).hide(speed, callback);
3. $(selector).hide(speed, easing, callback);

speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after


completion of hide() effect.

jQuery show()
The jQuery show() method is used to show the selected elements.

Syntax:

1. $(selector).show();
2. $(selector).show(speed, callback);
3. $(selector).show(speed, easing, callback);
jQuery toggle()
The jQuery toggle() is a special type of method which is used to toggle between the
hide() and show() method. It shows the hidden elements and hides the shown element.

Syntax:

1. $(selector).toggle();
2. $(selector).toggle(speed, callback);
3. $(selector).toggle(speed, easing, callback);
4. $(selector).toggle(display);

jQuery fadeIn()
jQuery fadeIn() method is used to fade in the element.

Syntax:

1. $(selector).fadein();
2. $(selector).fadeIn(speed,callback);
3. $(selector).fadeIn(speed, easing, callback);

Query fadeOut()
The jQuery fadeOut() method is used to fade out the element.

Syntax:

1. $(selector).fadeOut();
2. $(selector).fadeOut(speed,callback);
3. $(selector).fadeOut(speed, easing, callback);

jQuery fadeToggle()
jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut()
methods. If the elements are faded in, it will make them faded out and if they are faded
out it will make them faded in.

Syntax:
1. $(selector).fadeToggle();
2. $(selector).fadeToggle(speed,callback);
3. $(selector).fadeToggle(speed, easing, callback);

jQuery fadeTo()
jQuery fadeTo() method is used to fading to a given opacity.

Syntax:

1. $(selector).fadeTo(speed, opacity);
2. $(selector).fadeTo(speed, opacity, callback);
3. $(selector).fadeTo(speed, opacity, easing, callback);

opacity:It specifies the opacity. The opacity value ranges between 0 and 1.

jQuery slideDown()
jQuery slideDown() method is used to slide down an element.

Syntax:

1. $(selector).slideDown(speed);
2. $(selector).slideDown(speed, callback);
3. $(selector).slideDown(speed, easing, callback);

jQuery slideUp()
jQuery slideDown() method is used to slide up an element.

Syntax:

1. $(selector).slideUp(speed);
2. $(selector).slideUp(speed, callback);
3. $(selector).slideUp(speed, easing, callback);

jQuery animate()
The jQuery animate() method provides you a way to create custom animations.
Syntax:

1. $(selector).animate({params}, speed, callback);

Here, params parameter defines the CSS properties to be animated.

The speed parameter is optional and specifies the duration of the effect. It can be set as
"slow" , "fast" or milliseconds.

jQuery delay()
The jQuery delay() method is used to delay the execution of functions in the queue. It is
a best method to make a delay between the queued jQuery effects. The jQUery delay ()
method sets a timer to delay the execution of the next item in the queue.

Syntax:

1. $(selector).delay (speed, queueName)

speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.

queueName: It is also an optional parameter. It specifies the name of the queue. Its
default value is "fx" the standard queue effect.

You might also like