פונקציות הליבה של jQuery

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

פונקצית מידע

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

בואו ונניח שיש לי פסקת דוגמא שאליה אני רוצה להכניס את המידע 'moshe' שיהיה תחת השם ' name'.

הכפתור הראשון שמכניס את המידע משתמש בפונקציה

data("name","moshe");

הכפתור השני, זה שמאחזר את המידע ועושה alert משתמש בפונקציה:

.data("name")

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

כך הדוגמא נראית:

פסקת דוגמא

Enter the data

Show the data

Delete the data

וזה הקוד שמלווה את שלושת הכפתורים:

$('#myButton1_a').click(function () {
$('#example1').data("name","moshe");
});

$('#myButton1_b').click(function () {
data = $('#example1').data("name");
alert(data);
});

$('#myButton1_c').click(function () {
$('#example1').removeData();
});

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

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

פונקצית index

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

ניקח כדוגמא רשימה שיש בה, בנוסף לפריטים גם div אחד:

this is div
• פריט ראשון
• פריט שני
• פריט שלישי
• פריט רביעי
• פריט חמישי
• פריט שישי
• פריט שביעי

אני יכול לברר מה המיקום של הפריט השלישי (פריט שלישי) שלו ביחס לאחים. התוצאה המצופה היא שלוש: ה-div הוא אינדקס 0, li של פריט ראשון הוא אינדקס 1 -li של פריט שני הוא אינדקס 2 – לפיכך ביחס לכל האחים, האינדקס של פריט שלישי הוא 3.

Do the Action

לחיצה על הכפתור מחזירה את האינדקס של הפריט השלישי, זה שיש לו id של example11. וכך זה נראה:

$('#myButton11').click(function () {	
	alert($('#example11').index());
});

אני גם יכול להעביר פרמטר דרך פונקצית אינדקס ובכך לקבל את מיקומו של האלמנט ביחס לקבוצת פרמטרים ספציפית ולא רק אחים. בדוגמה שלנו אני אעביר את הפרמטר ul.example-list li ובכך אני אקבל את ה-index של הפריט השלישי (כזכור, זה שיש לו id) ביחס ל-li שנמצאים ברשימת example-list בלבד. (ללא ה-div) התוצאה המצופה היא שתיים. ה-div שלא נספר. האינדקס של ה-li הראשון הוא אפס, האינדקס של ה-li השני הוא אחד – לפיכך ביחס לכל האחים, האינדקס של פריט שלישי הוא 3. חשוב לשים לב שחשוב להיות מדויקים בסלקטור שאנו מעבירים. אם אני סתם אעביר li, אני אקבל את המיקום של הפריט בכל ההירכיה של ה-li שיש בעמוד. בגלל זה אני מעביר ul.example-list li – על מנת לקבל את מיקום הפריט ברשימה בלבד.

Do the Action

וכך נראה הקוד.

$('#myButton12').click(function () {
	alert($('#example11').index('ul.example-list li'));
});

פונקצית תור – queue

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

בואו וניצור div דוגמא חביב שיש לו מספר פונקציות שמזיזות אותו ממקום למקום. תור של כ-8 פונקציות. הפונקציה האחרונה מפעילה את התור מחדש.

ככה זה נראה, אפשר לראות את התור של הפונקציות ואת ההפעלה מחדש של התור בפונקציה האחרונה.

    function runIt() {
      $("#example2").show("slow");
      $("#example2").animate({left:'+=200'},2000);
      $("#example2").slideToggle(1000);
      $("#example2").slideToggle("fast");
      $("#example2").animate({left:'-=200'},1500);
      $("#example2").hide("slow");
      $("#example2").show(1200);
      $("#example2").slideUp("normal", runIt);
    }
    runIt();

ה-div שמעלינו ימשיך לרוץ ללא הפרעה, אך אם אני רוצה לדעת באיזו פונקציה הוא נמצא, אני יכול להשתמש בפונקצית queue שמחזירה לי את אובייקט התור. הכפתור הבא יקפיץ לי alert עם הפונקציות שנמצאת כרגע בתור ולא בוצעו (שימו לב שהתור מתחדש בכל פעם, אז המספר לעולם לא יהיה אפס).

Show the queue

הקוד נראה כך:

$('#myButton2_a').click(function () {
var n = $("#example2").queue();
alert(n.length);
});

הוספת פונקציה לתור הפונקציות

הוספת פונקציה נוספת לתור הפונקציות היא אפשרית באמצעות פונקצית queue, כל מה שצריך זה להעביר את הפונקציות בתוך callback ובסופן להעביר את פונקצית dequeue.

insert function to the queue

   function runIt2() {
      $("#example3").show("slow");
      $("#example3").animate({left:'+=200'},2000);
      $("#example3").slideToggle(1000);
      $("#example3").slideToggle("fast");
      $("#example3").animate({left:'-=200'},1500);
      $("#example3").hide("slow");
      $("#example3").show(1200);
      $("#example3").slideUp("normal", runIt2);
    }
    runIt2();

$('#myButton3').click(function () {
$("#example3").queue(function() {
$("#example3").css("background-color", "Red");
$("#example3").dequeue();
});
});

החלפת תור פונקציות בתור פונקציות חדש

קל להחליף תור פונקציות אחד בתור פונקציות שני. דוגמא טובה למשל היא ה-div שלנו שיש לו תור משימות משלו ואנו נחליף את תור המשימות לתור שכולל את המשימה 'עצור'. הסינטקס הוא די פשוט, פשוט קוראים לפונקצית queue, מעבירים את שם ה-queue הדיפולטיבי fx ואז את מערך הפונקציות החדש:

replace the queue

הקוד נראה כך, שימו לב שה-queue החדש מכיל רק פונקציה אחת והיא stop, אין מניעה לשים שם עוד ועוד פונקציות (או להוסיף אותן אחר כך).

   function runIt3() {
      $("#example4").show("slow");
      $("#example4").animate({left:'+=200'},2000);
      $("#example4").slideToggle(1000);
      $("#example4").slideToggle("fast");
      $("#example4").animate({left:'-=200'},1500);
      $("#example4").hide("slow");
      $("#example4").show(1200);
      $("#example4").slideUp("normal", runIt2);
    }
    runIt3();


$('#myButton4').click(function () {
$('#example4').queue("fx", [
$("#example4").stop()
]);

});

מחיקת תור הפונקציות

הפונקציה המשמשת למחיקת תור הפונקציות הנוכחי של אלמנט כלשהו היא clearQueue. אפשר להעביר אליה כפרמטר את שם ה-queue או להצמיד אליה את הסלקטור שבו יש את ה-queue. הפונקציה מוחקת את ה-queue.

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