jQuery অ্যাটার বনাম প্রপ?


102

এখন এটি অন্যটি নয় , পার্থক্যের প্রশ্নটি কী , আমি আউটপুটটির সাথে এবং এর কিছু সংশোধন করেছি (http://jsfiddle.net/ZC3Lf/)propattr<form action="/test/"></form>​

1) প্রোপ মডিফিকেশন টেস্ট
প্রোপ: http://fiddle.jshell.net/test/1
অ্যাটার:http://fiddle.jshell.net/test/1

2) অ্যাট্রিক সংশোধন পরীক্ষার প্রস্তুতি
: http://fiddle.jshell.net/test/1
অ্যাট্রিক:/test/1

3) এটিআরটি তারপরে প্রপ মডিফিকেশন পরীক্ষার
প্রপ: http://fiddle.jshell.net/test/11
অ্যাট্রিক:http://fiddle.jshell.net/test/11

4) ঠেকনা তারপর ATTR সংশোধন পরীক্ষা
ঠেকনা: http://fiddle.jshell.net/test/11
ATTR:http://fiddle.jshell.net/test/11

এখন আমি কয়েকটি বিষয় সম্পর্কে বিভ্রান্ত হয়ে পড়েছি, যতদূর আমার জ্ঞান যায়:
প্রপ: জাভাস্ক্রিপ্ট
অ্যাট্রিটির মাধ্যমে যে কোনও সংশোধন করার পরে তার বর্তমান অবস্থায় মান : পৃষ্ঠা লোডের এইচটিএমএল হিসাবে এটি সংজ্ঞা দেওয়া হয়েছিল।

এখন যদি এটি সঠিক হয়,

  • কেন পরিবর্তন নেই propনা বলে মনে হচ্ছে actionসম্পূর্ণরূপে যোগ্যতাসম্পন্ন এবং বিপরীতভাবে কেন অ্যাট্রিবিউট পরিবর্তন করে না?
  • কেন পরিবর্তন করে propমধ্যে 1)অ্যাট্রিবিউট পরিবর্তন, যে এক আমার কাছে অর্থহীন করে তোলে?
  • কেন পরিবর্তন করে attrমধ্যে 2)বিশিষ্টতা সংশোধন, তারা যে ভাবে সংযুক্ত হতে বোঝানো হয়?


পরীক্ষার কোড

এইচটিএমএল

জাভাস্ক্রিপ্ট

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

3
সম্ভাব্য সদৃশ stackoverflow.com/questions/5874652/prop-vs-attr
goodeye

উত্তর:


71

দুর্ভাগ্যক্রমে আপনার লিঙ্কগুলির কোনওটিই কাজ করে না :(

কিছু অন্তর্দৃষ্টি attrসমস্ত বৈশিষ্ট্যের জন্য। propসম্পত্তি জন্য।

পুরানো jQuery সংস্করণে (<1.6), আমাদের সবেমাত্র ছিল attr। যেমন করে DOM বৈশিষ্ট্য পেতে nodeName, selectedIndexঅথবা defaultValueতোমার মত কিছু করতে ছিল:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

এটি চুষে ফেলেছে, তাই propযোগ করা হয়েছিল:

index = $("#foo").prop("selectedIndex");

এটি দুর্দান্ত ছিল, কিন্তু বিরক্তিকরভাবে এটি পশ্চাদপটে সামঞ্জস্যপূর্ণ ছিল না:

<input type="checkbox" checked>

এর কোনও বৈশিষ্ট্য নেই checkedতবে এটিতে একটি সম্পত্তি রয়েছে checked

সুতরাং, 1.6 এর চূড়ান্ত বিল্ডে, attrএটিও করেprop যাতে জিনিসগুলি না ভাঙে। কিছু লোক এটি ক্লিন ব্রেক হিসাবে চেয়েছিল, তবে আমি মনে করি যে জিনিসগুলি পুরো জায়গা জুড়ে না ভাঙার কারণে সঠিক সিদ্ধান্ত নেওয়া হয়েছিল!

সংক্রান্ত:

প্রোপ: জাভাস্ক্রিপ্টের মাধ্যমে যেকোন পরিবর্তনের পরে এর বর্তমান অবস্থায় থাকা মান

Attr: পৃষ্ঠা লোডের এইচটিএমএলে এটির হিসাবে মূল্য নির্ধারণ করা হয়েছিল।

এটি সর্বদা সত্য নয়, যতবার গুণাবলী অ্যাট্রিবিউটটি বাস্তবে পরিবর্তিত হয়, তবে যাচাই করা মতো বৈশিষ্ট্যের জন্য, কোনও বৈশিষ্ট্য পরিবর্তন করার দরকার নেই, সুতরাং আপনার প্রপ ব্যবহার করা দরকার।

তথ্যসূত্র:

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr


পরীক্ষা উপরের লিঙ্কটি আমি এটি আরো দৃশ্যমান করব এ "কিছু পরীক্ষার সম্পন্ন" ছিল, কিন্তু এখানে এটা যাহাই হউক না কেন হল: jsfiddle.net/ZC3Lf
Hailwood

আমি একটি প্রশ্ন পেয়েছি, যদি বৈশিষ্ট্যটি কাস্টমাইজ করা হয় তবে ডিওএম বৈশিষ্ট্যগুলি না, প্রোপ () রিটার্ন দেয় undefinedএবং অ্যাটর () ভাল কাজ করে।
হাইওয়ে

3

.Prop এবং .attr এর মধ্যে পার্থক্যগুলি দেখার জন্য একটি স্পষ্ট কেস রয়েছে

নীচের এইচটিএমএল বিবেচনা করুন:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

এবং jQuery ব্যবহার করে নীচের জেএস:

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

নিম্নলিখিত আউটপুট তৈরি করে:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

1

আমি এই চেষ্টা করেছি

console.log(element.prop(property));
console.log(element.attr(property));

এবং এটি নীচে হিসাবে আউটপুট

http://fiddle.jshell.net/test/
/test/ 

এটি ইঙ্গিত করতে পারে যে এটি actionকেবল তখনই পড়ে যখন এটি পড়ানো হয় prop


আমার মনে হয় না, অন্যথায় যেমন আউটপুটটি 2)স্বাভাবিক হয়ে যায়!
হাইলউড

@ হেইলউড এটি করবে না, কারণ /test/অ্যাক্সেস করার সময় আপনি পেয়েছেন attr, এবং তারপরে সেট /test/1করেছেন attr, যা উপাদানটির অনুগামী। স্বাভাবিককরণকে ট্রিগার করে এমন কোনও প্রক্রিয়া নেই।
হাওচেং

আমি যা বলতে চাইছি তা নিয়ে আমি বিভ্রান্ত হয়েছি, 2)উপরের পরীক্ষাটি element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); যদি এটি পড়ার সময় স্বাভাবিক করা হয় তবে চূড়ান্ত লাইনটি কি স্বাভাবিক সংস্করণটিকে আউটপুট না দেয়?
হাইলউড

পরিবর্তনীয়:property = 'action'; body = $('body'); element = $('form');
হাইলউড

প্রপ অ্যাক্সেস করা হলে সাধারণকরণ কেবল ট্রিগার হবে এবং অ্যাটর অ্যাক্সেস পাবেন না।
হাওচেং

1

যেহেতু jquery ১.6.১++ অ্যাটর () ১.6 এর আগের মতো সম্পত্তি ফেরত / পরিবর্তন করে। এইভাবে আপনার পরীক্ষাগুলি খুব একটা বোঝায় না।

রিটার্নের মানগুলিতে সামান্য পরিবর্তন সম্পর্কে সচেতন হন।

যেমন

অ্যাট্রি ('পরীক্ষিত'): ১.6.১ এর আগে ১.6 এর আগে সত্য / মিথ্যা পুনরুদ্ধার হয়। "পরীক্ষিত" / অপরিশোধিত ফিরিয়ে দেওয়া হয়েছে।

অ্যাটর ('নির্বাচিত'): ১.6 এর আগে সত্য / মিথ্যা প্রত্যাবর্তনের আগে, যেহেতু ১.6.১ "নির্বাচিত" / অপরিবর্তিত

জার্মান ভাষায় এই বিষয়টির একটি বিশদ বিবরণ এখানে পাওয়া যাবে:

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.