jQuery 3.3

.attr()




jquery
احصل على قيمة السمة للعنصر الأول في مجموعة العناصر المتطابقة أو قم بتعيين سمة واحدة أو أكثر لكل عنصر متطابق.

.attr (attributeName) إرجاع: String

الوصف: احصل على قيمة السمة للعنصر الأول في مجموعة العناصر المتطابقة.

.attr() على قيمة السمة للعنصر الأول فقط في المجموعة المتطابقة. للحصول على قيمة لكل عنصر على حدة ، استخدم بنية looping مثل jQuery's .each() أو .map() .

استخدام طريقة .attr() jQuery للحصول على قيمة سمة عنصر له ميزتين رئيسيتين:

  1. الملاءمة : يمكن الاتصال به مباشرة على كائن jQuery وتقييده بأساليب jQuery أخرى.
  2. التناسق عبر المتصفحات: يتم الإبلاغ عن قيم بعض السمات بشكل غير متسق عبر المتصفحات ، وحتى عبر إصدارات متصفح واحد. يقلل الأسلوب .attr() عدم التناسق هذه.

ملاحظة: قيم السمات هي سلاسل باستثناء بعض السمات مثل القيمة و tabindex.

اعتبارًا من jQuery 1.6 ، تقوم .attr() بإرجاع undefined للسمات التي لم يتم تعيينها. لاسترداد وتغيير خصائص DOM مثل الحالة selected أو selected أو disabled لعناصر النموذج ، استخدم طريقة .prop() .

السمات مقابل الخصائص

يمكن أن يكون الفرق بين السمات والخصائص مهمًا في مواقف محددة. قبل jQuery 1.6 ، .attr() طريقة .attr() أحيانًا قيم الخاصية في الاعتبار عند استرداد بعض السمات ، مما قد يتسبب في حدوث سلوك غير متناسق. اعتبارًا من jQuery 1.6 ، يوفر الأسلوب .prop() طريقة لاسترداد قيم الخصائص بشكل صريح ، بينما .attr() السمات.

على سبيل المثال ، defaultChecked و defaultSelected و defaultSelected و defaultSelected و defaultSelected و defaultSelected و defaultSelected يجب استرجاعها وتعيينها باستخدام طريقة .prop() . قبل jQuery 1.6 ، تم استرجاع هذه الخصائص باستخدام طريقة .attr() ، لكن هذا لم يكن ضمن نطاق attr . هذه لا تحتوي على سمات مطابقة وهي خصائص فقط.

فيما يتعلق بالسمات المنطقية ، ضع في اعتبارك عنصر DOM محدد بواسطة ترميز HTML <input type="checkbox" checked="checked" /> ، وافترض أنه في متغير جافا سكريبت يدعى elem :

elem.checked true (Boolean) سوف يتغير مع حالة خانة الاختيار
$( elem ).prop( "checked" ) true (Boolean) سوف يتغير مع حالة خانة الاختيار
elem.getAttribute( "checked" ) "checked" (سلسلة) الحالة الأولية في مربع الاختيار ؛ لم يتغير
$( elem ).attr( "checked" ) (1.6) "checked" (سلسلة) الحالة الأولية في مربع الاختيار ؛ لم يتغير
$( elem ).attr( "checked" ) (1.6.1+) "checked" (السلسلة) سيتغير مع حالة خانة الاختيار
$( elem ).attr( "checked" ) (قبل 1.6) true (منطقية) تم التغيير مع حالة خانة الاختيار

وفقًا لمواصفات نماذج W3C ، تكون السمة checked عبارة عن سمة منطقية ، مما يعني أن الخاصية المقابلة صحيحة إذا كانت السمة موجودة على الإطلاق — حتى إذا ، على سبيل المثال ، لا تحتوي السمة على قيمة أو تم تعيينها على قيمة سلسلة فارغة أو حتى "خاطئة". وينطبق هذا على جميع الصفات المنطقية.

ومع ذلك ، فإن أهم مفهوم يجب تذكره حول السمة checked هو أنه لا يتوافق مع الخاصية checked . تتطابق السمة فعليًا مع خاصية " defaultChecked ويجب استخدامها فقط لتعيين القيمة الأولية defaultChecked الاختيار. لا تتغير قيمة السمة checked مع حالة مربع الاختيار ، بينما الخاصية المميزة checked . لذلك ، فإن الطريقة المتوافقة مع المتصفحات لتحديد ما إذا كان مربع الاختيار محددًا هو استخدام الخاصية:

  • if ( elem.checked )
  • if ( $( elem ).prop( "checked" ) )
  • if ( $( elem ).is( ":checked" ) )

وينطبق الأمر نفسه على السمات الديناميكية الأخرى ، مثل السمات value .

ملاحظات إضافية:

  • في Internet Explorer قبل الإصدار 9 ، باستخدام .prop() لتعيين خاصية عنصر DOM إلى أي شيء بخلاف قيمة بدائية بسيطة (رقم أو سلسلة أو منطقية) يمكن أن يتسبب في حدوث تسرب للذاكرة إذا لم تتم إزالة الخاصية (باستخدام .removeProp() ) قبل إزالة عنصر DOM من المستند. لتعيين القيم على كائنات DOM بأمان بدون تسرب للذاكرة ، استخدم .data() .

أمثلة:

عرض السمة المحددة وعلامة خانة الاختيار أثناء تغييرها.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" )
  .change(function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  })
  .change();
</script>
 
</body>
</html>

عرض:

ابحث عن سمة العنوان لأول <em> في الصفحة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
 
The title of the emphasis is:<div></div>
 
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
 
</body>
</html>

عرض:

.attr (اسم سمة ، قيمة). إرجاع: jQuery

الوصف: عيّن سمة واحدة أو أكثر لمجموعة العناصر المتطابقة.

  • الإصدار المضافة: 1.0 .attr (attributeName ، القيمة)

    • اسم السمة
      اكتب: String
      اسم السمة المراد تعيينها.
    • القيمة
      النوع: String أو Number أو Null
      قيمة لتعيين السمة. إذا كانت null ، ستتم إزالة السمة المحددة (كما في .removeAttr() ).
  • الإصدار المضافة: 1.0 .attr (سمات)

    • سمات
      اكتب: PlainObject
      كائن من أزواج سمة-قيمة لتعيين.
  • الإصدار المضافة: 1.1 .attr (attributeName ، وظيفة)

    • اسم السمة
      اكتب: String
      اسم السمة المراد تعيينها.
    • وظيفة
      النوع: Function (فهرس Integer ، String attr) => String أو Number
      دالة تعيد القيمة لتعيينها. 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 في نفس الوقت ، قم بتمرير مجموعتي الأسماء والقيم في الطريقة مرة واحدة باستخدام كائن جافا سكريبت عادي. يضيف كل زوج من قيم المفاتيح في الكائن سمة أو يعدلها:

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

عند إعداد سمات متعددة ، تكون علامات الاقتباس حول أسماء السمات اختيارية.

تحذير : عند تعيين سمة "الفئة" ، يجب دائمًا استخدام علامات الاقتباس!

ملاحظة: سيؤدي محاولة تغيير سمة type على عنصر input أو button تم إنشاؤه من خلال document.createElement() إلى طرح استثناء على Internet Explorer 8 أو إصدار قديم.

قيم السمات المحسوبة

باستخدام وظيفة لتعيين السمات ، يمكنك حساب القيمة استنادًا إلى خصائص أخرى للعنصر. على سبيل المثال ، لسَلسَلة قيمة جديدة بقيمة موجودة:

$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

يمكن أن يكون هذا الاستخدام لدالة لحساب قيم السمات مفيدًا بشكل خاص عند تعديل سمات عناصر متعددة في وقت واحد.

ملاحظة: إذا لم يتم إرجاع أي شيء في الدالة setter (مثل function(index, attr){} ) أو إذا تم إرجاع undefined ، فلن تتغير القيمة الحالية. وهذا مفيد لتحديد القيم بشكل انتقائي فقط عند استيفاء معايير معينة.

أمثلة:

عيّن بعض السمات لجميع <img> s في الصفحة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<img>
<img>
<img>
 
<div><b>Attribute of Ajax</b></div>
 
<script>
$( "img" ).attr({
  src: "/resources/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
 
</body>
</html>

عرض:

عيّن رقم التعريف على div استنادًا إلى الموضع في الصفحة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  b {
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
 
<script>
$( "div" )
  .attr( "id", function( arr ) {
    return "div-id" + arr;
  })
  .each(function() {
    $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
});
</script>
 
</body>
</html>

عرض:

قم بتعيين سمة src من سمة العنوان على الصورة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<img title="hat.gif">
 
<script>
$( "img" ).attr( "src", function() {
  return "/resources/" + this.title;
});
</script>
 
</body>
</html>

عرض: