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

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

jQuery क्या है?

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

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

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

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

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

instagram viewer

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

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

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

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

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

$("")

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

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

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

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

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

$("
    

  • एक
    • 

  • दो
    • 

  • तीन
    • 

")

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

$('मेरा गांव')

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

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

फोटो = नई तिथि ()। getHours ()> 12? "दोपहर.जेपीजी": "सुबह.जेपीजी";
$("", {src: फोटो});

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

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

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

$ ("बॉडी")। संलग्न करें ($ ("बॉडी")
नमस्ते दुनिया
"));
$ (दस्तावेज़। शरीर)। संलग्न करें ($ एल);

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

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

$("p.last").बाद("
एक नया पैराग्राफ
")
$("उल ली: फर्स्ट")। इससे पहले("
  • नई वस्तु
    • ")

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

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

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

    $('#old').replaceWith("
    नया पैराग्राफ
    ");

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

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

    $('कोड#n1').wrap("
    ")

    आपके द्वारा बनाए गए तत्व तक पहुंचना

    NS $() फ़ंक्शन एक jQuery ऑब्जेक्ट देता है। यह अनुवर्ती कार्रवाई के लिए उपयोगी है: 

    $ एल = $ ("पी");
    $ ('बॉडी')। संलग्न करें ($ एल);

    ध्यान दें कि, परंपरा के अनुसार, jQuery प्रोग्रामर अक्सर एक प्रमुख डॉलर चिह्न के साथ jQuery चर का नाम देते हैं। यह केवल एक नामकरण योजना है और इसका सीधा संबंध नहीं है $() समारोह।

    JQuery का उपयोग करके तत्व बनाना

    यद्यपि आप मूल जावास्क्रिप्ट फ़ंक्शन का उपयोग करके DOM में हेरफेर कर सकते हैं, jQuery ऐसा करना बहुत आसान बनाता है। डीओएम की अच्छी समझ रखने के लिए यह अभी भी बहुत उपयोगी है, लेकिन jQuery इसके साथ काम करना बहुत अधिक सुखद बनाता है।

    ईमेल
    वेबसाइटों का हिडन हीरो: डोम को समझना

    वेब डिज़ाइन सीखना और दस्तावेज़ ऑब्जेक्ट मॉडल के बारे में अधिक जानने की आवश्यकता है? यहां आपको DOM के बारे में जानने की जरूरत है।

    आगे पढ़िए

    संबंधित विषय
    • प्रोग्रामिंग
    • वेब विकास
    • jQuery
    लेखक के बारे में
    बॉबी जैक (38 लेख प्रकाशित)

    बॉबी एक प्रौद्योगिकी उत्साही हैं जिन्होंने दो दशकों तक एक सॉफ्टवेयर डेवलपर के रूप में काम किया। उन्हें गेमिंग का शौक है, स्विच प्लेयर मैगज़ीन में समीक्षा संपादक के रूप में काम कर रहे हैं, और ऑनलाइन प्रकाशन और वेब विकास के सभी पहलुओं में डूबे हुए हैं।

    बॉबी जैक की अन्य फ़िल्में-टीवी शो

    हमारे न्यूज़लेटर की सदस्यता लें

    तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

    एक और क़दम…!

    कृपया उस ईमेल में अपने ईमेल पते की पुष्टि करें जिसे हमने अभी आपको भेजा है।

    .