jQuery Statement with Simple Example – पिछले Post में हमने जिस jQuery Statement को Discuss किया था, इस Program में हम उसी jQuery Statement को एक उदाहरण Program द्वारा उपयोग में लेना सीखेंगे जहां हमारे Web Page का Markup निम्नानुसार है:
[code]
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]
जैसाकि हम उपरोक्त 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 कर रहा है:
[code]
<script>
jQuery('p').css('color', 'blue');
</script>
[/code]
इस 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 करना पडता-
[code]
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>
[/code]
ये Web Page भी Exactly उसी तरह से दिखाई देता, जैसा पिछला Web Page दिखाई दे रहा है लेकिन इस Web Page में हमें स्वयं निम्न Statement द्वारा Current Web Page के सभी Paragraph Elements को Select करना पडता है:
[code]
var paragraphs = document.getElementsByTagName('p');[/code]
ये 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 करना पडता है:
[code]
for (i = 0; i < paragraphs.length; i++) {[/code]
और इस Loop के Variable i के माध्यम से हमें paragraphs नाम के NodeList Object से एक&एक Paragraph Element के Reference को One-by-One Access करते हुए उनके style Object के color Property में Value के रूप में मान “blue” को निम्नानुसार Statement द्वारा Set करना पडता है।
[code] paragraphs[i].style.color = 'blue';[/code]
आप समझ ही गए होंगे कि जिस जरूरत को पूरा करने के लिए हमने 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
