Friday 28 March 2014

jQuery Tutorial

Posted by Unknown at 09:15

जे-क्युरी  jQuery सीखीये -  हिन्दी में

jQuery एक JavaScript Library है , यह JavaScript programming को बहुत ही सरल बना देती है।


                                                                                      jQuery Framework और कुछ नहीं, केवल एक JavaScript File मात्र है, जिसे हमें हमारे HTML Page में <script> Element द्वारा Include करना होता है। जैसे ही हम jQuery File को अपने HTML Page के <script> Element के src Attribute में Specify करते हैं, हम Current Web Page में jQuery की सभी Functionalities को उपयोग में ले सकते हैं।

jQuery Introduction

किसी भी web page मे एक markup लाइन के द्वारा jQuery library को जोडा जा सकता है.

What You Should Already Know (आपको क्या पहले से पता होना चाहिए ?)

शुरुआत करने से पहले आपको निम्न का प्रारंभिक ज्ञान होना चाहिए :
  • HTML/XHTML
  • CSS
  • JavaScript
If you want to study these subjects first, find the tutorials on our Home page.
हम यह मान के चल रहे हैं कि आपको सामान्य HTML,CSS तथा Javascript का ज्ञान है. आपको केवल सामान्य ज्ञान की जरूरत है. इनमें विशेषज्ञता की आवश्यकता नही है. आपको कम से कम इतना मालूम होना चाहिये कि एक html पेज कैसे बनाते हैं और उसे ब्राउजर पर कैसे देखना है. यहां आपको निम्नलिखित सलाहें दी जाती हैं:
  1. आप फ़ायरफ़ाक्स ब्राउजर का प्रयोग करें. http://www.mozilla.com/en-US/firefox/personal.html
  2. फ़ायरफ़ाक्स में Firebug एक्सटेंशन इंस्टाल करें https://addons.mozilla.org/en-US/firefox/addon/1843
  3. कोडिंग के लिये Notepad++ उपयोग करें. http://notepad-plus.sourceforge.net/uk/site.htm

What is jQuery? ( jQuery क्या है?)

jQuery एक JavaScript Functions की library है.
jQuery एक lightweight "लिखना कम , काम ज्यादा " JavaScript library है.
jQuery एक जावास्क्रिप्ट लाइब्रेरी या यूं कहें कि एक जावास्क्रिप्ट फ़्रेमवर्क है. इसके जरिये आप क्रास ब्राउजर(यानि कि जो हर ब्राउजर में समान रूप से चले) जावास्क्रिप्ट एप्लिकेशन बना सकते हैं.
असल में jQuery में बहुत सारा कोड पहले से ही लिख दिया गया है. आपको बस उसे फ़ंग्शन उपयोग करने होते हैं. इससे आपको कम कोड लिखना पड़ता है और वह अधिक पठनीय हो जाता है.
अलग अलग ब्राउजरों में जावास्क्रिप्ट के चलने के तरीके में कुछ कुछ फ़र्क होता है. सामान्यत: डेवलपरों के लिये ये सिरदर्द बन जाता है. क्योंकि उन्हे एक ही प्रोग्राम के कई संस्करण अलग अलग ब्राउजरों के लिये लिखने होते हैं. jQuery में ऐसा आपको नही करना पड़ता है. आप एक ही बार लिखते हैं और वह हर ब्राउजर में काम करता है.
jQuery library में निम्न features होते हैं :
  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects और animations
  • HTML DOM traversal और modification
  • AJAX
  • Utilities

Adding the jQuery Library to Your Pages (jQuery को अपने पेज में उपयोग करना)


jQuery की Functionalities को उपयोग में लिया जा सके, इसके लिए सबसे पहले हमें jQuery Framework यानी jQuery Library File को Download करना होता है।
एक jQuery library में एक JavaScript file होती है जिसमें सभी jQuery functions भरें होते है.
इसे किसी web page मे निम्न mark-up का प्रयोग करके जोडा जा सकता है:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery in WebPage</title>

<script type='text/javascript' src="jquery.js"></script>

</head>



<body>



</body>
</html>
याद रखें <script> tag हमेशा page के <head> section के अंदर ही होना चाहिए.

jQuery Library पूरी तरह से Free है और इसे http://jquery.com से Download किया जा सकता है। यदि आप jQuery की File को अपने Web Server पर Hold करना नहीं चाहते, तो आप Google, Microsoft या स्वयं jQuery के CDN पर Hosted jQuery Library को भी उपयोग में ले सकते हैं।

Basic jQuery Example

निम्न उदाहरण में हम ये मान रहे हैं कि हमारे Current Web Project के Folder के अन्दर ही JavaScript नाम का एक Folder है और इसी Folder में हमारी jQuery Library File Stored है, जिसका नाम jquery.js है। इसमें
jQuery के hide() function का उपयोग दर्शाया गया है, जिससे किसी HTML document के सभी <p> elements को छिपा (hide कर) दिया गया है।

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

जब हम हमारे स्वयं के Web Server पर jQuery Library File को Host करना नहीं चाहते, तब हम निम्नानुसार Google, Microsoft या स्वयं JQuery के CDN (Content Delivery Network) का प्रयोग करके भी jQuery Library File को अपने Web Page में जोड सकते हैं:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery - Embedding in WebPage</title>

<!-- CloudFlare CDN -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js" ></script>

<!-- Microsoft CDN -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js" ></script>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" ></script>

<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script src="http://code.jquery.com/jquery.js" ></script>
<script src="http://code.jquery.com/jquery.min.js" ></script>
<script src="http://code.jquery.com/jquery-latest.min.js" ></script>
<script src="http://code.jquery.com/jquery-latest.js" ></script>

<!-- Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" ></script>
</head>
<body>
</body>
</html>

Downloading jQuery

फ़िलहाल jQuery के दो versions downloading के लिए उपल्ब्ध हैं : एक minified और एक uncompressed (debugging या reading के लिए).
Jquery के दोनो versions को आप jquery.com से मुफ़्त डाउनलोड कर सकते हैं. ये एक छोटी सी js फ़ाइल के रूप में आपको मिलेगी. jQuery.com.

Alternatives to Downloading

यदि आप jQuery library को अपने computer पर स्टोर नही करना चाहते, तो आप Google या Microsoft की तरफ़ से उपलब्ध hosted jQuery library का उपयोग भी कर सकते हैं.

Google

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

Microsoft

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</head>

Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)