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

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

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

אפשר כמובן להשתמש ב-JavaScript בלבד אבל הקוד יהיה ארוך יותר ולפעמים פחות מובן למי שתכנות הוא לא הצד החזק שלו.

מתחילים לעבוד
תחילה כדי "לקרוא" לספריית הסקריפטים נצטרך להודיע לדף שלנו איפה נמצאת הספריה הזו, לכן נכתוב את השורה הזו בחלק של ה-Header לפני שכל העמוד בעצם נטען שם גם בד"כ נטען את קובץ ה-CSS החיצוני וכו'... כמו כן חייבים להיות מחוברים לשרת או שרת וירטואלי כדי שהסקריפט יטען מהרשת, קובץ מקומי במחשב לא יצליח לטעון את הספרייה.

<header>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</header>

כמובן כל מה שרשום לכם ב-Header נשאר, כמו title, css, meta וכו'... רק להוסיף את השורה שציינתי למעלה.

עכשיו צריך לתת סגנון לאלמנט מסויים, נניח שיש לנו Div וניתן לו את הסגנון הבא:

#my_div
{
Width:150px;
Height:150px;
Background-color:#ff6666;
Margin:auto;
}

בתוך ה-html שלנו נכתוב כך:

<div id="my_div"></div>

<script>
$("#my_div").css("background-color", "#66b6ef");
</script>

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

אז בואו נבין
הסקריפט מחפש את ה-id שהזנו לפי הסימון #, במקרה הזה my_div ואז css. כדי להגיד לו שיבצע שינוי ב-CSS, הערך הראשון משמאל הוא סוג הסגנון, background-color במקרה הזה ובצד ימין עם הפרדה של פסיק ביניהם נתנו את הצבע החדש #66b6ef.

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

<div id="my_div" onClick="change_color();"></div>


<script>
function change_color()
{

$("#my_div").css("background-color", "#66b6ef");
}
</script>

בעצם אמרנו לאלמנט שלנו שבעת לחיצה onClick תפעיל את הפונקציה בשם change_color שהיא מריצה את הסקריפט שמשנה את הצבע.

נפעיל ונראה שהשינוי עדיין לא קרה, נלחץ על האלמנט ואז נראה את השינוי בלייב!

אחרי שהבנו את העיקרון נוכל לשנות כל סגנון שנרצה בעזרת הסקריפט הזה, נוכל לתת קו, לשנות סגנון פונט וגודל פונט ובעצם הכל!

חוץ מלבחור אלמנטים לפי id נוכל לבחור גם לפי Class ולפי אלמנט כללי, כדי לבחור לפי Class פשוט במקום לכתוב בפונקציה ("my_div#")$ נכתוב ("my_div.)$ בזהה ל-CSS הסולמית מסמלת id והנקודה מסמלת Class. ואם בכל זאת בא לנו לבחור למשל אלמנט ללא זיהוי, כמו body או h2, h1 וכו'... פשוט נכתוב כך: ("h1")$ וכעת כל האלמנטים עם h1 יושפעו מהסקריפט.

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

function change_color()
{
document.getElementById("my_div").style.backgroundColor="#66b6ef";
}

כדי לבחור לפי Class הסקריפט ארוך ומייגע הרבה יותר לכן אחסוך לכם ולי את זה ואמליץ לכם לכתוב ב-jQuery wink