jQuery Selectors In Hindi

📔 : JQuery 🔗

Selectors , jQuery Library का सबसे important part है , Selectors का use करके ही DOM (Document Object Model) Element (such as <div>, <p>, <span> etc..) को manipulate किया जाता है।

jQuery में भी DOM Element (HTML Elements) को ठीक बैसे ही select किया जाता है जैसे CSS में करते हैं। Elements select करने के लिए $() का use करते हैं।

jQuery में Elements select list कुछ इस प्रकार है -

  • Element Selector

  • Class Selector

  • Id Selector

  • Multiple Selector

  • Universal Selector

jQuery Element Selector

jQuery में Elements select करने के लिए CSS की तरह direct element के name (such as </p> , <div> , <span> , <p>) से select करते हैं।

For Example

$('p'); /*selects all <p></p> elemnt of cusrrent page */
$('div'); /*selects all <div></div> elemnt of cusrrent page */
$('a'); /*selects all <a></a> elemnt of cusrrent page */
$('span'); /*selects all <span></span> elemnt of cusrrent page */
$('ul'); /*selects all <ul></ul> elemnt of cusrrent page */
$('li'); /*selects all <li></li> elemnt of cusrrent page */

jQuery Class Selector

किसी element में दी गयी class के according element select करने के लिए $('.className') use किया जाता है।

$('.myClass'); /*selects all elemnts that have myClass */
$('p .myClass'); /*selects all <p class="myClass"></p> elemnts that have myClass */

jQuery Id Selector

jQuery में हम किसी element में दी गयी Id का name use करके उस element को select करते हैं , यह सिर्फ single element को select करता है , क्योंकि Id Unique होती है और एक Id हम किसी एक element में ही दे सकते हैं।

$('#myId'); /*selects a single elemnt that have myId */
$('div #myId'); /*select particular <div id="myId"></div> elemnt that have myId */

jQuery Multiple Selectors

jQuery में multiple elements select करने के लिए ठीक CSS की तरह comma separated elements name / class names / Id देते हैं।

$('p, div, a, span'); /*selects all <p></p> , <div></div> , <a></a> , <span></span> of current document */
$('.class1, .class2, .class3'); /*selects all elemnts of current document that have .class1, .class2, .class3 class */
$('#Id1, #Id2, #id3'); /*selects all elemnts of current document that have #Id1, #Id2, #id3 Id */

jQuery Universal Selector

jQuery में Current Document के सभी elements को select करने के लिए $('*') use करते हैं , जो कि Current Document के सभी elements return करता है।

$('*'); 

तो कुछ इस तरह से jQuery में DOM (Document Object Model) Elements select करते हैं , जो कि JavaScript में DOM Elements select करने से काफी easy है।

Select किये गए DOM element / elements का object return करता है हिसे हम one by one या एक साथ manipulate कर सकते हैं।

Next Topic में हम पढ़ेंगे कि किस तरह से DOM Elements को select करके document को traverse / manipulate करते हैं।

Important
jQuery में ID Selector को छोड़कर , बाकी सभी selectors (class / tag ) में select करने पर सभी elements एक बार में ही मिल जाते हैं , means elements के text या html को modify करने के लिए हमें Core JavaScript की तरह loop नहीं use करना पड़ता , हम एक बार में सभी elements पर apply हो जाता है।
For Example

$('p').text('my dynamic text');

इस example के according web page में सभी paragraph का text change हो जाता है।

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook