כפיר גולן

תגית: jquery

מדריך jQuery – חלק 1

מאת admin בתאריך 09.אוק', 2009, בקטגוריה בניית אתרים

שלום,

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

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

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

jQuery.noConflict()

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

var obj = jQuery.noConflict()

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

http://docs.jquery.com/Core/jQuery.noConflict

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

window.onload=function() {
//code here
}

מה שקטע הקוד הזה עושה זה לצרף פעולה לאירוע (event) של טעינת העמוד. כלומר שאם אנחנו רוצים לבצע קוד JavaScript עם טעינת העמוד זאת הדרך. אבל למה שנרצה לחכות לטעינת העמוד המלאה? נניח שיש לנו עמוד עם תמונה גדולה. למה שנצטרך לחכות שהמשתמש יסיים להוריד את התמונה כדי להריץ את קוד הJavaScript שלנו? התשובה היא שאנחנו לא צריכים. jQuery מספקת לנו אירוע מסוג חדש – ready. אירוע זה מופעל כשהDOM בעמוד מוכן. זה אולי נשמע הבדל קטן אבל זה חוסך הרבה מאוד זמן. בגלל שאני לא רוצה להיכנס לעומק על שימוש באירועים בjQuery בחלק זה של המדריך בנתיים אתם יכולים להשתמש בקטע הקוד הבא בתור משהו מוכן ופשוט להעתיק ולהדביק כדי לנסות אותו.

$(document).ready(function() {
//code here
});

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

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('a').click(function(e) {
					$(this).css('color','green');
					e.preventDefault();
					return false;
				});
			})
		</script>
	</head>
	<body>
		<a href="#">Click me!</a>
	</body>
</html>

אם יש לכם שאלות אתם יותר ממוזמנים לשאול.

2 תגובות :, להמשך הפוסט...

מחפשים משהו?

השתמשו בטופס הבא כדי לחפש באתר:

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

קישורים מומלצים!

מספר קישורים מומלצים ביותר...

ארכיונים

כל הפוסטים, לפי חודשים