jQuery कोर - jQuery() फ़ंक्शन
उदाहरण
सभी div एलीमेंट के उप-एलीमेंट p को खोजें, फिर उसके किनारा गुण सेट करें:
$("div > p").css("border", "1px solid gray");
विभाषण और उपयोग
jQuery() फ़ंक्शन एक स्ट्रिंग ले जाता है, जिसमें एलीमेंट सेट को मेल खाने वाले CSS चयनकर्ता है.
jQuery() फ़ंक्शन तीन व्याकरण हैं:
व्याकरण 1
एक स्ट्रिंग ले जाएं, जिसमें एलीमेंट सेट को मेल खाने वाले CSS चयनकर्ता है:
jQuery(selector, [context]
व्याकरण 2
प्रारंभिक HTML के स्ट्रिंग का उपयोग करके DOM एलीमेंट बनाएं:
jQuery(html,ownerDocument]
व्याकरण 3
डॉम डॉक्यूमेंट लोड होने के बाद एक फ़ंक्शन बांधें:
jQuery( callback )
jQuery( selector, [ context ] )
इस सिंटैक्स के लिए निम्नलिखित उपयोग हैं:
उपयोग 1: चयनकर्ता वातावरण सेट करना
व्याकरण
jQuery(selector, [context]
मूलभूत रूप से, चयनकर्ता डॉक्यूमेंट की रूट से DOM पर खोज करता है. लेकिन, $() को वैकल्पिक context पारामीटर को सेट कर सकते हैं.
अगर हम एक कॉलबैक में एक एलीमेंट खोजना चाहते हैं, तो नीचे दिए गए खोज को सीमित कर सकते हैं:
उदाहरण
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的 class。
आंतरिक रूप से, चयनक परिवेश .find() तरीके से ही प्रदर्शित किया जाता है, इसलिए $("span", this) इससे समान है: $(this).find("span")。
jQuery के केंद्रीय फ़ंक्शन इस फ़ंक्शन के माध्यम से ही साधारणता से हैं। jQuery के सब कुछ इस फ़ंक्शन के आधार पर है, या इसके किसी भी तरीके से इसका उपयोग करते हैं। इस फ़ंक्शन का सबसे मूलभूत उपयोग इसको एक एक्सप्रेशन (सामान्यतया CSS चयनक द्वारा युक्त) पास करना है, और उस एक्सप्रेशन के अनुसार सभी मेल खाते एलीमेंटों को खोजना है。
डिफ़ॉल्ट में, अगर context पैरामीट निर्दिष्ट नहीं किया गया है, तो $() वर्तमान HTML डाक्यूमेंट में DOM एलीमेंटों को खोजता है; अगर context पैरामीट निर्दिष्ट किया गया है, जैसे एक DOM एलीमेंट सेट या jQuery ऑब्जेक्ट, तो उस context में खोज की जाती है। jQuery 1.3.2 के बाद, इसके वापसी एलीमेंटों की क्रमवार अनुक्रमितता context में उनके प्रकट होने के क्रम के अनुरूप है。
उपयोग 2: DOM एलीमेंट का उपयोग करके
व्याकरण
jQuery(element)
यह फ़ंक्शन हमें दूसरे तरीके से पाए गए DOM एलीमेंट का उपयोग करके jQuery ऑब्जेक्ट का निर्माण करने की अनुमति देता है। इस फ़ंक्शन के सामान्य उपयोग में, इसे this कीवार्ड द्वारा callback फ़ंक्शन में पाए गए एलीमेंट पर jQuery के तरीकों को आह्वान करना शामिल है:
उदाहरण
$("div.foo").click(function() {
$(this).slideUp();
});
इस उदाहरण में एलीमेंट को क्लिक करने पर उसे स्लाइड एनीमेशन के साथ छुपाया जाता है। इसलिए कि हैंडलर द्वारा अंतरित this कीवार्ड में जो बिना छोड़े DOM एलीमेंट है, इसे jQuery के तरीकों के साथ आह्वान करने से पहले इसे jQuery ऑब्जेक्ट में वॉपकोट करना आवश्यक है。
यह फ़ंक्शन XML डाक्यूमेंट और विंडो ऑब्जेक्ट (भले ही वे DOM एलीमेंट नहीं हों) को प्रभावी पैरामीट के रूप में स्वीकार कर सकता है。
जब XML डाटा Ajax कॉल के बाद वापस आता है, हम जीक्वेरी के $() फ़ंक्शन का उपयोग करके उस डाटा को jQuery ऑब्जेक्ट में वॉपकोट कर सकते हैं। जब तक यह काम पूरा हो जाता है, हम .find() और अन्य DOM विस्तार तरीकों का उपयोग करके XML संरचना में एकल एलीमेंट को वापस ले सकते हैं。
उपयोग 3: jQuery ऑब्जेक्ट को क्लोन करना
व्याकरण
jQuery(jQuery ऑब्जेक्ट)
जब jQuery ऑब्जेक्ट को $() फ़ंक्शन को पैरामीट के रूप में दिया जाता है, तो उसकी प्रतिलिपि बनाई जाती है। आरंभिक ऑब्जेक्ट के अनुरूप, नया jQuery ऑब्जेक्ट उसी DOM एलीमेंट को संदर्भित करता है。
उपयोग 4: खाली सेट वापस करना
व्याकरण
jQuery()
jQuery 1.4 के लिए, बिना पैरामीट के jQuery() फ़ंक्शन को बुलाने से खाली jQuery सेट वापस किया जाता है। jQuery के पहले संस्करणों में, ऐसा करने से document नोड की सेट वापस किया जाता था।
jQuery( html, [ ownerDocument ] )
इस सिंटैक्स के लिए निम्नलिखित उपयोग हैं:
उपयोग 1: नए एलिमेंट को बनाना
व्याकरण
jQuery(html,ownerDocument]
आप एक हस्तलिखित HTML स्ट्रिंग, या किसी टेम्पलेट इंजिन या प्लगइन द्वारा बनाई गई स्ट्रिंग, या AJAX द्वारा लोड की गई स्ट्रिंग को पास कर सकते हैं। लेकिन आप input एलिमेंट को बनाते समय सीमाएँ हैं, दूसरे उदाहरण को देखें।
इस स्ट्रिंग में अगर गज़्ज़ (जैसे एक इमेज़ का पता) है, अथवा वापस गज़्ज़ है। एकल एलिमेंट को बनाते समय, आपको बंद टैग या XHTML फार्मेट का उपयोग करना चाहिए। उदाहरण के लिए, एक span को बनाने के लिए $("<span/>") या $("<span></span>") का उपयोग करें, लेकिन $("<span>") का उपयोग न करें। jQuery में यह सिंटैक्स $(document.createElement("span")) के समान है।
यदि आप $() को पैरामीट के रूप में स्ट्रिंग को पास करते हैं, तो jQuery स्ट्रिंग को HTML है कि नहीं (जैसे, स्ट्रिंग के कुछ स्थानों पर टैग हैं) जाँच करता है। यदि नहीं है, तो jQuery स्ट्रिंग को चयनक एक्सप्रेशन के रूप में व्याख्यायित करता है, कृपया ऊपरी व्याख्यान देखें। लेकिन यदि स्ट्रिंग HTML फ़ेशन है, तो jQuery उस HTML फ़ेशन द्वारा वर्णित DOM एलिमेंट को बनाने की कोशिश करता है। फिर उस DOM एलिमेंट के लिए एक जिंदा jQuery ऑब्जैक्ट बनाता और वापस करता है:
उदाहरण
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
यदि HTML फ़ेशन गैर-विशेषता वाले सरल टैग से ज्यादा जटिल है, जैसे ऊपरी उदाहरण में HTML, तो एलिमेंट की वास्तविक बनाने की प्रक्रिया ब्राउज़र के innerHTML मैकेनिज्म द्वारा पूरी की जाती है। विशेष रूप से, jQuery एक नया <div> एलिमेंट बनाता है, फिर दाखिल किए गए HTML फ़ेशन के लिए एलिमेंट की innerHTML विशेषता सेट करता है। जबकि पैरामीट एक सरल टैग है, जैसे $("<img />") या $("<a></a>") तो jQuery आंतरिक JavaScript createElement() फ़ंक्शन के द्वारा एलिमेंट को बनाता है।
यह सुनिश्चित करने के लिए कि प्लेटफ़ॉर्म अव्यवहार्यता हो, टैग की संरचना अच्छी होनी चाहिए। अन्य एलीमेंट्स को शामिल करने वाली टैग को जोड़-खोल ढंग से दिखाना चाहिए (बंद टैग के साथ):
$("<a href="http://jquery.com"></a>");
जबकि jQuery भी XML के समान टैग व्याकरण की अनुमति देता है:
$("<a/>");
अन्य एलीमेंट्स की टैग शामिल नहीं करने वाली टैग बंद कर सकती है या नहीं कर सकती है:
$("<img />");
$("<input>");
उपयोग 2: अटीब्यूट्स और इवेंट्स सेट करना
व्याकरण
jQuery(html,props)
jQuery 1.4 के लिए, हम दूसरे पारामीटर में एक अटीब्यूट मैप पास कर सकते हैं। यह पारामीटर .attr() विधि के लिए पास की जा सकने वाली अटीब्यूट्स का एक बड़ा दायरा प्रदान करता है। इसके अलावा, किसी भी इवेंट टाइप को पास किया जा सकता है और नीचे दिए गए jQuery विधियों को आह्वान किया जा सकता है: val, css, html, text, data, width, height, or offset.
ध्यान दें कि Internet Explorer आपको input एलीमेंट बनाने और उसके प्रकार को बदलने की अनुमति नहीं देता; आपको उदाहरण के तौर पर "<input type="checkbox" />" का इस्तेमाल करना चाहिए।
उदाहरण
एक <input> एलीमेंट बनाएं, साथ ही type अटीब्यूट, अटीब्यूट मान, और कुछ इवेंट्स निर्धारित करें。
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
आपको एक फ़ंक्शन बांधने की अनुमति देता है जो DOM दस्तावेज लोड होने के बाद चलाया जाता है。
इस फ़ंक्शन का काम $(document).ready() के समान है, लेकिन इस फ़ंक्शन का इस्तेमाल करते समय, पृष्ठ में DOM लोड होने के बाद अन्य $() ऑपरेटर की सभी ऑपरेशनों को इसमें वृद्ध करना चाहिए। यद्यपि तकनीकी रूप से यह फ़ंक्शन लिंक किया जा सकता है, लेकिन इस तरह से लिंक करने की स्थितियाँ बहुत कम हैं。
उदाहरण
जब DOM लोड होने के बाद, उसमें निहित फ़ंक्शन को चलाया जाता है:
$(function() {
// दस्तावेज तैयार
});
