معرفی رویداد ready در جیکوئری

1396/8/6 علیرضا حاتمی نیا 9020

 

مقدمه

درود خدمت شما دوستان گرامی
من علیرضا حاتمی نیا هستم و با جلسه دوم آموزش جیکوئری در خدمت شما هستم. در جلسه اول به معرفی و نصب کتابخانه جیکوئری پرداختیم و در جلسه دوم با شروع کدنویسی در جیکوئری و معرفی رویداد ready آشنا می شویم. این آموزش ها تحت گروه آموزش برنامه نویسی در اختیار شما قرار داده می شود.

استفاده از فایل خارجی جهت کدنویسی JQery

قبل از شروع کدنویسی ابتدا بهتر است تا یک سند جاوااسکریپت با نامی دلخواه ایجاد کرده و آن را به سند HTML خود اضافه کنیم و کدهای مربوط به جیکوئری را داخل آن بنویسیم. این کار مزیت های بسیاری نسبت به کدنویسی مستقیم در داخل سند HTML نیز دارد. از مهمترین این مزیت ها می توان به سرعت بیشتر کدنویسی و خطایابی، توسعه راحت تر و سریع تر و جلوگیری از تکرار در کدنویسی اشاره کرد. 
برای این کار ابتدا یک فایل با پسوند js با نامی دلخواه ( در اینجا handle.js )  در مسیری دلخواه (در اینجا در پوشه ای به نام js) ایجاد می کنیم و به این صورت به سند HTML خود اضافه می کنیم. 
<head>
      <title>The jQuery Example</title>
  
      <script type="text/javascript" src ="js/jquery-3.2.1.js"></script>

      <script type = "text/javascript" src = "/js/jquery/handle.js"></script>
</head>

بسیار عالی حال سند handle.js را باز می کنیم و شروع به کدنویسی می کنیم. 

jquery tutorial

نحوه فراخوانی توابع جیکوئری و رویداد ready() در جیکوئری

برنامه نویسان جاوااسکریپت جهت سرعت بخشیدن به بارگزاری صفحات html کلیه کدهای جاوا اسکریپت خود را در پایین ترین قسمت صفحه و در تگ body می نویسند. این کار باعث می شود تا ابتدا تگ های html  و خواص css لود شده ، صفحه به طور کامل بارگزاری شود و سپس کدهای جاوااسکریپت اجرا شوند. اما در جیکوئری رویدادی به نام ready وجود دارد که کلیه کدهای جیکوئری داخل این رویداد نوشته میشود. این رویداد دقیقا مشابه کار بالا را انجام می دهد. یعنی ابتدا کل سند HTML بر اساس مدل DOM بارگزاری می شود و سپس کدهای جیکوئری و جاوااسکریپت داخل آن اجرا می شود. نحوه نوشتن رویداد ready در جی کوئری به شکل زیر است. 
$(document).ready(function() {
   // هنگامی که سند بارگزاری شد کدهای اینجا اجرا میشوند
});
اگر فهم کدهای بالا کمی برایتان دشوار است نگران نباشید. چون هنوز با selectorها یا انتخابگرها در جیکوئری آشنا نشده اید. ولی توضیح کوتاهی در مورد آنها می آوریم:
Document : این پارامتر کل سند را انتخاب می کند و رویداد ready را برای آن اجرا می کند. توجه داشته باشید که انتخابگر می تواند برای یک کلاس یا یک تگ یا هر شی در HTML باشد.
Ready : یک رویداد می باشد که هنگامی که انتخابگر مورد نظر (در اینجا سند) به طور کامل بارگزاری شد اجرا می شود. توجه داشته باشید که رویدادها انواع مختلفی دارند که با آنها آشنا می شوید. مثلا کلیک کردن یا فشردن یک دکمه از کیبورد خود یک رویداد حساب می شوند. 
Function : در اینجا تابعی بدون شناسه است که می خواهیم پس از لود شدن کامل صفحه اجرا شود. 
برای تفهیم بهتر یک مثال می آوریم. 
مثال: یک سند HTML با یک تگ <h1> می سازیم و پیام "Hello World" را به صورت پیام alert یک بار با رویداد ready و یک بار بدون رویداد ready اجرا می کنیم. 
<html>
<head>
      <title>The jQuery Ready event Example</title>
  
      <script src="js/jquery-3.2.1.js"></script>

      <script>
  $(document).ready(function(){
          alert("Hello World");
      })
  </script>
</head>
<body>
<h1>This is Jquey Example</h1>
</body>
</html>
نتیجه اجرای کدهای بالا به صورت زیر می شود. 

jquery ready event

همانطور که مشاهده می کنید ابتدا سند html بارگزاری شده و سپس پیام "Hello World" نشان داده شده است.
حال این پیام را بدون رویداد ready نمایش می دهیم
<html>
<head>
      <title>The jQuery Ready event Example</title>
  
      <script src="js/jquery-3.2.1.js"></script> 
          alert("Hello World");
    </script>
</head>
<body>
<h1>This is Jquey Example</h1>
</body>
</html>

نتیجه کدهای بالا به صورت زیر است.

jquery without ready function

 

همانطور که مشاهده می کنید ابتدا پیام نمایش داده شده است. اگر روی دکمه ok کلیک کنید سند Html پس از آن بارگزاری می شود.

 

کلمات کلیدی

جی کوئری jquery
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت