jQuery Syntax
In this page:
$(selector).action();
$(selector).action(parameter);Basic Syntax
हर jQuery statement एक जैसी shape follow करता है -- $(selector).action() -- एक selector को dollar function में wrap करें, फिर वह operation chain करें जो आप चाहते हैं।
उदाहरण: Basic Syntax
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="demo">Text</p>
<button id="btn">Hide</button>
<script>
$("#btn").on("click", function() {
$("#demo").hide();
});
</script>
</body>
</html>ID से Select करना
HTML convention के अनुसार एक ID किसी page पर unique होती है, इसलिए $('#header') जैसा एक hash-prefixed selector किसी exact element को grab करने का सबसे तेज़ और सबसे precise तरीका है जब आपको उसका id attribute पता हो।
उदाहरण: Select by ID
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1 id="header">Title</h1>
<script>
$("#header").css("color", "purple");
</script>
</body>
</html>Class से Select करना
Classes कई elements में reuse की जा सकती हैं, इसलिए $('.item') जैसा एक dot-prefixed selector उस class को share करने वाले हर element को wrap करने वाला एक jQuery object return करता है, जिससे आप एक पूरे group पर एक साथ action ले सकते हैं।
उदाहरण: Select by Class
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">One</p>
<p class="item">Two</p>
<script>
$(".item").css("color", "green");
</script>
</body>
</html>CSS बदलना
.css() method JavaScript के through सीधे एक individual CSS property पढ़ती या set करती है, जो quick style tweaks के लिए काम की है लेकिन एक-बार वाले बदलाव से ज़्यादा किसी भी चीज़ के लिए आमतौर पर एक class toggle करना बेहतर replacement है।
उदाहरण: Change CSS
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="box">Styled</p>
<script>
console.log($("#box").css("font-size"));
$("#box").css("font-size", "20px");
</script>
</body>
</html>Hide और Show
.hide() और .show() methods किसी element की display style को none और उसकी पिछली value के बीच toggle करते हैं, आपको बिना खुद कोई CSS लिखे content reveal या conceal करने का एक simple तरीका देते हुए।
उदाहरण: Hide and Show
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="box">Toggle me</p>
<button id="btn">Toggle</button>
<script>
$("#btn").click(function() {
$("#box").hide();
$("#box").show();
});
</script>
</body>
</html>#या.prefix भूल जाना, जैसे$("header"), जोid="header"वाले element के बजाय<header>tags select करता है।- selector के बाद action छोड़ देना, जैसे अकेले
$("#demo"), जो element select करता है लेकिन कुछ नहीं बदलता। - यह उम्मीद करना कि set करते समय
.css()element return करेगा:$("#demo").css("color", "red")jQuery object return करता है, जबकि एक argument वाला.css("color")एक string return करता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: