jQuery bangla tutorial part-3

আমি jQuery Object Accessors সর্ম্পকে বলব,এর অর্থ থেকেই হয়তবুজে গিয়েছেন এদের কাজ হল
document এর object গুলোকে access
করা।
each():
$(“a”).click(function () {
$("div").each(function (i) {
if (this.style.color != "red") {
this.style.color = "red";
} else {
this.style.color = "";
}
});
});
এখানে আমি নামের একটা link খুজছি যেটাতে click করলে পুরো document-এ যতগুলো div element আছে তাদের সবার color red না থাকলে red কর,আর red থাকলে এদের আগে যে color ছিল তা কর।
এখন আপনার প্রশ্ন হতে পারে document এ ত আরো অনেক link থাকতে পারে তখন?উত্তর হল সে সময় আপনি যদি প্রতিটা link এর id বা class আলাদা করে দেন তাহলে পরবর্তীতে দেখবেন কিভাবে আপনি এই id বা class এর মাধ্যমে specifically কোনলিঙ্ক element কে select করে action assign করতে পারবেন।কি এখন তবুজতে পারছেন jQuery আসলেই সহজ।আসলে jQuery কে বানানোই হয়েছে এই উদ্দেশ্যে ।যাতে খুব কম code লেখে javascript এর অনেক বড় কাজ করা যায়।
আপনি যদি dom বুঝেন তাহলে লক্ষ করলে দেখবেন উপরের এই কাজটুকু যদি করতে আপনাকে হয়ত 10-20 বা আরো বেশি লাইনের বেশি code লেখতে হতে পারে।তার চেয়ে এটা ব্যবহার করা সহজ নয় কি?
size():
$(document.body).click(function () {
$(document.body).append($("
<div>”));
var n = $(“div”).size();
$(“span”).text(“There are ” + n + ” divs.” +
“Click to add more.”);
}).click(); // trigger the click to start

এখানে দেখুন আপনি যখন document.body তে click করবেন তখন
document.body তে আমি $(html) এর মাধ্যমে একটি

element add করছি।তবে এবার করছি একটু ভিন্নভাবে তাই না?একটু খেয়ালকরলে দেখবেন দুটা আসলে একই।এখন ভাবুনতো আমি আপনাকে দেব আর আপনি আমার কাছ থকে নিবেন ,এ দুটার মধ্যে পার্থক্য কি?হা হা হা,একই তাই না?প্রথম আমি element তৈ্রি করে তা document body তে append করতে বলেছি এখন document body তে append করতে বলছি div নামের একটা element কে। তারপর n নামের একটি variable এর ভেতর total document এ কতগুলো div element আছে তা গননা করে একটা integer মান রাখছি size() function এর মাধ্যমে।
তারপর “span” নামের কোন element থাকলে এর ভেতর text এর মাধ্যমে লেখছি div কয়টা আছে।আর সবশেষে আমি নিজেই একটা click করে দিচ্ছি document ready
হওয়ার সাথে সাথে click() এর মাধ্যমে “একে সাধারন ভাষায় বলে trigger করা”।এখন আপনি লক্ষ করে দেখবেন আপনি যতবার click করছেন ততবার একটি করে div add হচ্ছে আপনার document এ, এবং span এর ভেতর লেখাও প্রতিবার change হচ্ছে। সবচেয়ে ভাল হয় আপনি যদি আপনি css এর মাধ্যমে div এর border , color দিয়ে দিলে । এ কাজটি করতে পারেন css এর মাধ্যমে,আপনি নিচের কোডটি head এর মাঝখানে লিখুন।

div { width:30px; height:20px; margin:6px; float:left;
background:red; }
span { color:red; }

length:
$(document.body).mouseout(function () {
$(document.body).append($("
<div>”));
var n = $(“div”).length;
$(“span”).text(“There are ” + n + ” divs.” +
“Click to add more.”);
}).trigger(‘mouseout’);
আসলে length এবং size() এর কাজ একই ।তাই আমি আর বেশি কিছু বললাম না length সম্পর্কে ।তবে এখানে একটা কথা বলি trigger নিয়ে ।trigger ও jquery র আর একটি function. size() এর উদাহরণ এ প্রথম click টা আমি
কিভাবে করেছিলাম? Code এর শেষে click() দিয়ে trigger করে। তাই না? এখানে ও একই কাজ করেছি ।তবে একটু ভিন্নভাবে, trigger function দিয়ে। আমি trigger function এর ভেতর বলে দিচ্ছি তুমি mouseout নামে যে event টি আছে সেটি execute কর প্রথম বার page ready হওয়ার সাথে সাথে ।সে ও তাই page ready হওয়ার সাথে সাথেই mouseout নামের event
টি execute করে ।
And that’s it for today..
one thing again–আমি এই টিউটরিয়ালটা-ও first টিউটরিয়ালটা-r সাথেই লিখেছিলাম। খালি copy-paste করার বাকি ছিল।
and it was last part that was written but now i’ve to write again
for new tutorial
..
And HAVE A GOOD PROGRAMMING