Document Ready Event
In this page:
$(document).ready(function () {
// code runs when the DOM is ready
});
$(function () {
// shorthand
});Document Ready क्यों मायने रखता है
HTML load होना खत्म होने से पहले jQuery code चलाने का मतलब है कि आप जिन elements को select करने की कोशिश कर रहे हैं वे अभी बस मौजूद ही नहीं होंगे, इसलिए scripts चुपचाप fail हो जाते हैं।
उदाहरण: Why Document Ready Matters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$("#msg").text("This fails silently, #msg does not exist yet");
</script>
</head>
<body>
<p id="msg">Original</p>
</body>
</html>Basic Ready Syntax
$(document).ready(function(){...}) आपके code को तब तक delay करता है जब तक browser पूरे HTML structure को parse नहीं कर लेता, guarantee करते हुए कि callback में आप जिस भी element को reference करें वह असल में DOM में मौजूद है।
उदाहरण: Basic Ready Syntax
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="msg">Original</p>
<script>
$(document).ready(function() {
$("#msg").text("DOM is ready");
});
</script>
</body>
</html>एक Function के साथ Ready
आप एक single ready callback के अंदर कितने भी jQuery statements रख सकते हैं, और document parse होने पर वे सब एक साथ चलेंगे -- ज़्यादातर beginner jQuery pages अपना पूरा script यहीं रखते हैं।
उदाहरण: Ready with a Function
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="a">A</p><p id="b">B</p>
<script>
$(document).ready(function() {
$("#a").text("Updated A");
$("#b").text("Updated B");
});
</script>
</body>
</html>Ready और Button Events
document ready के अंदर click और दूसरे event handlers attach करना ज़रूरी है, क्योंकि अभी तक मौजूद न हुए किसी element पर एक handler bind करना चुपचाप कुछ नहीं करता -- handler बस कभी attach ही नहीं होता।
उदाहरण: Ready and Button Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$(document).ready(function() {
$("#btn").click(function() {
console.log("Handler attached inside ready, works correctly");
});
});
</script>
</body>
</html>Modern Shorthand
shorthand $(function(){...}) functionally $(document).ready(...) जैसा ही है लेकिन लिखने में छोटा, और यह वही form है जो आप real-world jQuery code और tutorials में सबसे ज़्यादा देखेंगे।
उदाहरण: Modern Shorthand
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="msg">Original</p>
<script>
$(function() {
$("#msg").text("Shorthand ready works too");
});
</script>
</body>
</html>- body मौजूद होने से पहले head में
$("#msg").text(...)चलाना, इसलिए selector किसी से भी match नहीं करता और jQuery बिना किसी error के चुपचाप fail हो जाता है। - ready callback के बाहर किसी ऐसे element के लिए click handler bind करना जो अभी DOM में नहीं है, इसलिए handler कभी attach नहीं होता।
- जब script पहले से body के आख़िर में हो तब भी
$(document).readyजोड़ना, या closing});भूल जाना, जो एक syntax error छोड़ देता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: