অধিকাংশ ক্ষেত্রে, কোন পেজের DOM hierarchy যখন পরিপূর্নভাবে browser এ সংগঠিত / স্থাপিত হয়, তখনই কেবলমাত্র script execute হতে পারে। যখন DOM manipulate করার জন্য পরিপূর্ন ভাবে প্রস্তুত(ready) হবে, তখন .ready() function টি কাজ শুরু করবে অর্থৎ handler .ready() এর মধে প্রতিস্থাপিত হবে। সুতরাং এটি ছাড়া অন্যান্ন সকল event handler কে attach করা সহ jQuery code execute করার জন্য এটি একটি উপযুক্ত function.
আমরা জানি code সবসময় উপর থেকে নিচের দিকে(top-down process) execute হয় , তাই ready() use না করে যদি আমরা jQuery code document এর শুরুতে লিখি সে ক্ষেত্রে jQuery code কাজ করবে না ; কারন jQuery যে tag এর উপরে operation চালাবে তা পরে load হয়েছে। তবে ready() ছাড়া document এর শেষে code লিখলে কাজ করবে। নিম্নে এ সম্পর্কিত উদাহরন দেয়া হয়েছে।-
নিম্নের syntax গুলি ready function এর সমতুল্য syntax :-
- $(document).ready(handler)
- $().ready(handler) (this is not recommended)
- $(handler)
Example :
এখানে দেখুন <p> tag টি jQuery এর মাধ্যমে access করার চেষ্টা করা হয়েছে , কিন্তু <p> tag টি jQuery code এর পরে load হওয়ায় তা access করা যায়নি।
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$("p").text("The DOM is now loaded and can be manipulated.");
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
[/sourcecode]
ফলাফল(output):
আবার দেখুন jQuery code টুকু যদি <p> tag load হওয়ায় পরে দেই সেক্ষেত্রে <p> tag টি সহজেই access করা যাচ্ছে।
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Not loaded yet.</p>
<script type="text/javascript">
$("p").text("The DOM is now loaded and can be manipulated.");
</script>
</body>
</html>
[/sourcecode]
ফলাফল(output):
এবার দেখুন, আমরা যদি .ready() event এর সাহায্যে <p> tag access করতে চাই , সেক্ষেত্রে আমরা jQuery code যেখানেই রাখি(উপরে নিচে) , যখনই <p> tag load হবে তখনই এটি jQuery code দ্বারা access হবে।
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
[/sourcecode]
ফলাফল(output):
………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল। “HAVE A GOOD PROGRAMMING”
জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ
- জে-কোয়েরী কি ?
- JavaScript, AJAX এবং jQuery নিয়ে কিছু কথা
- জে-কোয়েরী কোডিং পদ্ধতি
- জে-কোয়েরী সিনট্যাক্স
- জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন
- জে-কোয়েরী অবজেক্ট এ্যাস্কেসর
- জে-কোয়েরী সিলেক্টর সমূহ
- অল সিলেক্টর (All Selector)
- ক্লাস এবং আইডি সিলেক্টর
- ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর
- এট্রিবিউট সিলেক্টর
- প্রিফিস্ক সিলেক্টর
- কন্টেইন্ডস্ সিলেক্টর
- ওয়ার্ড এবং এন্ড সিলেক্টর
- ইকুয়াল এবং নট ইকুয়াল সিলেক্টর
- স্টার্ট ওয়িথ এবং হ্যাজ সিলেক্টর
- মাল্টিপাল এট্রিবিউট সিলেক্টর
- এট্রিবিউট সিলেক্টর গুলি নিয়ে একটি ছোট project
- :হিডেন সিলেক্টর
- :ভিজিবল সিলেক্টর
- jQuery form selectors উদাহরন
- Dynamically add/remove textbox
- জে-কোয়েরী ইভেন্ট সমূহ
- ব্লুয়ার ইভেন্ট
- ফোকাস এবং চেঞ্জ ইভেন্ট
- সাবমিট এবং সিলেক্ট ইভেন্ট
- ফোকাস-ইন এবং ফোকাস-আউট ইভেন্ট
- কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট
- কিভাবে copy, paste এবং cut behavior detect করা যায়?
- ক্লিক এবং ডাবল-ক্লিক ইভেন্ট
- মাউস্-মূভ ইভেন্ট
- মাউস-ওভার এবং মাউস-এন্টার ইভেন্ট এর মধ্যে পার্থক্য
- মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য
- টগল ইভেন্ট(Toggle Event)
- মাউস-ডাউন, মাউস-আপ এবং হোভার ইভেন্ট
- jquery এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন
- রিসাইজ ইভেন্ট (Resize Event)
- লোড এবং আন-লোড ইভেন্ট (Load and Unload Event)
- রেডি ইভেন্ট (Ready Event)