Previous Next

jQuery Selectors in Hindi

jQuery Selectors का use HTML page के किसी specific element या elements को select करने के लिए किया जाता है। किसी element को select करने के बाद हम उस पर अलग-अलग actions perform कर सकते हैं, जैसे उसका text बदलना, CSS लगाना, hide/show करना, class add/remove करना या event handle करना।

jQuery selectors का syntax काफी simple होता है और यह काफी हद तक CSS selectors जैसा दिखाई देता है। jQuery में selector को आमतौर पर $() के अंदर लिखा जाता है।

$(selector)

उदाहरण के लिए:

$("#title")

इसका मतलब है कि जिस HTML element की id="title" है, उसे select किया जाएगा। इसके बाद उस element पर कोई jQuery method apply किया जा सकता है।

$("#title").hide();

ऊपर दिए example में #title selector element को select करता है और hide() method उसे hide कर देता है।

jQuery Selector का Basic Syntax

jQuery selector का basic syntax इस प्रकार होता है:

$(selector).method();

यहाँ $() selector को select करता है और उसके बाद method उस selected element पर action perform करता है।

उदाहरण:

$("#message").text("Hello World");

इसमें #message ID वाले element को select करके उसका text बदल दिया जाएगा।

Types of jQuery Selectors

1. Basic Selectors

Basic selectors का use HTML elements को उनकी ID, class या tag name के आधार पर select करने के लिए किया जाता है। ये jQuery में सबसे ज्यादा इस्तेमाल होने वाले selectors में से हैं।

(a) ID Selector

ID selector किसी एक particular HTML element को उसकी unique id के आधार पर select करता है। ID selector से पहले # लगाया जाता है।

$("#myId")

उदाहरण:

<p id="myId">Hello</p>

ऊपर दिए element को select करने के लिए:

$("#myId")

आमतौर पर एक ID page पर एक unique element को identify करने के लिए रखी जाती है। इसलिए जब किसी एक specific element पर action करना हो, तो ID selector useful होता है।

(b) Class Selector

Class selector किसी element को उसकी class के आधार पर select करता है। Class selector से पहले . लगाया जाता है।

$(".myClass")

उदाहरण:

<div class="myClass">Welcome</div>

यदि कई elements में एक ही class है, तो class selector उन सभी matching elements को select कर सकता है।

$(".box")

यह page के सभी elements को select करेगा जिनकी class box है।

(c) Element Selector

Element selector सीधे HTML tag के नाम से elements को select करता है। इसमें किसी # या . की जरूरत नहीं होती।

$("p")

उदाहरण:

<p>This is a paragraph.</p>

$("p") page के सभी <p> elements को select करेगा। इसी तरह:

$("h1")
$("div")
$("button")

क्रमशः सभी h1, div और button elements को select कर सकते हैं।

2. Universal Selector

Universal selector का use page के सभी HTML elements को select करने के लिए किया जाता है। इसके लिए * symbol का use किया जाता है।

$("*")

उदाहरण:

<p>Hello</p>
<div>World</div>

इस case में <p> और <div> दोनों सहित page के सभी matching elements select हो जाएंगे।

Universal selector powerful है, लेकिन बड़े page पर सभी elements को select करने से unnecessary processing हो सकती है। इसलिए इसे जरूरत के अनुसार ही use करना बेहतर होता है।

3. Group Selector

Group selector का use एक ही selector में multiple elements या selectors को select करने के लिए किया जाता है। Multiple selectors को comma , से separate किया जाता है।

$("h1, p, .box")

इसमें सभी <h1> elements, सभी <p> elements और box class वाले elements select होंगे।

उदाहरण:

<h1>Heading</h1>
<p>Paragraph</p>
<div class="box">Box Content</div>

अगर इन सभी पर एक जैसा CSS या कोई action apply करना हो, तो group selector useful होता है।

4. Attribute Selectors

Attribute selectors का use किसी HTML element के attributes के आधार पर उसे select करने के लिए किया जाता है। यह तब useful होता है जब हमें किसी element की ID या class के बजाय उसके attribute की value के आधार पर उसे select करना हो।

(a) Specific Attribute

किसी particular attribute और उसकी value वाले element को select करने के लिए:

$("input[type='text']")

यह उन सभी <input> elements को select करेगा जिनका type="text" है।

(b) Attribute Starts With (^=)

^= का मतलब है कि attribute की value किसी particular text से शुरू होनी चाहिए।

$("a[href^='https']")

यह उन links को select करेगा जिनका href attribute https से शुरू होता है।

(c) Attribute Ends With ($=)

$= का use तब किया जाता है जब attribute की value किसी particular text पर समाप्त होती है।

$("img[src$='.png']")

यह उन images को select करेगा जिनका src path .png पर समाप्त होता है।

(d) Attribute Contains (*=)

*= का use तब किया जाता है जब attribute की value के अंदर कोई particular text मौजूद हो।

$("div[class*='box']")

यह उन <div> elements को select कर सकता है जिनकी class attribute value में box text मौजूद है।

5. Hierarchy Selectors

Hierarchy selectors का use HTML elements के आपसी relationship के आधार पर elements को select करने के लिए किया जाता है। इससे हम parent, child और sibling relationship के अनुसार elements को target कर सकते हैं।

(a) Descendant Selector – Space

Space selector किसी element के अंदर मौजूद matching descendants को select करता है।

$("div p")

इसका मतलब है कि <div> के अंदर मौजूद सभी matching <p> elements select किए जाएंगे।

(b) Child Selector – >

> selector केवल direct child को select करता है।

$("ul > li")

यह केवल उन <li> elements को select करेगा जो सीधे <ul> के child हैं। अगर <li> किसी दूसरे element के अंदर nested है, तो वह इस selector से direct child के रूप में match नहीं होगा।

(c) Adjacent Sibling Selector – +

+ selector किसी element के तुरंत बाद आने वाले matching sibling को select करता है।

$("h2 + p")

इसका मतलब है कि जो <p> element किसी <h2> के तुरंत बाद आता है, उसे select किया जाएगा।

6. Form Selectors

jQuery में forms के elements को आसानी से select करने के लिए कुछ special selectors भी उपलब्ध हैं। इनका use input fields, checkbox, radio button और dropdown options के साथ किया जा सकता है।

(a) All Input Fields

:input selector form के input-related elements को select करने के लिए use किया जाता है।

$(":input")

यह form controls जैसे input, textarea, select और button आदि को target करने में useful हो सकता है।

(b) Checked Elements

:checked selector currently checked checkbox या selected radio-type control को select करने के लिए use किया जाता है।

$(":checked")

(c) Selected Option

Dropdown में currently selected option को select करने के लिए:

$("select option:selected")

यह selected <option> element को target करेगा।

7. jQuery Filters

Filters का use पहले से selected elements के अंदर से specific elements को चुनने के लिए किया जाता है। ये selectors खासकर multiple matching elements में से particular position वाले elements को target करने में useful होते हैं।

(a) First Element

$("p:first")

यह matching paragraphs में से पहला paragraph select करता है।

(b) Last Element

$("div:last")

यह matching div elements में से आखिरी div को select करता है।

(c) Even Elements

$("li:even")

यह matching list items में even index वाले elements को select करता है। jQuery के इन positional filters में counting आमतौर पर 0 से शुरू होती है, इसलिए पहला matched element index 0 माना जाता है।

(d) Odd Elements

$("li:odd")

यह matching list items में odd index वाले elements को select करता है।

jQuery Selectors का Practical Example

नीचे एक complete example दिया गया है जिसमें ID selector, class selector, element selector और group selector का practical use दिखाया गया है। सभी examples इसी HTML page पर live run किए जा सकते हैं।

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Selectors Example</title>

.highlight {
                background-color: yellow;
            }

</style>

// ID selector
                $("#hidePara").click(function() {
                    $("#p1").hide();
                });

// Class selector
                $("#highlightBoxes").click(function() {
                    $(".box").addClass("highlight");
                });

// Element selector
                $("#colorHeadings").click(function() {
                    $("h2").css("color", "blue");
                });

// Group selector
                $("#hideAll").click(function() {
                    $("h2, .box").hide();
                });

});
        </script>
    </head>

<body>

<h2>Heading One</h2>

<p id="p1">This is a paragraph with ID "p1".</p>

<button id="hidePara">Hide Paragraph</button>
        <button id="highlightBoxes">Highlight Boxes</button>
        <button id="colorHeadings">Make Heading Blue</button>
        <button id="hideAll">Hide All</button>

</body>
</html>

Code copied!

Attribute Selector का Practical Example

Attribute selectors की मदद से हम form elements को उनकी attribute values के आधार पर target कर सकते हैं।

HTML

Code copied!

Hierarchy Selector का Practical Example

Hierarchy selectors HTML structure के relation के आधार पर elements को select करते हैं। नीचे descendant और child selector दोनों का example है।

HTML

Code copied!

Form Selectors का Practical Example

Form selectors का use checkbox और dropdown जैसे controls की current state को select करने के लिए किया जा सकता है।

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Form Selectors</title>

$("#showSelected").click(function() {

let result = "";

if ($(":checked").length > 0) {
                        result += "Checkbox is checked.<br>";
                    } else {
                        result += "Checkbox is not checked.<br>";
                    }

let selected = $("select option:selected").text();

result += "Selected option: " + selected;

$("#result").html(result);
                });

});

</script>
    </head>

<body>

<label>
            <input type="checkbox" id="terms">
            I agree
        </label>

<select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>

<button id="showSelected">Check Selection</button>

</body>
</html>

Code copied!

Filters का Practical Example

jQuery filters का use matching elements में से first, last, even या odd elements को target करने के लिए किया जा सकता है।

HTML

Code copied!

Common jQuery Selectors – Quick Reference

Selector	Use	Example
#id	ID के आधार पर select	$("#title")
.class	Class के आधार पर select	$(".box")
element	Tag के आधार पर select	$("p")
*	सभी elements select	$("*")
A, B	Multiple selectors	$("h1, p")
A B	Descendant	$("div p")
A > B	Direct child	$("ul > li")
A + B	Adjacent sibling	$("h2 + p")
[attr]	Attribute के आधार पर	$("input[type='text']")
:checked	Checked controls	$(":checked")
:first	पहला matching element	$("p:first")
:last	आखिरी matching element	$("p:last")

jQuery Selectors के फायदे

HTML elements को आसानी से target किया जा सकता है।
ID और class के आधार पर specific elements select किए जा सकते हैं।
एक साथ multiple elements को select किया जा सकता है।
Attribute के आधार पर elements को target किया जा सकता है।
Parent-child और sibling relationships के आधार पर selection किया जा सकता है।
Form elements को आसानी से select और manipulate किया जा सकता है।
Filters की मदद से matching elements में से specific elements चुने जा सकते हैं।
Selected elements पर jQuery methods जैसे hide(), show(), css(), text(), html(), addClass() आदि apply किए जा सकते हैं।

jQuery Selectors और CSS Selectors में संबंध

jQuery selectors का syntax काफी हद तक CSS selectors जैसा होता है। जैसे CSS में किसी class को select करने के लिए .box और ID के लिए #title लिखा जाता है, वैसे ही jQuery में भी इन्हीं selectors का use किया जा सकता है।

अंतर यह है कि CSS selector का use मुख्य रूप से styling के लिए किया जाता है, जबकि jQuery selector से element select करके उस पर JavaScript-based actions और manipulation किए जा सकते हैं।

Important Points

# का use ID selector के लिए किया जाता है।
. का use class selector के लिए किया जाता है।
Tag name लिखकर element selector बनाया जा सकता है।
* universal selector है।
Comma , से multiple selectors को group किया जा सकता है।
Space descendant selector को represent करता है।
> direct child selector है।
+ immediately following sibling को select करता है।
Attribute selectors element की attributes के आधार पर selection करते हैं।
Form selectors checkbox, radio और select जैसे controls के साथ useful होते हैं।
Selectors के बाद jQuery methods लगाकर selected elements पर action perform किया जाता है।

Conclusion

jQuery Selectors jQuery की सबसे important features में से एक हैं। इनकी मदद से हम HTML page के किसी एक element, multiple elements या किसी specific relationship वाले elements को आसानी से select कर सकते हैं। ID, class और element selectors से लेकर attribute, hierarchy, form और filter selectors तक, अलग-अलग situations में अलग selector का use किया जाता है।

जब selectors को hide(), show(), css(), text(), html(), addClass(), removeClass() और event methods के साथ use किया जाता है, तब jQuery की मदद से interactive और dynamic web pages बनाना काफी आसान हो जाता है।

Previous Next

Code copied!

Page Views

Visit ID

Not tracked yet

Visit Time

Time on Page

0 seconds

Request

Full Name *

Email Address *

Mobile Number

Message *

INITIALIZING...