כיצד לקבל ולשנות תכונות של ה-DOM באמצעות ()attr ו-()val?
במדריך קודם, הסברתי כיצד לשנות את הטקסט וההטמ"ל באמצעות המתודות: ()text ו-()html, וכפי שנראה במדריך הזה jQuery יודע לשנות אלמנטים נוספים בדף האינטרנט. במדריך הנוכחי, נכיר את הפונקציות ()attr. ו-()val. בסופו של המדריך אסביר כיצד להגביל את מספר התווים שניתן להזין לשדה טקסט, וכיצד לספק למשתמש חיווי על מספר התווים שנותרו לו.
הפונקציה הראשונה היא attr, שיודעת לעשות מניפולציות על attribute של הטמ"ל. attribute של הטמ"ל הם מטה-תגיות שנוספות לאלמנט הטמ"ל, דוגמת href, title, alt, src, target וכיו"ב.
כיצד משתמשים ב-()attr. כדי לקבל את ערכו של attribute?
יצרתי לינק עם href שמפנה לדף הבית של האתר.
<a href=''>לינק</a>
כדי לאחסן את ערכו של href במשתנה, נכתוב את שורת הקוד הבאה:
var someAttr = $('#some-link').attr('href');
עכשיו, המשתנה someAttr יכיל את ערך ה-href. ואם נרצה לראות את ערכו של המשתנה, נוכל לכתוב את שורת הקוד הבאה:
document.write(someAttr);
וכתוצאה מכך יודפס על המסך:
כיצד משתמשים ב-()attr. כדי לקבוע את ערכו של attribute?
נאמר שאנחנו משתמשים באותו לינק, ואנחנו מעוניינים לשנות את ה-href. אז התחביר הבא יעזור לנו בכך:
$("שם האלמנט").attr("הערך שנציב לתוכו" , "שם האטריביוט");
לדוגמה:
$("a").attr("href" , "//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']);
סקריפט מועיל
הקוד מחשב את מספר התווים שנותר למשתמש להקליד בתיבת טקסט, ונותן לכך חיווי.
נראה את הסקריפט בפעולה.
וזה הקוד המלא:
<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="//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>
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.