doron amir
 
דואר אלקטרוני:
 
 
סיסמה:
 
 
 
 
 
 
לוח פגישות
 
|
 
איזכור סיסמא
 
עברית
 
|
 
english
 
|
 
русский
 
 
 
doron amir
 
קורסים ותרגול
 
עמוד הבית
 
חבילות
הדרכה
 
החשבון שלי
 
אודות
דורון אמיר
 
צור קשר
 
מאגר תרגילים ופתרונות
 
מאמרי גולשים
 
קורס אנדרואיד

jQuery basic syntax & scope / כללי תחביר וטווח בjQuery

צפיות:
6,074
דירוג:
10
דירוג המאמר:
 
שליחה
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 * לפני קריאת המאמר הבא מומלץ לקרוא את המאמר מבוא לjQuery
 
 

כל שורת פקודה של jQuery מתחילה בסימן $ שאומר שהשורה הבאה היא שורת jQuery.
 

הסימן $ הוא למעשה קיצור למילה jQuery כלומר השורות

;("SELECTOR HERE")$

ו

;("jQuery ("SELECTOR HERE

זהות.
 

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

jQuery.noConflict();

אחרי שכל הספריות שנעשה בהן שימוש במסמך נטענו.
 

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

jQuery ("SELECTOR HERE");


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

var $j = jQuery;

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

$j ("SELECTOR HERE");


כל שורת
jQuery שמבצעת פעולה על הDOM ישר עם טעינת העמוד צריכה להיות בתוך אחד מהEvents

$(document).ready(function() {

//CODE HERE

}); 

או

}(window).load(function)$

CODE HERE//    

}); 


שני האירועים (
Events) האלו הם שני האירועים הבסיסיים בjQuery והם ידאגו שהקוד שבתוכם ירוץ רק אחרי שכל הDOM נטען

ההבדל בין שניהם הוא ש

$(document).ready(function() { }); 

ירוץ ברגע שכל הDOM הסתיים לרדת אבל התמונות עדיין לא, לעומת זאת

$(window).load(function() { }); 

ירוץ רק כאשר כל העמוד כולל כל התמונות שבו יטען.
 

חשוב לשים את כל שורות הJavaScript שצריכות לרוץ כשהדף עולה בתוך ה Events האלו כי הדפדפן מפרסר (קורא את העמוד, Parse) תוך כדי שהוא יורד ובכתיבה נכונה כל הסקריפטים נמצאים בתוך תגית הHead של הHTML שנמצאת בראש המסמך. כשהדפדפן מגיע לשורת סקריפט הוא מריץ אותה ואם הסקריפט פונה לאלמנט HTML שעדיין הדפדפן לא קרא הוא לא יהיה קיים מבחינת הדפדפן והסקריפט לא ידע לבצע את הפעולה על האלמנט.
  

שרשור פעולות (Chaining)

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

$("SELECTOR HERE")

.(/*FIRST ACTION HERE*/)

.(/*SECOND ACTION HERE*/)

.(/*THIRD ACTION HERE*/);

מאוד מומלץ לכתוב בצורה הזאת כי זה מייעל את הקוד והופך אותו לקריא יותר.
 

Scope (טווח ראייה)

הScope בjQuery הוא פשוט הScope בJavaScript.

ניקח לדוגמה את הקוד הבא:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
    <head>
        <title>title>
         
        <script type="text/javascript" language="javascript" src="jquery-1.6.4.min.js">script>
 
        <script language="javascript" type="text/javascript">
            var a = 1;
 
            function test1() {
                alert("test1");
            }
 
            $(document).ready(function() {
                var b = 2;
 
                function test2() {
                    alert("test2");
                }
 
                alert(a);
                test1();
            });
 
            function OnloadFunction() {
                alert(b);
                test2();
            }
        script>
    head>
    <body onload="OnloadFunction();">
         
    body>
html>
 

 

 

בדוגמה הזאת הגדרנו משתנה (a) ופונקציה (test1) במסמך הראשי ובנוסף הגדרנו עוד משתנה (b) ועוד פונקציה (test2) בתוך מתודת הdocument).ready)$ של jQuery.
 

כשניסינו מתוך מתודת הdocument).ready)$ לפנות למשתנה ולפונקציה שהגדרנו בחוץ הצלחנו כי הם מוגדרים ברמת המסמך הראשי ולכן כל פונקציה תכיר אותם אבל כשניסינו לפנות למשתנה ולפונקציה שמוגדרים בתוך מתודת הdocument).ready)$ לא הצלחנו כי רק המתודה מכירה אותם (הקריאות נמצאות בתוך פונקציה שנקראת באירוע הonload של המסמך כדי שלא יקראו לפני שהמסמך נטען).
 

לעיתים נצטרך בכל זאת לפנות מחוץ לdocument).ready)$ למשתנים ופונקציות שנמצאים בתוך הdocument).ready)$.

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

כדי לפנות לפונקציה נגדיר במסמך הראשי משתנה שישמש כמצביע לפונקציה ובתוך מתודת הdocument).ready)$ נפנה אותו לפונקציה ואז נוכל דרכו לפנות לפונקציה וגם לשלוח לה פרמטרים אם צריך כמו בדוגמה הבאה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
    <head>
        <title>title>
         
        <script type="text/javascript" language="javascript" src="jquery-1.6.4.min.js">script>
 
        <script language="javascript" type="text/javascript">
            var test2Function = null;
 
            $(document).ready(function() {
 
                test2Function = test2;
                function test2(alertString) {
                    alert(alertString);
                }
 
            });
 
            function OnloadFunction() {
                test2Function("Hello World");
            }
        script>
    head>
    <body onload="OnloadFunction();">
         
    body>
html>
 
נכתב על-ידי: אלון גרוס
דירוג המאמר:
 
שליחה
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
אפליקציות אפל
אפליקציות אנדרואיד
001 קורס אנדראויד באתר