Classes को Manage करना
In this page:
$(selector).addClass("classname");
$(selector).removeClass("classname");
$(selector).toggleClass("classname");
$(selector).hasClass("classname");addClass()
.addClass() किसी element पर पहले से मौजूद किसी भी classes को disturb किए बिना एक या ज़्यादा space-separated class names जोड़ता है। पहले से मौजूद class जोड़ने का कोई effect नहीं होता, इसलिए पहले check किए बिना call करना हमेशा safe है।
उदाहरण: addClass()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").addClass("highlight");
</script>
</body>
</html>removeClass()
removeClass() किसी element से एक या ज़्यादा classes हटाता है, किसी दूसरी classes को untouched छोड़ते हुए। इसे बिना किसी arguments के call करना element की इस समय मौजूद हर class हटा देता है।
उदाहरण: removeClass()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<p id="text" class="highlight bold">Text</p>
<script>
$("#text").removeClass("highlight");
</script>
</body>
</html>toggleClass()
toggleClass() जब कोई class missing हो तो उसे जोड़ता है और जब वह पहले से मौजूद हो तो उसे हटाता है, एक ही call से element की state flip करते हुए। यह इसे show/hide toggles या active/inactive UI states जैसी चीज़ों के लिए natural choice बनाता है।
उदाहरण: toggleClass()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.active { background: yellow; }
</style>
</head>
<body>
<button id="btn">Toggle</button>
<script>
$("#btn").on("click", function() {
$(this).toggleClass("active");
});
</script>
</body>
</html>hasClass()
hasClass() check करता है कि किसी element में इस समय एक specific class है या नहीं और element को बिल्कुल बदले बिना एक plain true या false return करता है। यह आमतौर पर किसी element की current visual state के आधार पर logic branch करने के लिए इस्तेमाल होता है।
उदाहरण: hasClass()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text" class="highlight">Text</p>
<script>
console.log($("#text").hasClass("highlight"));
</script>
</body>
</html>Classes के साथ काम करना
हर बार css() से individual CSS properties set करने के बजाय, classes किसी stylesheet में एक बार define की गई reusable styles और states लागू करने के लिए उपयोगी हैं। एक class toggle करना आमतौर पर हाथ से कई individual style properties toggle करने से साफ़ है।
उदाहरण: Working with Classes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<p id="text">Text</p>
<button id="btn">Style</button>
<script>
$("#btn").on("click", function() {
$("#text").toggleClass("highlight");
});
</script>
</body>
</html>- class name में एक dot जोड़ना, जैसे
.addClass(".highlight"), जबकि dot सिर्फ selectors के लिए है और इसे"highlight"होना चाहिए। - एक साथ कई classes test करने के लिए
.hasClass("a b")इस्तेमाल करना, जो class attribute में exact string check करता है, हर class को नहीं। .attr("class", "x")से एक class set करना और element पर बाकी classes मिटा देना, जबकि.addClass()उन्हें रखता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: