Sunday, 8 October 2017

सिर्फ 7 Steps में सीखें jQuery में Coding करना?

jquery-tutorial-in-hindi

jQuery tutorial in Hindi: इससे पहले आपने jQuery का basic introduction पढ़ा जिसमे आपने जाना की jQuery क्या है, इसके क्या फायदे हैं,  Javascript और jQuery में क्या अंतर है|

अब यदि आपने तय कर लिया है की आपको jquery सीखना है तो यह article आपके लिए काफी फायदेमंद हो सकता है|

इस article में आप step by step तरीके से jQuery में coding करना सीखेंगे और जानेंगे की jQuery के जरिये web page के elements पर किस तरह से अलग-अलग प्रकार के effects apply कर सकते हैं|

Learn jQuery in Hindi - Step by Step Tutorial

चलिए अब इस step-by-step tutorial की शुरुआत करते हैं| आप अगले 7 steps में jQuery की लगभग सभी जरूरी features का उपयोग करना सीख जायेंगे| अगर आपको किसी step में परेशानी हो तो हमें नीचे comment करके जरूर बताएं|

STEP 1 - jQuery Download करें सबसे पहले आपको अपने system पर jQuery की file download करनी पड़ेगी इस file के बिना आप coding करना शुरू नही कर सकते|

jQuery download करने के लिए इसकी official website पर जाएँ|

यहाँ पर आपको jQuery के दो versions मिलेंगे:
  • Production version - यह minified यानि की compressed होता जिसे हम live website पर use कर सकते हैं|
  • Development version - यह testing और development के लिए होता है इसके अंदर के codes आसानी से read किये जा सकते हैं क्योकि ये compressed नही होते|

STEP 2 - HTML page पर jQuery को add करें download करने के बाद इस file को नीचे दिए गये code के जरिये HTML page के head section में include करें|
<head>
<script src="jquery.js"></script>
</head>

STEP 3 - jQuery Syntax अब आपने सीख लिया की कैसे jQuery file को किसी html page में include किया जाता है| अब चलिए jQuery में code लिखने का basic syntax देखते हैं:
$(selector).action();
  • यहाँ jQuery को short में $ लिखा जाता है|
  • selector - यानि element जिस पर हमें action perform करना है| जैसे paragraph element, input element आदि|
  • action() - यह एक function है जिसमे हम यह बताते हैं की कौन सा action या effect apply करना है|
Example:
यदि हमें पेज के सारे paragraphs को hide करना है तो उसके code कुछ इस तरह होगा:
$("p").hide()

STEP 4 - जब DOM पूरी तरह से ready हो जाए तभी jQuery को run करें जब हमारा HTML page पूरी तरह से load हो जाता है तब DOM यानि की Document Object Model create होता है जो की उस पेज के elements से मिलकर एक प्रकार का tree structure बनता है|

हम चाहते हैं की DOM यानि की page से सारे elements  जब तक पूरी तरह से load न हो जाए तब jQuery run न हो| इसके लिए हमें नीचे दिया गया code use करना होगा|
$(document).ready(function() {
       // All your jQuery codes here.
});

STEP 5 - jQuery selectors - कोई एक element select करें  आप CSS selectors के बारे में जानते ही होंगे ठीक उसी तरह jQuery में भी selectors होते हैं जिनके जरिये किसी भी HTML element को select कर उसमे effect apply किया जाता है|

हम यहाँ पर कुछ basic selectors के बारे में जानेंगे जो की अधिकतर उपयोग किये जाते हैं:

Element Selector:  किसी HTML element को select करना|
Select all paragraph elements.
$("p");
ID Selector:  CSS की तरह इसमें भी किसी id को selector बना सकते हैं|
ID के लिए हमें hash (#) use करना होता है जैसे हमें किसी ऐसे element को select करना है जिसकी id header है तो उसका code कुछ ऐसा होगा:
$("#header");
Class Selector: ठीक CSS की तरह इसमें भी class selector use किया जाता है|
इसके लिए  dot (.) use करना होता है| जैसे:
$("#myClass");

STEP 6 - jQuery Events - कब action perform होगा तय करें कोई action कब perform होगा यह हम event से बताते हैं| Commonly use होने वाले कुछ events  इस प्रकार हैं:
$(selector).click(function)  - Click event पर कोई function execute होगा|
$(selector).dblclick(function)  - Double click करने पर action perform होगा|
$(selector).focus(function)  -  जब selected element पर focus होगा तब function execute होगा|
$(selector).mouseover(function) - जब element पर mouseover किया जायेगा तब function trigger होगा|

STEP 7 - jQuery Effects का उपयोग करें  अब हम कुछ basic effects के बारे में जानेंगे जो की jQuery में use किये जाते हैं:
  • Hide
  • Show
  • Toggle
  • Slide
  • Fade
  • Animate
jQuery hide() and show()
किसी HTML element को hide और show करने के लिए hide() और show() method use किया जाता है|

Syntax:
$(selector).hide();
$(selector).show();
या
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

जहाँ दो parameters speed और callback optional हैं|
  • speed -  hide या show होने की speed set करने के लिए इस parameter का use होता है| इसकी value “slow”, “fast”, या milliseconds हो सकती है|
  • callback - इसकी value में  किसी function के name को specify किया जाता है जो की hide/show complete होने पर execute होगा|
Example:

jQuery Toggle
अगर हमें एक button से hide या show करना है तो toggle() का उपयोग कर सकते हैं|

Syntax:
$(selector).toggle();
या
$(selector).toggle(speed,callback);

Example:
jQuery Fading Effects jQuery में नीचे दिए गये कुछ fading methods use किये जाते हैं:
  • fadeIn() - Fade in effect create करने के लिए
  • fadeOut() - Fade out effect create करने के लिए
  • fadeToggle() - fadeIn and fadeOut के बीच toggle करने के लिए
  • fadeTo() - Selected element की fading के लिए opacity set कर सकते हैं जिसकी value 0 से 1 के बीच हो सकती है|
fadeIn() Syntax:
$(selector).fadeIn();
या
$(selector).fadeIn(speed,callback);
fadeOut() Syntax:
$(selector).fadeOut();
या
$(selector).fadeOut(speed,callback);
fadeToggle() Syntax:
$(selector).fadeToggle();
या
$(selector).fadeToggle(speed,callback);
fadeTo() Syntax:
$(selector).fadeTo();
या
$(selector).fadeTo(speed,callback);
Example:
jQuery Sliding Effects

jQuery में तीन प्रकार के sliding methods हैं:
  • slideDown()  - किसी element को slide down करने के लिए
  • slideUp() - किसी element को slide up करने के लिए
  • slideToggle()  - slideDown() और slideUp() को toggle करने के लिए

slideDown() Syntax:
$(selector).slideDown();
या
$(selector).slideDown(speed,callback);
slideUp()  Syntax:
$(selector).slideUp();
या
$(selector).slideUp(speed,callback);
slideToggle() Syntax:
$(selector).slideToggle();
या
$(selector).slideToggle(speed,callback);
Example:
jQuery Animation Effects

jQuery से हम animate() method का use करके animation create कर सकते हैं और simple stop() method से चलते हुए animation को stop कर सकते हैं|
  • animate()
  • stop()
animate() Method Syntax:
$(selector).animate({styles})
या
$(selector).animate({styles},speed,callback)
stop() Method Syntax:
$(selector).stop()
Example:

जरूर पढ़ें: CSS से Animation कैसे बनायें?

आज आपने इस article में step-by-step तरीके से हिंदी में jQuery के methods को समझा और coding करना सीखा| अगर आपको jQuery से जुड़े कोई सवाल पूछने हैं तो आप नीचे दिए गये comment box का जरूर उपयोग करें|

नमस्कार, मैं विवेक, WebInHindi का founder हूँ| यह एक मात्र blog है जहाँ से आप web design & development के tutorials हिंदी में प्राप्त कर सकते हैं| अगर आपको हमारा यह ब्लॉग पसंद आये तो आप हमें social media पर follow कर हमारा सहयोग कर सकते हैं|

इस Post से सम्बंधित किसी भी तरह का प्रश्न पूछने या सुझाव देने के लिए नीचे comment कीजिये.
EmoticonEmoticon