מבוא ל-jquery
jquery הינה מסגרת פיתוח (framework) פופולרית לפיתוח javascript. מסגרות פיתוח הפכו נפוצות בשנים האחרונות בכל תחומי הפיתוח ובפרט בפיתוח לאינטרנט, הן בצד השרת והן בצד הלקוח. הן מאפשרות פיתוח מהיר ואיכותי ע"י כך שהן מספקות ספריות של פונקציות שימושיות ורכיבים מוכנים. קיימים מספר frameworks ל-javascript ביניהם mootools, dojo, ExtJS ועוד. הפונקציות שמספקות הספריות הנ"ל עוברות בדיקות קפדניות ועובדות באופן זהה על פני דפדנים שונים.
יתרונות jquery ביחס לאלטרנטיבות:
- גודל קוד - קטנה יחסית. הגירסה האחרונה (1.32) בגודל 54K בפורמט דחוס.
- מהירות ריצה - מהירה למדי - ראו לדוגמה את ההשוואה הזו.
- פופולריות, קהילה - jquery היא ככל הנראה הפופולרית ביותר כיום מבין האלטרנטיבות, קימת קהילה גדולה שניתן להעזר בה דרך הפורומים.
- מספר תוספים עצום - תוצאה ישירה של הסעיף הקודם.
- תיעוד מפורט ובהיר, מספר גדול של מדריכים ברשת.
- תחביר קל ללימוד ו"זורם". (סוביקטיבי)
ניתן להשתמש ב-jquery למטרות הבאות:
- בחירה של אלמנט או קבוצת אלמנטים מתוך דף html, נראה בהמשך דרכים שונות לבצע זאת
- שינוי אלמנט/קבוצת אלמנטים ע"י שינוי הגדרות ה-css שלהם
- הכנסת אלמנט חדש לדף (לדוגמה חלון קטן של הודעה או טופס)
- מחיקת אלמנט מדף
- הוספת פונקציונליות ajax לדף - ניתן לבצע קריאה בפרוטוקול get או post ולקבל את תוצאת פונקצית ה-ajax כטקסט רגיל, או כאוביקט בפרוטוקול json
- הגדרת פונקציות כתגובה לארועים שונים הפועלים על אלמנט מסוים (או קבוצה). ב-jquery מוגדרים מראש כ-20 ארועים בהם ניתן להשתמש (לדוגמה: dblclick - הקלקה כפולה על אלמנט, change - בחירת אופציה מתוך תפריט select, ועוד.
- אנימציה ואפקטים
כמו כן, קיימות הרחבות רבות שמספקות רכיבים שלמים מן המוכן כמו תפריטים מורכבים, גלרית תמונות, active grid - מאפשר להציג מידע טבלאי ולערוך אותו במקום (לדוגמה jqGrid), ועוד.
במדריך זה נלמד את הפונקציות הבסיסיות של jquery: בחירה בסיסית של אלמנטים, ופעולה עליהם.
בחירה בסיסית
בחירת אלמנטים נעשית ע"י שימוש בפונקציה '$'. זו הפונקציה הבסיסית ב-jquery והיא מהווה קיצור לשם הפונקציה 'jQuery'. בכל מקום בו מופיע הסמל '$' ניתן להחליפו ב-'jQuery' (זה שימושי כאשר קיימת התנגשות עם framework אחר שגם עושה שימוש ב-'$'). לפונקציה בסיסית זו כמה שימושים, הנפוץ ביניהם הוא בחירת אלמנט. נראה איך עושים זאת ע"י דוגמה. נניח שאנו רוצים לבחור את כל הקישורים בדף:
זוהי האפשרות הפשוטה ביותר - הפרמטר היחיד לפונקציה הוא שם של אלמנט, והתוצאה היא מערך המכיל את כל האלמנטים מסוג זה הנמצאים על הדף.
אפשרות מורכבת יותר היא בחירה של אלמנט בעל מאפיינים מסוימים - לדוגמה, קישורים השייכים למחלקת css מסוימת, לדוגמה נחפש את כל הקישורים השייכים למחלקה 'big_link':
כעת bigLinks הוא מערך המכיל את כל הקישורים בעלי המחלקה 'big_link'. שימו לב שהביטוי בסוגריים הוא בתחביר זהה לתחביר בקובץ css, ואכן כל מזהה css יכול לשמש כפרמטר לפונקציה זו, לדוגמה 'div#section li.point'.
מעבר לבחירה ע"פ סוג האלמנט, ה-class או ה-id שלו, ניתן לבחור גם על סמך כל מאפיין אחר שמוגדר עליו. לדוגמה - בכדי לבחור תיבת טקסט מסוימת מטופס:
הסוגריים המרובעים משמשים כפילטר על בסיס מאפיין (שימו לב לצורך בשני סוגי גרשיים). קריאה זו מחזירה את כל האלמנטים מסוג input שמאפיין השם שלהם שווה ל-"email". קיימות עוד וריאציות רבות על סינון זה:
אלמנטים שהמאפיין 'name' שלהם מסתיים ב - 'email':
אלמנטים שהמאפיין 'name' שלהם מכיל 'email':
ביצוע פעולה על אלמנט
ראינו כיצד בוחרים אלמנטים ב-jquery. אך איך גורמים להם להשתנות או מבצעים עליהם פעולות? בקלות:
myDiv.hide('fast')
- ה-div שהמזהה שלו שווה ל - "special" יעלם מהדף. הפרמטר הראשון של הפונקציה hide() מציין את מהירות ההעלמות של האלמנט. פרמטר זה יכול להיות מספר ( מהירות באלפיות שניה) או מילה (fast, normal או slow). פרמטר אופציונלי נוסף הינו שם של פונקציה שתתבצע בסיום ההעלמות.
פונקציה שימושית לצורך מניפולציה על אלמנטים היא 'css'. היא מאפשרת לשנות את ערכי ה-css של כל אלמנט. היא מקבלת שני פרמטרים:
name - שם תכונת ה-css שברצוננו לשנות
value - ערך תכונת ה-css שהאלמנט יקבל לאחר הקריאה לפונקציה
נדגים את השימוש בה. נניח שאנו רוצים לשנות את הרקע של כל הקישורים עם class בשם 'funLink' מאדום לירוק. נשתמש בפונקציה 'css':
var links = $('a.funLink');
links.css('background-color', '#0a0')
בשלב ראשון מצאנו את הקישורים הרצויים ע"י השימוש בפונקציה '$', ועל התוצאה של קריאה זו הפעלנו את הקריאה ל-css שמבצעת את הפעולה (שינוי צבע הרקע) על האלמנטים שנמצאו.
שרשור פונקציות
אחת מהתכונות של jquery שמאפשרת תכנות נוח ומהיר וקוד קצר היא שרשור פונקציות. ניקח את הדוגמה הקודמת בה בחרנו קבוצת אלמנטים (a.funLink) ושינינו אותם. ניתן לאחד את שני השלבים לשלב אחד, כך:
באופן זה שירשרנו את תוצאת הקריאה ל-'$' לפונקציה חדשה, css, שמבצעת פעולה על האלמנטים הנבחרים. אך השירשור לא נגמר כאן שכן גם הפונקציה css מחזירה את קבוצת האלמנטים שעליהם היא פעלה כך שניתן להמשיך את השרשרת הלאה. לדוגמה, אם נרצה לשנות את צבע הרקע לירוק, ובנוסף לכך לשנות את צבע הטקסט של הקישור ללבן, נוכל לכתוב כך:
בצורה זו ניתן לשרשר פעולות שונות על אותו אלמנט/קבוצת אלמנטים ולעשות זאת בצורה תמציתית בשורה אחת או שתיים.
הפעלת קוד jquery
הדרך הנכונה להכליל קוד של jquery בדף היא ע"י שימוש בפונקציה '$'. ראינו את השימוש הנפוץ של פונקציה זו וכעת נבחן שימוש נוסף: קשירת פונקציה לארוע (binding) - ובאופן ספציפי קשירת הארוע "טעינת דף" לפונקצית איתחול המפעילה את קוד ה-jquery שלנו:
function init() {
var linkNum = $('a').length;
alert("starting jQuery..." + linkNum + " links on the page");
}
$(document).ready(function() {init()})
זו הדרך הסטנדרטית להפעיל קוד jquery. אנו מחכים לארוע 'ready' שיפעל על אלמנט הדף הראשי - document (בהמשך סדרת מדריכים זו נלמד אודות אירועים והשימוש בהם). כשארוע זה קורה משמעות הדבר היא שכל האלמנטים בדף נטענו (לא כולל גרפיקה, בשונה מארוע 'load' המחכה שכל האלמנטים ייטענו, כולל תמונות) ואז ניתן להתחיל את התכנית שכתבנו. לפני שנשלמת טעינת הדף יתכן שקיימים אלמנטים שעדיין לא נטענו ולכן התכנית שלנו עלולה להכשל כשתנסה להתייחס לאלמנט לא קיים.
בדוגמה למעלה מוגדרת הפונקציה "init" שברצוננו להפעיל עם עליית הדף. השורה האחרונה בדוגמה זו מבצעת בדיוק את זה - היא מורה לדפדפן להפעיל את init מיד לאחר שהדף נטען.