Site menu
User cabinet
User identifier
Password
Open Knowledge Base
JQUERY short tutorial

JQUERY is a javascript library that simplifies the interaction with HTML documents, providing access to its elements, events, interactions with style sheets, effects, animation, and integration with AJAX.

A JQUERY code example could be this:

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

Example of an HTML document where we use JQUERY

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{   
$("p").click(function()
{
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click here, will disappear! </p>
<p>Click here also</p>
</body>
</html>
 

1.- JQUERY Load

How to load JQUERY

There are two ways to start using JQUERY:

  1. Download this Seller JQUERY from jquery.com
  2. Bind it from the internet, for example, from GOOGLE

1.1.- Download this Seller JQUERY from jquery.com

Once downloaded the latest version of JQUERY file, eg "jquery-1.10.2.min.js", copy the file in our website, and we reference in the HTML document as follows:

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

1.2.- Bind it from the internet, for example, from GOOGLE

If you want to download the file, you can reuse that are available online GOOGLE and MICROSOFT.

This way, you only need to include the following line in the HTML document to use JQUERY:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
 

2.- JQUERY Syntax

From JQUERY is easy to access to any HTML element and perform some action on that item.

The JQUERY syntax is

$(or).accion()

JQUERY Examples

2.1.- If we want to hide all the <p> paragraphs in a document

$("p").hide()

2.2.- If we want to show all the <p> paragraphs of the HTML document

$("p").show()

2.3.- If you want to hide all HTML elements with "class" equals to "black"

$(".black").hide()

2.4.- If you want to hide all HTML elements with "id" equals to "black"

$("#black").hide()

2.5.- If you want to hide the current item

$(this).hide()
 

3.- JQUERY Position

The JQUERY code can be placed in 2 different positions:

  • JQUERY code placed in the same HTML document
  • JQUERY code placed in a separate file

3.1.- JQUERY code placed in the same HTML document

JQUERY source code is placed directly in the head section of the HTML document.

Example HTML document JQUERY code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("p").hide();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Explaining the example

The document indicates where the library JQUERY is

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

JQUERY source ed between <script> and </script>

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

To indicate that the JQUERY code will run when the HTML page is fully loaded in the browser (recommended).

To indicate that you are performing a function to "click" on the "button"

$("button").click(function() {

To indicate that it will hide all <p> paragraphs of HTML document

$("p").hide();

2.- JQUERY code placed in a separate file

To make it easier to keep our JQUERY code, we are placed in a separate file from the HTML file.

For example JQUERY place our code in the file "jquery1.js"

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

Now in our HTML page, we refer to our JQUERY file created before.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="jquery1.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
 

4.- JQUERY Selectors

The are used to the element or elements on which to perform an action.

To an item or items, you can use any CSS ors, such as: identifiers (id), classes (class), tags (h1, h2, p), attributes, attribute values.

JQUERY Selectors Examples

4.1.- To all the <p> tags in the HTML document

HTML code

<p>This is a paragraph </p>

JQUERY code to those elements

$("p")

4.2.- To the elements with id = "dat", use "#"

HTML code

<p id="dat">This is a sample paragraph </p>

JQUERY code

$("#dat")

4.3.- To elements with class = "dat", use "."

HTML code

<p class="dat">This is a paragraph </p>

JQUERY code

$(".dat")

4.4.- To all items in an HTML document, use "*"

HTML code

<h1>Proprietor of the page </h1>
<p>This is the first paragraph </p>
<p id="2">This is the second paragraph </p>

JQUERY code

$("*")

4.5.- To the current item, use "this"

HTML code

<p>Click on this paragraph <p>

JQUERY code

$(this)

4.6.- To items with a "href" attribute, use "[]"

HTML code

<a href="www.example.com/jquery1.htm">Example jquery </a>

JQUERY code

$("[href]")

4.7.- To all elements that are empty, use "empty"

HTML code

<input name="mail" value="">
<p></p>

JQUERY code

$(":empty")

4.8.- To all elements of type = "text"

HTML code

<input type="text" name="field1">

JQUERY code

$(":text")
 

5.- JQUERY Events

An event is an action performed by the user on any element of the HTML document.

Types of events:

  • Events held with the mouse : click, dblclick, mouseenter, mouseleave
  • Events held with the keyboard : keypress, keydown, keyup
  • Events held on a form element types : submit, change, focus, blur
  • Past events on the document or the window : load, resize, scroll, unload

Examples

Defining the function to perform when you click on a label <p>

$("p").click(function()
{
// action goes here
});

If we make doubleclick on a <p> item, hide the element.

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

HTML code where the javascript is included:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{   
$("p").click(function()
{     
$(this).hide();   
});
});
</script>
</head>
<body>   
<p>If you click on me, I will disappear.</p>  
 <p>Click me away!</p>   
<p>Click me too!</p>
</body>
</html>
 

6.- JQUERY show

The show effect can display anything HMTL

Example JQUERY show

To display all elements <p>

$("p").show();

It also allows the parameters "speed" and "callback"

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY show (speed, callback)

To show all <p> elements with a duration of 3 seconds and an alert that has completed the effect

$("p").hide( 3000, function(){ alert("The paragraph has already been shown");} );
 

7.- JQUERY hide

The hide effect to hide any HTML element

Example JQUERY hide

To hide all elements <p>

$("p").hide();

You can have 2 optional parameters (speed and callback)

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY hide (speed, callback)

To hide all <p> elements, with a duration of 2 seconds and an alert showing that the effect has ended

$("p").hide( 2000, function(){ alert("El parrafo ya se ha ocultado");} );
 

8.- JQUERY toggle

The toggle effect toggles between hide effect and show effect.

That is, if the item is hidden then show it.
And conversely, if visible, hidden.

Example JQUERY toggle

To hide an <p> element that is visible or hide a <p> element that is hidden

$("p").toggle();

It also allows the parameters include "speed" and "callback"

 

9.- JQUERY fade

For the fade effect there are 4 possibilities: fadeIn, fadeOut, fadeToggle and fadeTo

9.1.- FadeIn

The fadeIn() effect allows smoothly view any element of the HTML document. At the end of the effect, the result is the same as the effect show().

Example JQUERY fadeIn() To hide all elements

$("p").fadeIn();

You can have 2 optional parameters (speed and callback)

The parameter speed indicates the milliseconds that it should take effect.

The parameter callback indicates JQUERY function to be executed at the end of the effect.

Example JQUERY fadeIn (speed, callback)

To hide all <p> elements, with a duration of 2 seconds and display an alert that it has completed the effect

$("p").fadeIn
(
2000,
function() { alert("Now the text is already displayed");}
);

9.2.- FadeOut

The fadeOut() effect can blur an item until it is invisible. At the end of the effect, the result is like the hide() effect.

Example JQUERY fadeOut() to hide all <p> elements

$("p").fadeOut();

You can have 2 optional parameters (speed and callback)

The speed parameter indicates the milliseconds that it should take effect.

The callback parameter indicates JQUERY function to be executed at the end of the effect.

Example JQUERY fadeOut (speed, callback)

To hide all <p> elements, with a duration of 2 seconds and display an alert that it has completed the effect

$("p").fadeOut
(
2000,
function(){ alert("El parrafo ya no se ve");}
);

9.3.- FadeToggle

The fadeToggle() effect toggles between fadeOut() effect and fadeIn() effect.

That is, if the item is hidden then show it. And conversely, if visible, hidden.

The effect is soft, like magic. At the end of the effect, the result is the same as toggle() effect.

Example JQUERY fadeToggle()

To hide a <p> element that is displayed or to display a hidden element

$("p").fadeToggle();

It also allows to include the parameters "speed" and "callback"

9.4.- FadeTo

The fadeTo() blurring effect allows an element to a degree of opacity.

The opacity is any value between 0 (hidden) and 1 (visible).

It has 2 mandatory parameters (speed, opacy) and 1 optional parameter (callback)

The mandatory parameter speed indicates the milliseconds that it should take effect. Value in milliseconds. Other generic values are "slow" and "fast".

The mandatory parameter opacy indicates the opacity value. Decimal value between 0 and 1. For example 0.15

The optional parameter callback indicates JQUERY function that can be executed at the end of the effect.

Example JQUERY fadeTo()

Slowly diffuse to all <p> elements

$("p").fadeTo("slow",0.15);

Example JQUERY fadeTo()

3 seconds to blend all <p> elements

$("p").fadeTo(3000,0.15);

Example JQUERY fadeTo(speed, callback):

For fast blur all <p> elements and to show an alert that it has completed the effect

$("p").fadeTo
(
"fast",
0.20,
function(){ alert("All paragraphs are blurred");}
);
 

10.- JQUERY slide

For the slide effect there are 3 possibilities: slideDown, slideUp and slideToggle

10.1.- slideDown

The effect slideDown() is used to slide down any HTML element that was previously hidden.

Example JQUERY slideDown()

Since the element with the id = "layer" hidden, we do visible by sliding down

$("#layer").slideDown();

You can have 2 optional parameters (speed and callback)

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY slideDown (speed, callback)

To display by sliding the element with id = "layer", with a duration of 2 seconds and display an alert indicating that the effect has ended.

$("#layer").slideDown
(
2000,
function(){ alert("The effect is complete");}
);

10.2.- slideUp

The effect slideUp() is used to hide by sliding up, any HTML element that is visible.

Example JQUERY slideUp()

Since the element with the id = "layer" visible, we do unseen by sliding up

$("#layer").slideUp();

You can have 2 optional parameters (speed and callback)

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY slideUp (speed, callback)

Eyepiece by sliding the element with id = "layer", with a duration of 2 seconds and display an alert indicating that the effect has ended

$("#layer").slideUp
(
2000,
function(){ alert("The effect is complete");}
);

10.3.- slideToggle

The effect slideToggle() is used to switch between sliding up and sliding down.

Example JQUERY slideToggle

If the element with id = "layer" is hidden then we make visible with sliding downwards.

If the element with id = "layer" that is visible then hide it by sliding up.

$("#layer").slideToggle();

You can have 2 optional parameters (speed and callback)

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY slideToggle (speed, callback)

To display by sliding the element with id = "layer", with a duration of 2 seconds and display an alert indicating that the effect has ended

$("#layer").slideToggle
(
2000,
function(){ alert("The effect is complete");}
);
 

11.- JQUERY animate

The animate() effect lets you create your own animations.

Syntax JQUERY animate()

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

The params parameter is mandatory and defines the CSS properties to be animated.

The parameter speed is optional and defines the duration of the effect. It can be expressed in milliseconds, or two presets "slow" or "fast".

The parameter callback is optional and allows you to run another function to finish the effect.

Examples JQUERY animate()

We can change the size of text on our <p> to 4em paragraph, slowly to appreciate the change well.

$("p").animate({fontSize:'4em'},"slow");

If we want to change the height of a <div> element, we can define a fixed value or an incremental value

$("div").animate({height:'2000px'});
$("div").animate({height:'+=80px'});

If we want to move an item <div> a distance of 300 pixels to the right, extend the left margin

$("div").animate({left:'300'});

We can change several CSS properties at once. It is usual to create a more realistic animation.

$("div").animate
({
left:'300px',
height:'+=80px',
width:'+=80px',
opacity:'0.3'
});

The first effect (left) moves the item to the right, because it increases the margin to the left.

The second effect (height) increases the height <div> 80 pixels.

The third effect (width) increases the width <div> 80 pixels.

The fourth effect (opacity) blurs the element to 0.3 (0 is completely hidden).

 

12.- JQUERY stop

The stop effect serves to stop the animation that is taking effect and leave at that point of the animation.

It can serve for an effect from a minimum value to a maximum value, and the user can choose a value (stop) the duration of the animation.

JQUERY stop

$(or).stop(stopAll,goToEnd);

The optional parameter "stopAll" lets stop other subsequent animations. Default is set to "false" value indicates that only the current animation. If then there are more animations, if you execute these.

The optional parameter "gotoEnd" completes the animation immediately, without waiting for the entire duration of the effect. The default value is false, indicating that no full animation, simply makes the point that is. It's like a "pause".

Example JQUERY stop

With a button "start" we can start the effect of sliding down "layer1", which will last 6 seconds element and a "stop" button can stop the effect at the desired point.

$("#start").click
(
function()
{
$("#layer1").slideDown(6000);
}
);
 
$("#stop").click
(
function()
{
$("#layer1").stop();
}
);
 

13.- JQUERY callback

The parameter callback to define that function executes when an effect has completely finished.

When we run two consecutive effects, you may run the second effect when the previous one has not yet ended.

For example, the alert effect that displays the paragraph "p" is hidden, could be displayed before it is really hidden, because the effect of hiding is performed slowly "slow".

$("p").hide("slow");
alert("It is now hidden");

To avoid this, and be sure that when it displays the message "alert" <p> element of concealment is complete, the second effect included in the parameter "callback"

$("p").hide
(
"slow",
function()
{
alert("It is now hidden");
}
);
 

14.- JQUERY chaining

If we have several effects to be applied to the same element, we can apply them in the order in which they appear in the same sentence JQUERY.

For example if we want to apply on <p> element effect change text color to green, sliding up in 2 seconds, and sliding down in 3 seconds.

$("p").css("color","green").slideUp(2000).slideDown(3000);

The effects are applied in the order they appear.

This can be done, if the effects are on the same HTML element.

 


Comments and questions

Publish comment or question

Copyright 2024 © ELTASK.COM
All rights reserved.