Facebook
Twitter
RSSמדריך jQuery – קוד בסיסי
בפרק הקודם ראינו כיצד להוסיף jQuery לאתר, בין אם כקובץ שיושב כחלק מהאתר או לספריית jQuery שמתאחסנת ב- CDN חיצוני. בפרק זה נכיר את הקוד הבסיסי שאיתו נתחיל כל פעם שנרצה לשלב קוד jQuery באתר שלנו.
ראשית, ניצור דף HTML בסיסי, עם אלמנט div כלשהו בעל מזהה (id) ששמו yellowDiv, ובו טקסט כלשהו:
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
</head>
<body>
<div id="yellowDiv">
jQuery Tutorial
</div>
</body>
</html>
אם נציג דף זה בדפדפן, נקבל את התוצאה הבאה:
שנית, נוסיף הפניה לספריית jQuery. (בדוגמה זו בחרתי בקריאה מתוך CDN).
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"
type="text/javascript"></script>
</head>
<body>
<div id="yellowDiv">
jQuery Tutorial
</div>
</body>
</html>
כעת, נוסיף את הקוד הבא לאיזור ה- head של הדף:
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<div id="yellowDiv">
jQuery Tutorial
</div>
</body>
</html>
קוד זה הוא הקוד הבסיסי שנראה כמעט בכל דף העושה שימוש בספריית jQuery. לא ניכנס בשלב זה להבנה עמוקה של הקוד, אך רק נסביר שהקוד שנכתוב בתוך בלוק פונקציית ה- JavaScript הזו יופעל לאחר טעינת הדף, כאשר כל אלמנטי ה- HTML בדף נטענו וניתן להפעיל עליהם פקודות ע”י שימוש ב- jQuery.
לצורך הדוגמא, נשלב פקודת jQuery בסיסית, שניגשת לאלמנט ה- div, ומגדירה לו style של צבע רקע צהוב:
<script type="text/javascript">
$(document).ready(function () {
$("#yellowDiv").css({ "background-color": "yellow" });
});
</script>
בהרצת הדף, נקבל את התוצאה:
בדוגמא אנו רואים כיצד jQuery מבצעת פעולה על אלמנט בתוך קוד ה- HTML שלנו, במקרה הזה האלמנט הוא div בעל זיהוי (id) בשם “yellowDiv”. כאשר כתבנו:
$("#yellowDiv")
נבחר ה-div בעל הזיהוי הנ"ל ופעולה זו זהה ל- (“getElementById(“yellowDiv של JavaScript. לאחר הבחירה באלמנט, קראנו לפונקציה ()css, והגדרנו שהרקע של ה-div הנ"ל ישונה לצהוב בעזרת שינוי הגדרת ה-CSS שלו.
למעשה התחביר של jQuery בנוי משלשה חלקים:
1. אובייקט jQuery – $.
ב-jQuery פקודות יתחילו עם סימן ה-$. השימוש בסימן $ הוא קיצור לשימוש באובייקט jQuery וניתן להחליפו ב- jQuery במקרה הצורך (למשל אם קוד אחר משתמש בסימן ה-$). בדוגמאות שלנו, נשתמש בסימן ה-$.
2. בחירת האלמנט
ב-jQuery אנו יכולים לבחור אלמנטים לפי תגית ה- HTML, לפי מחלקת CSS או לפי ID של אלמנט וכמו כן ניתן לבצע שאילתות מתוחכמות יותר שיביאו אלמנטים לפי חתך מדוייק יותר. כאשר אנו בוחרים אלמנט, התשובה שאנו מקבלים מ-jQuery , היא בעצם מערך של אלמנטים שמתאימים לשאילתה שלנו ואם אין אלמנט מתאים אזי גם יחזור מערך, אך הוא יהיה ריק. לכן אם רוצים לוודא שיש לנו אובייקט לבצע מניפולצייה עליו, ניתן לבדוק את אורך המערך החוזר ולוודא שהוא גדול מאפס.
<script type="text/javascript">
var divElements = $("div");
if (divElements.length > 0) {
//DO SOMETHING
}
</script>
בדוגמה זו, אנו בוחרים בכל האלמנטים מסוג "div" ואם קיים אחד או יותר, נבצע את הפעולה הרצוייה.
3. הפעולה אותה אנו רוצים לבצע על האלמנט(ים) שבחרנו
בפרקים הבאים נתחיל להכיר את הפונקציות הנפוצות בשימוש ב- jQuery ומגוון אפקטים לשיפור חווית המשתמש.
תגובות בפייסבוק