jQuery में इवेंट बाइंडिंग
लगभग हर JavaScript इवेंट का
jQuery में एक संबंधित तरीका होता है।
उदाहरण के लिए, तत्वों पर क्लिक को
इस तरह पकड़ा जा सकता है: $(सेलेक्टर).click(फंक्शन).
निम्नलिखित HTML कोड पर विचार करें:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
इसके लिए CSS लिखा गया है:
li {
width: 100px;
cursor: pointer;
}
आइए ऐसा करें कि किसी भी li पर क्लिक करने पर
एक विस्मयादिबोधक चिह्न दिखाई दे।
सूची के आइटम पर क्लिक करके देखें:
$('li').click(function() {
alert('!');
});
बाउंड फंक्शन के अंदर this उपलब्ध होता है,
जो उस तत्व को संदर्भित करता है जिसमें इवेंट हुआ
(हमारे मामले में वह li जिस पर क्लिक किया गया था)।
इस this का उपयोग JavaScript शैली में किया जा सकता है,
उदाहरण के लिए, this.innerHTML या
jQuery शैली में - इसके लिए इस this को
$ में लपेटना चाहिए, इस तरह: $(this).
HTML कोड लें:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
इस कोड के लिए निम्नलिखित CSS स्टाइल लिखे गए हैं:
li {
width: 100px;
}
li:hover {
color: red;
cursor: pointer;
}
आइए ऐसा करें कि li पर क्लिक करने पर
उसके अंत में '!' जुड़ जाए।
कार्य की जांच करने के लिए सूची के आइटम पर क्लिक करें:
$('li').click(function() {
$(this).append('!');
});
ऐसा करें कि प्रत्येक li पर क्लिक करने पर
उसकी शुरुआत में '?' जुड़ जाए।
पैराग्राफ दिए गए हैं। ऐसा करें कि प्रत्येक पैराग्राफ पर क्लिक करने पर उसकी सामग्री स्क्रीन पर प्रदर्शित हो।
संख्या वाले पैराग्राफ दिए गए हैं। पैराग्राफ पर क्लिक करने पर उसमें उस संख्या का वर्ग प्रकट होना चाहिए, जिसे वह समाहित करता है।
