Showing posts with label जे-क्युरी सीखीये. Show all posts
Showing posts with label जे-क्युरी सीखीये. Show all posts

Friday, 28 March 2014

jQuery Callback Functions

Posted by Unknown at 09:27


मौजूदा animation 100% खत्म होने पर ही callback function execute होगा

jQuery Callback Functions

मौजूदा animation ( या effect) के 100% खत्म होने पर ही callback function execute होगा।
JavaScript statements लाइन दर लाइन execute होते हैं। फ़िर भी, animations के साथ, the next line of code की अगली लाइन तब भी run  हो सकती है जबकि animation खत्म ना हुआ हो। इस कारण errors उत्पन्न होते है।
इससे बचने के लिए,  आप एक callback function का निर्माण कर सकते हैं। callback function animation के खत्म होने के बाद तक call नही किया जायेगा।

jQuery Callback Example

Typical syntax: $(selector).hide(speed,callback)
callback parameter एक function है जो  hide effect के complete होने के बाद execute होगा :

Example with Callback

$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});
callback parameter के बिना, alert box  hide effect के complete होने से पहले ही दिखाई देने लगेगा:

Example without Callback

$("p").hide(1000);
alert("The paragraph is now hidden");
 

Labels: , 0 comments

jQuery Selectors

Posted by Unknown at 09:24

jQuery selectors आपको HTML elements को एक group या एक एकल element की तरह select और manipulate करने की सुविधा देते है

jQuery आपके पेज में से किसी चीज को ढूढ़ने के लिये "CSS Selectors" का उपयोग करता है. अगर आप CSS का ज्ञान रखते हैं तो इसे आप बड़ी ही आसानी से समझ सकते हैं.
उदाहरण के लिये अगर हमारे पेज में निम्नलिखित कोड दिया है:
<div id=”box1”></div>
<div class=”google”></div>
<span class=”google”></span> तो अगर box1 नाम के आई डी वाले टैग को चुनना है तो इसे कुछ ऐसे लिखेंगे.
$("#box1")
अगर google क्लास वाले टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“.google”)
अगर सभी "Div” टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“div”)

सेलेक्टर्स jQuery का बहुत ही महत्वपूर्ण हिस्सा हैं. अत: इन्हे जरूर समझ लें. मैंने केवल तीन सेलेक्टर ऊपर बताये हैं पर jQuery, CSS में इस्तेमाल होने वाले सभी सेलेक्टरों को स्वीकार करता है.

Hello Word

Hello World के बिना भी कोई प्रोग्रामिंग सीखना शुरू करता है क्या? वैसे ये एक परंपरा बन गई है कि जब प्रोग्रामिंग सीखने का श्रीगणेश करना हो तो उसे Hello World से शुरू करते हैं.
हम एक छोटा सा प्रोग्राम बनाने जा रहे हैं जिसमें एक बटन होगी और उसमें क्लिक करने पर Hello World एक एलर्ट बाक्स में दिखाई देगा.
तो शुरू करते हैं.
१.सबसे पहले अपने पेज में एक इनपुट बटन बनायेंगे:

<input type=”button” id=”btn_clickme” value=”Click Me”/> 

२. अब jQuery की कोडिंग शुरू करेंगे निम्नलिखित कोड को अपने पेज की बाडी टैग के भीतर कापी पेस्ट कर दीजिये.

<script type=”text/javascript”>
$(document).ready(function(){
$(“#btn_clickme”).click(function(){
alert(“Hello World”);
});
});
</script> 

पूरा कोड कुछ इस प्रकार दिखाई देगा.

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="button" id="btn_clickme" value="Click Me" />
<script type="text/javascript">
$(document).ready(function(){
$("#btn_clickme").click(function(){
alert("Hello World");
});
});
</script>
</body>
</html> 

अब अपने पेज को ब्राउजर में देखिये.
आपको क्लिक मी के नाम का एक बटन दिखाई देगा जिसमें क्लिक करने पर एक बाक्स खुलेगा जिसमें "Hello World” लिखा मिलेगा.

तो आखिर इस कोड से क्या और कैसे हुआ?

$(document).ready(function(){ वाली बात तो आपको पहले ही बता चुका हूं उसके आगे एक लाइन लिखी है:
f$("#btn_clickme").click(function(){ इसमें सबसे पहले "selector” लिखा गया है जो कि #btn_clickme है. यानि कि हम एक ऐसे Element को खोज रहे हैं जिसका ID “btn_clickme” को.
फ़िर एक बिंदी के बाद click लिखा है. इसका मतलब इवेंट से है. यानि कि #btn_clickme में जब क्लिक किया जाये.
अब आगे function(){ लिखा है. यानि कि #btn_clickme में जब क्लिक किया जाये तो क्या हो.
अब इसके आगे एक Alert फ़ंग्शन है जिसकी वजह से ये बाक्स दिखता है.
इस पूरे कोड का मतलब है कि जब #btn_clickme नाम के ID वाले Element में Clickकिया जाये तो Alert बाक्स वाला कोड रन किया जाये.
jQuery में और भी इवेंट उपलब्ध हैं जैसे dblclick , keydown , focus आदि.
आपने जो ऊपर उदाहरण देखा है उसे नीचे लिखे दो तरीकों से भी किया जा सकता है जैसे:
<input type="button" id="btn_clickme" value="Click Me" onclick=”alert('Hello World');” /> तथा
<input type="button" id="btn_clickme" value="Click Me" onclick=”doit();” />
<script type=”text/javascript”>
function doit(){
alert(“Hello World”);
}
</script> पर इस तरह के कोड में आपने देखा है कि हमें HTML में ही onclick एट्रीब्यूट जोड़ना पड़ता है. इससे कुछ मात्रा में जावास्क्रिप्ट HTML Markup में भी चली जाती है. आप ऐसा कर सकते हैं पर ऐसा करना "गुड प्रैक्टिस” नही माना जाता है. हमेशा प्रयास यही होना चाहिये कि स्टाइल शीट्स, मार्कअप और जावास्क्रिप्ट कोडिंग एक दूसरे से एकदम अलग अलग हों. इसीलिये jQuery से ऐसा करना आसान हो जाता है.
 

jQuery Selectors

jQuery selectors आपको  HTML elements (या elements के groups) को element के name, attribute name या content के अनुसार select करने की सुविधा देते हैं।

HTML DOM के शब्दों (terms) में :
Selectors आपको DOM elements को एक group या एक एकल (single) node  के रुप में manipulate करने की सुविधा देते हैं।

jQuery Element Selectors

jQuery मे HTML elements को select करने के लिए CSS selectors का प्रयोग भी लिया जा सकता है।
$("p") - सभी <p> elements को select करता है ।
$("p.intro") - class="intro" वाले सभी <p> elements को select करता है ।
$("p#demo") id="demo" वाले <p> elements को select करता है ।

jQuery Attribute Selectors

jQuery elements को उनमें दिये गये attributes के साथ select करने के लिए XPath expressions का प्रयोग करता है।
$("[href]") - href attribute वाले सभी elements को select करता है।
$("[href='#']") - href attribute वाले सभी elements को select करता है जिनकी value "#" के समान हो।
$("[href!='#']") - href attribute वाले सभी elements को select करता है जिनकी value "#" के समान न हो।
$("[href$='.jpg']") - href attribute वाले सभी elements को select करता है जिनका अंत ".jpg" के साथ होता है।

jQuery CSS Selectors

HTML elements के लिए CSS properties को बदलने के लिए भी jQuery CSS selectors का प्रयोग किया जा सकता है।
निम्न उदाहरण में सभी p elements का background-color पीले (yellow) में बदला जा रहा है:

Example

$("p").css("background-color","yellow");

Try it yourself »

Some More Examples

SyntaxDescription
$(this)मौजुदा HTML element
$("p") सभी <p> elements
$("p.intro") class="intro" वाले सभी <p> elements "
$(".intro") class="intro" वाले सभी elements "
$("#intro")id="intro" वाला पहला element
$("ul li:first")हर <ul> का पहला <li> element
$("[href$='.jpg']")href attribute वाले सभी elements है जिनका अंत ".jpg" के साथ होता है
$("div#intro .head")id="intro" वाले <div> element के अंदर class="head" वाले सभी elements  


Labels: , 0 comments

jQuery Syntax

Posted by Unknown at 09:19


jQuery के द्वारा आप HTML elements को select (या query -बुला) कर सकते है और उन पर मनचाहा perform करा सकते है।

jQuery Syntax Examples

$(this).hide()
jQuery hide() function को दर्शाता है,, current HTML element को छिपाता (hides) है।
$("#test").hide()
jQuery hide() function को दर्शाता है, id="test" वाले सभी element को छिपाता (hides) है।
$("p").hide()
jQuery hide() function को दर्शाता है, सभी <p> elements (paragraphs) को छिपाता (hides) है।
$(".test").hide()
jQuery hide() function को दर्शाता है, "test" वाले सभी paragraphs को छिपाता (hides) है।

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).
Basic syntax is: $(selector).action()
  • यहाँ dollar का चिन्ह jQuery को परिभाषित (define) कर रहा है ।
  • (selector)- HTML elements की "query (या find)"करता है।
  • यहाँ jQuery action()- वह jQuery action() जो उस element(s) पर उपयोग करता है।
उदाहरण:
$(this).hide() - current element को छिपाता (hides) है।
$("p").hide() - सभी paragraphs को छिपाता (hides) है।
$("p.test").hide() - class="test" वाले सभी paragraphs को छिपाता (hides) है।
$("#test").hide() - id="test" वाले सभी element को छिपाता (hides) है
jQuery XPath और CSS selector syntax के combination का प्रयोग करता है।
आप selector syntax के बारे में ज्यादा आगे से अध्यायों मे पढेंगे।

The Document Ready Function

आपने यह notice किया होगा कि, हमारे उदाहरणो मे, सभी jQuery functions,document.ready() function के अंदर होते हैं :
$(document).ready(function(){

   // jQuery functions go here...

});
यह किसी भी वेबपेज के लोड (या ready) होने से पहले किसी भी jQuery code को run होने से रोकता है।
यहाँ कुछ उन actions के उदाहरण है जो fail हो जायेंगे अगर functions वेबपेज के पूरी तरह लोड होने से पहले run होते हैं :
  • किसी element को छिपाने की कोशिश करना जो अस्तित्व में (exist) ही ना हो
  • किसी image के लोड होने से पहले उसकी साइज लेने की कोशिश करना

jQuery को अपने HTML पेज में उपयोग करना

आपको अपने HTML पेज के HEAD टैग के भीतर <script src= में jQuery की फ़ाइल का पूरा पता भरना होता है.

<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
</head>
<body>

</body>
</html> 

अब अपनी <body> टैग या <head> टैग के भीतर एक और <script> टैग जोड़िये. जैसे:

<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
</head>
<body>
<script type=”text/javascript”>
</script>
</body>
</html> 


अब हम jQuery के उपयोग के लिये तैयार हैं.
अपने <script> टैग में ये लिखें:
$(document).ready(function() {
// do stuff when DOM is ready
}); 
ये $(document).ready, window.onload के स्थान पर प्रयोग किया जाता है.
window.onload तब रन होता है जब आपका पेज पूरी तरह से लोड हो चुका हो. पर अगर आपके पेज में खूब सारे बड़े बड़े चित्र हों तो आपके पेज को लोड होने में भी समय लगेगा और आपका कोड भी देरी से शुरू होगा. जिससे पेज खराब दिख सकता है. अत: इस समस्या को हल करने के लिये jQuery आपको $(document).ready का फ़ंग्शन उपलब्ध कराता है. इससे आपका कोड पेज के तैयार होते ही रन होना शुरू हो जायेगा.

Labels: , 0 comments

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
Subscribe to: Posts (Atom)