अभी तक के Discussion से हम समझ सकते हैं कि पूरे jQuery Library का आधार केवल jQuery() नाम का एक Function है और हम पूरी jQuery Library को इस Function के माध्यम से Access करने में सक्षम हो पाते हैं। किसी भी jQuery Statement के हमेंशा चार हिस्से होते हैं, जिनमें से jQuery() Function के बारे में हम पहले ही पर्याप्त जानकारी प्राप्त कर चुके हैं जबकि अन्य तीन हिस्से को निम्नानुसार समझा जा सकता है :
यदि आप CSS (Cascading Style Sheet) के बारे में जानते हैं, तो आप निश्चत रूप से समझ चुके होंगे कि किसी jQuery Statement के उपरोक्त तीनों हिस्सों में से Selector का मतलब क्या होता है। लेकिन यदि आप CSS के बारे में कुछ भी नहीं जानते, तो फिर पहले आपको CSS के बारे में समझना होगा।
चूंकि CSS अपने आप में एक बहुत बडा Topic है, जो कि किसी भी Web Page की Styling, Designing व Layout को Control करने से सम्बंधित विषय है। इसलिए CSS के बारे में अच्छी तरह से समझने के लिए आप हमारी पुस्तक “HTML5 with CSS3 in Hindi” पढ सकते हैं। क्योंकि बिना CSS के पर्याप्त ज्ञान के आप jQuery को ठीक से उपयोग में नहीं ले सकते।
jQuery() Function वास्तव में Factory Pattern पर आधारित एक Object होता है, जिसके बहुत सारे Properties व Methods हैं। ये Object jQuery Library Framework की सभी Functionalities का मूल Gateway है। यानी jQuery Object के सभी Methods को Call करने की शुरूआत इसी शब्द से होती है।
Selector
Selector के रूप में हमें Web Page के DOM Tree के उस Element या Elements के Group को Specify करना होता है, जिस पर हमें किसी JavaScript Action या Operation को Perform करना होता है। उपरोक्त चि= में हम ‘p’ यानी Paragraph Element को Select कर रहे हैं, जिस पर हमें किसी JavaScript Operation को Perform करना है।
Action
Action के रूप में हम किसी Operation को Selected Element पर Apply करते हैं, जिससे संबंधित JavaScript Codes को jQuery Library में लिखा गया है। उपरोक्त उदाहरण में हम Selected ‘p’ यानी Paragraph Element पर एक “CSS” Rule को Action के रूप में Apply कर रहे हैं।
Parameters
Parameters के रूप में हम jQuery() Method को ये बताते हैं कि हम वास्तव में Selected Element पर किस प्रकार का Action Apply करना चाहते हैं। उपरोक्त चि= में लिखे Codes के अनुसार हम Selected ‘p’ यानी Paragraph Element पर एक “CSS” Rule Apply कर रहे हैं और “CSS” Rule ये है कि Web Page पर उपस्थित सभी Paragraph Elements का color Attribute, blue Value से Set हो जाए।
चलिए, उपरोक्त jQuery Statement को हम एक उदाहरण Program द्वारा उपयोग में लेना सीखते हैं। हमारे Web Page का Markup निम्नानुसार है:
//File Name: jQueryStatementDescription.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of jQuery Statement Description</title>
</head>
<body>
<h1>Example of jQuery Statement Parts</h1>
<p>The first part of the jQuery Statement is the jQuery() Function</p>
<p>The second part of the jQuery Statement is the Selector</p>
<p>The third part of the jQuery Statement is the Action</p>
<p>The fourth part of the jQuery Statement is the Parameters</p>
<script>
jQuery('p').css('color', 'blue');
</script>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
</body>
</html>
जैसाकि हम उपरोक्त Code द्वारा समझ सकते हैं कि सबसे पहले हमने हमारे Web Page में एक Heading व चार Paragraph Create कि, हैं और Web Page के अन्त में Closing Body Element से Just पहले jQuery Library को अपने Web Page में Include किया है, ताकि ये jQuery Library तब Download होना शुरू हो, जब पूरा Web Page, Web Browser में Load हो चुका हो। यानी Current Web Page का DOM Tree पूरी तरह से Create हो चुका हो। जब हम उपरोक्त Web Page अपने Web Browser में Load करते हैं, तो हमें हमारा Web Page निम्नानुसार दिखाई देता है:
जैसाकि आप उपरोक्त चित्र में देख सकते हैं कि हमें हमारे सारे Paragraph Contents पूरी तरह से Blue Color में दिखाई दे रहे हैं जबकि हमने हमारे Web Page के Markup में कहीं भी कोई CSS Style Specify नहीं किया है, जो कि Paragraph के Color को Blue कर दे। उपरोक्त Web Page में Paragraph के Color को Change करने का काम निम्न jQuery JavaScript Code कर रहा है:
<script>
jQuery('p').css('color', 'blue');
</script>
इस jQuery Statement का असर ये होता है कि सबसे पहले jQuery() Function, Current Page के DOM Tree से सभी Paragraph Elements के Nodes का Reference Select करके एक jQuery Object के रूप में Return कर देता है।
फिर उन सभी Selected Paragraph Elements पर jQuery का css Action Perform होता है जो कि वास्तव में एक Method है और ये Method, jQuery() Function द्वारा सभी Selected सभी Paragraph Elements की CSS Property को Modify कर देता है।
CSS property को Modify करने के लिए ये Method Parameters के रूप में दो Arguments Accept करता है। पहला Argument CSS Property को Represent करता है जबकि दूसरा Argument उस CSS Propertyकी Value को represent करता है।
चूंकि हमने हमारे उदाहरण में css() Method में पहले Argument के रूप में “color” CSS Property को Specify किया है जबकि दूसरे Argument में Value के रूप में “blue” मान Specify किया है। जिसका परिणाम ये होता है कि सभी Selected Paragraph के style Attribute में color Property का मान blue Set हो जाता है और Web Page पर दिखाई देने वाले सभी Paragraphs का Color Change होकर Blue हो जाता है।
हमारे उदाहरण में हमने “css” Action में दो Parameters (color व blue) Pass कि, हैं। लेकिन अलग-अलग jQuery Actions में Parameters की संख्याए भिन्न हो सकती हैं। कुछ Actions में Parameters की संख्या 0 हो सकती है तो कुछ Actions में Parameter के रूप में किसी अन्य Function को Specify किया जा सकता है।
इस तरह से आप समझ सकते हैं कि कितनी आसानी से एक ही Line के Code द्वारा हमने पूरे Web Page के DOM Tree की Traversing भी कर ली और उन Elements के DOM Nodes का Reference भी प्राप्त कर लिया, जिनके Style को Dynamically Modify करना है साथ ही हमने उन सभी Selected Elements की Color Property को Change करके उन्हें Style भी कर दिया। जबकि यही काम यदि हमें Pure JavaScript में करना होता, तो हमें निम्नानुसार JavaScript Code लिखते हुए अपना Web Page Create करना पडता:
//File Name: ParagraphStylingViaPureJS.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of jQuery Statement Description</title>
</head>
<body>
<h1>Example of jQuery Statement Parts</h1>
<p>The first part of the jQuery Statement is the jQuery() Function</p>
<p>The second part of the jQuery Statement is the Selector</p>
<p>The third part of the jQuery Statement is the Action</p>
<p>The fourth part of the jQuery Statement is the Parameters</p>
<script>
var paragraphs = document.getElementsByTagName('p');
for (i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.color = 'blue';
}
</script>
</body>
</html>
ये Web Page भी Exactly उसी तरह से दिखाई देता, जैसा पिछला Web Page दिखाई दे रहा है लेकिन इस Web Page में हमें स्वयं निम्न Statement द्वारा Current Web Page के सभी Paragraph Elements को Select करना पडता है:
var paragraphs = document.getElementsByTagName(‘p’);
ये Statement Current Web Page की DOM Tree से Paragraph Nodes के References को Select करता है और उन सभी Nodes के References की List को एक NodeList Object के रूप में Return करता है। परिणामस्वरूप DOM Tree में हर Paragraph Element के Reference को Access करने के लिए हमें निम्नानुसार एक Traversing Loop Crete करना पडता है:
for (i = 0; i < paragraphs.length; i++) {
और इस Loop के Variable i के माध्यम से हमें paragraphs नाम के NodeList Object से एक-एक Paragraph Element के Reference को One-by-One Access करते हुए उनके style Object के color Property में Value के रूप में मान “blue” को निम्नानुसार Statement द्वारा Set करना पडता है।
paragraphs[i].style.color = ‘blue’;
आप समझ ही गए होंगे कि जिस जरूरत को पूरा करने के लिए हमने jQuery के केवल एक Statement का प्रयोग किया है, उसी जरूरत को पूरा करने के लिए Pure JavaScript में हमें 4 Lines का Code लिखना पड रहा है। जबकि ये तो बहुत ही साधारण सा उदाहरण है। यदि हम किसी बडी Requirement को Pure JavaScript द्वारा पूरा करने की कोशिश करें, तो Pure JavaScript Code Lines की संख्या सैकडों या हजारों में भी हो सकती है। इतना ही नहीं हमें Cross-Browser Related बहुत से अन्य Issues को भी ध्यान में रखना पडता है और Cross-Browser परेशानियों को ठीक से समझे बिना हम Cross-Browser Codes नहीं लिख सकते।
परिणामस्वरूप हमें बहुत सारे Web Browsers की Internal Workings, DOM API Supports, W3C द्वारा Specified Standards, DOM APIs आदि बहुत सारे Concepts को बहुत ही गहराई से समझना पडता है, तभी हम Pure JavaScript Code का प्रयोग बेहतर तरीके से कर सकते हैं। लेकिन jQuery को Use करते समय हमारा पूरा Attention केवल इस बात पर होता है कि हमें हमारे Current Web Page के DOM Tree से किस Element को Select करना है और उस पर क्या Action Perform करना है। इसके अलावा जो भी काम करना होता है, jQuery Framework स्वयं करता है।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
