$(document).ready()

הכרות עם $(document).ready()

זה דבר ראשון שאתם צריכים לדעת לפני שמתחילים ללמוד על jQuery: אם אתם רוצים שאירועים יעבדו בדפים שלכם, אתם צריכים לקרוא להם מתוך פונקציה $(document).ready() כל דבר בתוך זה יופעל ברגע שדף יסתיים לעלות ולפני שתוכן של הדף יוצג.

 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });

פונקציה $(document).ready() נותנת המון יתרונות על פני דרכים אחרות לגרום לאירועים לעבוד. קודם כל, אתם לא צריכים לשים שום סימון "התנהגות" בתוך HTML. אתם יכולים להפריד כל JavaScript/jQuery לתוך קובץ נפרד, בו קל יותר לבנות ובו קוד יהיה מופרד מהתוכן של הדף. אף פעם לא אהבתי לראות את כל הודעות כאלה "javascript:void()" בתוך שורת המצב כשה אתם עוברים מעל הקישור. זה מה שקורה כשה אתם מצרפים אירוע ישירות בתוך תג <a href>

במספר דפים שמשמים ב- JavaScript רגיל, אתם יכולים לראות תכונה "onload" בתוך התג <body>. הבעיה עם זה שזה מוגבל רק לפונקציה אחת בלבד. וגם בנוסף מוסיף סימון "התנהגות" לתוכן שוב. בספר מצוין של Jeremy Keith DOM Scripting , מוצג כיצד לייצר פונקציה addLoadEvent לקובץ של JavaScript נפרד, שיאפשר למספר פונקציות להיות מופעלות בתוך זה. אבל זה דורש כמות נכבדה של קוד עבור משהו שצריך להיות די פשוט. גם, היא מפעילה אותם אירועים, כאשר החלון נטען, אשר גורמת לנו ליתרון נוסף של $(document).ready()

עם $(document).ready() , אתם יכולים לעלות אירוע או להפעיל אירוע או כל דבר אחר שיקרה לפני שחלון נטען. כל מה שאתם שמים בתוך סוגריים מוכן להיות מופעל בכל רגע מוקדם - ברגע ש- DOM יהיה רשום על ידי דפדפן, אשר מאפשר לכמה אפקטים יפים ודברים אחרים שיופעלו מייד כאשר משתמש יראה אלמנטים של דף פעם הראשונה.

הדרכה $(document).ready()

כמה טיפים מתקדמים לעבודה עם $(document).ready()

אחד או יותר דברים חשובים על $(document).ready() שעדיין לא דברנו הם שאתם יכולים להשתמש בה יותר מפעם אחד. בפועל, אם אתם לא דואגים על לשמור את קוד שלכם קטן, אתם יכולים לפסול קובץ JavaScript עם זה.

זה נהדר אם תוכלו לחבר בקובץ פונקציות או במספר קבצים, וגמישות של פונקציה jQuery's $(document).ready() מאפשרת לכם לעשות זאת, ללא כאב.

אתם יכולים, למשל, ליצור קובץ .js שיעלה בכל דף, ועוד אחד שיעלה רק בדף הבית, שניהם יקראו ל- $(document).ready().

לכן, בתוך תג <head> של דף הבית שלכם, יהיה לכם שלושה התייחסויות לקבצי JavaScript בסך הכל, כמו זה:

 <script src="/scripts/jquery.js"></script>
 <script src="/scripts/common.js"></script>
 <script src="/scripts/homepage.js"></script>

אתם גם יכולים לעשות משהו כזה בתוך קובץ .js בודד:

 $(document).ready(function() {
   // some code here
 });
 
 $(document).ready(function() {
   // other code here
 });

הערה אחרונה: כאן טיפ מצויין כדי לכווץ את הקוד שלכם. דרך קצרה לרשום $(document).ready() , היא לרשום $(function(){ ... }) , במקום, כמו זה:

 $(function() {
   // do something on document ready
 });

דוגמאות

דוגמה 1

מציג הודעה, כשה DOM מוכן להפעלה

$(document).ready(function () {
    $("p").text("The DOM is now loaded and can be manipulated.");
});

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $(document).ready(function () {
    $("p").text("The DOM is now loaded and can be manipulated.");
});
  });
  </script>
  <style>p { color:red; }</style>
</head>
<body>
  <p>
  </p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

פונקציה מופעלת, כשה DOM מוכן להפעלה:

$(document).ready(function(){
  // Your code here...
});

דוגמה 3

שימוש ב- $(document).ready() ובכינוי $ בכתיבת קוד jQuery ללא שימוש בכינויים גלובליים:

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

דוגמה 4

בדרך כלל כותבים ככה:

$(function() {
  // Your code here...
});

האם מידע זה היה מועיל?

כן לא