jQuery syntax দ্বরা html উপাদান(element) কে select করা হয় এবং ঐ উপাদান 
গুলির(elements) উপর কিছু কার্য(action) সম্পাদন করা হয়। jQuery কে প্রকাশের জন্য নিম্নের প্রতীক গুলি ব্যবহার করা হয়। যেমন: jQuery, window.jQuery, $( dollar sign), window.jQuery.$ । তবে আমরা $ প্রতীকটি বেশী ব্যবহার করবো, কারন $ প্রতীকটি সবচেয়ে ছোট এবং সহজ।
jQuery লেখার Basic syntax : $(selector).action()
এখানে,
- Dollar ($) প্রতীক jQuery কে নির্দেশ করে।
- selector html উপাদান কে খোঁজার(search) জন্য ব্যবহার করা হয়।
- এবং html উপাদানের উপর যে কার্য সম্পন্ন হবে তা action() মধ্যে থাকবে।
উদাহরণ :
- $(this).hide() – বর্তমান উপাদানটি অদৃশ্য হবে (hides current element)।
- $(“p”).hide() – সকল paragraph অদৃশ্য হবে (hides all paragraphs)।
- $(“p.test”).hide() – যে সকল paragraph এর class=”test”, সেগুলি অদৃশ্য হবে (hides all paragraphs with class=”test”)।
- $(“#test”).hide() – যে সকল elements এর id=”test”, সেগুলি অদৃশ্য হবে (hides the element with id=”test”)।
Javascript/jQuery Best Practices :
Rule #1: Javascript এর event inline attribute হিসেবে ব্যবহার করা ঠিক নয়।
Bad markup:
[sourcecode language=”html”]
<a onclick="doSomething()" href="#">Click!</a>
[/sourcecode]
Good markup:
[sourcecode language=”js”]
<a href="backuplink.html" class="doSomething">Click!</a>
$(‘a.doSomething’).click(function(){
// Do something here!
alert(‘You did something, woo hoo!’);
});
[/sourcecode]
Rule #2 : সব সময় Javascript এর উপর নির্ভর করা উচিত নয়।
Bad markup:
[sourcecode language=”js”]
<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
document.write(‘Good Morning!’);
else
document.write(‘Good Afternoon!’);
</script>
[/sourcecode]
Good markup:
[sourcecode language=”js”]
<p title="Good Day Message">Good Morning!</p>
var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $(‘p[title="Good Day Message"]’);
goodDay.text(‘Good Afternoon!’);
}
[/sourcecode]
Rule #3: প্রত্যেক Markup এর মধ্যে JavaScript function call করা ঠিক নয়। root Markup এ id দিয়ে তার নিচের সবগুলি detect করা উচিত।
Bad markup:
[sourcecode language=”html”]
<dl>
<dt onclick="doSomething();">First Option</dt>
<dd>First option description</dd>
<dt onclick="doSomething();">Second Option</dt>
<dd>Second option description</dd>
</dl>
[/sourcecode]
Good markup:
[sourcecode language=”html”]
<dl id="OptionList">
<dt>First Option</dt>
<dd>First option description</dd>
<dt>Second Option</dt>
<dd>Second option description</dd>
</dl>
[/sourcecode]
Rule #4:Hello World! Why $(document).ready() is SO cool[পরবর্তীতে এ নিয়ে বিস্তারিত অলোচনা করা হবে।]
Bad markup:
[sourcecode language=”js”]
<script language="javascript">
alert(‘Hello World’);
</script>
[/sourcecode]
Good markup:
[sourcecode language=”js”]
$(document).ready(function()
{
alert(‘Hello World’);
});
[/sourcecode]
Rule #5: Dynamic CSS Rule তৈরি করা।
Bad markup:
HTML:
[sourcecode language=”html”]
<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>
[/sourcecode]
CSS:
[sourcecode language=”css”]
p.hide-me-first
{
display: none;
}
[/sourcecode]
Good markup:
HTML:
[sourcecode language=”html”]
<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>
[/sourcecode]
jQuery/Javascript:
[sourcecode language=”js”]
$(document).ready(function(){
jQuery.cssRule("p.hide-me-first", "display", "none");
});
[/sourcecode]
……………………………………………………………………
আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”
.action() এর ব্যাপারটা বুজলাম না। এটি কি কোন function() । please describe………
না এটি কোন function() না। আপনি html element এর উপর যে action সম্পন্ন করতে চান, সে action টি এখানে যুক্ত করবেন। যেমন, আপনি element টি hide করতে পারেন, নতুন content যুক্ত করতে পারেন , remove করতে পারেন।
উদাহরণ কয়টি একটু analyse করেন, আশা করি বুজে যাবেন।
Thanks…..