jQuery Framework Tutorial Notes Study Material with Examples in Hindi
jQuery Framework Tutorial Notes Study Material with Examples in Hindi:-In this cyberpointsolution tutorial (Especially jQuery Framework Concept which is used in Java Script) we are going to describe about the what is the use of jQuery Framework in cyber programming in Hindi. And also we will describe that how can we use jQuery Framework in JavaScript. And why we use jQuery Framework (JavaScript) in Web Pages to make more interactive and secure and using less coding. When ever we want to learn any thing the things become more earlier is somebody/tutorial/study material taught us through Examples. Here we have tried to describe each and every concept of jQuery i.e. jQuery Framework in the light of JavaScript using simple and best possible example in Hindi. These examples are so simple that even a beginner who had never even heard about jQuery can easily learn and understand How jQuery Framework works in JavaScript. This is the best hindi tutorial/Study Material very beneficial for beginners as well as Professional.
What is jQuery=JavaScript Library Framework in hindi
JavaScript का Core API काफी आसान है लेकिन Client-Side API काफी Complicated है क्योकि विभ्भिन Web Browsers में इन APIs को अलग –अलग तरीके से Implement किया गया है जो की पूरी तरह से एक दुसरे के Compatible नहीं है |
इसलिए जब हम JavaScript का प्रयोग करते है , तब हमें अलग-अलग Web Browsers के API Implementation के आधार पर अलग-अलग प्रकार के JavaScript Codes लिखने परतें है , जैसा की इस पुरे cyberpointsolution.com Tutorial में जगह-जगह पर हमने Cross-Browser Functions को डिफाइन किया है साथ ही हमने CBUtility नाम का एक Object भी create किया था जो की पूरी तरह से Cross Browser Implementations को Handle करने के लिए ही Design किया था |
चुकी Web Development में भी 80/20 Rule Follow होता है | यानि Web Development से Related 80% काम 20% Common Codes द्वारा पुरे किये जा सकते है और यही कम jQuery जैसे JavaScript Frameworks करते है |यानि ये ऐसे Well Defined, Well Organized Mature Frameworks है, जिनमे Web Development से Related जयादातर कामो को बरी ही आसानी से मिनिमम कोड्स द्वारा परफॉर्म किया जा सकता है साथ ही इं Libraries को इस तरह से डिजाईन किया गया है की अमे cross- Browser Issues के बारे में चिंता करने की जरुरत नहीं है क्योकि ये Frameworks इस सभी प्रकार के Issues को Best तरीके से अपने स्तर पर ही Handle कर लेते है और हर नाते Versions में नए Features व Functionalities को करते है |
तो जब हमारी 80% Common Requirements को पूरा करने के लिए Well Defined Mature JavaScript FrameWorks पहले से ही Exist है , तो हम स्वय का नया JavaScript FrameWorks Create करे | इसी बात को ध्यान में रखते हुए हम यहाँ पर एक सबसे ज्यादा Use किये जाने वाले JavaScript FrameWork, jQuery के बारे में थोरा बहुत जानने की कोशिस करेंगे की jquery किस तरह से हमारी JavaScript Programming को काफी हद तक सरल कर देता है, जिससें हमें JavaScript Programming को काफी हद तक सरल कर देता है , जिससे हमें JavaScript Codes के स्थान पर अपने Web Application के Concepts पर ध्यान देने के लिए ज्यादा समय व Energy मिल जाती है |
यानि हमें ये नहीं सोचना होता की हम किसी Requirements को Cross-Browser तरीके से पूरा करने के लिए क्या-क्या Code लिखे और किस तरह से Best Performance के लिए Well Organize करे, बल्कि हम हमारा पूरा ध्यान इस बात पर लगा सकते है की हम किस तरह से अपने Web Application में नए व बेहतर Behaviors को Add करे ताकि User को Best User Interface का Experience हो सके |
हलाकि जब हम किसी JavaScript Library का प्रयोग करते है , तो Core API व Client-Side API की तुलना में web Application की Performance कुछ हद तक कम हो जाती है क्योकि सभी Frameworks मूल रूप से JavaScript Codes का प्रयोग करते हुए ही Design किये जाते है , जबकि Core API व DOM API मूल रूप से Compiled Language में Design किये गए है |
लेकिन इन Frameworks का प्रयोग करने पर हमारे Time व Energy की जितनी बचंत होती है , उसके बदले में थोरा Performance के साथ थोरा Compromise किया जाना कोंई ज्यादा महंगा सौदा नहीं है क्योकि इन Frameworks को Use करके हम बरी ही आसानी से हर वो कम कर सकते है , और वो भी बरी ही आसानी से | हलाकि currently बहुत सरे ऐसे JavaScript FrameWorks है , जो बहुत अच्छे व Mature है और अलग-अलग तरह की जरूरतों को BEST तरीके से पूरा करते है , लेकिन जब से jQuery Launch हुआ है , तब से असे ही सबसे ज्यादा Use किया जाता है |
वर्तमन समय से Jquery के Trend को हम निम्न चित्र द्वारा समझ सकते है , जिसमे हम देख सकते है की वर्तमान समय में सब से ज्यादा Use किया जाने वाला यदि कोंई FrameWork है , तो वह Jquery है |
चुकी jQuery Library वर्तमान में सबसे ज्यदा use की जाने वाली लाइब्रेरी है, इसलिए jQuery के Basics को समझना सभी JavaScript सिखने वाले सभी web Developers के लिए जरुरी है|
jQuery की विशेषता ये है की ये लम्बे समय से Market में है और लम्बे समय से Professional Web Developers इसे अपने Professional Development में Use कर रहे है, जिसका मतलब ये है की ये काफी Stable व Mature है, इसलिए इसे सीखना और जहा भी हमारी जरुरत इस Framework से पूरी हो सके, इसे Pure JavaScript Codes की तुलना में Priority देकर, अपने Professional Development में Use करना हमारे Time ,Energy व Money तीनो की बचत के लिए जरुरी है|
what is Framework in Hindi
जैसाकि नाम से ही समझ सकते है की jQuery वास्तव में एक प्रकार की Query पर आधारित Framework है जिसमे हम अपनी जरुरत के अनुसार विभ्भिन DOM Nodes का Reference CSS Selectors द्वारा Return करते है, न की DOM Methods जैसे की getElementByTagName(), getElementById() या getElementByClassName() द्वारा|
वास्तव में querySelector() व querySelectorAll() ये दोनों DOM Methods बाद में Add किये गए है, जो की CSS Selectors पर आधारित Query द्वारा DOM Nodes का Reference Return करते है, जबकि jQuery इसी तरीके को बहुत पहले से Use करता आ रहा है|
jQuery में हम जिस CSS Selector को Specify करते है, उस Selector से Match करते हुए सभी Nodes के References, DOM Tree से Object के रूप में Return होते है जो की DOM Tree में Web Page के विभ्भिन HTML Elements को Represent करते है|ये Return होने वाले Objects कई Methods Provide करते है, जिनका प्रयोग करके हम इन Elements पर विभ्भिन प्रकार के Operations Perform कर सकते है, जिनका Effect तुरंत Web Page पर Render हो जाता है|
जब हम jQuery द्वारा Provide किये जाने वाले Methods को किसी Operation को Perform करने के लिए use करते है, तो ये Methods सामान्यता: स्वयं फिर से एक Object Return करते है, जिनके साथ फिर से किसी दुसरे Method को Use किया जा सकता है| इस वजह से jQuery में काफी आसानी से Objects को Chaining संभव हो जाती है और कम Codes द्वारा अधिक Operations Perform हो जाते है|
jQuery की निमन विशेषताओ के कारन ही वर्तमान में JavaScript सबसे ज्यादा Use किया जाने वाला General Purpose Framework बन गया है:
- jQuery CSS Selectors को Use करते हुए Document के Elements को Refer करता है| परिणामस्वरूप यदि कोई Web Developer CSS के Sectors को अच्छी तरह से Use करना जानता है, तो बरी अस्सानी से वह jQuery का प्रयोग करते हुए JavaScript के Core Concepts के आधार पर High Quality JavaScript Codes लिख सकता है|
- Web Developer को JavaScript के Web Browser Part व DOM Model को ज्यादा गहराई से समझने की जरुरत नहीं होती| बल्कि Core JavaScript के Basic Knowledge के आधार पर भी Web Developer कम समय में Best Performing JavaScript Codes Create कर सकता है व अपनी Common व Advance जरूरतों को पूरा कर सकता है|
- jQuery हमें जो Methods Provide करता है, वे Methods काफी हद तक DOM Methods की तरह ही डिफाइन व Use होते है, इसलिए यदि आपने जावास्क्रिप्ट के DOM Model को ठीक-ठीक तरीके से समझा है, तो भी आप बरी ही अस्सानी से jQuery पर Move कर सकते है|
Basic Fundamentals of jQuery in Hindi
तो चलिए, हम jQuery के थोरे Fundamentals को समझने की कोशिश करते है क्योकि इस cyberpointsolution के Hindi Tutorial में हम jQuery के सारे Concepts को अच्छी तरह से नहीं समझ सकते न ही हमारा उद्देश्य है क्योकि इस cyberpointsolution के Hindi Tutorial में मूल रूप से JavaScript Concept पर आधारित है| लेकिन फिर भी हम jQuery के कुछ Concepts को अच्छी समझेंगे, ताकि हम ये जान सके की Internally jQuery किस तरह से काम करता है और किस तरह से हमारे जावास्क्रिप्ट Coding को सरल बनाता है|अब हम इस cyberpointsolution.com के Hindi Tutorial बरी ही आसानी से सिखंगे की आखिर कैसे jQuery के साथ काम किया जाता है एक Professional और Beginners के लिए ये बहुत ही जरुरी है की वो पहले jQuery Framework के Basics को समझे |
How to Elements Styling with jQuery
jQuery Library में jQuery() नाम का एक Single Global Function Define किया गया है ,जो की एक Self Invoking Function है | यानि Web Browser का JavaScript Interpreter इस Function के Codes को Memory में पूरी तरह से Store करने के तुरंत बाद इसे रन भी कर देता है |
जब हम jQuery Framework Use करते है , तो इसी Function को Function सबसे जायदा बार Use किया जाता है , इसलिए इसे Refer करने के लिए Global Symbol $ को एक Shortcut की तरह Use किया जाता है |
चुकी Web ब्राउज़र के Global Scope में जितने कम Global Variables Attach होते है , Web Browser के JavaScript Codes के Parsing की Speed उतनी ही कम हो जाती है| इसीलिए jQuery Framework द्वारा केवल इन्ही दोनों Symbols (jQuery व $) को Global Namespace में Define किया गया है , ताकि Web Browser के Global Scope में Extra Global Variables , Functions आदि Attach न हो व jQuery की Performance अच्छी रहे |
what is the use of $ symbol in JavaScript or jquery in Hindi
चुकी JavaScript में $ एक Valid Symbol है , जिसे Variable या Identifier की तरह Use किया जा सकता है | इसलिए यदि हम चाहे तो जावास्क्रिप्ट में निमनानुसार एक ऐसा Function Define कर सकते है , जिसे $ Symbol के माध्यम से Call किया जा सके :
Function $(value1,value2){
Return value1+value2;
}
यदि हम इस Function को Call करना चाहे , तो निमनानुसार कॉल कर सकते है ;
alert($(10,20)); //output:30
इसी तरह से यदि हम चाहे तो निमनानुसार एक Self Invoked Function Define कर सकते है जिसमे एक और Self Invoked Function है :
(function(window,undefined)){
var jQuery =(function()){
//return jQuery;
})();
Window.jQuery =window.$ =jQuery;
} (window);
जैसाकि आप उपरोक्त Code देखकर ही समझ सकते है की ये Code Factory Pattern पर आधारित है , क्योकि ये Code Function Expression Syntax का प्रयोग करके एक Anonymous Function object Create कर रहा है और विभ्भिन Operations Perform करने के बाद अंत में उस Function का Reference Return कर रहा है |
इस Code में हमने एक Self Invoked Method Create किया है और Parameter के रूप में उसमे Window Object को Pass किया है , ताकि जैसे ही Web Page ,Web Browser में Load हो और window Object Ready हो जाये , ये Self Invoked Function Run हो जाये |
जैसे ही ये Function Run होता है ,JavaScript Interpreter Control इस Outer Function के अन्दर पहुचता है और jQuery नाम का एक नया Function Reference Create करता है | साथ ही इसमें specify किये गए सभी तरह के Codes Define करने के बाद यानि सभी Codes को Memory में स्टोर करने के बाद jQuery Object को Return करता है , जिसे Outer Function में window.jQuery व window.$ को Assign कर दिया जाता है , ताकि जिस Function Code को Memory में jQuery नाम द्वारा Reference किया जा रहा है उसे window.jQuery व window.$ द्वारा भी Refer किया जा सके |
जब किसी Outer Function से किसी Inner Function का Reference Return किया जाता है , तो वह Inner Function एक प्रकार का Closure होता है , जो की Outer Function के Run होकर Memory से समाप्त हो जाने के बाद भी Execution के लिए Exist रहता है |परिणास्वरूप Inner Function से Control के Return होने के बाद भी jQuery Variable में Inner Function का Scope Exist रहता है | इसलिए हम इस Inner Code को फिर से Call करके Reuse कर सकते है |
चुकी हम इस Inner Function को फिर से Reuse करना चाहते है , इसलिए हमने इस Object को Outer Function में Defined window.jQuery व window.$ Global Variables को भी Assign कर दिया है | ताकि ये दोनों Reference Web Browsers के Global Scope की Property बन जाये और जब भी हमें जरुरत हो , हम इनके माध्यम से Inner Function के Codes को फिर से Reuse कर सके |
चुकी window हमारे Web Browser का Global Object होता है , इसलिए यदि हम चाहे तो अपने Code में window शब्द को छोर भी सकते है | परिणामस्वरूप यदि हम उस window सब्द को छोर दे , तो अपने कोड में हम Inner Function को jQuery या $ से भी रेफरेंस कर सकते है और पुरे jQuery Library में Define किये गए सभी Function को हम इन्ही दोनों सब्दो द्वारा Refer करते है |
अब यदि हम चाहे , तो अपने सभी Library Function को उपरोक्त कोड के Inner Function में Defined कर सकते है और jQuery या $ द्वारा इस Function को Call करके उन सभी Inner Library Functions को Use कर सकते है | जैसे :
Program Example
(function(window,undefined)
{
var jQuery =(function(){
return function(num1,num2){
return(num1+num2);
}
Return jQuery;
})();
Window.jQuery =window.$ =jQuery;
})(window);
alert($(10,20)); //output:30
alert(jQuery(10,20)); //output:30
ठीक इसी तरह से पूरी JQuery Framework के विभ्भिन Functions को Inner Function के रूप में डिफाइन किया गया है और क्योकि हमारी ज्यादातर जरूरतों से सम्बंधित Function को पहले ही इस लाइब्रेरी में डिफाइन किया जा चूका है , इसलिए हमें फिर से इन Function का Define करने की जरुरत नहीं है , बल्कि हम सीधे ही इन Function को Use कर सकते है और ठीक उसी तरह से Use कर सकते है जिस तरह से हमने उपरोक्त Code में दोनों AlertBox में Use किया है |
jQuery Framework में jQuery() एक अकेला Global Function है जो पुरे DOM की Query करने के लिए Define किया गया है और इसी jQuery को हम $ Shortcut से भी Call कर सकते है | ये Function केवल दो Arguments Accept करता है , जहा पहला Argument वह CSS Selector होता है, जिसके आधार पर हम DOM Tree से Elements के Nodes का Reference प्राप्त करना चाहते है |
उदहारण के लिए यदि हमें किसी Web Page के सभी <div> Elements का Reference प्राप्त करना हो , तो हम jQuery Framework के jQuery Function का प्रयोग निमनानुसार कर सकते है :
var allDivs =jQuery(“div”);
ये Function जो Value Return करता है , वह Zero या More DOM Elements को Represent करता है , जिसे jQuery Object कहते है | jQuery() वास्तव में एक Factory Function है न की एक सिंपल Constructor , इसलिए ये Function एक Newly Created Object Return करता है लेकिन हम इसका परयोग new Operator के साथ Use करके नया ऑब्जेक्ट् Create नहीं कर सकते |
jQuery Object में कई Methods Define किये गए है जिनका प्रयोग इस Function द्वारा Return होने वाले Object के विभ्भिन Elements के साथ किया जा सकता हिया और पूरा jQuery वास्तव में इन Methods का Collection ही है , जिन्हें हमें समझना होता है ताकि हम इस बात का निर्णय ले सके अपनी विभ्भिन प्रकार की जरूरतों को पूरा करने के लिए हमें किस Method का प्रयोग करना है |आप इस Hindi Study Material ऑफ़ jQuery से बरी ही आसानी से इनके सारे Methods को समझ सकते है |
निमन Code एक jQuery Code है , जिसमे तिन jQuery Methods का प्रयोग किया गया है :
There are three jQuery Methods in Hindi
$(“p.details”).css(“background-color”,”yellow”).show(“fast”);
ये jQuery Code मूल रूप से तिन काम करता है , जो निमनानुसार है ;
- उन सभी Paragraph Elements को Select करेगा , जिनके Class Attribute में Value के रूप में “details” मान Specify किया गया हिया | ये कम निमन jQuery Code द्वारा Perform होता है :
$(“p.details”)
- उन सभी Selected Paragraphs के “background-color” css Property में value के रूप में “yellow” Set कर देगा | परिणामस्वरूप सभी Selected Paragraph Elements का Background Color “Yellow” हो जायगा | ये काम निमन jQuery Code द्वारा Perform होता हिया :
css(“background-color”,”yellow”)
- अंत में Call किया गया show() Method वास्तव में स्वय कुछ नहीं करता बल्कि पिछले वाले Code को तेजी से Apply करने का काम करता है |
जैसाकि आप समझ सकते है की यही काम यदि हमें Pure JavaScript द्वारा करना होता , तो हमें तिन Cross-Browser Event Handlers Create करने परते और बहुत सारा JavaScript Code लिखना परता |
Explanation of Coding Example in Hindi
चलिए , उपरोक्त कोड के FLOW को समझने की कोशिश करते है | उपरोक्त Code में सबसे पहले $() Function उन सभी Paragraph Elements को Select करता है , जिन पर Operation Perform करना है यानि जिन Paragraph Elements के Class Attribute में Value के रूप में “detail” specify किया गया है , उन सभी Paragraph Elements को DOM Tree से Select करके उनका Reference एक JavaScript Object के रूप में Return होता है |
चुकी जावास्क्रिप्ट में किसी Object के साथ Dot Operator का प्रयोग करके हम उस object के किसी दुसरे Method को Call कर सकते है , इसलिए जब $() Function सभी Selected Elements को एक Object के रूप में Return करता है , तो हम उसके साथ css() नाम का एक और Method Call कर सकते है , जैसा की उपरोक्त Code में किया है |
इस css() Method में हम CSS Property व उसकी Value के दो Parameters के रूप में Pass करते है | ये Method Argument के रूप में आने वाली CSS Property व Method को सभी Selected Paragraph Element के style Attribute में Dynamically Set कर देता है |
साथ ही ये Method भी फिर से सभी Applied CSS Style के साथ सभी Selected Paragraphs को एक Object के रूप में Return कर देता है , ज्सिके साथ हम show() Method को Call कर सकते है और हम ऐसा इसलिए कर सकते है क्योकि jQuery में सभी Methods फिर से एक Object Return करते है , जिनके साथ फिर से किसी Method को Call किया जा सकता है | जिसकी वजह से हम jQuery में Methods की Chaining कर सकते है | परिणामस्वरूप एक ही Statement द्वारा हम बहुत सारे काम करने में सक्षम हो जाते है |
हम हमारे Web Page पर jQuery Library को Use कर सके , इसके लिए जरुरी है की हम jQuery Library File को अपने वेब पेज पर Link करे | इसलिए हमें jQuery Library को http://jquery.com से Download करके उसे अपने वेब पेज से Link करना होता है | परिणामस्वरूप यदि हम हमारे उपरोक्त JavaScript Code को अपने Web Page पर Practically Use करना चाहे , तो हम निमनानुसार एक Web Page Create कर सकते है:
Program Example
File Name:jQuery JSFramework.html
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js” type=”text/javascript”></script>
</head>
<body>
<h1>This is jQuery Example</h1>
<p>This is first Paragraph without details class attribute.</p>
<p class=”details”>this is first paragraph without detail class attribute </p>
<p class=”details”>this is second paragraph with details class attribute</p>
<p>this is second Paragraph without detail class attribute </p>
<p>this is third paragraph without detail class attribute</p>
<p class=”details”>this is third Paragraph without detail class attribute </p>
<script>
$(“p.details”).css(“background-color”,”yellow”).show(“fast”);
</script>
</body>
</html>
हम जैसे ही इस Web Page को Web Browser में Load करते है , हमें निमनानुसार Rendered Web Page दिखाई देता है , जिसमे उन सभी Paragraphs का Background Color Yellow हो गया है , जिनमे हमने “details” नाम की Class को Specify किया था जबकि जिन Paragraph Elements में हमने “detail” नाम की Class को Specify नही किया है , वे Paragraph हमें निमन चित्रानुसार Normal Paragraph की तरह ही दिखाई देते है |
How to Event Handelling with jQuery in Hindi
हमने देखा है की किस तरह से किसी Event को Handle करने के लिए हमें Cross-Browser तरीके से दो अलग तरह के Codes को हैंडल करना होता है | jQuery द्वारा हम बरी ही आसानी से किसी भी Element के साथ किसी भी Supported Event Handler को Assign कर सकते है |
Example के लिए मानलो की हम चाहते है की हम जब उस Button पर Click करे , जिसके id Attribute में Value के रूप में “changeColor” मान Specified हो , तब उन सभी Paragraphs का Background Color Change होकर “Yellow” हो जाए , जिनके class Attribute में “details” specify किया गया हो | इस जरुरत को jQuery के माध्यम से हम निमनानुसार पूरा कर सकते है :
$(“#changeColor”).click(function(){
$(this).css(“background-color”,”yellow”);
});
यदि हम इस Code को Use करते हुए एक Web Page Create करे , तो हमारे Web Page का Code निमानुसार होगा :
Program Example
File Name :EventHandelingWithJQuery.html
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js” type=”text/javascript”></script>
</head>
<body>
<h1>This is jQuery Example</h1>
<p>This is first paragraph without details class attribute</p>
<p class=”details”>This is first paragraph without detail class attribute</p>
<p class=”details”>This is second Paragraph with detail class attribute</p>
<p>This is second Paragraph without detail class attribute</p>
<p class=”details”>This is third Paragraph with detail class attribute.</p>
<button type=”button” id=”changeColor”>Change Color</button>
<script>
$(“#changeColor”).click(function()){
$(“p.details”).css(“background-color”,”yellow”);
});
</script>
</body>
</html>
Explanation of this Example in Hindi
इस Code में हमने सबसे पहले उस Button Element को jQuery() Function द्वारा Select किया है , ज्सिके एक Attribute में Value के रूप में “changeColor” मान specify किया गया है | जब ये Current Web Page के DOM Tree में “cahngeColor” ID वाला Button Select हो जाता है , तो jQuery() Function इस Button के References को एक Object के रूप में Return करता है |
इस Return होने वाले Object के साथ हम click Method को Call करते है , जो की एक Event Handler है | इस click() Event Handler में हमने एक Anonymous Function Define किया है , जो तब Execute होता है , जब हम Button पर Click करते है |
Flick Event के Fire होते ही Anonymous Function Run होता है और फिर से jQuery() Function उन सभी Paragraph Elements के Reference को DOM Tree में Select करके उनके References को एक Object के रूप में Return करता है , जिसके साथ css() Method का प्रयोग करके उनकी Background Color को Change करते हुए “yellow” कर दिया है |इस प्रकार से आप देख सकते है की कितने कम Codes द्वारा हमने एक Button के लिए Click Event Handler को Setup कर दिया है जबकि यदि काम हमें यदि Pure JavaScript में करना होता , तो हमें बहुत सारा Code लिखना परता |
जब उपरोक्त Web Page को Web Browser में Render किया जाता है और “Change Color” Button पर Click किया जाता है , तो हमें हमारा Web Page निमनुसार दिखाई देने लगता है , जो की ठीक पिछले वाले Web Page में Paragraphs का Background Color तब Change होता है , जब User Button पर Click करता है |
उपरोक्त Code द्वारा आप समझ सकते है की JavaScript का प्रयोग करके हम कितनी आसानी से किसी HTML Element के साथ किसी Event Handler को Attach कर सकते है |
Relation Between Core JavaScript with jQuery in Hindi
चुकी jQuery वास्तव में javaScript का ही एक Framework है , इसलिए हम बरी ही आसानी से अपने JavaScript Code के साथ Mix करके Use कर सकते है|
जैसाकि उपरोक्त दोनों Examples द्वारा आप समझ सकते है की हम कितनी आसानी से CSS Selectors को use करते हुए अपने Web Page के DOM Tree के किसी भी Element या Element Group को Select कर सकते है व बरी ही आसानी से किसी भी Event Handler को अपने Selected Element के साथ Attach कर सकते है| इसलिए DOM Selection के लिए हम jQuery का प्रयोग करते हुए अपने स्वयं के JavaScript Code को भी Mix करते हुए Use कर सकते है |Example के लिए यदि हम दो सन्खायो को जोरने के लिए एक Simple सा Calculator Create करना चाहते है, जहाँ Web Page पर दो Text Box है, जिनमे Stored Value को जोरकर Return होने वाले Result को तीसरे Text Box में Display करना है| ये काम करने के लिए हम निमनानुसार Code Create कर सकते है:
Program Example
File Name: jQueryWithJS.html
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js” type=”text/javascript”></script>
</head>
<body>
<h1>Simple Calculator</h1>
<label>First Value<input type=”text” id=”firstvalue”/></label>
<label>Second Number<input type=”text” id=”secondValue”/></label>
<input type=”button” id=”btnAdd” value=”Click to Add”/>
<label id=”result”></label>
<script>
$(“#btnAdd”).click(function(){
var firstVal, secondVal, total;
firstVal=$(“#firstValue”).val();
total=Number(firstVal)+Number(secondVal);
$(“#result”).html(“<h3>Total:”+”</h3>”).css(“color”,”red”);
});
</script>
</body>
</html>
उपरोक्त jQuery Code में हमने न केवल jQuery को Use किया है बल्कि jQuery Code के साथ Core JavaScript Code को भी Mix किया है | इस उदाहरण में हमने firstVal, SecondVal व total नाम के तिन Variable Declare किये है| फिर हमने निमनानुसार jQuery Code को Use किया है|
firstVal=$(“#firstValue”.val());
secondVal=$(“#secondValue”).val();
ये jQuery Code firstval व secondValue ID वाले Text Boxes का Reference एक Object के रूप में Return करता है| चुकी दो Text box Objects को आपस में Numerical Values की तरह Add नहीं किया जा सकता है|जबकि हम जानते है की Text Box की Value Property में ही वह Text होता है, जिसे Text Box में लिखा जाता है और इस Text का Data Type हमेशा String होता है, इसलिए jQuery() Function द्वारा Return होने वाले Object को String Value में Convert करने के लिए हमने Object के साथ val() Method को Call किया है |
इस प्रकार से उपरोक्त दोनों jQuery Statement Web Page पर दिखाई देने वाले दोनों Text Boxes में Specified Texts को String के रूप में firstVal व SecondVal नाम के JavaScript Variables में Store कर देते है|चुकी हम जानते है की JavaScript एक Loosely Typed Language है, इसलिए किसी JavaScript Variable में जिस तरह का मान Store किया जाता है और पिछले jQuery Statement द्वारा firstval व secondVal दोनों ही Variables में एक String Value Store होता है, फिर भले ही हमने Text Box में Number ही क्यों न लिखा हो |
इसी तरह से हम ये भी जानते है की दो Strings को यदि आपस में + Operator का प्रयोग करके जोर जाए , तो ये Operator Arithmetic Operator की तरह नहीं बल्कि Concatenate Operator की तरह काम करता है| इसलिए इन दोनों Variables में Stored Strings को Numerical Values में Convert करने के लिए हमने निमनानुसार Number() Conversion Function का प्रयोग किया है|
total =Number(firstVal)+Number(secondVal);
ये Statement दोनों Variables में String Format में Stored Numerical Values को Number में Convert करने के बाद उन्हें आपस में Arithmetical +Operator के माध्यम से जोरकर Result को Total नाम के Variable में Store कर देते है| फिर अंत में निमन Code Run होता है:
$(“#result”).html(“<h3> Total:”+total +”</h3>”).css(“color”,”red”);
ये Statement में हमने सबसे पहले Web Page पर स्थित उस Element के Reference को Retrieve किया है, जिसके ID Attribute में Value के रूप में “result” Specify किया गया है |
फिर इस Statement द्वारा जिस HTML Element का DOM Reference प्राप्त होता है, उस Object के लिए jQuery के html() Method को Call किया जाता है| इस Method में हम HTML Elements को भी Specify कर सकते है और हम जो भी कुछ Specify करते है, वह DOM Tree में Add हो जाता है |इसलिए हमने इस Method में एक <h3> Element Specify किया है और उसमे Value के रूप में दोनों Text Boxes के Values के जोर को Hold करने वाले Variable को Specify कर दिया है|
जब ये html() Method Execute हो जाता है , तो ये Method फिर से एक नया Object Return करता है , जिसका साथ हमने css() मेथड को कॉल करके दिखाई देने वाले <h3> Element के Style को Change किया है |परिणामस्वरूप जब ये Web Page, Web Browser में Load किया जाता है और दोनों Text Boxes में Value Specify करने के बाद जब हम Button पर Click करते है , तो हमें Red Color में दोनों Text Boxes के Number की जोर निमन चित्रानुसार दिखाई देने लगती है :
आप समझ सकते है की कितनी आसानी से हम jQuery Codes को JavaScript Codes के साथ Mix करके अपनी किसी जरुरत को पूरा कर सकते है , जबकि अब हमें विभ्भिन प्रकार के अन्य Issues जैसे की Cross-Browser Event Handling, Styling आदि के बारे में चिंता करने की जरुरत नहीं होती, क्योकि JavaScript इन सभी परेशानियों को स्वयं ही अपने स्तर पर Best तरीके से Handle कर लेता है|
Best Short Tutorial of General Animation with jQuery in Hindi
Animation Effect प्राप्त करने के लिए Timing, Functions, Styling व DOM Events को आपस में Mix तरीके से Use किया जाता है| यदि हम Pure जावास्क्रिप्ट का प्रयोग करके एनीमेशन प्राप्त करना चाहे, तो हमें setTimeout(), setInterval() Methods के साथ DOM Events व Styles को आपस में Use करना होगा, जिससे हमारा pure JavaScript Code काफी ज्यादा Typical हो जायगा| लेकिन jQuery द्वारा हम विभ्भिन प्रकार के एनीमेशन Effects को बहुत ही आसानी से प्राप्त कर सकते है |यानि हम बरी ही आसानी से Web Page पर किसी Element को Show या Hide कर सकते है, Visual Effect के साथ किसी Element की Styles को Timing के अनुसार Change कर सकते है, जिससे हमें एनीमेशन जैसा Effect प्राप्त होता है|
Example के लिए यदि हम हमारे पिछले Web Page के Code में केवल निमनानुसार एक Line को Change कर दे, तो जब हम एक बार Button पर Click करेंगे, तो Web Page में Result दिखाई देगा और जब दुबारा Click करेंगे, तो वही Result Hide हो जायगा :
$(“#result”).html(“<h3>Total:”+total+”</h3>”).css(“color”,”red”).toggle(1000);
इस Code के अंत में हमने jQuery के toggle() Method का प्रयोग किया है और Parameter के रूप में 100 Specify किया है जो की Milliseconds में Time Duration है|
ये मॉडिफिकेशन करने के बाद जब हमारे पिछले Web Page को ही Web Browser में Render करते है , तो Button पर Click करने पर जब Result Display होता है, तो वह पूरी तरह से Display होने में 1 Second का समय लगता है| परिणामस्वरूप हमें Animation का Effect प्राप्त होता है|इसी तरह से jQuery में बहुत सारे jQuery Methods Provide किये गए है, जिनका प्रयोग करके हम बरी ही आसानी से Animation Effects प्राप्त कर सकते है|
इसी तरह से हम jQuery का प्रयोग करके AJAX तकनीक को भी JavaScript की तुलना में बहुत ही आसानी से उपयोग में ले सकते है | जबकि AJAX Tutorial के अंतर्गत में हमने देखा था की अलग-अलग प्रकार के Web Browsers में XHR Objects को कितना अलग तरीके एस Implement किया गया है, जिसकी वजह से हमें विभ्भिन Web Browsers में AJAX तकनीक को Different तरीके से Use करना परता है जो की काफी Typical काम हो जाता है |
jQuery Framework Short Tutorial Notes Study Material with Examples in Hindi
Follow Us On Cyber Point Solution Youtube Channel : Click Here
Follow Us on Social Platforms to get Updated : twiter, facebook, Google Plus
Learn More Ethical Hacking and Cyber Security click on this link. cyber security