javascript - remove - set checkbox checked jquery




.prop() مقابل.attr() (12)

1) الخاصية في DOM ؛ توجد سمة في HTML يتم تحليلها في DOM.

2) $ (elem) .attr ("محدد") (1.6.1+) "محدد" (String) سوف يتغير مع حالة خانة الاختيار

3) $ (elem) .attr ("checked") (pre-1.6) true (Boolean) تم التغيير مع حالة خانة الاختيار

  • نرغب في الغالب في استخدام كائن DOM بدلاً من سمة مخصصة مثل data-img, data-xyz.

  • أيضا بعض الفرق عند الوصول إلى checkboxقيمة و hrefمع attr()و prop()مع تغير شيء مع الانتاج DOM مع prop()الرابط الكامل من originو Booleanقيمة مربع(pre-1.6)

  • لا يمكننا الوصول إلى عناصر DOM إلا مع عناصر propأخرىundefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</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>

لذا فإن jQuery 1.6 لديه وظيفة prop() .

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

أو في هذه الحالة يفعلون نفس الشيء؟

وإذا كان لا بد لي من التحول إلى استخدام prop() ، سوف تنكسر جميع المكالمات attr() القديمة إذا كنت التحول إلى 1.6؟

تحديث

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(انظر أيضا هذا الكمان: http://jsfiddle.net/maniator/JpUF2/ )

تسجل وحدة التحكم في getAttribute كسلسلة ، و attr كسلسلة ، لكن prop كـ CSSStyleDeclaration ، لماذا؟ وكيف يؤثر ذلك على ترميزاتي في المستقبل؟


أعتقد أن تيم قال ذلك جيدًا ، لكن دعنا نتراجع:

عنصر DOM هو كائن ، شيء في الذاكرة. مثل معظم الكائنات في OOP ، فإنه يحتوي على خصائص . كما يحتوي بشكل منفصل على خريطة للسمات المحددة على العنصر (عادةً ما تأتي من الترميز الذي قرأه المتصفح لإنشاء العنصر). تحصل بعض خصائص العنصر على قيم مبدئية من سمات تحمل نفس الأسماء أو أسماء مشابهة (تحصل value على value الأولية من السمة "value" ؛ يحصل href على قيمته الأولية من السمة "href" ، ولكنها ليست بالضبط نفس القيمة ؛ className من السمة "class"). تحصل الخصائص الأخرى على قيمها الأولية بطرق أخرى: على سبيل المثال ، تحصل الخاصية parentNode على قيمتها بناءً على العنصر الأصل الخاص بها ؛ يحتوي أحد العناصر دائمًا على خاصية style ، سواء كان يحتوي على سمة "نمط" أم لا.

لنفكر في نقطة الارتساء هذه في صفحة على http://example.com/testing.html :

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

بعض الفن ASCII غير مبرر (وترك الكثير من الاشياء):

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
|             HTMLAnchorElement             |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
| href:       "http://example.com/foo.html" |
| name:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "test one"                    |
| attributes:                               |
|    href:  "foo.html"                      |
|    name:  "fooAnchor"                     |
|    id:    "fooAnchor"                     |
|    class: "test one"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

لاحظ أن الخصائص والخصائص مميزة.

الآن ، على الرغم من اختلافها ، نظرًا لأن كل هذا قد تم تطويره بدلاً من أن يتم تصميمه من الألف إلى الياء ، فإن عددًا من الخصائص يعود إلى السمة التي اشتقها منها إذا قمت بتعيينها. ولكن ليس كل ذلك ، وكما ترون من href أعلاه ، لا يكون رسم الخرائط دائمًا "تمرير القيمة" ، وأحيانًا يكون هناك تفسير.

عندما أتحدث عن خصائص خصائص كائن ، أنا لا أتكلم في الملخص. إليك بعض التعليمات البرمجية غير jQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(هذه القيم هي حسب معظم المتصفحات ؛ فهناك بعض الاختلافات.)

إن كائن link هو شيء حقيقي ، ويمكنك أن ترى أن هناك تمييزًا حقيقيًا بين الوصول إلى خاصية ما والدخول إلى إحدى السمات .

وكما قال تيم ، فإن الغالبية العظمى من الوقت ، نريد أن نعمل مع العقارات. جزئيًا ، ذلك لأن قيمهم (حتى أسمائهم) تميل إلى أن تكون أكثر تناسقًا عبر المتصفحات. نرغب فقط في معظم الأحيان في العمل مع السمات عندما لا توجد خاصية مرتبطة بها (سمات مخصصة) ، أو عندما نعلم أنه لهذه السمة المحددة ، لا تكون السمة والملكية 1: 1 (كما هو الحال مع href و "href" أعلاه ).

يتم وضع الخصائص القياسية في مواصفات DOM المختلفة:

هذه المواصفات لديها مؤشرات ممتازة وأوصي باحتفاظها بروابط سهلة الاستخدام ؛ أنا استخدمها طوال الوقت.

ستشتمل السمات المخصصة ، على سبيل المثال ، على أي سمات data-xyz قد تضعها على عناصر لتوفير بيانات تعريفية للشفرة (التي أصبحت صالحة حتى الآن لـ HTML5 ، طالما أنك تلتزم ببادئة data- ). (تمنحك الإصدارات الأخيرة من jQuery إمكانية الوصول إلى عناصر data-xyz عن طريق وظيفة data ، ولكن هذه الوظيفة ليست مجرد ملحق data-xyz [فهي تفعل أكثر وأكثر من ذلك] ؛ ما لم تحتاج بالفعل إلى ميزاتها ، استخدم الدالة attr للتفاعل مع سمة data-xyz .)

تستخدم الدالة attr بعض المنطق المعقد حول الحصول على ما اعتقدت أنك تريده ، بدلاً من الحصول على السمة حرفياً. اختلطت المفاهيم. كان الهدف من الانتقال إلى attr و attr هو الخلط بينهما. لفترة وجيزة في v1.6.0 ذهب jQuery بعيدا جدا في هذا الصدد ، ولكن تمت إضافة وظيفة بسرعة مرة أخرى إلى attr للتعامل مع الحالات الشائعة حيث يستخدم الناس attr عندما ينبغي من الناحية الفنية استخدام prop .


خاصية في DOM ؛ توجد سمة في HTML يتم تحليلها في DOM.

مزيد من التفاصيل

إذا قمت بتغيير سمة ، سينعكس التغيير في DOM (أحيانًا باسم مختلف).

على سبيل المثال: يؤدي تغيير سمة class لعلامة إلى تغيير خاصية className لهذه العلامة في DOM. إذا لم تكن لديك أي سمة في علامة ، فستظل لديك خاصية DOM المقابلة ذات القيمة الفارغة أو الافتراضية.

مثال: على الرغم من أن علامتك لا تحتوي على سمة class ، إلا أن className property DOM لا يوجد به قيمة سلسلة فارغة.

تصحيح

إذا قمت بتغيير واحد ، سيتم تغيير الآخر من قبل وحدة تحكم ، والعكس بالعكس. وحدة التحكم هذه ليست في jQuery ، ولكن في التعليمة البرمجية للمتصفح الأصلي.


كان هذا التغيير وقتًا طويلاً بالنسبة إلى jQuery. لسنوات ، كانوا attr() بوظيفة تدعى attr() تسترجع معظمها خصائص DOM ، وليس النتيجة التي تتوقعها من الاسم. يجب أن يساعد الفصل بين attr() و prop() تخفيف بعض الخلط بين سمات HTML وخصائص DOM. $.fn.prop() grabs خاصية DOM المحددة ، بينما يقوم $.fn.attr() HTML المحددة.

لفهم كيفية عملها بشكل كامل ، إليك شرح موسع عن الفرق بين سمات HTML وخصائص DOM:

سمات HTML

بناء الجملة:

<body onload="foo()">

الغرض: للسماح للتراكيب بربط البيانات بها للأحداث ، والتقديم ، وأغراض أخرى.

التصور: يظهر صفة class هنا على النص. يمكن الوصول إليها من خلال التعليمة البرمجية التالية:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

يتم إرجاع السمات في شكل سلسلة ويمكن أن تكون غير متناسقة من المستعرض إلى المستعرض. ومع ذلك ، يمكن أن تكون حيوية في بعض الحالات. كما هو موضح أعلاه ، يتوقع IE 8 Quirks Mode (وأقل) اسم خاصية DOM في get / set / removeAttribute بدلاً من اسم السمة. هذا أحد الأسباب العديدة التي تجعل من المهم معرفة الفرق.

خصائص DOM

بناء الجملة:

document.body.onload = foo;

الغرض: يمنح الوصول إلى الخصائص التي تنتمي إلى عُقد العنصر. هذه الخصائص مشابهة للسمات ، ولكن لا يمكن الوصول إليها إلا من خلال جافا سكريبت. هذا فرق مهم يساعد على توضيح دور خصائص DOM. الرجاء ملاحظة أن السمات مختلفة تمامًا عن الخصائص ، نظرًا لأن تعيين معالج الحدث هذا عديم الفائدة ولن يستقبل الحدث (لا يحتوي الجسم على حدث onload ، فقط سمة onload).

التصور:

هنا ، ستلاحظ قائمة بالخصائص ضمن علامة التبويب "DOM" في Firebug. هذه هي خصائص DOM. ستلاحظ على الفور عددًا كبيرًا منهم ، حيث ستستخدمها من قبل دون أن تعرفها. قيمها هي ما ستتلقاه عبر JavaScript.

كابل بيانات

مثال

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

في الإصدارات السابقة من jQuery ، يؤدي هذا إلى إرجاع سلسلة فارغة. في 1.6 ، تقوم بإرجاع القيمة المناسبة ، foo .

دون أن يلقي نظرة خاطفة على الكود الجديد لأي من الوظيفتين ، يمكنني أن أقول بثقة أن هذا الارتباك له علاقة أكبر بالفرق بين خصائص HTML وخصائص DOM ، أكثر من التعليمة البرمجية نفسها. نأمل أن هذا مسح بعض الأشياء بالنسبة لك.

-Matt


.attr() :

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

.prop() :

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

attributes -> أتش تي أم أل

properties -> DOM


TL، DR

استخدم prop() فوق attr() في معظم الحالات.

الخاصية هي الحالة الحالية لعنصر الإدخال. السمة هي القيمة الافتراضية.

يمكن أن تحتوي الخاصية على أشياء من أنواع مختلفة. يمكن أن تحتوي السمة على سلاسل فقط


السمات موجودة في مستند / ملف HTML النصي الخاص بك (== تخيل أن هذه نتيجة لترميز html الخاص بك) ، بينما
الخصائص في شجرة HTML DOM (= = أساسا خاصية فعلية لبعض الكائنات بمعنى JS).

الأهم من ذلك ، تتم مزامنة العديد منهم (إذا قمت بتحديث خاصية class ، فسيتم أيضًا تحديث صفة class في html ، وإلا). ولكن قد تتم مزامنة بعض السمات لخصائص غير متوقعة - على سبيل المثال ، يتطابق checked السمات مع الخاصية defaultChecked ، بحيث

  • سيؤدي تحديد خانة الاختيار يدويًا إلى تغيير .prop('checked') ، ولكن لن يغيّر .attr('checked') و .prop('defaultChecked')
  • ضبط $('#input').prop('defaultChecked', true) سوف يتغير أيضًا $('#input').prop('defaultChecked', true) .attr('checked') ، لكن هذا لن يكون مرئيًا في عنصر.

قاعدة الإبهام : يجب استخدام طريقة .prop() للخصائص / الخصائص المنطقية .prop() غير الموجودة في html (مثل window.location). جميع السمات الأخرى (تلك التي يمكنك رؤيتها في html) يمكن ويجب الاستمرار في التلاعب بها باستخدام طريقة .attr() . ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

وهنا هو الجدول الذي يبين المكان .prop() المفضل (على الرغم من أن .attr() لا يزال يمكن استخدامها).

لماذا ترغب أحيانًا في استخدام .prop () بدلاً من .attr () حيث يتم نصحها بشكلٍ رسمي؟

  1. .prop() يمكن إرجاع أي نوع - سلسلة ، عدد صحيح ، منطقي ؛ بينما .attr() دوماً بإرجاع سلسلة.
  2. .prop() يقال أنه أسرع بنحو 2.5 مرة من .attr() .

فحص القذرة

يقدم هذا المفهوم مثالاً يمكن فيه ملاحظة الفرق: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

حاول:

  • انقر فوق الزر. تم فحص كل من مربعات الاختيار.
  • قم بإلغاء تحديد كل من مربعات الاختيار.
  • انقر فوق الزر مرة أخرى. فقط فحص خانة الاختيار. انفجار!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

بالنسبة إلى بعض السمات مثل disabled ، يؤدي إضافة أو إزالة سمة content إلى disabled="disabled" دائمًا إلى تبديل الخاصية (تسمى سمة IDL في HTML5) نظرًا لأن http://www.w3.org/TR/html5/forms.html#attr-fe-disabled يقول:

يجب أن تعكس السمة IDL معطلة السمة محتوى معطلة.

لذلك قد تفلت منه ، على الرغم من أنه قبيح لأنه يعدل HTML دون الحاجة.

بالنسبة للسمات الأخرى مثل checked="checked" على input type="checkbox" ، فإن الأشياء تنكسر ، لأنه بمجرد أن تنقر عليه ، يصبح الأمر سيئًا ، ومن ثم لا يؤدي إضافة أو إزالة السمة content checked="checked" إلى تبديل الفحص بعد الآن .

هذا هو السبب في أنك يجب أن تستخدم في الغالب .prop ، لأنه يؤثر على خاصية فعالة مباشرة ، بدلا من الاعتماد على الآثار الجانبية المعقدة لتعديل HTML.


إجابة Gary Hole ملائمة جدًا لحل المشكلة إذا تمت كتابة التعليمة البرمجية بهذه الطريقة

obj.prop("style","border:1px red solid;")

نظرًا لأن CSSStyleDeclarationكائن prop وظيفة الإرجاع ، لن يعمل التعليمة البرمجية أعلاه بشكل صحيح في بعض المستعرضات (تم اختباره IE8 with Chrome Frame Pluginفي حالتي).

وبالتالي تغييره إلى التعليمات البرمجية التالية

obj.prop("style").cssText = "border:1px red solid;"

حل المشكلة.


تذكير برفق باستخدام prop()، على سبيل المثال:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

تستخدم الوظيفة المذكورة أعلاه للتحقق مما إذا كان خانة الاختيار 1 محددة أم لا ، إذا تم تحديدها: return 1 ؛ إذا لم يكن: إرجاع 0. الدالة prop () المستخدمة هنا كدالة GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

يتم استخدام الدالة أعلاه لتعيين checkbox1 ليتم فحصه وإرجاع ALWAYS 1. الآن وظيفة prop () تستخدم كدالة SET.

لا تعبث.

P / S: عندما أتحقق من خاصية src Image . إذا كانت src فارغة ، فارجع عنوان URL الحالي للصفحة (خاطئ) ، وأرجع attr سلسلة فارغة (يمين).


عادة ما سترغب في استخدام الخصائص. استخدم السمات فقط من أجل:

  1. الحصول على سمة HTML مخصصة (لأنها لا تتم مزامنتها مع خاصية DOM).
  2. الحصول على سمة HTML لا تتزامن مع خاصية DOM ، على سبيل المثال الحصول على "القيمة الأصلية" لسمة HTML القياسية ، مثل <input value="abc">.






prop