web

JQuery Event Methods, JQuery Effects, Header/Footer using JQuery

by
with no comment
Contents hide
1 JQuery Event
1.1 click() Method
1.2 hover() Method
1.3 on() Method
1.4 keypress() Method
2 JQuery Effects (Hide/Show, Fade, Slide)
2.1 Hide/Show Effect
2.2 Fade Effect
2.3 Slide Effect
3 Insertion of header/footer in HTML Pages using JQuery
3.1 Implementation

JQuery Event

jQuery Method के एक Set के माध्यम से Event Handling को सरल बनाता है, जो Developers को Click, Keypresses या Mouse Movement जैसी User Action पर Respond देने की Permission देता है। ये Method Event Handler को HTML Element से Attach करने के लिए एक Consistent और Cross-Browser-Compatible Way Provide करता हैं।

Common jQuery Event Methods

  • click() Method

किसी Function को HTML Element के Click Event में Attach करने के लिए click() Method का use किया जाता है।

Example:



$(document).ready(function(){

$(“#myButton”).click(function(){

alert(“Button clicked!”);

});

});

  • hover() Method

hover() Method, Mouseenter और Mouseleave दोनों Event को Handle करने का एक सुविधाजनक तरीका है।

Example:



$(document).ready(function(){

$(“#myElement”).hover(

function(){

$(this).css(“color”, “blue”);

},

function(){

$(this).css(“color”, “black”);

}

);

});

  • on() Method

on() Method एक Versatile Event Handler है, जिसका use एक या अधिक Event के लिए Multiple Event Handler Attach करने के लिए किया जाता है।

Example:



$(document).ready(function(){

$(“#myInput”).on({

focus: function(){

$(this).css(“background-color”, “#e0e0e0”);

},

blur: function(){

$(this).css(“background-color”, “white”);

}

});

});

  • keypress() Method

keypress() Method का use किसी Function को keypress Event में Attach करने के लिए किया जाता है| जोकि तब होता है, जब किसी Key को Press किया जाता है| और किसी Element पर छोड़ा जाता है।

Example:



$(document).ready(function(){

$(“#myInput”).keypress(function(){

console.log(“Key pressed!”);

});

});

JQuery Effects (Hide/Show, Fade, Slide)

jQuery, एक Fast और Lightweight JavaScript Library है, जो Web Developers को DOM Munipulate और Events Handling की Complexities को सरल बनाने में सक्षम बनाती है। हम तीन आवश्यक jQuery Effects पर प्रकाश डालते हैं – जोकि Hide/Show, Fade और Slide Effects हैं।

  • Hide/Show Effect

jQuery में Hide/Show Effect आपको HTML Element की Visibility को सहजता से Toggle करने की Permission देता है। यह Effect विशेष रूप से तब use होता है, जब आप Dynamic और Interactive User Interface बनाना चाहते हैं।

Example:



<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Hide/Show Effect</title>

<script src=”https://code.jquery.com/jquery-3.6.4.min.js”></script>

<style>

.hidden-element {

display: none;

}

</style>

</head>

<body>


<button id=”toggleButton”>Toggle Element</button>

<div id=”targetElement” class=”hidden-element”>

This is a hidden element.

</div>


<script>

$(document).ready(function () {

$(“#toggleButton”).click(function () {

$(“#targetElement”).toggle();

});

});

</script>


</body>

</html>

इस Example में, ID “toggleButton” वाला एक Button बनाया गया है, और ID “targetElement” वाला एक Hide Element शुरू में CSS का use करके Hide किया गया है। Button Click करने पर jQuery Script Targer Element की Visibility को Toggles कर देती है।

  • Fade Effect

jQuery में Fade Effect किसी Element की Opacity को आसानी से बदल देता है, जिससे एक Visually Appealing Transition बनता है।

Example:



<!– Similar HTML and script setup as the Hide/Show example –>


<script>

$(document).ready(function () {

$(“#toggleButton”).click(function () {

$(“#targetElement”).fadeToggle();

});

});

</script>

इस Example में, Fade Effect Apply करने के लिए Toggle के बजाय fadeToggle Method का use किया जाता है। Button Click करने पर Target Element की Opacity सुचारू रूप से परिवर्तित हो जाएगी।

  • Slide Effect

jQuery में Slide Effect किसी Element के Height को Animates करता है, जिससे वह Sliding Motion के साथ Appear या Disappear हो जाता है।

Example:



<!– Similar HTML and script setup as the Hide/Show example –>


<script>

$(document).ready(function () {

$(“#toggleButton”).click(function () {

$(“#targetElement”).slideToggle();

});

});

</script>

यहां, Button Click करने पर Sliding Effect बनाने के लिए slideToggle Method का use किया जाता है। Target Element अपनी Current Visibility State के Base पर आसानी से Up या Down Slide करता है।

Insertion of header/footer in HTML Pages using JQuery

jQuery, HTML Document को Traverse करने और Munipulate करने के लिए एक Detailed Syntax Provide करता है, जो इसे Dynamic Content Insertion को Handle करने के लिए एक Ideal Choice बनाता है। यह Capability विशेष रूप से तब use होती है| जब Duplicate Code के बिना Multiple Pages में Header और Footer जैसे Common Element को Include करना चाहते हैं।

Implementation

आइए एक Simple Scenario पर विचार करें| जहां आपके पास Header और Footer के लिए Container के रूप में काम करने के लिए Defined <div> Element वाली एक HTML File है। हम इस Container में Header और Footer Content को Dynamically रूप से Load करने के लिए jQuery का use करेंगे।

HTML Structure



<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Dynamic Header/Footer Insertion</title>

<!– Include jQuery –>

<script src=”https://code.jquery.com/jquery-3.6.4.min.js”></script>

</head>

<body>

<div id=”page-container”>

<!– Header will be inserted here –>

<div id=”header-container”></div>


<!– Main content goes here –>


<!– Footer will be inserted here –>

<div id=”footer-container”></div>

</div>


<!– Additional scripts and content –>

</body>

</html>

jQuery Script



<script>

// jQuery document ready function

$(document).ready(function() {

// Load header content

$(“#header-container”).load(“header.html”);


// Load footer content

$(“#footer-container”).load(“footer.html”);

});

</script>

इस Example में, jQuery में Load Funtion का use निर्दिष्ट HTML File के Content को Respective Container (#header-container और #footer-container) में लाने और Inject करने के लिए किया जाता है। सुनिश्चित करें कि Header और Footer HTML File के Path सही हैं।

Benefits

  • Code Reusability: Header और Footer Content को अलग-अलग HTML File में Store किया जाता है, जो Multiple Page पर Code Reusability को बढ़ावा देता है।
  • Maintenance: Header या Footer में Modifications एक साथ सभी Page पर प्रतिबिंबित होते हैं, जिससे Maintenance सुव्यवस्थित हो जाता है।
Post Views: 481
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *