נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

אירועים ב-jQuery

מחבר:
בתאריך:

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

אירועי jQuery שימושיים במיוחד

()click.

מתרחש כשהעכבר נמצא על אלמנט, ולאחר שהגולש לחץ על העכבר, ושחרר.

()dblclick.

האירוע מתרחש לאחר שהגולש לחץ פעמיים על העכבר.

()hover.

כשהעכבר מרחף מעל לאלמנט.

()mouseenter.

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

()mouseleave.

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

()keydown.

כשהמשתמש מתחיל ללחוץ על מקש מסוים.

()keyup.

כשהגולש משחרר את המקש המסוים.

()focusin.

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

()focusout.

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

 

המתודה ()on.

הדרך המומלצת ביותר להאזין לאירועים החל מגרסה 1.7 של jQuery היא באמצעות המתודה on, שמחברת לסלקטור (האלמנט הנבחר בדף), את הפונקציה שהוא צריך לבצע בתגובה לאירוע. בוא נראה את הקוד הבא שמדגים אירוע. במקרה זה, הקלקה של המשתמש על הריבוע תגרום להחלפת הצבע. שימו לב ש-(this)$ מצביע על האלמנט שעליו הפעלנו את המתודה on, ובמקרה זה על הריבוע colored-square#.

$('div#colored-square').on('click' , function () {
     $(this).css({'background': 'orange', 'color': 'white'});
});

וכך זה נראה:

לחצו עליי עם העכבר

 

אבל מה קורה כשרוצים שפעולה שנעשית על אלמנט תגרום לשינוי באלמנט אחר בדף? במקרה כזה, אפשר להחליף את this באלמנט שעליו אנחנו רוצים להפעיל את השינוי. לדוגמה, הקוד הבא מגדיר שהקלקה עם העכבר על אלמנט הריבוע הצבעוני יגרום לשינוי בצבע הרקע של העיגול:

$('div#colored-square2').on('click', function () {
      $('#circle').css('background', 'orange');
});

וכך זה נראה:

לחצו עליי עם העכבר
 

 

תיבת טקסט עם jQuery

קוד - הכיתוב נעלם כשנעמדים בתוך תיבת הטקסט בטופס, ומופיע מיד כשיוצאים ממנה, אם לא כתבנו דבר בתיבה

 

כשתפעילו את הקוד זה מה שתראו. כמובן שתוכלו לשנות את הטקסט שכתוב בתיבת הטקסט במה שתרצו על ידי שינוי הערך value בשדה 'type='text.

 

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

<html>
<head>
<meta charset="WINDOWS-1255">
      <style>
 
      </style>
</head>
<body>
     <form>
      <div>
      <input type="text" value='הקלד לכאן את הטקסט'/>
      <input type="submit" value='כפתור להדגמה'/>
      </div>
      </form>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 
</script>

</body>
</html>

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

<script>
(function($){
 
})(jQuery);

</script>

נוסיף משתנה input ששומר בזיכרון את שדה הטקסט במצב ש-jQuery יכול לעבוד אתו מפני שהוא עטוף בסימן ה-$:

var input = $('input:text')

ומשתנה textInside ששומר בזיכרון את ערך ה-value של שדה הטקסט, ובמקרה זה את הערך : “הקלד לכאן את הטקסט" =value .

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

כך נראה הקוד לאחר הוספת המשתנים:

<script> (function($){
var input = $('input:text'),
      textInside = input.val();

})(jQuery);
</script>

בשלב הבא, נוסיף את הפונקציה שמתרחשת כאשר הגולש מקליק בתוך שדה הטקסט. האירוע הוא focusIn והתגובה אומרת שעם ה-value של שדה הטקסט זהה לערך השמור בזיכרון של textInside אז צריך להחליף את ערכו של ה-value לערך ריק. נראה את הקוד:

input.on('focusin', function() {
      var inputValue = $(this);
 
      if (inputValue.val() === textInside)
      {
      inputValue.attr('value',' ');
      }
});

שימו לב לדברים הבאים:

1.השימוש ב-(this)$ כדי לאחסן את שדה הטקסט בזיכרון. (this)$ מצביע על האלמנט ש-on מאזין לו, ובמקרה זה הוא מאזין לשדה הטקסט. חשוב לשמור את (this)$ בזיכרון מפני שאחר כך אנחנו צריכים אותו פעמיים ואנחנו מעוניינים לחסוך במשאבי מערכת, ולהפחית את זמן התגובה.
2.המתודה()val. לוקחת את ה-value של שדה הטקסט.
3.המתודה()attr. מגדירה פה את ערכו של ה-value של שדה הטקסט.

דבר נוסף שאנחנו רוצים לעשות הוא שאם הגולש בוחר שלא למלא את הטופס, אז הטופס ימולא בטקסט ברירת המחדל. למטרה זו נוסיף את הקוד הבא:

input.on('focusout', function() {
      var inputValue = $(this);
 
     if (inputValue.val() === ' ')
     {
      inputValue.attr('value',textInside);
     }
});

לסיכום, הקוד המלא:

<html>
<head>
<meta charset="WINDOWS-1255">
<style>
   form{background: orange; width: 400px; height: 30px; margin: auto; padding: 10px; border: 1px solid black;}
   form div{text-align: right;}
   input{text-align: right; color: #808080; float: right; padding-left: 10px;}
</style>
</head>
<body>
<form>
   <div>
   <input type="text" value='הקלד לכאן את הטקסט'/>
   <input type="submit" value='כפתור להדגמה'/>
   </div>
</form>
 
<script src="http://code.jquery.com/jquery-latest.js"> </script>
<script>
(function($){
   var input = $('input:text'),
        textInside = input.val();
 
   input.on('focusin', function() {
       var inputValue = $(this);
 
      if (inputValue.val() === textInside)
      {
      inputValue.attr('value','');
      }
   });
 
   input.on('focusout', function() {
      var inputValue = $(this);
 
      if (inputValue.val() === '')
      {
      inputValue.attr('value',textInside);
      }
   });
})(jQuery);
 
</script>
 
</body>
</html>

 

הוסף תגובה חדשה

 

= 9 + 2

תמונת המגיב

שני בתאריך: 30.03.2016

מגניב