بالمقارنة مع ATTR ، الدعامة جديدة في 1.6.1. كلاهما مفهومة من المعنى الصيني ، وهي طرق للحصول على سمات/تعيينها (السمات والخصائص). إنه مجرد استخدام طريقة .attr () في النافذة أو المستند لا يمكن تشغيلها بشكل طبيعي قبل jQuery 1.6 لأنه لا يمكن أن تكون هناك سمات في النافذة والمستند. جاء الدعامة إلى حيز الوجود.
نظرًا لأننا نريد أن نعرف الفرق بينهما ، فمن الأفضل أن ننظر إلى رمز المصدر الخاص بهم وعدم الخوف من طول الكود. لنلقي نظرة على الجمل الرئيسية فقط:
attr: function (elem ، name ، value ، pass) {var ret ، hooks ، notxml ، ntype = elem.nodeType ؛ // لا تحصل على سمات/تعيين على نص ، التعليقات والسمة العقد إذا (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return ؛ } if (pass && jQuery.isfunction (jQuery.fn [name])) {return jQuery (eLem) [name] (value) ؛ }. } notxml = ntype! == 1 || ! jquery.isxmldoc (elem) ؛ . Hooks = jQuery.Attrhooks [name] || (rboolean.test (name)؟ boolhook: nodehook) ؛ } if (value! == undefined) {if (value === null) {jQuery.RemoVeattr (elem ، name) ؛ يعود؛ } آخر إذا (HOINGS && "set" في Hooks && notxml && (ret = hooks.set (elem ، القيمة ، الاسم))! == غير محدد) {return return ؛ } else {elem.setAttribute (name ، value + "") ؛ قيمة الإرجاع }} آخر إذا (hooks && "get" في Hooks && notxml && (ret = hooks.get (elem ، name))! == null) {return ret ؛ } آخر {ret = elem.getAttribute (name) ؛ // سمات غير موجودة عودة فارغة ، نطبيع إلى عودة غير محددة ret === NULL؟ غير محدد: ret ؛ }}رمز طريقة الدعامة (إصدار jQuery 1.8.3)
Prop: function (elem ، name ، value) {var ret ، hooks ، notxml ، ntype = elem.nodeType ؛ // لا تحصل على/تعيين خصائص على النص والتعليق والسمة إذا (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return ؛ } notxml = ntype! == 1 || ! jquery.isxmldoc (elem) ؛ if (notxml) {// إصلاح الاسم وإرفاق السنانير = jquery.propfix [name] || اسم؛ Hooks = jQuery.prophooks [name] ؛ } if (value! == undefined) {if (hooks && "set" في hooks && (ret = hooks.set (elem ، value ، name))! == undefined) {return ret ؛ } آخر {return (elem [name] = value) ؛ }} else {if (hooks && "get" in hooks && (ret = hooks.get (elem ، name))! == null) {return ret ؛ } آخر {return elem [name] ؛ }}}في طريقة ATTR ، الأسطر الأكثر أهمية للرمز ، elem.setattribute (الاسم ، القيمة + "") و Ret = elem.getAttribute (الاسم) ، من الواضح أن أساليب DOM API SetAttribute و getAttribute التي تديرها عقد عنصر السمة.
في طريقة الدعامة ، الخطين الأكثر أهمية للرمز ، الإرجاع (elem [name] = value) وإرجاع elem [name] ، يمكنك فهمه على أنه مستند.
نظرًا لأننا نفهم المبدأ ، دعنا نلقي نظرة على مثال:
<type type = "checkbox" id = "test" abc = "111" />
$ (function () {el = $ ("#test") ؛ console.log (el.attr ("style")) ؛ // undefined console.log (el.prop ("style") ؛ // cssstyledeclaration object console.log (document.getElementByid ("test").EL.ATTR ("النمط") مخرجات غير محددة لأن ATTR هي قيمة عقدة سمة الكائن التي تم الحصول عليها. من الواضح ، لا توجد عقدة سمة في هذا الوقت ، وبالتالي فإن الناتج الطبيعي غير محدد.
ELPROP ("النمط") يخرج كائن CSSTyledEclaration. بالنسبة لكائن DOM ، فإنه يحتوي على سمة كائن النمط الأصلي ، وبالتالي فإن كائن النمط هو الإخراج.
أما بالنسبة للوثائق.
النظرة التالية:
EL.ATTR ("ABC" ، "111") console.log (el.attr ("ABC")) ؛ // 111 Console.log (ELPROP ("ABC")) ؛ // غير محددأولاً ، استخدم طريقة ATTR لإضافة سمة عقدة ABC إلى هذا الكائن ، بقيمة 111 ، يمكنك أن ترى أن بنية HTML قد تغيرت أيضًا.
إخراج EL.ATTR ("ABC") هو 111 ، وهو أمر طبيعي
إخراج ELPROP ("ABC") غير محدد ، لأن ABC موجود في عقدة الخاصية هذه ، لذلك لا يمكن استرداده من خلال الدعامة.
Elprop ("ABC" ، "222") ؛ console.log (el.attr ("ABC")) ؛ // 111 Console.log (ELPROP ("ABC")) ؛ // 222ثم قمنا بتعيين سمة ABC لهذا الكائن باستخدام طريقة الدعامة ، بقيمة 222. يمكنك أن ترى أن بنية HTML لم تتغير. لن يتم شرح نتائج الإخراج.
لقد أوضح ما سبق المبدأ بوضوح ، ويمكنك فهم ما تستخدمه بنفسك.
يذكر أنه عندما تواجه خصائص مثل الفحص ، المحدد ، القراءة والتعطيل ، من الواضح أنه من الأفضل استخدام طريقة الدعامة ، مثل ما يلي:
<type type = "checkbox" id = "test" checked = "checked" />
console.log (el.attr ("checked")) ؛ // checked console.log (el.prop ("checked")) ؛ // true console.log (el.attr ("upiped")) ؛ // undefined console.log (el.prop ("upplied")) ؛ //خطأ شنيعمن الواضح أن القيمة المنطقية تجعل المعالجة التالية أكثر منطقية من قيمة السلسلة.
ملاحظة. إذا كان لديك نظافة أداء JS ، فمن الواضح أن أداء الدعامة أعلى ، لأن ATTR يحتاج إلى الوصول إلى عقد سمة DOM ، فإن الوصول إلى DOM هو الأكثر استهلاكًا للوقت. ينطبق هذا الموقف على خيارات متعددة وسيناريوهات غير محددة.
يعلم الجميع أن بعض المتصفحات تحتاج فقط إلى كتابة المعوقين والتحقق ، بينما يحتاج الآخرون إلى كتابة تعطيل = "تعطيل" ، محدد = "محدد". على سبيل المثال ، عند استخدام ATTR ("محدد") للحصول على الخاصية التي تم فحصها من مربع الاختيار ، يمكنك الحصول على القيمة عند تحديدها. يتم "فحص" القيمة ولكن إذا لم تحددها ، فهي غير محددة.
يوفر JQ طريقة جديدة "Prop" للحصول على هذه الخصائص ، وهي حل هذه المشكلة. في الماضي ، استخدمنا ATTR للحصول على الخاصية التي تم فحصها وإرجاعها "فحص" و "" ، لكننا نستخدم الآن طريقة الدعامة للحصول على الخصائص وإرجاع صحيح وكاذب.
لذا ، متى تستخدم attr () ومتى تستخدم Prop ()؟
1. إضافة اسم السمة. هذه السمة سوف تسري. يجب عليك استخدام prop () ؛
2. هناك خصائصان لها استخدام حقيقي وكاذب prop () ؛
3. استخدم attr () للآخرين ؛
يجب على الجميع الانتباه إلى هذا عند ترقية jQuery في المشروع!
فيما يلي الاقتراحات الرسمية لاستخدام attr () و Prop ():
فيما يلي الاقتراحات الرسمية لاستخدام attr () و Prop ():