জে-কোয়েরী অবজেক্ট এ্যাস্কেসর(jQuery Object Accessors): জে-কোয়েরী -(পর্ব-৬)

2 Comments / জে-কোয়েরী (jQuery) / By

আমি jQuery Object Accessors সর্ম্পকে বলব,এর অর্থ থেকেই হয়ত বুজে গিয়েছেন এদের কাজ হল document এর object গুলোকে access করা।
নিচের কোডটুকুতে আমি নামের একটা link খুজছি যেটাতে click করলে পুরো document-এ যতগুলো div element আছে তাদের সবার color red না থাকলে red কর,আর red থাকলে এদের আগে যে color ছিল তা কর।
এখন আপনার প্রশ্ন হতে পারে document এ ত আরো অনেক link থাকতে পারে তখন?উত্তর হল সে সময় আপনি যদি প্রতিটা link এর id বা class আলাদা করে দেন তাহলে পরবর্তীতে দেখবেন কিভাবে আপনি এই id বা class এর মাধ্যমে specifically কোনলিঙ্ক element কে select করে action assign করতে পারবেন।

[sourcecode language=”js”]
$(“a”).click(function () {
$("div").each(function (i) {
if (this.style.color != "red") {
this.style.color = "red";
} else {
this.style.color = "";
}
});
});
[/sourcecode]

আপনি যদি dom বুঝেন তাহলে লক্ষ করলে দেখবেন উপরের এই কাজটুকু যদি করতে আপনাকে হয়ত 10-20 বা আরো বেশি লাইনের বেশি code লেখতে হতে পারে।তার চেয়ে এটা ব্যবহার করা সহজ নয় কি?

[sourcecode language=”js”]
$(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
[/sourcecode]

এখানে দেখুন আপনি যখন 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 এর color দিয়ে দিন ।এবার আপনি নিচের কোড ও output দেখুন।

উদাহরণ Code:

[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<style>
div {
width:30px;
height:20px;
margin:6px;
float:left;
background:red;
}
span {
color:red;
}
</style>
<script>
$(function(){
$(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
});
</script>
</head>
<body>
<span></span>
</body>
</html>
[/sourcecode]

Download Code | View Demo

………………………………………………………………………………
আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরি ধারাবাহিক টিউটোরিয়ালঃ

2 thoughts on “জে-কোয়েরী অবজেক্ট এ্যাস্কেসর(jQuery Object Accessors): জে-কোয়েরী -(পর্ব-৬)”

Leave a Comment