attr( )

תוכן:

attr( attributeName )
- .attr( attributeName )
attr( attributeName, value )
- .attr( attributeName, value )
- .attr( map )
- .attr( attributeName, function(index, attr) )

.attr( attributeName )

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

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

החל מ- jQuery 1.6, השיטה .attr() מחזירה undefined עבור התכונות שלא צוינו. בנוסף, .attr() רצוי לא להשתמש על אובייקטים רגילים, מערכים, חלון או מסמך. קדי לקבל או לשנות תכונות DOM, תשתמשו בשיטה .prop().

לשימוש בשיטת jQuery .attr() עבור קבלת ערכי תכונות יש שני יתרונות עיקריים:

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

אם אנחנו ננסה לקבל ערך של תכונה, שלא מוגדר, שיטה .attr() תחזיר undefined.

קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    var title = $("em").attr("title");
    $("div").text(title);
  });
  </script>
  <style>
  em { color:blue; font-weight:bold; }
  div { color:red; }
  </style>
</head>
<body>
  <p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>
  The title of the emphasis is:<div></div>
</body>
</html>

נסה זאת בעצמך

.attr( attributeName, value )

מחזירה: jQuery

תיאור: מגדיר אחת או יותר תכונות עבור סט אלמנטים בהתאמה.

.attr( attributeName, value )

הוספה בגרסה: 1.0

attributeName

מחרוזת

שם התכונה להגדרה.

value

מחרוזת

ערך להגדרה עבור התכונה.

.attr( map )

הוספה בגרסה: 1.0

map

מפה

מפה של זוגות תכונה-ערך להגדרה.

.attr( attributeName, function(index, attr) )

הוספה בגרסה: 1.1

attributeName

מחרוזת

שם התכונה להגדרה.

function(index, attr)

פונקציה

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

שיטה .attr() היא דרך נוחה ויעילה של הגדרת ערכים של התכונות, במיוחד כאשר מגדירים תכונות מרובות או באמצעות ערכים מוחזרים על ידי פונקציה. נבחן את התמונה הבאה:

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

הגדרת תכונה פשוטה

אנחנו יכולים לשנות תכונה alt באמצעות העברה פשוטה של שם התכונה ושם שלו החדש לתוך שיטה .attr():

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

אנחנו גם יכולים להוסיף תכונה:

$('#greatphoto')
  .attr('title', 'Photo by Kelly Clark');

הגדרת מספר תכונות בו זמנית

כדי לשנות תנונה alt ולהוסיף תכונה title באותו זמן, אנחנו צריכים להעביר שמות וערכים לתוך שיטה בבת אחת באמצעות מפה (אובייקט מילולי JavaScript). כל זוג מפתח-ערך במפה מוסיף או משנה תכונה:

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

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

שימו לב כאשר מוגדרת תכונה 'class', יש לשים גרשיים תמיד!

ערכי תכונות מחושבים

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

$('#greatphoto').attr('title', function() {
  return this.alt + ' - photo by Kelly Clark'
});

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

דוגמאות

דוגמה 1

מגדיר מספר תכונות לכל ה <img>s בדף.

    $("img").attr({ 
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("img").attr({ 
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));
  });
  </script>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
  </style>
</head>
<body>
  <img />
  <img />
  <img />
  <div><B>Attribute of Ajax</B></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

משבית כפטורים גדולים מכפטור ראשון.

$("button:gt(1)").attr("disabled","disabled");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("button:gt(1)").attr("disabled","disabled");
  });
  </script>
  <style>
  button { margin:10px; }
  </style>
</head>
<body>
  <button>0th Button</button>
  <button>1st Button</button>
  <button>2nd Button</button>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

מגדיר תכונה ID תלוי במקום של div בדף.

    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 3 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });
  });
  </script>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
  </style>
</head>
<body>
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 4

מגדיר תכונה src של תמונה מתכונה title.

    $("img").attr("src", function() { 
          return "/images/" + this.title; 
        });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 4 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){    
    $("img").attr("src", function() { 
          return "/images/" + this.title; 
        });
  });
  </script>
</head>
<body>
  <img title="hat.gif"/>
  <img title="hat-old.gif"/>
  <img title="hat2-old.gif"/>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

attr( )

.attr( attributeName )

.attr( attributeName, value )

.attr( attributeName, value )

.attr( map )

.attr( attributeName, function(index, attr) )

הגדרת תכונה פשוטה

הגדרת מספר תכונות בו זמנית

ערכי תכונות מחושבים

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

דוגמה 3

דוגמה 3 - קוד מלא:

דוגמה 4

דוגמה 4 - קוד מלא:

תגובות