කලින් පාඩම බලලා එනවනම් තමා හොද. මම උගන්වන්න ලේසි වෙන්න ඉස්සල්ල පිටුව මේ විදිහට වැඩි කරලා ලිව්වා. ඔයත් කරලා බලන්න. ලින්ක් එක click කරනකොට ඇලර්ට් එක එන්න ඕනෙ.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function () {
alert("Hello World");
});
});
</script>
</head>
<body>
<a class="test link" id="link_1" href="">Test Link 1 </a><br/>
<a class="test link" id="link_2" href="">Test Link 2 </a><br/><br/>
Box<input class="test box" id="check_1" type ="checkbox" />
</body>
</html>
දැන් කියන්නම් මොකක්ද කලේ කියලා.$("") කෑල්ලෙන් තමා අදාල element එක තෝර ගන්නෙ.
- ඕක ඇතුලට a විතරක් දැම්මොත් html පිටුවෙ තියෙන සියලුම a tag වලට, ඊට පස්සෙ තියෙන event එකට අදාල function එක වැඩ කරනවා.
- ඒක ඇතුලෙ .test (තිත ඉදිරියට) දැම්මොත් class එක test වන ඒ පිටුවෙ තියෙන හැම element එකක් ගැනම සදහන් වෙනවා. එතකොට checkbox එක click කරනකොටත් ඇලර්ට් එක වැඩ කරන්න ඕනෙ. ඒකෙ තියෙන්නෙත් ඒ class එකමනේ. තිතෙන් කියන්නෙ class එකක් කියලා. ඒකෙ .link කියලා දැම්මොත් link class එක තියෙන ඒවට වැඩ කරනවා. එතකොට ඇලරට් එක දෙන්නෙ ලින්ක් වලින් විතරයි. කියන්න අමතක වුනානෙ. මම හැදුව විදිහට හැම element එකේම class 2ක් තියෙනවා. උදා ලෙස checkbox එකේ test සහ box ලෙස දෙකක් අඩංගුයි.
- අරක ඇතුලෙ #link_1 කියලා දැම්මොත් ඉතින් ඇලරට් දෙන්නෙ link_1 කියලා තියෙන ලින්ක් එකෙන් විතරමයි. (එකම පිටුවෙ එකම id එක දෙපාරක් යෙදෙන්න බෑ. හරියටම කිව්වොත් id එක uniqe. ඒ වගේම එක element එහෙකට තියෙන්න පුලුවන් එක් id එකක් විතරයි.)
මීට වඩා වැඩ පාරවල් දාලා හරියන element එක තෝරගන්න ක්‍රම තියෙනවා. ඒවා පස්සෙ පාඩමකින් කියලා දෙන්නම්. දැනට මේ හොදටම ඇති. (කවදා හරි ඒක ලියනකම් මේක බලන්න. http://api.jquery.com/category/selectors/ . මේකෙ තියෙනවා ඔක්කොම.)
ඊට ප්සසෙ click කියලා ලියලා තියෙන එක. ඒකට කියන්නෙ event එක කියලා.
ඔය event ජාති ගනනාවක් තියෙනවා. (මෙතන තියෙනවා ඔක්කොම. http://api.jquery.com/category/events/ )
වැඩියෙන් පාවිච්චි කරන එවා පහලින් ලියන්නම්.
- .change()
- .click()
- .dbclick()
- .keydown()
- .keypress()
- .keyup()
- .live()
- .load()
- .mousemove()
- .mouseenter()
- .mouseleave()
- .mouseout()
- .mouseover()
- .mouseup()
- .ready()
- .resize()
- .scroll()
- .select()
- .submit()
- .toggel()
- .trigger()
ඉතින් ඔය event එක වෙන වෙලාවට මොනාද කරන්න ඕනෙ කියලා ඒකෙ function එක ඇතුලෙ ලියන්න ඕනෙ. ලියන්න පුලුවන් function පස්සෙ කියන්නම්කො.
No comments:
Post a Comment