Scribd
Upload
25 views

J Query 2

The document discusses various jQuery methods for showing, hiding, and animating HTML elements on a web page. It describes the show(), hide(), toggle(), fadeIn(), fadeOut(), slideUp(), slideDown(), and animate() methods. It also covers jQuery events like click, mouseenter, keypress and how to attach event handler functions to elements.

Uploaded by

jasneet kaur
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
25 views

J Query 2

The document discusses various jQuery methods for showing, hiding, and animating HTML elements on a web page. It describes the show(), hide(), toggle(), fadeIn(), fadeOut(), slideUp(), slideDown(), and animate() methods. It also covers jQuery events like click, mouseenter, keypress and how to attach event handler functions to elements.

Uploaded by

jasneet kaur
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

Effects

jQuery Show and Hide Effects


It can show and hide HTML elements using the jQuery show() and hide() methods.
The hide() method simply sets the inline style display: none for the selected elements.
Conversely, the show() method restores the display properties of the matched set of elements
to whatever they initially were—typically block, inline, or inline-block—before the inline
style display: none was applied to them. Here's is an example.

Example
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});

// Show hidden paragraphs


$(".show-btn").click(function(){
$("p").show();
});
});
</script>

Example:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.4.min.js"></script>

<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});

// Show hidden paragraphs


$(".show-btn").click(function(){
$("p").show();
});
});
</script>

</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class = "hide-btn" >Click me to hide paragraphs</button>
<button class = "show-btn">Click me to show paragraphs</button>
</body>
</html>

jQuery toggle() Method


The jQuery toggle() method show or hide the elements in such a way that if the element is
initially displayed, it will be hidden; if hidden, it will be displayed (i.e. toggles the visibility).

Example
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>
Similarly, It can specify the duration parameter for the toggle() method to make it animated
like the show() and hide() methods.

jQuery Fading Effects


It can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML
elements by gradually increasing or decreasing their opacity.

Example
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});

// Fading in hidden paragraphs


$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>
Example:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.4.min.js"></script>

<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});

// Fading in hidden paragraphs


$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>

</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class = "out-btn" >Click me to fade out </button>
<button class = "in-btn" >Click me to fade in </button>
</body>
</html>

jQuery Sliding Effects


The jQuery slideUp() and slideDown() methods is used to hide or show the
HTML elements by gradually decreasing or increasing their height (i.e. by sliding
them up or down).

Example
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});

// Slide down hidden paragraphs


$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>

jQuery animate() Method


The jQuery animate() method is used to create custom animations. The animate() method is typically
used to animate numeric CSS properties, for
example, width, height, margin, padding, opacity, top, left, etc. but the non-numeric properties
such as color or background-color cannot be animated using the basic jQuery functionality.
Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are
numbers, lengths, percentages, or colors is animatable. However, the color animation is not support by the core
jQuery library. To manipulate and animate the color use the jQuery color plugin.

Syntax
The basic syntax of the jQuery animate() method can be given with:
$(selector).animate({ properties }, duration, callback);

The parameters of the animate() method have the following meanings:


 The required properties parameter defines the CSS properties to be animated.
 The optional duration parameter specifies how long the animation will run. Durations can
be specified either using one of the predefined string 'slow' or 'fast', or in a number of
milliseconds; higher values indicate slower animations.
 The optional callback parameter is a function to call once the animation is complete.

Here's a simple example of the jQuery animate() method that animates an image from its
original position to the right by 300 pixels on click of the button.

Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
Events in jQuery
Events are often triggered by the user's interaction with the web page, such as when a link or button is clicked,
text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard,
the mouse pointer is moved etc. In some cases, the Browser itself can trigger the events, such as the page load
and unload events.
jQuery enhances the basic event-handling mechanisms by offering the events methods for most native browser
events, some of these methods are ready(), click(), keypress(), focus(), blur(), change(), etc.
For example, to execute some JavaScript code when the DOM is ready, It can use the
jQuery ready() method, like this:

Example
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>

Mouse Events
A mouse event is fired when the user click some element, move the mouse pointer etc. Here're some
commonly used jQuery methods to handle the mouse events.

The click() Method


The jQuery click() method attach an event handler function to the selected elements for "click" event. The
attached function is executed when the user clicks on that element. The following example will hide
the <p> elements on a page when they are clicked.

Example
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>

The dblclick() Method


The jQuery dblclick() method attach an event handler function to the selected elements for "dblclick"
event. The attached function is executed when the user double-clicks on that element. The following example
will hide the <p> elements when they are double-clicked.

Example
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>

The hover() Method


The jQuery hover() method attach one or two event handler functions to the selected elements that is
executed when the mouse pointer enters and leaves the elements. The first function is executed when the user
place the mouse pointer over an element, whereas the second function is executed when the user removes the
mouse pointer from that element.
The following example will highlight <p> elements when It place the cursor on it, the highlighting will be
removed when It remove the cursor.

Example
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>

The mouseenter() Method


The jQuery mouseenter() method attach an event handler function to the selected elements that is executed
when the mouse enters an element. The following example will add the class highlight to the <p> element
when It place the cursor on it.

Example
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>

The mouseleave() Method


The jQuery mouseleave() method attach an event handler function to the selected elements that is executed
when the mouse leaves an element. The following example will remove the class highlight from
the <p> element when It remove the cursor from it.

Example
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>

Keyboard Events
A keyboard event is fired when the user press or release a key on the keyboard. Here're some commonly used
jQuery methods to handle the keyboard events.

The keypress() Method


The jQuery keypress() method attach an event handler function to the selected elements (typically form
controls) that is executed when the browser receives keyboard input from the user. The following example will
display a message when the kypress event is fired and how many times it is fired when It press the key on the
keyboard.

Example
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>

The keydown() Method


The jQuery keydown() method attach an event handler function to the selected elements (typically form
controls) that is executed when the user first presses a key on the keyboard. The following example will
display a message when the keydown event is fired and how many times it is fired when It press the key on the
keyboard.

Example
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>

The keyup() Method


The jQuery keyup() method attach an event handler function to the selected elements (typically form
controls) that is executed when the user releases a key on the keyboard. The following example will display a
message when the keyup event is fired and how many times it is fired when It press and release a key on the
keyboard.
Example
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>

Form Events
A form event is fired when a form control receive or loses focus or when the user modify a form control value
such as by typing text in a text input, select any option in a select box etc. Here're some commonly used
jQuery methods to handle the form events.

The change() Method


The jQuery change() method attach an event handler function to
the <input>, <textarea> and <select> elements that is executed when its value changes. The following
example will display an alert message when It select any option in dropdown select box.

Example
Try this code »

<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("It have selected - " + selectedOption);
});
});
</script>
Note: For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a
selection with the mouse, but for the text input and textarea the event is fired after the element loses focus.

The focus() Method


The jQuery focus() method attach an event handler function to the selected elements (typically form
controls and links) that is executed when it gains focus. The following example will display a message when
the text input receive focus.

Example
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>

The blur() Method


The jQuery blur() method attach an event handler function to the form elements such
as <input>, <textarea>, <select> that is executed when it loses focus. The following example will
display a message when the text input loses focus.

Example
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>

The submit() Method


The jQuery submit() method attach an event handler function to the <form> elements that is executed
when the user is attempting to submit a form. The following example will display a message depending on the
value entered when It try to submit the form.

Example
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>

You might also like