jQuery Framework Tutorial Notes Study Material with Examples in Hindi

jQuery Framework  Tutorial Notes Study Material with Examples in Hindi

jQuery Framework  Tutorial Notes Study Material with Examples in Hindi:-In  this  cyberpoint9 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

jQuery Framework Short Tutorial Notes Study Material with Examples in Hindi

jQuery Framework Short Tutorial Notes Study Material with Examples in Hindi

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   लिखने  परतें  है , जैसा की  इस   पुरे  cyberpoint9.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  हो सके |

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

हलाकि  जब  हम किसी 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 Framework Short Tutorial Notes Study Material with Examples in Hindi

jQuery Framework Short Tutorial Notes Study Material with Examples in Hindi

 

चुकी 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 बन  गया है:

  1. jQuery CSS Selectors को Use करते हुए Document के Elements को Refer करता है| परिणामस्वरूप यदि  कोई Web Developer CSS के Sectors  को अच्छी तरह  से Use करना  जानता है, तो बरी अस्सानी से वह jQuery का प्रयोग करते हुए JavaScript  के Core Concepts  के आधार पर High Quality JavaScript Codes लिख सकता है|
  2. Web Developer को JavaScript के Web Browser Part व DOM Model को ज्यादा  गहराई से समझने की जरुरत  नहीं होती|  बल्कि  Core JavaScript के Basic Knowledge के आधार पर भी Web Developer कम समय में Best Performing JavaScript Codes Create कर सकता है व अपनी Common व Advance जरूरतों को पूरा  कर सकता है|
  3. jQuery हमें जो Methods Provide करता है, वे Methods काफी हद तक DOM Methods की तरह ही डिफाइन व Use होते है, इसलिए यदि आपने जावास्क्रिप्ट के DOM Model को ठीक-ठीक तरीके से समझा है, तो भी आप बरी  ही अस्सानी से jQuery पर Move कर सकते है|

 Basic Fundamentals of jQuery in Hindi

तो चलिए, हम jQuery के थोरे Fundamentals को समझने की कोशिश करते है क्योकि  इस  cyberpoint9  के  Hindi Tutorial में हम jQuery के  सारे Concepts को अच्छी  तरह से नहीं समझ  सकते न ही हमारा उद्देश्य है क्योकि इस  cyberpoint9  के  Hindi Tutorial में  मूल रूप से JavaScript Concept पर आधारित है| लेकिन फिर भी हम jQuery के कुछ Concepts  को अच्छी  समझेंगे, ताकि हम ये जान सके   की Internally jQuery  किस तरह से काम करता है और किस तरह  से हमारे  जावास्क्रिप्ट Coding  को सरल बनाता  है|अब हम इस cyberpoint9.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  मूल  रूप  से  तिन   काम  करता  है , जो  निमनानुसार  है ;

  1. उन सभी  Paragraph Elements  को  Select  करेगा , जिनके  Class   Attribute  में  Value  के  रूप  में  “details”  मान  Specify  किया  गया हिया | ये कम निमन  jQuery  Code  द्वारा   Perform  होता  है :

$(“p.details”)

  1. उन  सभी  Selected Paragraphs  के “background-color” css Property   में value   के  रूप  में  “yellow”  Set  कर  देगा | परिणामस्वरूप  सभी  Selected  Paragraph Elements का  Background  Color “Yellow”    हो  जायगा | ये  काम  निमन  jQuery Code  द्वारा Perform  होता  हिया :

css(“background-color”,”yellow”)

  1.  अंत  में 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 की  तरह  ही  दिखाई  देते  है |

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

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  करता  है |

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

उपरोक्त  Code  द्वारा  आप  समझ  सकते  है  की  JavaScript का  प्रयोग  करके हम   कितनी  आसानी  से  किसी  HTML Element  के  साथ   किसी   Event Handler को Attach  कर  सकते  है |

 Relation Between Core  JavaScript with  jQuery in Hindi

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

jQuery Framework Tutorial Notes Study Material with Examples 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 Framework Tutorial Notes Study Material with Examples in Hindi

jQuery Framework Tutorial Notes Study Material with Examples in Hindi

आप समझ सकते  है की  कितनी  आसानी  से हम 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 Social Platforms to get Updated : twiter,  facebookGoogle Plus

Learn JavaScript in Hindi:  Click here 

Tagged with: , , ,
6 comments on “jQuery Framework Tutorial Notes Study Material with Examples in Hindi
  1. JordanBig says:

    Hi. I have checked your cyberpoint9.com and i see you’ve got some duplicate content so probably it is the reason that you don’t rank
    high in google. But you can fix this issue fast.
    There is a tool that generates content like human, just search in google: miftolo’s tools

  2. axpuqpc says:

    i9WX8m sdztqemhvgxr, [url=http://ttfikhnjgpwx.com/]ttfikhnjgpwx[/url], [link=http://qwupsfzlgbta.com/]qwupsfzlgbta[/link], http://aevvuayilpio.com/

  3. this is a compelling explanation you have there!

  4. I just could not depart your website before suggesting that I really loved the standard information an individual provide to your visitors? Is going to be back ceaselessly to inspect new posts.

  5. Very nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed surfing around your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again very soon!

Leave a Reply

Your email address will not be published. Required fields are marked *

*