מבוא לג'ייקוורי - jQuery

ג׳ייקוורי הייתה הספרייה הפופולארית ביותר ועדיין היא מככבת (כשהיום יש גם את אנגולר ועוד),

אשר הופכת את הפונקציות השימושיות בג׳אווה סקריפט למשהו מוכן וקל.

על מנת להשתמש בזה, נצטרך לייבא את הקוד לדף שלנו, כמו כל קובץ ג׳אווה סקריפט שאנחנו מייבאים על ידי השמת קישור לדף (אשר נמצא אצלנו בתקיה או בשרת חיצוני אחר).

כל אובייקט מתחיל בסימן $

;("SELECTOR HERE")$

;("jQuery ("SELECTOR HERE

זהות.

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

jQuery.noConflict();

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

בהמשך המסמך כשנרצה להשתמש בjQuery פשוט נשתמש בכתיב המלא

jQuery ("SELECTOR HERE");

אם בכל זאת ברצוננו להשתמש בקיצור ניתן ליצור קיצור חדש לבחירתנו לדוגמה

var $j = jQuery;

ואז נוכל להשתמש בקיצור b$ במקום בכתיב המלא

$b ("SELECTOR HERE");

כאמור כל פקודה תתחיל בסימן $, שהוא האובייקט הראשי עליו נעשה את כל הפעולות.

ֿ

בשביל לגשת למשתנה מסויים בתוך הדף ולהוציא ממנו מידע,, נצטרך בתוך הסוגריים העגולים שלאחר הסימן דולר, להכניס סלקטור בדומה ל-css ובין גרשיים.

div יחזיר לנו מערך של כל הדיבים במסך.

מחלקה תתחיל בסימן נקודה ומפתח בסימן סולמית.

הפקודה ב-java-script:

document.getElementById("demo").innerHTML = "Hello <b>world</b>!"

הפקודה ב-jquery:

$("#demo").html("Hello <b>world</b>!");

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

על מנת לא למחוק את הקיים אלא להוסיף עלי, נוכל להשתמש בפקודות הבאות:

1. כדי להוסיף טקסט למה שכבר קיים, בתחילת התגית, נשתמש בפקודה: append

2. כדי להוסיף בתחילת התגית, לפני הטקסט הקיים, נשתמש בפקודה: prepend

כדי להוסיף מחוץ לאובייקט הנבחר, נשתמש בפקודות הבאות:

1. על מנת להוסיף לפני האובייקט הנוכחי: before

2. על מנת להוסיף לאחר האובייקט הנוכחי: apter

על מנת לעטוף את האובייקט הנוכחי, בקישור למשל או בדיב, נשמחר בפקודה: warp

דוגמה:

$("p").wrap("<div></div>");

האזנה לאירוע:

הפקודה ב-java-script:

document.addEventListener("click", myFunction);

הפקודה ב-jquery:

$( "button" ).on( "click", myFunction );