Jquery, නම කිව්ව ගමන් හැම කෙනාම වගේ අහලා තියන JavaScript Library එකක්. මේ post series එකේ කියන්න හදන්නේ මුල සිට Jquery භාවිතය ගැන. මේ පොස්ට් එක ලියන වෙලාවේ තියන latest version එක වෙන්නේ 2.1.3 එක. HTML, CSS, JavaScript ගැන මූලික දැනුමක් තියනවා නම් වඩා හොඳයි. Jquery කියන්නේ JavaScript Library එකක්. “write less, do more” කියන්නේ මේකේ tagline එක. නමේම තියන විදියට JS Code පේලි ගොඩකින් කරන දේ පේලි කීපයකින් Jquery වලදී කරගන්න පුළුවන්. මේ නිසා තමයි Jquery ජනප්‍රිය වෙලා තියෙන්නේ. ඒ වගේම අද භාවිත කරන හැම browser එකකම වගේ වැඩ කරන විදියට හදලා තියන නිසා cross-browser issue එක Jquery වල නැහැ.
එහෙනම් දැන් වැඩේ පටන් ගමු. මේකෙදි ඕන වෙනවා Text Editor එකක්, web Browser එකක්, Jquery Library එක. Jquery Library එක මෙතනින් ගන්න පුලුවන්. එහෙම නැත්තන් CDN එක use කරන්නත් පුළුවන්. CDN ගැන දැනගන්න මේ පොස්ට් එක බලන්න. මේ තියෙන්නේ CDN එක.
[code language=”javascript”]
<script src="code.jquery.com/jquery-1.11.2.min.js"></script>
[/code]
සාමාන්‍ය library එකක් විදියටම code එකකට add කරගන්න පුළුවන්. Head tag එකේ දාගන්න.
[code language=”html”]
<head>
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
</head>
[/code]
එහෙම නැත්තන් CDN use කරන්න පුළුවන්.
[code language=”html”]
<head>
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
</head>
[/code]
Javascript වලදී කරන විදියටම අපිට වෙනස් කරගන්න ඕන element එකට selector එකක් දාගන්න ඕන. selector එකක් කියන්නේ id, class, tag attribute වලට. මේවා වලින් කරන්නේ element අඳුරගන්න එක. එහෙමත් නැත්ටන් select කරගන්න එක.
[code language=”html”]
<div id="mydiv"></div>
<label class = "mylabel"></label>
[/code]
මේ ලියලා තියෙන්නේ එහෙම selector use කරන විදිය. ඒ වගේම මේකේ div, label කියන ඒවත් selector විදියට use කරන්න පුළුවන්.දැන් බලමු Jquery Syntax use කරන්නේ කොහොමද කියලා. Jquery syntax වල තියෙන්නේ මේ Structure එක.
$(selector).action()
මේ syntax එක විස්තර කරනවා නම්,
- selector කියන තැනට එන්න ඕන id, class, tag එක.
මේක ලියන්නේ id එකක් නම් “#mydiv”, class එකක් නම් “.mylabel”, tag එකක් නම් “div”, ඒ වගේම this කියන ඒකත් use කරනවා. this කියන එකෙන් select කරගන්නේ current element එක. selectors ගැන විස්තර කරන්නම් පස්සේ.
- action කියන තැනට එන්නේ Jquery වල දීලා තියන functions.
show, hide, toggle වගේ ඒවා තියනවා. ඒවා ඉස්සරහට බලමු.
අපි ලියන හැම Jquery code එකම ලියන්නේ මේ document ready event එක ඇතුලේ.
[code language=”javascript”]
$(document).ready(function(){
<i>// jQuery methods go here…</i>
});
[/code]
මේකට හේතුව වෙන්නේ document එක, එහෙම නැත්නම් html page එක fully load වෙන්න කලින් Jquery code run වෙන එක නවත්තන එක. එහෙම නැවතුනේ නැති උනොත් elements වලට load උනාට පස්සේ කරන changes auto apply වෙනවා. ඒ කියන්නේ image එකක් resize කරලා තියනවා නම් add වෙන්නේ resize කරපු image එක. මේ වගේ අඩුපාඩු හදාගන්න පුළුවන් මේ ready event එකේ code කරනවා නම්.
දැන් බලමු selectors ගැන.මේකේ කොටස් 3ක් තියනවා.
- Tag Selector
tag එකක් විදියට හඳුන්වන්නේ div, button, input වගේ ඒවා. මේවා selector එකක් විදියට use කරන්න පුළුවන්.මේ තියෙන්නේ HTML code එක.
[code language=”html”]
<p>This is another paragraph.</p>
<button>Click me</button>
[/code]
මේ jquery code එක. $(“p”) element එක select කරගන්නේ මේකෙන්.
[code language=”javascript”]
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
[/code]
- ID Selector
මේකෙන් කියන්නේ element එකට දෙන id ඒක selector එක විදියට ගන්න එක.මේ තියෙන්නේ HTML code එක.
[code language=”html”]
<p id="para">This is another paragraph.</p>
<button>Click me</button>
[/code]
මේ jquery code එක. $(“#para”) element එක select කරගන්නේ මේකෙන්.
[code language=”javascript”]
$(document).ready(function(){
$("button").click(function(){
$("#para").hide();
});
});
[/code]
- Class ID Selector
tag එකක් විදියට හඳුන්වන්නේ class attribute එකේ දෙන name එක.මේවත් selector එකක් විදියට use කරනවා.මේ තියෙන්නේ HTML code එක.
[code language=”html”]
<p class="para">This is another paragraph.</p>
<button>Click me</button>
[/code]
මේ jquery code එක. $(“.para”) element එක select කරගන්නේ මේකෙන්.
[code language=”javascript”]
$(document).ready(function(){
$("button").click(function(){
$(".para").hide();
});
});
[/code]
පොදුවේ වැඩිපුර භාවිත වෙන selectors පහලින් තියෙන්නේ. select කරගන්නේ මොකද්ද කියලා comment එකේ තියනවා.
[code language=”javascript”]
$("*") //සියලුම elements
$(this) //current HTML element එක
$("p.heading") //class="heading" තියන <p> elements
$("[href]") //href attribute එක තියන සේරම elements
$(":button") //type="button" තියන <button> elements සහ <input> elements
$("tr:even") //ඉරට්ටේ <tr> elements
$("tr:odd") //ඔත්තේ <tr> elements
$("input[type=’text’]") //type එක text වෙන input tags
$("input[type !=’text’]") //type එක text නොවෙන input tags
$("a[target=’_blank’]") //target attribute එක "_blank" වෙන සියලුම <a> elements
[/code]
මීළඟ පොස්ට් එකේ events විස්තර කරන්නම්. පැහැදිලි නැති දෙයක් තියනවා නම් Comment කරලා අහන්න. ලිපිය ගැන අදහසක් දුන්නොත් තව හොඳට tutorial එක කරන්න පුළුවන්.
JQuery සිංහලෙන් – 1 | සතුටු වැස්ස බ්ලොග් කියවනය
[…] JQuery සිංහලෙන් – 1 […]
Change TextBox Width with JQuery on Focus and Blur | dhanushka's blog
[…] ← Previous […]
JQuery සිංහලෙන් – 2 | dhanushka's blog
[…] jquery events ගැන. කලින් post එක බැලුවේ නැත්තන් මෙතැනින් […]
Bhanuka Thirimanne
Great work. hope to keep in touch with these posts.
dhanush_c
Thanks bro.. 😀
anjanagnet
You’ve tagged Jquery Library with this post, Is that just to see?
dhanush_c
CDN, that i have attached first is woking, other links are just for explain how to add library.
Isuru Rambandarage
බොහොම අගනා වැඩක් සහෝදරයා…