রেডি ইভেন্ট (Ready Event)

রেডি ইভেন্ট (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 করা যায়নি।

<!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>

ফলাফল(output):

Selector Example

আবার দেখুন jQuery code টুকু যদি <p> tag load হওয়ায় পরে দেই সেক্ষেত্রে <p> tag টি সহজেই access করা যাচ্ছে।

<!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>

ফলাফল(output):

Selector Example

এবার দেখুন, আমরা যদি .ready() event এর সাহায্যে <p> tag access করতে চাই , সেক্ষেত্রে আমরা jQuery code যেখানেই রাখি(উপরে নিচে) , যখনই <p> tag load হবে তখনই এটি jQuery code দ্বারা access হবে।

<!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>

ফলাফল(output):

Selector Example



<< Previous Next >>


লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।

কপি রাইট © ২০১১-২০১২ সর্বস্বত্ত্ব সংরক্ষিত, টিউটরিয়ালবিডি, একটি টিউটো ওয়েবস প্রতিষ্ঠান.