jQuery खोज ():एक चरण-दर-चरण मार्गदर्शिका

JQuery find() विधि परिचित लग सकती है, लेकिन इसे जावास्क्रिप्ट विधि से भ्रमित न करें find()! वे दोनों चीजें "ढूंढते हैं", लेकिन वे जो लौटते हैं वह काफी भिन्न हो सकता है। जावास्क्रिप्ट में, find() विधि को केवल एक सरणी पर बुलाया जा सकता है।

यह एक कॉलबैक फ़ंक्शन लेता है, जो एक तर्क के रूप में एक विधि को पारित किया गया एक फ़ंक्शन है, जिसे बाद में कॉल किया जाएगा। यह कॉलबैक फ़ंक्शन में उल्लिखित आवश्यकताओं को पूरा करने वाले पहले तत्व को ढूंढता है और लौटाता है।

JQuery find() तरीका काफी अलग है। सभी jQuery विधियों की तरह, इसे चयनकर्ता पर बुलाया जाता है। यह उस चयनकर्ता के भीतर खोज करता है और उस चयनकर्ता के केवल बाल तत्वों में हेरफेर करता है। यह उच्च स्तर का हेरफेर उपयोगी है यदि आप कुछ तत्वों को बदलना चाहते हैं, न कि अन्य जो समान मूल तत्व में निहित हैं।

jQuery खोज का उपयोग करना ()

अब हम जानते हैं jQuery find() किसी दिए गए चयनकर्ता के सभी बाल तत्वों का चयन करने के लिए उपयोग किया जाता है। JQuery का उपयोग कैसे करें यह देखने के लिए कुछ उदाहरण कोड पर एक नज़र डालें find() .

आइए सरल शुरू करें और आगे के अनुभागों में कुछ जटिलता जोड़ें। पेज लोड होने के बाद हम किसी तत्व में हेरफेर कर सकते हैं ताकि यह स्पष्ट किया जा सके कि find() काम करता है। पेज लोड होने के बाद हम पैराग्राफ के संदर्भ में कुछ शब्दों का रंग कैसे बदलते हैं? हम यहां शुरू करेंगे:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
jQuery find() method example
</h2>
  <p>
  This is an example paragraph. 
  </p>
  <p>We are going to change the color <span>blue</span> to the color blue.</p>
<div class="green">We are going to change the word <span>green</span> to the color green.</div> 
<p>
Every other will word will stay the same. 
</p>

</div>

इस कोड को देखें और आप देखेंगे कि

तत्व के अंदर कुछ तत्व हैं। तत्वों में से एक

तत्व का एक बच्चा है। अन्य

का एक बच्चा है जिसका हरे रंग का वर्ग है। जैसा कि हमारे पैराग्राफ में कहा गया है, हम केवल में लिपटे शब्दों का रंग बदल देंगे। ऐसा करने से पहले सुनिश्चित करें कि हमारा HTML रेंडर कर रहा है:

jQuery खोज ():एक चरण-दर-चरण मार्गदर्शिका

हमारा एचटीएमएल प्रतिपादन कर रहा है। अब हम find() . को दर्शाने के लिए टेक्स्ट के रंग बदलने जा रहे हैं कार्रवाई में। यह एक महान शुरुआत का कदम है क्योंकि इसे प्राप्त करने के लिए हमें केवल एक सीएसएस विशेषता को बदलने की जरूरत है।

तत्व को हमारे चयनकर्ता के रूप में पास करते समय find() , हम jQuery के css() . का उपयोग कर सकते हैं रंग परिवर्तन प्रस्तुत करने की विधि:

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
 
</script>

find() . के पहले प्रयोग में , हम सभी

तत्वों का चयन कर रहे हैं। हम find() . का उपयोग करते हैं किसी भी तत्वों का पता लगाने के लिए जो

के बच्चे हैं। इस उदाहरण में, यह केवल नीला शब्द है। फिर हम css() . का उपयोग करते हैं रंग को नीला करने की विधि।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

find() . के दूसरे उपयोग पर . इस बार हम हरे रंग के वर्ग के साथ

का चयन कर रहे हैं और find() . को कॉल कर रहे हैं इस पर। विधि एक और तत्व का पता लगा रही है जो

का बच्चा है।

फिर, यह केवल हरा शब्द है। पहली पंक्ति की तरह, हम css() . का उपयोग कर रहे हैं रंग को हरा करने की विधि।

चलो इसे चलाते हैं और देखते हैं कि क्या होता है!

ध्यान दें कि नीले और हरे दोनों शब्दों को एक स्पैन एलिमेंट में लपेटा गया था, जिसमें कोई क्लास या आईडी असाइन नहीं किया गया था। हम अभी भी उन शब्दों को अलग करने और उनका रंग बदलने में सक्षम हैं। जैसा कि आपने अनुमान लगाया होगा, ऐसा इसलिए है क्योंकि के मूल तत्व भिन्न हैं।

नीले शब्द के का जनक है।

हरे शब्द वाले का जनक है।

ऐसा इसलिए हुआ क्योंकि find() चयनकर्ता के रूप में उपयोग किए जाने वाले तत्वों के बच्चों का पता लगाता है। आइए कुछ जटिलता जोड़ें और एक टू डू लिस्ट का उदाहरण देखें।

jQuery find() एक सूची में

इस उदाहरण में, हमारे पास एक टू डू लिस्ट है। आज हमारे पास करने के लिए चीजें हैं, लेकिन उन्हें करने के लिए हमें स्टोर पर चीजें भी खरीदनी पड़ती हैं। एक बार जब हम इन वस्तुओं को खरीद लेते हैं, तो हम उन्हें सूची से बाहर कर सकते हैं और अपने दिन के साथ आगे बढ़ सकते हैं! यहाँ हमारी सूची है:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
  <li class="store">Go to the store
    <ul>
      <li>Trash bags</li>
      <li>Dish Soap</li>
    </ul>
  </li>
  <li>Take out the trash</li>
  <Li>Wash the dishes</Li>
</ul>
</div>

यहां हमारे पास हमारी सूची है। हमारे पास

तत्व हैं, जो एक आईडी के साथ हमारे
का एक बच्चा है "मुख्य" का। हमारे "स्टोर पर जाएं" सूची आइटम के अंदर, हमारे पास स्टोर पर खरीदने के लिए चीजें हैं। आज हमें अपने कामों को पूरा करने के लिए कचरा बैग और डिश सोप की जरूरत है। हमने उन्हें स्टोर के वर्ग के साथ
में बच्चे के रूप में नेस्टेड सूची के रूप में रखा है।

अब हम इन वस्तुओं को खरीदने के बाद सूची से बाहर कर सकते हैं:
```
<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>
```
हम स्टोर की श्रेणी के साथ
का चयन करके और find() का उपयोग करके अपनी सूची में केवल उन वस्तुओं को पार कर सकते हैं बच्चों
तत्वों का पता लगाने के लिए। फिर से, हम jQuery css() . का उपयोग कर रहे हैं "पाठ-सजावट" की विशेषता के लिए "लाइन-थ्रू" का मान लागू करने की विधि। ऐसा करने से चयनित आइटम उनके माध्यम से एक पंक्ति के साथ प्रस्तुत होंगे:

निष्कर्ष

JQuery find() विधि उस चयनकर्ता के सभी बाल तत्वों का पता लगाती है जो इसे पारित किया गया है। find() विधि केवल इन बाल तत्वों में हेरफेर करेगी, न कि स्वयं माता-पिता।

बाल तत्वों को चुनने के लिए अंतर करने में सक्षम होने से हम सामान्य हो सकते हैं और किसी पृष्ठ के पूरे अनुभागों को बदल सकते हैं, या विशिष्ट और केवल पृष्ठ के कुछ तत्वों को बदल सकते हैं। यह इस लचीलेपन के भीतर है कि find() स्वयं को सर्वाधिक उपयोगी बनाता है।

यहां jQuery सीखने के तरीके के बारे में और जानें।

jQuery खोज ():एक चरण-दर-चरण मार्गदर्शिका

jQuery खोज का उपयोग करना ()

jQuery find() एक सूची में

निष्कर्ष