מדריך jQuery – הוספת jQuery לאתר

aetchin ‏ • CodeValue

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

שיטה ראשונה – הורדת ספריית ה- jQuery והוספתה כקובץ לאתר

כיוון שספריית jQuery היא ספריית קוד JavaScript שכולה כתובה בקובץ אחד, נוריד אותו ונשמור אותו כחלק מקבצי האתר שלנו.

להוריד את קובץ ספריית ה- jQuery:

1. גלשו לאתר jQuery.com

2. לחצו על טאב ה-Download

הוספת jQuery

3. לחצו על הקישור Download jQuery

הוספת jQuery

4. תחת הסעיף Current Release לחצו להורדת הגרסה הרצויה.
בשלב זה בחרו בהורדת גירסת ה- Uncompressed, באחד הפרקים הבאים נסביר מה ההבדלים בין הגירסאות ומתי כדאי לבחור בכל אחת מהן.

הוספת jQuery

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

אם אתם עובדים עם WebMatrix, לאחר הוספת הקובץ לאתר שלכם, עץ הקבצים של האתר יראה כך:

הוספת jQuery

אם אתם עובדים עם Visual Studio כדי לפתח אפליקציית ASP.NET או ASP.NET MVC, שימו לב שהפרוייקט שלכם כבר כולל את קבצי ספריית ה- jQuery תחת הספרייה Script, אולם יתכן שבגירסא קודמת. באפשרותכם להוריד את קבצי הגירסא העדכנית ביותר לאותה ספרייה.

6. בדף ה- HTML שלכם, תחת אלמנט ה head הוסיפו את ההפניה.
לדוגמא, אם שמרתם את הקובץ בספרייה בשם Scripts, ההפניה שתוסיפו תראה כמו בדוגמא הבאה:

<html>
<head>
  <title>Hello jQuery</title>
  <script src="Scripts/jquery-1.4.4.js" 
          type="text/javascript"></script>
</head>
<body>
  ...
</body>
</html>

שיטה שניה – הפנייה לספריית jQuery ב- CDN חיצוני

החסרון בשיטה הראשונה הוא שזמן הטעינה של האתר שלכם יהיה איטי יותר בפעם הראשונה, וכן תשלמו על רוחב הפס בנעשה בו שימוש כאשר הגולשים באתר שלכם יורידו את קובץ ה- jQuery מהאתר שלכם. אפשרות נוספת היא להפנות לספריית ה- jQuery שיושבת ב- CDN חיצוני. CDN (ראשי תיבות של Content Delivery Network) רשת של שרתים המכילים עותקים של נתונים, קבצים ומידע, הנמצאים במקומות שונים ברשת על מנת למקסם את רוחב הפס עבור גישה לנתונים אלה, על ידי משתמשים ברחבי הרשת, שבה ניתן למצוא הפניות לגרסאות השונות של jQuery. באופן הזה גם לא תשלמו על רוחב הפס עבור הורדת ספריית ה- jQuery מהאתר שלכם וגם תוכלו לשפר את ביצועי האתר שלכם.

ההוספה תעשה באופן הבא:

<head>
 ...
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js" 
        type="text/javascript"></script>
 ...
</head>

באופן הנ”ל אנחנו פונים לספריית ה- jQuery שמאוחסנת ב- CDN של מיקרוסופט ונגישה מכל מקום בעולם.

הוספת הפנייה ל- jQuery כאשר משתמשים בתבנית אתר / Master Page / Layout Page

במידה והאתר שלכם עושה שימוש בסוג כלשהו של Master Page או Layout Page או כל סוג אחר של תבנית עיצוב, מומלץ ברוב המקרים לשלב את ההפניה לספריית ה- jQuery כבר בתבנית העיצוב כדי להחיל אותה על כל דפי האתר.

במידה ואתם משתמשים ב- WebMatrix ובונים אתר ב- CSHTML, ואתם עושים שימוש בדפי תבנית (Layout Pages), מומלץ להוסיף את ההפנייה בקובץ ה- Layout.cshtml בתיקייה Shared.

במידה ואתם בונים אתר ב- ASP.NET ומשתמשים ב- Master Pages, מומלץ לשים את ההפניה בקובץ Site.master.

תגיות: JQuery, בניית אתרים, מדריך, צד לקוח