הבסיס – התייחסות לאלמנטים ואירועים
נראה כיצד אנו מתייחסים לאלמנטים ("אובייקטים") במסמך. בתוך תגית ה- Bodyנוסיף את ה-Div הבא:
<div id="content"></div>
ניתן להתייחס לאלמנט זה בדרך הבאה:
$('#content')
תו ה-$ מתאר התייחסות לספריית ה-jQuery. חשבו עליו כמעין פקודת jQuery. בתוך הסוגריים אנו מתארים למה אנחנו רוצים להתייחס (ה"שאילתה" שלנו). תו ה-# בתוך הסוגריים מתאר ID (שם המזהה את האלמנט במסמך) של האלמנט אליו אנו רוצים להתייחס. התייחסות מסוג זה נקראת ID Selector. היא מאפשרת לנו "להצביע" על אובייקטים באמצעות ה-ID שלהם. בתוך הסוגריים אנו אומרים בעצם ל-jQuery שאנו רוצים "לתשאל" אותו לגבי אובייקט מסויים. בתיעוד ה-jQuery ניתן ליראות כיצד אנו מתייחסים לאלמנטים שונים נוספים. לכן, כאשר נרצה להתייחס לאובייקטים ידועים לא נצטרך להשתמש בסוגריים (מיד ניראה מה הכוונה היא "אובייקטים ידועים").
כאשר התייחסנו לאלמנט ה-Content, לא התייחסנו לאובייקט הרגיל שאנו מכירים ב-JavaScript (לא אובייקט כזה שאנו משיגים על ידי פונקציית ה-document.getElementById). ה-jQuery מחזירה לנו אובייקט משלה אשר מכיל פונקציות שמקלות על המשתמש לשנות מאפיינים והגדרות לאלמנט. על תכונות נוספות שאותו אובייקט jQuery מכיל ניתן לקרוא כאן. כשנרצה להתייחס למסמך עצמו נעשה זאת בדרך הבאה:
$(document)
פשוט ביותר. כפי שכבר ציינו מוקדם יותר, אובייקט המסמך הוא אובייקט ידוע שאנו בטוחים שקיים במסמך. כעת נראה כיצד אנו מתייחסים לאירועים במסמך. למשל, כאשר המסמך נטען, נוכל להגיב לאירוע בצורה הבאה:
$(document).ready(function() {
$('#content').html("Hello world!");
});
כאשר אירוע זה מתרחש, אנו קוראים לפונקציה (הפרמטר היחיד הוא בעצם הפונקציה) אשר מכניסה לתוך תג ה-content את המשפט "Hello world!" באמצעות הפונקציה html. פונקציה זו היא פונקציית jQuery המאפשרת לנו לשנות את תוכן האלמנט וניתן לקרוא עליה כאן. כמו כן, ניתן לקרוא על אירועים נוספים בעמוד הבא.
לאחר שהמסמך יעלה, אלמנט ה-Content יראה פחות או יותר ככה:
<div id="content">
Hello world!
</div>
שימו לב שהתוצאה הסופית במסמך שלנו תהיה בסך הכל משפט האומר: "!Hello world"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content').html("Hello world!");
});
</script>
<title>jQuery Example</title>
</head>
<body>
<div id="content">
</div>
</body>
</html>
אפשר גם אנימציות
אחד מן היתרונות הבולטים ב-jQuery הוא הפשטות בה ניתן ליצור אנימציות. כעת נשתמש באותו מסמך HTML שהצגנו מוקדם יותר, אך הפעם נסיר את השורה הבאה:
$('#content').html("Hello world!");
באלמנט ה-Content נוסיף את השורות הבאות:
<h2>jQuery Example</h2>
Below is an example of jQuery animation power. <br />
Press the following button to move the rectangle: <button id="moveRect_Button">Move rectangle!</button> <br />
Press the following button to fade-out the rectangle: <button id="fadeRect_Button">Fade rectangle!</button><br />
<div id="animated_rect" style="width: 50px; height: 50px; margin-top: 10px; position: relative; border: 2px solid #000; background-color: #F00;">
מסמך ה-HTML שלנו יראה לבסוף כך:
כפי שניתן לראות ישנם במסמך שני כפתורים וריבוע אדום. הכפתור העליון יגרום לריבוע לזוז 200 פיקסלים ימינה באמצעות אנימציה פשוטה, בעוד הכפתור התחתון יוריד את רמת השקיפות של הריבוע ל-0.2. בכדי לעשות זאת, עלינו להגיב לאירוע ה-click של כל אחד מן הכפתורים, על ידי כתיבת פונקציה לכל כפתור. הפונקציה תגיב ללחיצה על הכפתור ותציג את האנימציה המתאימה. לכן, נוסיף לפונקציה המגיבה לאירוע ה-Ready את הקוד הבא:
$(document).ready(function() {
$('#moveRect_Button').click(function() {
$('#animated_rect').animate({ left: 200},1000);
});
$('#fadeRect_Button').click(function() {
$('#animated_rect').fadeTo('slow', 0.2);
});
});
נתייחס לאלמנט הריבוע (Div ה-animated_rect) באמצעות ה-ID שלו, ונשתמש בפונקציית ה-animate בכדי לגרום לריבוע לנוע 200 פיקסלים על המסמך בצורה חלקה. ניתן לקרוא עוד על פונקציה זו ועל הפונקציות הבאות שנציג בהמשך המדריך בתיעוד. הפרמטר הראשון מתאר את התכונה שאנו רוצים שתשתנה (left היא תכונת CSS אשר מתארת כמה המסמך ינוע שמאלה ממקומו המקורי). הפרמטר השני מתאר את הזמן באלפיות השנייה שבו תוצג האנימציה. כפי שניתן לראות, הפרמטר הראשון מופיע עטוף בסוגריים מסולסלות. אנו יכולים להוסיף תכונות נוספות באמצעות פסיקים אשר יבצעו גם הם אנימציה באותו הזמן.
בכדי לגרום לריבוע לבצע אנימציית fade (עמעום) השתמשנו בפונקציית ה-fadeTo המאפשרת לנו לבצע עמעום בקלות רבה. הפרמטר הראשון מיצג את הזמן (בקטע הקוד שלמעלה השתמשנו במחרוזת "slow" בשביל אנימציה איטית). ניתן גם להגדיר זמן באלפיות השנייה בדיוק כמו בפונקציית ה-animate. הפרמטר השני מייצג את רמת השקיפות של הריבוע (0 שקוף לחלוטין > 1 ללא שקיפות כלל).
את התוצר הסופי ניתן לראות כאן:
ניתן להוריד את הדוגמה הנ"ל מן הקישור הבא.