jQuery में इवेंट बाइंडिंग

लगभग हर JavaScript इवेंट का jQuery में एक संबंधित तरीका होता है। उदाहरण के लिए, तत्वों पर क्लिक को इस तरह पकड़ा जा सकता है: $(सेलेक्टर).click(फंक्शन).

निम्नलिखित HTML कोड पर विचार करें:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

इसके लिए CSS लिखा गया है:

cssli {
  width: 100px;
  cursor: pointer;
}

आइए ऐसा करें कि किसी भी li पर क्लिक करने पर एक विस्मयादिबोधक चिह्न दिखाई दे। सूची के आइटम पर क्लिक करके देखें:

javascript$('li').click(function() {
  alert('!');
});

बाउंड फंक्शन के अंदर this उपलब्ध होता है, जो उस तत्व को संदर्भित करता है जिसमें इवेंट हुआ (हमारे मामले में वह li जिस पर क्लिक किया गया था)। इस this का उपयोग JavaScript शैली में किया जा सकता है, उदाहरण के लिए, this.innerHTML या jQuery शैली में - इसके लिए इस this को $ में लपेटना चाहिए, इस तरह: $(this).

HTML कोड लें:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

इस कोड के लिए निम्नलिखित CSS स्टाइल लिखे गए हैं:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

आइए ऐसा करें कि li पर क्लिक करने पर उसके अंत में '!' जुड़ जाए। कार्य की जांच करने के लिए सूची के आइटम पर क्लिक करें:

javascript$('li').click(function() {
  $(this).append('!');
});