הקוד מהחלק הקודם גורם לאנימציה על אלמנטים נבחרים בדף בעת לחיצה על כפתור, כלומר אנו עושים מניפולציה על קוד ה-HTML, אנו גורמים למה שמוצג בדפדפן להשתנות בעקבות פעולה של המשתמש.
כדי שקוד JavaScript יגרום לרכיב בדף לשינוי הוא צריך לבחור אותו תחילה. כיוון שקוד JavaScript רץ מיד עם טעינתו על ידי הדפדפן, אם מושא המניפולציה מופיע אחריו הוא לא יוכל להבחר כיוון שהוא עוד לא נטען.
...()document).ready(function)$ היא פונקציה של jQuery שגורמת להמתנה עד שכל דף ה- HTML יעלה כולל טעינת התמונות ורק אז מריצה את קוד ה- JavaScript.
אותה דוגמא שהראנו בחלק הקודם תעבוד אם נמקם את הקוד בתוך הפונקציה הזו (תמונה 1). - $ - כמו קודם משמעות סימן הדולר היא פנייה לפונקציות של jQuery.
- (document) - בחירת כל מסמך ה- HTML.
- (...)ready. - נקודה ולאחריה שם הפונקציה של jQuery.
במקרה הזה ()ready היא הפונקציה של jQuery שממתינה לטעינת כל הדף לפני הרצת פקודות ה- JavaScript שמועברות כארגומנטים בסוגריים. - ()function - זו הפונקציה שאנו מעבירים כארגומנט לפונקציה ()ready.
יש גם קיצור לרישום הפונקציה והוא על ידי השמטת החלק הראשון ()document).ready) כיוון שברירת המחדל והאפשרות היחידה של הפונקציה היא לבחור את המסמך.
רק כדי לראות שאנחנו בכיוון הנכון, למרות שזה לא כל כך חשוב כרגע, החלפתי את הקוד בתיקיית WWW עם הקוד הזה... ואכן זה עובד! (תמונה 2) :-)