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)
Examples:
jQuery uses CSS syntax
$(this).hide() - hides the current element. to select elements.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Vijayan.R / Asso Prof / SITE / VIT
The Document Ready Event
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
Tip: The jQuery team has also created an even shorter method for
the document ready event:
$(document).ready(function() $(function(){
{ // jQuery methods go here...
// jQuery methods go here... })
})Vijayan.R / Asso Prof / SITE / VIT
jQuery Selectors
jQuery selectors are used to "find" 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")
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")
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")
Vijayan.R / Asso Prof / SITE / VIT
Example – element selector
<html><head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script><script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script></head><body>
<h2>This is a heading</h2><p>This is a paragraph.</p>
<p>This is another paragraph.</p><button>Click me</button>
</body></html>
Vijayan.R / Asso Prof / SITE / VIT
Example – id selector
<html><head><script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.
js"></script><script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script></head><body>
<h2>This is a heading</h2><p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button></body></html>
Vijayan.R / Asso Prof / SITE / VIT
Example – class selector
<html> <head> <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.
js"></script><script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script></head><body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button></body></html>
Vijayan.R / Asso Prof / SITE / VIT
jQuery Event Methods
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.
"The keypress event is fired, the moment you press a key".
Vijayan.R / Asso Prof / SITE / VIT
Event Methods
click()-The function is executed when the user clicks on the HTML
element.
dblclick()-The function is executed when the user double-clicks on the
HTML element
mouseenter()-The function is executed when the mouse pointer enters
the HTML element
mouseleave()-The function is executed when the mouse pointer leaves the
HTML element
mousedown()-The function is executed, when the left, middle or right
mouse button is pressed down, while the mouse is over the HTML element
mouseup()-The function is executed, when the left, middle or right mouse
button is released, while the mouse is over the HTML element
hover()-takes two functions and is a combination of the mouseenter() and
mouseleave() methods
focus()-The function is executed when the form field gets focus
blur()-The function is executed when the form field loses focus
on()-method attaches one or more event handlers for the selected elements
Vijayan.R / Asso Prof / SITE / VIT
<html><head><script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.
js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
}); </script></head><body>
<p id="p1">Enter this paragraph.</p></body></html>
Vijayan.R / Asso Prof / SITE / VIT
<html><head><script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script
><script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css({"background-color”:”yellow”,”font-size”:”200%“});
} });});
</script></head><body><p>Click or move the mouse pointer over this
paragraph.</p></body></html>
Vijayan.R / Asso Prof / SITE / VIT
jQuery Effects - Hide and Show
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("button").click(function(){
$("p").hide(1000);
});
The optional speed parameter specifies the speed of the hiding/showing,
and can take the following values: "slow", "fast", or milliseconds.
Vijayan.R / Asso Prof / SITE / VIT
jQuery Effects - Toggle
<html> <head> <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.j
s"></script> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
}); });
</script> </head> <body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p> <p>This is another
small paragraph.</p>
</body> </html>
Vijayan.R / Asso Prof / SITE / VIT
jQuery Effects - Fading
fadeIn() method is used to fade in a hidden element
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000); });
fadeOut() method is used to fade out a visible element
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000); });
fadeToggle() method toggles between the fadeIn() and fadeOut() methods
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000); });
fadeTo() method allows fading to a given opacity (value between 0 and 1)
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow",
Vijayan.R / Asso Prof / SITE / VIT
0.7);});
jQuery Effects - Sliding
<html><head><script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script
><script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});});</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc; slideDown()
border: solid 1px #c3c3c3;} slideUp()
#panel { slideToggle()
padding: 50px; display: none;}
</style></head><body> <div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div></body></html>
Vijayan.R / Asso Prof / SITE / VIT
jQuery Effects - Animation
The jQuery animate() method is used to create custom animations.
By default, all HTML elements have a static position, and cannot be
moved. To manipulate the position, remember to first set the CSS
position property of the element to relative, fixed, or absolute!
$("button").click(function(){
$("div").animate({top: '250px'}); });
multiple properties can be animated at the same time
$("button").click(function(){
$("div").animate({
opacity: '0.5',
height: '150px',
width: '150px‘
});}); $(selector).animate({params},speed,callback);
Vijayan.R / Asso Prof / SITE / VIT
It is also possible to define relative values (the value is then relative to
the element's current value). This is done by putting += or -= in front
of the value.
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});});
You can even specify a property's animation value as "show", "hide",
or "toggle“
$("button").click(function(){
$("div").animate({
height: 'toggle'
});});
Vijayan.R / Asso Prof / SITE / VIT
Uses Queue Functionality
This means that if you write multiple animate() calls after each other,
jQuery creates an "internal" queue with these method calls. Then it
runs the animate calls ONE by ONE.
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow"); });
The example below first moves the <div> element to the right, and
then increases the font size of the text.
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow"); });
Vijayan.R / Asso Prof / SITE / VIT
Vijayan.R / Asso Prof / SITE / VIT
jQuery stop() Method $(selector).stop(stopAll,goToEnd);
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.
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});});
Vijayan.R / Asso Prof / SITE / VIT
