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

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

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

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

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

כיצד לקבל ולשנות תכונות של ה-DOM באמצעות ()attr ו-()val?

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

במדריך קודם, הסברתי כיצד לשנות את הטקסט וההטמ"ל באמצעות המתודות: ()text ו-()html, וכפי שנראה במדריך הזה jQuery יודע לשנות אלמנטים נוספים בדף האינטרנט. במדריך הנוכחי, נכיר את הפונקציות ()attr. ו-()val. בסופו של המדריך אסביר כיצד להגביל את מספר התווים שניתן להזין לשדה טקסט, וכיצד לספק למשתמש חיווי על מספר התווים שנותרו לו.

הפונקציה הראשונה היא attr, שיודעת לעשות מניפולציות על attribute של הטמ"ל. attribute של הטמ"ל הם מטה-תגיות שנוספות לאלמנט הטמ"ל, דוגמת href, title, alt, src, target וכיו"ב. 

 

כיצד משתמשים ב-()attr. כדי לקבל את ערכו של attribute?

יצרתי לינק עם href שמפנה לדף הבית של האתר.

<a href='http://www.reshetech.co.il'>לינק</a>

כדי לאחסן את ערכו של href במשתנה, נכתוב את שורת הקוד הבאה:

 var someAttr = $('#some-link').attr('href');

עכשיו, המשתנה someAttr יכיל את ערך ה-href. ואם נרצה לראות את ערכו של המשתנה, נוכל לכתוב את שורת הקוד הבאה:

document.write(someAttr);

וכתוצאה מכך יודפס על המסך: http://www.reshetech.co.il

 

כיצד משתמשים ב-()attr. כדי לקבוע את ערכו של attribute?

נאמר שאנחנו משתמשים באותו לינק, ואנחנו מעוניינים לשנות את ה-href. אז התחביר הבא יעזור לנו בכך:

$("שם האלמנט").attr("הערך שנציב לתוכו" , "שם האטריביוט");

לדוגמה:

$("a").attr("href" , "http://www.reshetech/node/120 ");

קוראים את זה כך: "לך ללינק (a), ותשנה את ה-href שלו לכתובת החדשה".

 

שימוש ב-()val כדי לעשות מניפולציות של שדות בטפסים

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

החיווי צריך להופיע פה.

 

וזה קוד ה-jQuery שמייצר את זה. שימו לב ש-()val לוקח את הערך שמוקלד לתיבת הטקסט.

(function(){
כשמקלידים לתוך שדה הטקסט//
$('input[type="text"]').on('keyup', function() {
  משתנה text מאחסן את הערך של מה שהוקלד//
var text = $(this).val();
המשתנה מוצג לצופה כטקסט //
$('p#feedback').text(text);
});
})(jQuery);

 

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




 

 

וזה הקוד שעושה את העבודה באמצעות ()val.

הקוד שמשנה את הערך בתוך תיבות הטקסט//
$('input[type="text"]').val(['Some text']);
הקוד שממלא את תיבות הרדיו//
$('input[type="radio"]').val(['Radio 1' , 'Radio 3']);
הקוד שממלא את הצ'קבוקס//
$('input[type="checkbox"]').val(['Checkbox 2']);

 

סקריפט מועיל

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

נראה את הסקריפט בפעולה.

מספר התווים הנותרים:150

 

וזה הקוד המלא:

<html>
<head>
<meta charset="WINDOWS-1255">
<title>שינוי תכונות עם jQuery</title>
</head>
<body>
<--שדה הטקסט עם המגבלה על מספר התווים--!>
<textarea id='textarea' rows='4' cols='22' maxlength='150'></textarea>
<!--לכאן יכתב החיווי על מספר התווים הנותרים-->
<div><span id='textarea-feedback'></span>:מספר התווים שנותרו</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
<script>
(function($) {
קאש של משתנה שמשתמשים בו יותר מפעם אחת חשוב לביצועים//
var textarea = $('#textarea'),
 
     מאחסן כמשתנה את ערכו של  maxlength//
     maxLen = textarea.attr('maxlength'),
 
    מאחסן את הספאן שישמש לחיווי//
    textareaFeedback = $('#textarea-feedback');
 
כותב את הערך של התווים שנותרו לספאן//
textareaFeedback.text(maxLen);
 
מה שקורה בלחיצה על כפתור//
textarea.on('keyup', function() {
 
    מחשב את אורך המחרוזת שהוקלדה בתיבת הטקסט//
    var numberOfUsedCharacters = $(this).val().length;
 
    מחשב כמה תווים נותרו//
    var charactersLeft = maxLen - numberOfUsedCharacters;
 
    כותב חיווי על מספר התווים שנותרו//
    textareaFeedback.text(charactersLeft);
});
 
})(jQuery);
</script>
 
</body>
</html>

 

למדריך הבא בסדרת ה-jQuery

לכל מדריכי ה-jQuery

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

 

= 4 + 3