ספריית jQuery נוצרה כדי לתת לנו ממשק עבודה טוב יותר עם ה DOM. בתקופה ש jQuery התחילה כל דפדפן סיפק פונקציות שונות כדי לחבר בין קוד JavaScript לבין התוכן שאתם רואים על הדף. ג'ון רסיג כתב את jQuery ב 2005 בזמן שלמד בקולג' במטרה לתת למתכנתים (ולעצמו) כלים טובים יותר לגשת ל DOM ולחבר קוד טיפול באירועים בצורה שעובדת טוב בכל הדפדפנים.

בשנה הראשונה של jQuery היא היתה הספריה היחידה שהגיעה עם תיעוד מלא. כל שאר הספריות שלחו אתכם להסתכל בקוד המקור שלהן או להבין דברים לבד. מאפיין זה יחד עם ארכיטקטורת פלאגינים שבנויה לתוך הספריה הפכו אותה מ"עוד ספריה לגישה ל DOM" לספריה המרכזית שאנשים בוחרים בה ב 2006, ב-2012 וכן גם ב 2018.

בפוסט זה נראה איך להתחיל להשתמש בספריית jQuery בקוד שלנו, איך לגשת לתיעוד ומה jQuery יכולה לעשות בשבילכם.

1. שילוב jQuery בפרויקט שלנו

את jQuery אנחנו משלבים כמו כל ספריית צד-לקוח אחרת: באמצעות טעינת ה js של הספריה. אם אתם עובדים עם webpack תשמחו לדעת שאפשר לשלב את jQuery בתחביר ה import, ואם לא זה גם בסדר ותוכלו לטעון אותה מהשרת שלכם או מ CDN.

הדרך הכי קלה לשלב את jQuery ביישום שלכם היא להוסיף את הסקריפט הבא לקובץ ה HTML שלכם:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ובשביל לבדוק שהכל עובד תוכלו לכתוב את שורת ה JavaScript הבאה ולקבל בקונסול את גירסת ה jQuery שמותקנת בעמוד:

console.log(jQuery.fn.jquery);

ואם אתם מעדיפים לרוץ עם קודפן תוכלו להתחיל מהקודפן הבא שכולל את הסיפריה:

2. מהו jQuery Object

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

הפונקציה יכולה לקבל קלט מכל מיני סוגים ותמיד מחזירה jQuery Object. אותו jQuery Object הוא אוביקט שמייצג אוסף אלמנטים על העמוד ומספק פונקציות עבודה עם אלמנטים אלה. אותן פונקציות עבודה עובדות בדיוק אותו דבר בכל הדפדפנים וזו לבד הסיבה המרכזית שאנשים בחרו jQuery בחלק ניכר מה 12 שנים האחרונות.

הדרך הכי קלה לייצר jQuery Object היא לקחת אלמנטים מהעמוד הנוכחי. מסתבר שאם תעבירו מחרוזת שהיא CSS Selector לפונקציה jQuery תקבלו בחזרה jQuery Object שכולל את כל האלמנטים שמתאימים ל Selector. לימים התנהגות זו נכנסה לדפדפנים בשינוי קל ובשם document.querySelectorAll.

נחזור ל jQuery וניקח מהעמוד שלנו את כל האלמנטים מסוג p שיש להם קלאס בשם text:

const $textElements = $('p.text');

או את כל אלמנטי ה input שיש להם את הסוג submit:

const $submitInput = $('input[type="submit"]');

שימו לב שבדרך כלל בתור שם של משתנה שמייצג jQuery Object אבחר להשתמש במזהה שמתחיל בסימן $. זה עוזר בהמשך התוכנית לזהות שאתם מדברים על אלמנט jQuery ולא על אלמנט DOM רגיל.

3. שינוי תוכן של jQuery Object

ומה אפשר לעשות עם אותו jQuery Object? טוב בתור התחלה אפשר לשנות לו את התוכן. בדיוק כמו שב DOM יש לנו את המאפיינים textContent ו innerHTML כך ל jQuery Ojbect יש את הפונקציות html ו text.

הקוד הבא כותב את אותה מילה לכל הפיסקאות שיש להן את הקלאס text:

$('p.text').text('hello world');

והקוד הבא כותב את אותו קטע HTML לכל ה div-ים שיש להם את הקלאס text:

$('div.text').html('hello <b>nice</b> world');

אפשר לראות את שניהם בפעולה בקודפן הבא:

את שתי הפונקציות אפשר להפעיל בלי הפרמטר ואז הן יחזירו את הטקסט או ה HTML הנוכחי באלמנט.

4. שינוי מאפיינים של jQuery Object

באותו אופן אנחנו יכולים לשנות מאפיינים של jQuery Object מה שיוביל לשינוי המאפיין בכל ה DOM Elements שנמצאים בתוך האוביקט. הקוד הבא משנה את כל ה type של שדות הקלט בעמוד מ text ל number:

$('input[type="text"]').attr('type', 'number');

וגם אותו אפשר לראות בקודפן הבא:

5. חיבור קוד טיפול באירוע על jQuery Object

הפונקציה on מוסיפה קוד טיפול באירוע ל jQuery Object, ופה כדאי להגיד מילה על Event Delegation. כל פעם שאתם מחברים קוד טיפול באירוע לאלמנט אותו אלמנט יקבל גם אפשרות לטפל באירועים שקרו על הילדים שלו. לכן הרבה פעמים נעדיף לחבר קוד טיפול באירוע על אלמנט מיכל ולפי הפרמטרים לדעת איזה בדיוק ילד קיבל את האירוע. הדבר מאפשר לנו בקלות להוסיף ולמחוק ילדים ועדיין לשמור על קוד הטיפול בעמוד.

