রেডি ইভেন্ট (Ready Event) : জে-কোয়েরী -(পর্ব-৩৯)

অধিকাংশ ক্ষেত্রে, কোন পেজের 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):

Selector Example

আবার দেখুন 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):

Selector Example

এবার দেখুন, আমরা যদি .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):

Selector Example

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল। “HAVE A GOOD PROGRAMMING”

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