jQuery 3.3

.prop()




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

.prop (propertyName) إرجاع: Anything

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

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

ملاحظة: ستؤدي محاولة تغيير خاصية type (أو السمة) لعنصر input تم إنشاؤه عبر HTML أو في مستند HTML بالفعل إلى حدوث خطأ بسبب Internet Explorer 6 أو 7 أو 8.

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

يمكن أن يكون الفرق بين السمات والخصائص مهمًا في مواقف محددة. قبل 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>prop 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>

عرض:

.prop (propertyName، value) الإرجاع: jQuery

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

  • الإصدار المضاف: 1.6 .prop (propertyName، value)

    • اسم الخاصية
      اكتب: String
      اسم الخاصية لتعيين.
    • القيمة
      النوع: Anything
      قيمة لتعيين الخاصية.
  • الإصدار المضافة: 1.6 .prop (خصائص)

    • الخصائص
      اكتب: PlainObject
      كائن من أزواج خاصية القيمة لضبط.
  • الإصدار المضافة: 1.6 .prop (propertyName، function)

    • اسم الخاصية
      اكتب: String
      اسم الخاصية لتعيين.
    • وظيفة
      النوع: Function (مؤشر Integer ، Anything oldPropertyValue) => Anything
      دالة تعيد القيمة لتعيينها. يستقبل موضع فهرس العنصر في المجموعة وقيمة الخاصية القديمة كوسيطة. داخل الدالة ، تشير الكلمة الأساسية إلى العنصر الحالي.

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

تؤثر الخصائص بشكل عام على الحالة الديناميكية لعنصر DOM دون تغيير سمة HTML المتسلسلة. تتضمن الأمثلة خاصية value لعناصر الإدخال ، أو الخاصية disabled للمدخلات والأزرار ، أو الخاصية checked لمربع الاختيار. يجب استخدام الأسلوب .prop() لتعيين تعطيل وفحص بدلاً من طريقة .attr() . يجب استخدام الطريقة .val() للحصول على القيمة وإعدادها.

$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );
$( "input" ).val( "someValue" );

هام: لا يجب استخدام طريقة .removeProp() لتعيين هذه الخصائص إلى false. بمجرد إزالة خاصية محلية ، لا يمكن إضافتها مرة أخرى. راجع .removeProp() لمزيد من المعلومات.

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

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

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});

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

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

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

مثال:

تعطيل جميع مربعات الاختيار على الصفحة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prop 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>
 
  <input type="checkbox" checked="checked">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox" checked="checked">
 
<script>
$( "input[type='checkbox']" ).prop({
  disabled: true
});
</script>
 
</body>
</html>

عرض: