सिर्फ 7 Steps में सीखें jQuery में Coding करना – jQuery tutorial in Hindi
इससे पहले आपने पढ़ा की jQuery क्या है, इसके क्या फायदे हैं, Javascript और jQuery में क्या अंतर है।
अब यदि आपने तय कर लिया है की आपको jquery सीखना है तो यह jQuery tutorial in Hindi आपके लिए काफी फायदेमंद हो सकता है।
इस article में आप step by step तरीके से jQuery में coding करना सीखेंगे और जानेंगे की jQuery के जरिये web page के elements पर किस तरह से अलग-अलग प्रकार के effects apply कर सकते हैं।
Contents
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:
जरूर पढ़ें:
- JavaScript Tutorial in Hindi – सिर्फ 20 मिनट में Basic जावास्क्रिप्ट सीखें हिंदी में
- सिर्फ 20 मिनट में सीखें HTML हिंदी में – HTML Tutorial in Hindi
- CSS से Animation कैसे बनायें?
- Complete CSS सीखें हिंदी में – CSS Tutorial in Hindi
आज आपने इस article में step-by-step तरीके से हिंदी में jQuery के methods को समझा और coding करना सीखा। आपको यह jQuery tutorial in Hindi कैसा लगा हमें जरुर बताएं। अगर आपको jQuery से जुड़े कोई सवाल पूछने हैं तो आप नीचे दिए गये comment box का जरूर उपयोग करें।