הדוגמא הכי פשוטה לטיפול באירועים היא כפתור שמגדיל מונה עם כל לחיצה. ב jQuery בהנחה שיש לכם כפתור בעמוד עם קלאס מתאים תוכלו להשתמש בקוד הבא:

$('.counter').on('click', function(e) {
    const oldValue = Number($(e.target).val()) || 0;
    $(e.target).val(oldValue + 1);
});

וזה עובד כמו שאפשר לראות בקודפן הבא:

אבל מה אם נרצה ליצור את הכפתורים בצורה דינמית? או להוסיף כפתורים אחרי שהתוכנית מתחילה לרוץ? בואו נעדכן את הקודפן כך שכל פעם שכפתור כלשהו מגיע למספר שמתחלק ב-10 יווצר כפתור חדש. בשביל זה נשים את כל הכפתורים בתוך מיכל ונעדכן את ה html של המיכל עם התוספת שלנו:

$('.counter').on('click', function(e) {
  const oldValue = Number($(e.target).text()) || 0;
  const newValue = oldValue + 1;
  $(e.target).text(newValue);

  if (newValue % 10 === 0) {
    const $container = $('.container');
    $container.html($container.html() + "<button class='counter'>0</button>");
  }
});

אבל כשאנחנו מכניסים את הקוד הזה לקודפן נגלית תקלה מפתיעה: אחרי תוספת כפתור כל הכפתורים מפסיקים לתפקד.

הסיבה ששינוי ה HTML מחק את כל ה Event Handlers הקודמים, וגם לכפתור החדש אף אחד לא יצר Event Handler.

במקום לשבור את הראש על יצירת קוד טיפול בכל אירוע, הרבה פעמים אנחנו מעדיפים לנצל את יכולת ה Event Delegation כדי לטפל בכל האירועים במקום אחד שנשאר קבוע בעמוד. במקרה שלנו נדביק את קוד הטיפול לאירוע click של הקונטיינר וכך הקוד ימשיך לתפקד גם עבור ילדים שמופיעים ונעלמים:

תיקון הקוד דרש בסך הכל להוסיף עוד פרמטר לפונקציה on. באופן אוטומטי jQuery יזהה ויסנן לחיצות על אזורים שהם בתוך הקונטיינר אבל לא על כפתורים. כמו כן הפרמטר e.target ימשיך להגיע עם האלמנט שעליו לחצנו.

השורה האחרונה שכדאי לשים לב אליה היא:

$(e.target).text()

דיברנו על זה שאפשר להעביר לפונקציה jQuery מחרוזת כדי לקבל jQuery Object שמתאים ל CSS Selector מסוים. עכשיו אנחנו רואים שאפשר לקחת כל DOM Element ולהפוך אותו ל jQuery Object באמצעות העברתו כפרמטר לאותה פונקציה.

6. שליפת אלמנטים מתוך jQuery Object

גם את הצעד בכיוון ההפוך קל מאוד לקחת. אם יש לכם jQuery Object ביד ואתם רוצים לקבל ממנו אחד או יותר מה DOM Elements שלו פשוט הפעילו את אופרטור סוגריים מרובעים. הקוד הבא משתמש באופרטור זה כדי לגשת ל dataset של אלמנט:

console.log($('#footer')[0].dataset.url);

הביטוי:

$('#footer')[0]

מחזיר את ה DOM Element הראשון מתוך ה jQuery Object שמתאים לאלמנט שה id שלו הוא footer.

7. יצירת DOM Elements חדשים באמצעות jQuery

סוג נוסף של פרמטר שאפשר להעביר ל jQuery Function הוא מחרוזת שמכילה HTML. העברה כזו מייצרת DOM Elements חדשים ויוצרת jQuery Object מהם.

בצורה כזאת נוח מאוד להוסיף אלמנטים ל DOM. הקוד הבא למשל יוסיף אלמנט li חדש לרשימה:

function addItem(e) {
  const text = $('#description').val();
  const $li = $('<li />');
  $li.text(text).appendTo($('ul'));
  $('#description').val('');
}

ואפשר לראות אותו בפעולה בקודפן הבא:

8. לסיכום

ספריית jQuery מציעה דרך קלה לעבוד עם ה DOM, לחבר קוד טיפול באירועים, להוסיף ולמחוק אלמנטים למסך ולשנות אותם. למרות ש DOM API הסטנדרטי התגבר על בעיות התאימות בין הדפדפנים, הפינוק ש jQuery יצרה הוא משהו שקשה להתגבר עליו. כל עוד אתם מקפידים לא להתבלבל בין jQuery Object ל DOM Elements רגילים יהיה לכם הרבה יותר קל לכתוב קוד JavaScript בעזרתה.

רוצים לשמוע עוד על jQuery וגם לשאול שאלות על דוגמאות אלה? ביום חמישי אני מתכנן לסכם את סידרת הפוסטים על jQuery בוובינר של שעה בנושא. יהיו הסברים מורחבים, דיונים ועוד המון דוגמאות. פרטים והרשמה בקישור:

https://www.tocode.co.il/workshops/55