JQuery में एक तत्व बनाने का तरीका जानें

JQuery में एक तत्व बनाने का तरीका जानें

एक नया तत्व बनाना सबसे बुनियादी कार्यों में से एक है जिसे आप jQuery जावास्क्रिप्ट लाइब्रेरी के साथ पूरा कर सकते हैं। JQuery का उपयोग करते हुए, कार्य दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) के समकक्ष दृष्टिकोण की तुलना में बहुत सरल है। आप इसे और अधिक लचीला और अभिव्यंजक पाएंगे, जितना अधिक आप jQuery का उपयोग करेंगे।





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



jQuery क्या है?

JQuery पुस्तकालय का एक संग्रह है जावास्क्रिप्ट दो प्राथमिक उद्देश्यों के साथ कोड:





  • यह सामान्य जावास्क्रिप्ट संचालन को सरल करता है।
  • यह विभिन्न ब्राउज़रों के बीच क्रॉस-संगतता जावास्क्रिप्ट मुद्दों को संभालता है।

दूसरा उद्देश्य बग को पूरा करता है, लेकिन यह ब्राउज़रों के बीच कार्यान्वयन के अंतर को भी संबोधित करता है। दोनों उद्देश्य पहले की तुलना में कम आवश्यक हैं, क्योंकि समय के साथ ब्राउज़र में सुधार होता है। लेकिन jQuery अभी भी एक मूल्यवान उपकरण हो सकता है।

एक तत्व क्या है?

एक तत्व को कभी-कभी टैग के रूप में जाना जाता है। हालाँकि दोनों को अक्सर एक-दूसरे के लिए इस्तेमाल किया जाता है, लेकिन एक सूक्ष्म अंतर है। एक टैग शाब्दिक को संदर्भित करता है

या



आप टेक्स्ट सामग्री को मार्कअप करने के लिए एक HTML फ़ाइल में शामिल करते हैं। एक तत्व पर्दे के पीछे की वस्तु है जो चिह्नित पाठ का प्रतिनिधित्व करता है। किसी तत्व को HTML टैग्स के DOM समकक्ष के रूप में सोचें।

JQuery का उपयोग करके एक नया तत्व कैसे बनाएं

अधिकांश jQuery के संचालन की तरह, एक तत्व बनाना डॉलर फ़ंक्शन से शुरू होता है, $ () . यह कोर का शॉर्टकट है jQuery () समारोह। इस फ़ंक्शन के तीन अलग-अलग उद्देश्य हैं, यह:



  • तत्वों से मेल खाता है, आमतौर पर वे जो दस्तावेज़ में पहले से मौजूद हैं
  • नए तत्व बनाता है
  • DOM तैयार होने पर कॉलबैक फ़ंक्शन चलाता है

जब आप पहले पैरामीटर के रूप में HTML युक्त एक स्ट्रिंग पास करते हैं, तो यह फ़ंक्शन एक नया तत्व बनाएगा:

$(' ')

यह एक विशेष jQuery ऑब्जेक्ट देता है जिसमें तत्वों का संग्रह होता है। इस मामले में, एक 'ए' तत्व का प्रतिनिधित्व करने वाली एक वस्तु है जिसे हमने अभी बनाया है।



अपने मैक को वायरलेस रूप से अपने रोकू पर मिरर करें

इस क्रिया को मेल खाने वाले तत्वों से अलग करने के लिए स्ट्रिंग को HTML जैसा दिखना चाहिए। व्यवहार में, इसका मतलब है कि स्ट्रिंग को a . से शुरू होना चाहिए < . आप इस पद्धति का उपयोग करके दस्तावेज़ में सादा पाठ नहीं जोड़ सकते।

यह समझना महत्वपूर्ण है कि यह आपके दस्तावेज़ में तत्व नहीं जोड़ता है, यह केवल आपके लिए जोड़ने के लिए तैयार एक नया तत्व बनाता है। तत्व 'असंबद्ध' है, स्मृति ले रहा है लेकिन वास्तव में अंतिम पृष्ठ का हिस्सा नहीं है-अभी तक।

अधिक जटिल HTML जोड़ना

डॉलर फ़ंक्शन वास्तव में एक से अधिक तत्व बना सकता है। वास्तव में, यह आपके इच्छित HTML तत्वों के किसी भी पेड़ का निर्माण कर सकता है:

$('
  • one
  • two
  • three
')

आप इस प्रारूप का उपयोग विशेषताओं के साथ एक तत्व बनाने के लिए भी कर सकते हैं:

$(' my hometown')

एक नए तत्व पर गुण कैसे सेट करें

आप एक नया jQuery तत्व बना सकते हैं और पूर्ण HTML स्ट्रिंग को स्वयं बनाए बिना इसकी विशेषताओं को सेट कर सकते हैं। यह उपयोगी है यदि आप गतिशील रूप से विशेषता मान उत्पन्न कर रहे हैं। उदाहरण के लिए:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

एक तत्व कैसे जोड़ें

एक बार जब आप एक नया तत्व बना लेते हैं, तो आप इसे कई अलग-अलग तरीकों से दस्तावेज़ में जोड़ सकते हैं। JQuery दस्तावेज़ इन विधियों को एक साथ इकट्ठा करता है 'हेरफेर' श्रेणी .

मौजूदा तत्व के बच्चे के रूप में जोड़ें

$('body').append($('

Hello, world

'));
$(document.body).append($el);

आप इस पद्धति का उपयोग कर सकते हैं, उदाहरण के लिए, सूची के अंत में एक नया सूची आइटम जोड़ने के लिए।

इसे मौजूदा तत्व के सहोदर के रूप में जोड़ें

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    यह एक अच्छा विकल्प है, उदाहरण के लिए, आप दो अन्य के बीच में एक नया पैराग्राफ जोड़ना चाहते हैं।

    मौजूदा तत्व को बदलें

    आप एक मौजूदा तत्व को नए बनाए गए के लिए स्वैप कर सकते हैं के साथ बदलें() तरीका:

    $('#old').replaceWith('

    New paragraph

    ');

    मौजूदा तत्व के चारों ओर लपेटें

    यह काफी दुर्लभ उपयोग का मामला है, लेकिन हो सकता है कि आप किसी मौजूदा तत्व को एक नए में संलग्न करना चाहें। उदाहरण के लिए, आपके पास एक हो सकता है कोड वह तत्व जिसे आप लपेटना चाहते हैं a के लिये :

    $('code#n1').wrap('
    ')
    आपके द्वारा बनाए गए तत्व तक पहुंचना
     
    NS $ () फ़ंक्शन एक jQuery ऑब्जेक्ट देता है। यह अनुवर्ती कार्रवाई के लिए उपयोगी है:
    $el = $('p');  
    $('body').append($el);
    ध्यान दें कि, परंपरा के अनुसार, jQuery प्रोग्रामर अक्सर एक प्रमुख डॉलर चिह्न के साथ jQuery चर का नाम देते हैं। यह केवल एक नामकरण योजना है और इसका सीधा संबंध नहीं है $ () समारोह।
     
    JQuery का उपयोग करके तत्व बनाना
     
    यद्यपि आप मूल जावास्क्रिप्ट फ़ंक्शंस का उपयोग करके DOM में हेरफेर कर सकते हैं, jQuery ऐसा करना बहुत आसान बनाता है। डीओएम की अच्छी समझ रखने के लिए यह अभी भी बहुत उपयोगी है, लेकिन jQuery इसके साथ काम करना बहुत अधिक सुखद बनाता है।
      साझा करना    साझा करना      कलरव      ईमेल      वेबसाइटों का हिडन हीरो: डोम को समझना  
    वेब डिज़ाइन सीखना और दस्तावेज़ ऑब्जेक्ट मॉडल के बारे में अधिक जानने की आवश्यकता है? यहां आपको DOM के बारे में जानने की जरूरत है।
    आगे पढ़िए       संबंधित विषय  
       
    • प्रोग्रामिंग
      •  
    • वेब विकास
      •  
    • jQuery
      •  
      लेखक के बारे में   बॉबी जैक(58 लेख प्रकाशित)      
    बॉबी एक प्रौद्योगिकी उत्साही हैं जिन्होंने दो दशकों तक एक सॉफ्टवेयर डेवलपर के रूप में काम किया। उन्हें गेमिंग का शौक है, स्विच प्लेयर मैगज़ीन में समीक्षा संपादक के रूप में काम कर रहे हैं, और ऑनलाइन प्रकाशन और वेब विकास के सभी पहलुओं में डूबे हुए हैं।
    बॉबी जैक . की अन्य फ़िल्में-टीवी शो
    हमारे न्यूज़लेटर की सदस्यता लें
     
    तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
    सब्सक्राइब करने के लिए यहां क्लिक करें