jQuery क्या है
In this page:
jQuery का परिचय
jQuery raw browser DOM API को एक ज़्यादा friendly, ज़्यादा consistent interface में wrap कर देता है ताकि आप elements को select और manipulate करने के लिए कम code लिखें।
उदाहरण: Introduction to jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="msg">Hello</p>
<script>
document.getElementById("msg").style.color = "blue";
$("#msg").css("color", "blue");
</script>
</body>
</html>jQuery क्यों इस्तेमाल करें
jQuery से पहले, developers को सिर्फ किसी element को select करने या किसी event को attach करने के लिए verbose, browser-specific code लिखना पड़ता था। jQuery ने उस boilerplate को छोटी, chainable one-liners में collapse कर दिया, यही वजह है कि यह एक दशक से ज़्यादा समय तक browser scripting के लिए standard library बनी रही।
उदाहरण: Why Use jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="msg">Hello</p>
<script>
$("#msg").css("color", "red").text("Updated").fadeOut(1000).fadeIn(1000);
</script>
</body>
</html>एक Element Select करना
किसी element को select करना लगभग हर jQuery snippet का starting point है, क्योंकि जब तक आपने उसका reference नहीं लिया तब तक आप कुछ भी बदल या पढ़ नहीं सकते। dollar-sign function, $(), एक CSS selector string accept करता है और हर match को wrap करने वाला एक jQuery object return करता है।
उदाहरण: Selecting an Element
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="greet">Hi</p>
<script>
var el = $(".greet");
console.log(el.length);
</script>
</body>
</html>Text बदलना
एक बार जब आपके पास एक jQuery object हो, .text() आपको आस-पास के HTML tags को छुए बिना उसके अंदर के text content को पढ़ने या overwrite करने देता है। यह उन सबसे common तरीकों में से एक है जिससे beginners user actions के जवाब में किसी page को update करते हैं।
उदाहरण: Changing Text
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="msg">Old text</p>
<script>
console.log($("#msg").text());
$("#msg").text("New text");
</script>
</body>
</html>एक Click Handle करना
Click handling selection और behavior को जोड़ देती है: आप एक element select करते हैं, फिर जब भी user उसके साथ interact करे तो एक function चलाने के लिए .on(click, ...) या .click() call करते हैं। यह pattern -- पहले select करो, फिर react करो -- लगभग सभी interactive jQuery code की backbone है।
उदाहरण: Handling a Click
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click me</button>
<script>
$("#btn").on("click", function() {
console.log("Button clicked");
});
</script>
</body>
</html>- jQuery को एक अलग language समझ लेना और यह भूल जाना कि यह एक JavaScript library है, इसलिए jQuery script load किए बिना
$("#msg").text("Hi")लिखना$को undefined छोड़ देता है। - plain DOM objects को jQuery objects के साथ mix करना, जैसे
document.getElementById("msg").text("Hi")call करना, जो fail हो जाता है क्योंकि.text()सिर्फ jQuery objects पर मौजूद है। - यह मान लेना कि jQuery कुछ ऐसा करता है जो browser नहीं कर सकता, जबकि यह सिर्फ DOM API को
$("#msg").css("color", "red")जैसी छोटी, ज़्यादा consistent calls में wrap करता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: