jQuery( html [, ownerDocument ] )
जब हम jQuery() Function में पहले Argument के रूप में एक String Format में कोई Plain Text या Row HTML Code Specify करते हैं, तो ये jQuery() Function उस String में Specified HTML Codes के अनुसार Current Web Page के DOM Tree में नए Elements Create कर देता है।
जब हम jQuery() Function में किसी String को पहले Parameter के रूप में Pass करते हैं, तो jQuery सबसे पहले उस String को इस बात के लिए Check करता है कि क्या उसमें कोई HTML Element Tag Specify किया गया है, जो कि Less Then Symbol (<div>, <p>, <a>, <h1>, etc…) से शुरू होता है।
यदि पहले Parameter के रूप में Specified String की शुरूआत Less Then Symbol से न हो, तो jQuery उस String को एक Selector की तरह Treat करता है और DOM Tree से उन Nodes के References को एक jQuery Object के रूप में Return करता है, जो कि उस String में Specified Selector से Match होते हैं।
लेकिन यदि पहले Parameter के रूप में Specified Sting में कोई HTML Element Specified हो, तो jQuery उस Specified HTML Element को Current Web Page के DOM Tree में Create करता है और नया Element Create करने के बाद उस नए Element का Reference एक jQuery Object की तरह Return करता है।
परिणामस्वरूप इस Return होने वाले Object के साथ हम किसी भी अन्य jQuery Method को Use कर सकते हैं। इस प्रक्रिया को समझने के लिए हम एक उदाहरण देखते हैं, जो कि निम्नानुसार है:
//File Name: AddNewElementInDOMTree.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding New Elements in the DOM Tree</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
jQuery('<h1>This is dynamically created Heading </h1>').appendTo('body');
</script>
</body>
</html>
जैसाकि उपरोक्त Web Page के HTML Code में हम देख सकते हैं कि हमने हमारे Web Page के Body Element में कोई भी Content Specify नहीं किया है, लेकिन फिर भी हमें हमारे Web Page के Render होने पर निम्न चित्रानुसार एक Heading Element दिखाई दे रहा है:
हम समझ सकते हैं कि ये Heading Dynamically Create हो रहा है और इसे Create करने का काम jQuery() Function निम्नानुसार कर रहा है:
jQuery('<h1>This is dynamically created Heading </h1>').appendTo('body');
चूंकि जैसाकि हमने पहले भी कहा कि jQuery() Function में हम जब भी पहले Parameter के रूप में किसी String को Specify करते हैं, तो jQuery Parser सबसे पहले ये Check करता है कि String की शुरूआत Less Then Character से हो रही है या नहीं जो कि jQuery Engine के लिए इस बात का Signal होता है कि उसे DOM Tree में नया Element Create करना है और उपरोक्त jQuery Statement में Specified String की शुरूआत एक Less Then Character से हो रही है। परिणामस्वरूप जब ये Statement Run होता है तो jQuery() Function एक नया <h1> Element Create करता है।
हालांकि jQuery()Function उपरोक्तानुसार String Specify करने की वजह से Memory में एक Heading Element Create कर देता है, लेकिन जब तक हम इसे किसी DOM Tree Element के Child के रूप में Append नहीं करते, तब तक ये Newly Created Element Web Browser में Render नहीं होता।
इसीलिए जब jQuery() Function Memory में नया Element Create करके उसका Reference एक jQuery Object की तरह Return करता है, तो उस Return होने वाले jQuery Object के साथ हमने jQuery Library के appendTo() Method का प्रयोग करके JavaScript Interpreter को ये बताया है कि Newly Created Heading Element को हम Body Element के Child के रूप में Append करना चाहते हैं।
यहां ये बात समझना आपके लिए उपयोगी रहेगा कि जब हम किसी Single HTML Element को jQuery() Function में Specify करते हैं, जैसाकि पिछले उदाहरण में <h1> Element को किया गया है, तब jQuery Parser नया Element Create करने के लिए वास्तव में JavaScript के createElement() DOM API Function को Use करता है। जबकि किसी HTML Element String को हम jQuery() Function के पहले Parameter के रूप में निम्नानुसार किसी भी तरीके का प्रयोग करते हुए Pass कर सकते हैं:
jQuery('<img />');
jQuery('<img>');
jQuery('<h1>');
jQuery('<h1></h1>');
लेकिन जब हम निम्नानुसार किसी Complex Raw HTML String को jQuery() Function के पहले Argument के रूप में Pass करते हैं, जिसमें कई HTML Elements होते हैं, तब jQuery Parser वास्तव में Internally JavaScript के innerHTML DOM API Property का प्रयोग करके उन सभी Elements को Create करता है:
jQuery( "<p id='test'>jQuery is my <i>latest</i> ebook</p>" ).appendTo( "body" );
जब हम इस प्रकार का Complex Raw HTML String jQuery() Function में Pass करते हैं, तब jQuery Engine Internally एक नया <div> Element Create करता है और उसकी innerHTML Property में jQuery() Function में Pass की गई Raw HTML String को Set कर देता है।
चूंकि innerHTML Property को अलग-अलग Web Browsers अलग-अलग तरीके से Treat करते हैं, जिसके बारे में आप विस्तार से “Advance JavaScript in Hindi” पुस्तक द्वारा जान सकते हैं। इसलिए जहां तक सम्भव हो हमें, jQuery() Function के माध्यम से नया Element Create करते समय Single HTML Element ही Create करना चाहिए, ताकि हमारा Web Page Cross-Browser रहे यानी सभी Web Browsers में समान रूप से Render हो।
jQuery() Function के माध्यम से जब हम कोई नया Element Create करते हैं, तब हम इस Function में दूसरे Argument के रूप में एक PlainObject Pass कर सकते हैं, जो कि Create होने वाले नए Element के विभिन्न Attributes को Key-Value Pair के रूप में Specify करता है, जिन्हें jQuery Library के attr()Method में Pass किया जा सकता है।
जब हम jQuery() Function में नया Element Create करते समय दूसरे Argument के रूप में एक PlainObject Specify करते हैं, तब ये जरूरी होता है कि हम पहले Argument के रूप में केवल एक Single Element को Specify करें। साथ ही हमें इस बात का भी ध्यान रखना होता है कि हम इस पहले Argument में Specified Element के साथ किसी भी Attribute को Specify न करें।
उदाहरण के लिए यदि हम एक ऐसा Heading Element Create करना चाहते हैं, जिसके id Attribute में Value के रूप में “topHeading” मान हो जबकि class Attribute में Value के रूप में “myHeading” मान हो। तो इस Requirement को हम दोनों तरीकों से निम्नानुसार पूरा कर सकते हैं:
//File Name: AddNewElementWithAttributes.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding New Elements in the DOM Tree with Attributes</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
jQuery("<h1 id='topHeading' class='myHeading'>It’s Query</h1>").appendTo("body");
jQuery("<h1></h1>",
{
'id': 'topHeading',
'class': 'myHeading'
}
).appendTo("body").text("It's jQuery");
</script>
</body>
</html>
जब हम इस Web Page को Web Browser द्वारा Render करते हैं, तो हमें निम्न चित्रानुसार Output Page प्राप्त होता है:
हमने हमारे इस Web Page में दो तरीकों से jQuery() Function को Use किया है और दोनों ही तरीकों से एक नया Heading Element Create होता है, जिसके id व class नाम के दो Attributes भी होते हैं। ये दोनों Statements निम्नानुसार हैं:
jQuery("<h1 id='topHeading' class='myHeading'>It’s Query</h1>").appendTo("body");
ये Statement बिल्कुल Simple Statement है, जिसके बारे में हम पहले ही समझ चुके हैं।
jQuery("<h1></h1>",
{
'id': 'topHeading',
'class': 'myHeading'
}
).appendTo("body").text("It's jQuery");
जैसाकि हम देख सकते हैं कि ये Statement कुछ Special है। इस Statement में पहले Argument के रूप में हमने केवल एक Heading Element <h1></h1> को Specify किया है जबकि इसके साथ Associate कि, जाने वाले Attributes को हमने दूसरे Argument के रूप में एक PlainObject की तरह निम्नानुसार Specify किया है:
{
'id': 'topHeading',
'class': 'myHeading'
}
जब ये jQuery() Function Run होता है, तब सबसे पहले JavaScript के createElement() DOM API Function का प्रयोग करते हुए एक Heading Element Create करता है और फिर उस Heading Element में JavaScript के setAttribute() DOM API Function का प्रयोग करते हुए id व class नाम के दो Attributes Create करता है और उन Attributes में Value के रूप में क्रमश: “topHeading” व “myHeading” मान Set कर देता है।
Element पूरी तरह से Create हो जाने के बाद jQuery Parser, Newly Created Heading Element के Memory Address का Pointer एक jQuery Object के रूप में Return करता है, जिसके साथ appendTo() jQuery Method का प्रयोग करते हुए हम इस Newly Created Heading Element को Current Document के <body> Element के Child के रूप में Append कर देते हैं।
चूंकि jQuery Library एक Factory Pattern पर आधारित Object है, इसलिए हर jQuery Method Execute होने के बाद फिर से एक नया jQuery Object Return करता है।
परिणामस्वरूप जब appendTo() Method Run होता है, तो Newly Created Heading Element को Body के Child के रूप में Append करने के बाद फिर से एक Object Return करता है, जिसमें इस Newly Created Heading Element का Reference होता है।
इसलिए इसी Newly Created Heading Element के साथ और कोई Processing करने के लिए हम फिर से Dot ( . ) Operator का प्रयोग करते हुए आगे Chining कर सकते हैं, जो कि jQuery की एक बहुत बडी विशेषता है।
चूंकि जब हम इस दूसरे तरीके से नया Element Create करते हैं, तब Newly Created Element में कोई Text नहीं होता। इसलिए Newly Created Heading Element में नया Text Append करने के लिए हमें jQuery Library द्वारा Provided text() Method को निम्नानुसार Use करना होता है:
. . . ).appendTo(“body”).text(“It’s jQuery”);
Newly Created Heading Elements दोनों ही तरीकों से समान रूप से Create हो रहे हैं या नहीं, इस बात का पता लगाने के लिए हम Firefox के Firebug Tool के HTML Table को निम्नानुसार Check कर सकते हैं:
जैसाकि उपरोक्त चित्र में हम देख सकते हैं कि Web Page के Script की Parsing होने के बाद हमें दो Heading Elements दिखाई दे रहे हैं और दोनों ही Elements में id व class Attributes तथा Contents सबकुछ एक समान हैं। यानी jQuery() Function को दोनों ही तरीकों से Use करते हुए हम समान प्रकार का नया Element Create कर सकते हैं।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
