You are here: Home / jQuery in Hindi / Various ways to use a single jQuery Function
by on September 16, 2013

Various ways to use a single jQuery Function

अभी तक हमने इस Chapter में जितनी भी बातें Discuss की हैं, वे सभी इसलिए की हैं, ताकि हम jQuery को उपयोग में लेते हुए jQuery के अन्‍य Concepts को समझने के लिए सामान्‍य Examples Create कर सकें। लेकिन अब हम jQuery() Function को थोडा गहराई से समझेंगे।

मुख्‍य रूप से एक ध्‍यान रखने वाली बात ये है कि jQuery को हम Function भी कह सकते हैं, Method भी कह सकते हैं, Object भी कह सकते हैं और Property भी कह सकते हैं। और ये चारों ही बातें सही हैं। क्‍योंकि पूरी jQuery Library Factory Pattern पर आधारित है, जिसमें jQuery नाम का एक Object Definition Create किया जाता है और इस Object Definition से jQuery नाम के Object को Return किया जाता है। इस लिहाज से jQuery एक Object है।

Factory Pattern का प्रयोग करते हुए जब हम कोई Object Definition Create करना चाहते हैं, तो हमें एक Function Crete करना पडता है और Create होने वाला हर Global Function, Web Browser के window Object की एक Property बन जाता है।

चूंकि jQuery Library में jQuery Object को Create करने के लिए Factory Pattern पर आधारित जो Function Create किया गया है, उस Function का नाम भी jQuery है, इसलिए jQuery Function वास्तव में Web Browser के window Object की एक Property भी है क्‍योंकि इसी jQuery Property में पूरे jQuery Object का Pointer Stored रहता है।

चूंकि window Object की किसी Property में जब किसी Anonymous Function का Address Stored रहता है, तो वह Anonymous Function वास्तव में window Object का एक Method भी कहलाता है। इसलिए jQuery को हम एक Method भी कह सकते हैं।

हालांकि पिछले Discussion के अनुसार हमने jQuery() Function को कुछ तरीकों से Use करने के बारे में जाना। लेकिन वास्तव में हम jQuery() Function को निम्नानुसार विभिन्न तरीकों से Use कर सकते हैं:

  • jQuery( selector [, context ] )
    • jQuery( selector [, context ] )
    • jQuery( element )
    • jQuery( elementArray )
    • jQuery( object )
    • jQuery( jQuery object )
    • jQuery()
  • jQuery( html [, ownerDocument ] )
    • jQuery( html [, ownerDocument ] )
  • jQuery( html, attributes )
    • jQuery( callback )

चलिए, One by One इन सभी को समझने की कोशिश करते हैं।

jQuery( selector [, context ] )

जब हम इस तरीके से jQuery() Function को Use करते हैं, तो हम इस Function में दो Parameters Pass कर सकते हैं। पहला Parameter वह CSS Selector होता है, जिससे सम्बंधित सभी Elements के References को हम DOM Tree से एक jQuery Object के रूप में Return करवाना चाहते हैं।

जबकि दूसरे Argument के रूप में हम उस Context को Specify करते हैं, जिससे Associated उन Elements का Reference हम DOM Tree से jQuery Object के रूप में प्राप्त करना चाहते हैं, जो पहले Argument में Specified Selector से Match करते हैं।

हर jQuery Object की एक length Property होती है, जिसमें DOM Tree द्वारा Return होने वाले कुल Matching Elements की संख्‍या होती है। इसलिए यदि हम jQuery() Function में भी Parameter Pass न करें अथवा यदि jQuery() Function में Pass कि, गए Selector से Matching एक भी Element DOM Tree में Exist न हो, तो ये Function एक Empty jQuery Object Return करता है। परिणामस्वरूप इस स्थिति में jQuery() Function द्वारा Return होने वाले jQuery Object की length Property का मान 0 होता है।

दूसरा Argument एक Optional Argument होता है, इसलिए यदि हम Specify नहीं करते हैं, तो Default रूप से पहले Argument में Specified Selector से Matching Elements की Searching DOM Tree के Document Root Element से होती है। लेकिन यदि हम चाहें तो दूसरे Argument के लिए किसी Context को Set कर सकते हैं। इसे समझने के लिए हम एक उदाहरण देखते हैं, जो कि निम्नानुसार है:

//File Name: jQueryFunctionWithContext.html
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Using jQuery Function With Context</title> 
</head>
<body> 
  <div> 
   <ol> 
    <li>First List Item in First Div</li> 
    <li>Second List Item in First Div</li> 
   </ol> 
  </div>
  <div> 
   <ul> 
    <li>First List Item in Second Div</li> 
    <li>Second List Item in Second Div</li> 
   </ul> 
  </div>

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script> 
 $('div').click(function () {
  $('li', this).css('background-color', 'gray');
 });
</script> 
</body>
</html>

इस Web Page के JavaScript Code में हमने click() नाम के एक नए jQuery Method को Use किया है जो कि एक Event को Represent करता है। Event Handling के बारे में हम आगे विस्तार से जानेंगे, लेकिन Context को समझने के लिए हमें किसी न किसी Method या Function को Use करना जरूरी होता है क्‍योंकि JavaScript में केवल Functions का ही अलग Context या Scope होता है और Function के अलावा सबकुछ Global Context ही होता है। उपरोक्त Web Page को Web Browser में Load करने पर हमें हमारा Web Page निम्नानुसार दिखाई देता है:

What are the different Types of jQuery Functions

हम देख सकते हैं कि इस Web Page में एक Ordered List है और एक Unordered List है। अब हम जैसे ही Unordered List पर Click करते हैं, List का Background Color Change होकर निम्नानुसार दिखाई देने लगता है:

What are the different Types of jQuery Functions

जबकि हमने हमारे JavaScript Code में jQuery Function में Selector के रूप में “li” को निम्नानुसार Specify किया है:

$('div').click(function () {
  $('li', this).css('background-color', 'gray');
});

ये Code JavaScript Interpreter को Instruct करता है कि Web Page पर स्थित किसी भी div Element पर जैसे ही Click किया जाए, वैसे ही उस Web Page पर स्थित सभी <li> Elements का Background Color Change होकर gray हो जाए।

लेकिन जैसाकि हम देख सकते हैं कि हमारे Web Page में केवल उसी div Element के सभी <li> Elements का Background Color Change हो रहा है, जिस पर हमने Click किया था। यानी हमने Unordered List वाले div Element पर Click किया था, इसलिए केवल Unordered List के Elements का Background Color ही Change हुआ है Ordered List के Background का Color Change नहीं हुआ है।

ऐसा इसीलिए हो रहा है क्‍योंकि हमने हमारे jQuery() Function में दूसरे Parameter के रूप में this Object को Pass किया है, जो कि हमेंशा उस Element को Represent करता है, जिस पर कोई Event Fire हुआ है या जिसके साथ किसी jQuery Method को Use किया गया है।

इसी तरह से यदि हम ये मानलें कि हमारे किसी Web Page पर एक से ज्यादा Form Elements हैं और हम चाहते हैं कि केवल पहले Form Element में जितने भी Radio Buttons हैं, उन सभी Radio Buttons का Background Color Gray हो जाए, लेकिन दूसरे किसी भी Form Element के किसी भी Radio Button का Background Color Change न हो। इस जरूरत को पूरा करने के लिए हम निम्नानुसार तरीके से jQuery() Function के दूसरे Parameter के रूप में पहले Form Element के Context को Argument की तरह Pass कर सकते हैं:

jQuery(‘input:radio’, document.forms[0]).css(‘backgound-color’,’gray’);

इसी तरह से किसी AJAX Request द्वारा Return होने वाले XML Document में किसी Particular Element को Select करने के लिए हम निम्नानुसार तरीके से jQuery() Function के दूसरे Parameter को Specify कर सकते हैं:

jQuery(‘mobile’, xml.responseXML).css(‘backgound-color’,’gray’);

ये Statement AJAX Request के माध्‍यम से आने वाली XML File के DOM से केवल “mobile” नाम के सभी Modes को Select करेगा और सभी Nodes का Background Color Change करके Gray कर देगा।

jQuery( element )

यदि हम पिछले Web Page के JavaScript Code में jQuery() Function के दूसरे Parameter के रूप में “this” Object को Pass न करें, तो हमारा Modified Code निम्नानुसार हो सकता है:

//File Name: jQueryFunctionWithElementWithoutContext.html
$('div').click(function () {
  $('li').css('background-color', 'gray');
});

और यदि हम इस Modified jQuery Code के साथ अपने पिछले Web Page को Re-Modify करके फिर से Web Browser में Load करें, तो हमें हमारा Output निम्नानुसार प्राप्त होगा, जिसमें दोनों ही div Elements में से किसी भी div Element को Click करने पर दोनों ही Lists का Background Color Change होकर Gray हो जाता है:

What are the different Types of jQuery Functions

जब हम jQuery() Function को दूसरा Parameter Specify नहीं करते हैं और पहले Argument के रूप में भी किसी Standard HTML Element Tag को Selector के रूप में Pass करते हैं, तो हम वास्तव में jQuery() Function को दूसरे तरीके से Use कर रहे होते हैं, जैसाकि उपरोक्त jQuery Code में हमने किया है।

jQuery( elementArray )

यदि हम हमारे पिछले Web Page के JavaScript Code को ही निम्नानुसार Modify कर दें:

//File Name: jQueryFunctionWithElementArrayWithoutContext.html
$('div').click(function () {
  $(this).css('background-color', 'gray');
});

तो जब ये Code Run होगा, तब हम हमारे Web Page पर स्थित जिस div Element पर Click करते हैं, उसी Element का Background Color Change होकर Gray हो जाता है और ऐसा इसलिए होता है क्‍योंकि जैसे ही हम किसी div Element पर Click करते हैं, उपरोक्त Code का निम्न Statement Run हो जाता है:

$(‘div’).click(function () {

चूंकि इस Statement में हमने jQuery() Function में Selector के रूप में ‘div’ Specify किया है, इसलिए पूरे Web Page पर जितने भी div Elements होते हैं, उन सभी div Elements का Reference एक jQuery Object के रूप में Return होता है जो कि इस click() Method के अन्दर this के माध्‍यम से उपलब्ध रहता है। परिणामस्वरूप जब इस click() Method की Body में Specified निम्न Statement Run होता है:

$(this).css(‘background-color’, ‘gray’);

तो इस Statement में Selector के रूप में Specified this Object वास्तव Web Page के सभी div Elements को ही Represent कर रहा होता है, जो कि स्वयं एक jQuery Object है, जिसमें बहुत सारे Selected Elements एक Array के रूप में Available हैं। इसलिए जब हम उपरोक्त Statement में jQuery() Function में this Object को Pass कर रहे होते हैं, तो हम वास्तव में एक Single Element नहीं बल्कि बहुत सारे Elements का एक Array Pass कर रहे होते हैं, जो कि jQuery() Function को Use करने का तीसरा तरीका है।

jQuery( object )

हम jQuery() Function में फिर से jQuery Function को ही Object की तरह Pass कर सकते हैं क्‍योंकि JavaScript में सभी Functions एक प्रकार का Object होते हैं और जब हम ऐसा करते हैं, तो समान jQuery Object को Reference करता हुआ एक नया jQuery Clone Object Create कर रहे होते हैं।

jQuery( jQuery object )

jQuery() Function व jQuery Library के किसी भी Method में हम Key-Value Pair के रूप में किसी Objects को Arguments की तरह Pass कर सकते हैं और इस Key-Value Pair को सरल शब्दों में JSON Object कहा जाता है। jQuery किसी Plain Object को Identify करने के लिए jQuery.isPlainObject(); Statement Provide करता है और निम्न Statement एक Simple PlainObject का Representation है:

      var plainObject = { };

उपरोक्त Statement plainObject नाम का एक ऐसा Plain Object Create कर रहा है, जिसमें एक भी Key-Value Pair नहीं है लेकिन ये एक Valid Object है और इसे निम्नानुसार jQuery() Function में Parameter के रूप में Pass किया जा सकता है:

        var plainObject = { };
jQuery(plainObject);

jQuery में कई ऐसे Library Methods हैं, जिन्हें Use करते समय हम उनमें Argument के रूप में एक PlainObject Pass करते हैं, जो कि Key-Value Pairs का एक Set होता है।

वर्तमान समय में jQuery Library में किसी PlainObject के साथ Use करने के लिए data(), prop(), on(), off(), trigger व triggerHandler() Methods को Define किया गया है। इनके अलावा हम किसी भी अन्‍य jQuery Method को PlainObject के साथ फिलहाल Use नहीं कर सकते, हालांकि हो सकता है कि भविष्य में इन Plain Objects के साथ Use करने के लिए और भी jQuery Methods Design कि, जाए।

jQuery in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

jQuery in Hindi | Page:711 | Format: PDF

BUY NOW GET DEMO REVIEWS

Filed Under: jQuery in Hindi