JQuery සිංහලෙන් – 1


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 වල නැහැ.

jq1 copy
එහෙනම් දැන් වැඩේ පටන් ගමු. මේකෙදි ඕන වෙනවා Text Editor එකක්, web Browser එකක්, Jquery Library එක. Jquery Library එක මෙතනින් ගන්න පුලුවන්.  එහෙම නැත්තන් CDN එක use කරන්නත් පුළුවන්. CDN ගැන දැනගන්න මේ පොස්ට් එක බලන්න. මේ තියෙන්නේ CDN එක.

<script src="code.jquery.com/jquery-1.11.2.min.js"></script>

සාමාන්‍ය library එකක් විදියටම code එකකට add කරගන්න පුළුවන්. Head tag එකේ දාගන්න.

<head>
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
</head>

එහෙම නැත්තන් CDN use කරන්න පුළුවන්.

<head>
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
</head>

Javascript වලදී කරන විදියටම අපිට වෙනස් කරගන්න ඕන element එකට selector එකක් දාගන්න ඕන. selector එකක් කියන්නේ id, class, tag attribute වලට. මේවා වලින් කරන්නේ element අඳුරගන්න එක. එහෙමත් නැත්ටන් select කරගන්න එක.

<div id="mydiv"></div>
<label class = "mylabel"></label>

මේ ලියලා තියෙන්නේ එහෙම 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 එක ඇතුලේ.

$(document).ready(function(){

   <i>// jQuery methods go here...</i>

});

මේකට හේතුව වෙන්නේ 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 එක.

<p>This is another paragraph.</p>
<button>Click me</button>

මේ jquery code එක. $(“p”) element එක select කරගන්නේ මේකෙන්.

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
    • ID Selector

මේකෙන් කියන්නේ element එකට දෙන id ඒක selector එක විදියට ගන්න එක.මේ තියෙන්නේ HTML code එක.

<p id="para">This is another paragraph.</p>
<button>Click me</button>

මේ jquery code එක. $(“#para”) element එක select කරගන්නේ මේකෙන්.

$(document).ready(function(){
    $("button").click(function(){
        $("#para").hide();
    });
});
    • Class ID Selector

tag එකක් විදියට හඳුන්වන්නේ class attribute එකේ දෙන name එක.මේවත් selector එකක් විදියට use කරනවා.මේ තියෙන්නේ HTML code එක.

<p class="para">This is another paragraph.</p>
<button>Click me</button>

මේ jquery code එක. $(“.para”) element එක select කරගන්නේ මේකෙන්.

$(document).ready(function(){
    $("button").click(function(){
        $(".para").hide();
    });
});

පොදුවේ වැඩිපුර භාවිත වෙන selectors පහලින් තියෙන්නේ. select කරගන්නේ මොකද්ද කියලා comment එකේ තියනවා.

$("*")	          //සියලුම 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

මීළඟ පොස්ට් එකේ events විස්තර කරන්නම්. පැහැදිලි නැති දෙයක් තියනවා නම් Comment කරලා අහන්න. ලිපිය ගැන අදහසක් දුන්නොත් තව හොඳට tutorial එක කරන්න පුළුවන්.

Advertisements

8 thoughts on “JQuery සිංහලෙන් – 1

  1. Pingback: JQuery සිංහලෙන් – 1 | සතුටු වැස්ස බ්ලොග් කියවනය

  2. Pingback: Change TextBox Width with JQuery on Focus and Blur | dhanushka's blog

  3. Pingback: JQuery සිංහලෙන් – 2 | dhanushka's blog

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s