По сравнению с ATTR, PROP является новой в 1.6.1. Оба понимаются из китайского значения и являются методами получения/установки атрибутов (атрибутов и свойств). Просто использование метода .attr () в окне или документе не может работать нормально до jQuery 1.6, потому что в окне и документе не могут быть атрибуты. Пропора возникла.
Поскольку мы хотим знать разницу между ними, лучше всего посмотреть на их исходный код и не бояться длины кода. Давайте посмотрим только на ключевые предложения:
attr: function (elem, name, value, pass) {var ret, chroks, notxml, ntype = elem.nodeType; // не получайте/устанавливайте атрибуты на текст, узлы комментария и атрибуты if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } if (pass && jquery.isfunction (jquery.fn [name])) {return jQuery (elem) [name] (value); } // Запасывание в опору Когда атрибуты не поддерживаются, если (typeof elem.getattribute === "undefined") {return jQuery.prop (elem, name, value); } notxml = ntype! == 1 || ! jquery.isxmldoc (lem); // Все атрибуты являются строчных // захватывать необходимый крючок, если один определен, если (notxml) {name = name.tolaycome (); Hooks = jquery.attrhooks [name] || (rboolean.test (имя)? Boolhook: nodehook); } if (value! == undefined) {if (value === null) {jQuery.RemoVeattr (elem, name); возвращаться; } else if (Hooks && "set" в Hooks && notxml && (ret = kukss.set (elem, value, name))! == undefined) {return return; } else {elem.setattribute (name, value + ""); возвращаемое значение; }} else if (Hooks && "get" в Hooks && notxml && (ret = kroems.get (elem, name))! == null) {return ret; } else {ret = elem.getAttribute (name); // несуществующие атрибуты возвращаем нуль, мы нормализуем до неопределенного возврата ret === null? неопределенное: ret; }}Код метода предложения (jquery версия 1.8.3)
prop: function (elem, name, value) {var ret, chooks, notxml, ntype = elem.nodeType; // Не получайте/устанавливайте свойства на текст, узлы комментария и атрибуты if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } notxml = ntype! == 1 || ! jquery.isxmldoc (lem); if (notxml) {// Исправить имя и прикрепить Hooks name = jquery.propfix [name] || имя; Hooks = jQuery.prophooks [name]; } if (value! == undefined) {if (Hooks && "set" в Hooks && (ret = kucts.set (elem, value, name))! == undefined) {return ret; } else {return (elem [name] = value); }} else {if (Hooks && "get" in Hooks && (ret = kukes.get (elem, name))! == null) {return ret; } else {return elem [name]; }}}В методе ATTR две наиболее критические строки кода, elem.setattribute (name, value + "") и ret = elem.getattribute (name), очевидно, что методы API API DOM и getAttribute, выполняемые узлами элемента атрибута.
В методе предложения две наиболее важные строки кода, возврат (elem [name] = value) и возврат elem [name], вы можете понять его как document.getElementbyId (el) [name] = value, которое является свойством, преобразованным в объект JS.
Поскольку мы понимаем принцип, давайте посмотрим на пример:
<input type = "fackbox" id = "test" abc = "111" />
$ (function () {el = $ ("#test"); console.log (el.attr ("style")); // undefined console.log (el.prop ("style")); // cssstyledeclaration console.log (document.getelementbyid ("test").El.Attr («стиль») выводит неопределенные, потому что ATTR является значением полученного узла атрибута объекта. Очевидно, что в настоящее время нет узла атрибута, поэтому естественный выход не определен.
El.Prop («стиль») выводит объект csstyledeclaration. Для объекта DOM он имеет атрибут объекта нативного стиля, поэтому объект стиля является выводом.
Что касается document.getElementById ("test"). Стиль такой же, как приведенный выше
Следующий взгляд:
el.attr ("abc", "111") console.log (el.attr ("abc")); // 111 console.log (el.prop ("ABC")); //неопределенныйВо -первых, используйте метод ATTR, чтобы добавить атрибут узла ABC к этому объекту со значением 111, вы можете увидеть, что структура HTML также изменилась.
Выход El.Attr ("ABC") составляет 111, что нормально
EL.Prop («ABC») вывод неопределенной, потому что ABC находится в этом узле свойства, поэтому его нельзя извлечь через опору.
el.prop ("ABC", "222"); console.log (el.attr ("abc")); // 111 console.log (el.prop ("ABC")); // 222Затем мы устанавливаем атрибут ABC для этого объекта, используя метод предложения со значением 222. Вы можете видеть, что структура HTML не изменилась. Выходные результаты не будут объяснены.
Вышеуказанное ясно объяснило принцип, и вы можете понять, что используете сами.
Указано, что, когда вы сталкиваетесь с свойствами, такими как проверенные, выбранные, чтения и отключены, очевидно, что лучше использовать метод поддержки, например, следующее:
<input type = "fackbox" id = "test" fected = "ferced" />
console.log (el.attr ("проверен")); // проверенная console.log (el.prop ("проверено")); // true console.log (el.attr ("disablet")); // неопределенная console.log (el.prop ("Отключен")); //ЛОЖЬОчевидно, что логическое значение делает следующую обработку более разумной, чем строковое значение.
Пса Если у вас есть чистота производительности JS, очевидно, что производительность опоры выше, потому что ATTR требует доступа к узлам атрибутов DOM, доступ к DOM является наиболее трудоемким. Эта ситуация относится к нескольким вариантам и невыбранным сценариям.
Все знают, что некоторым браузерам нужно только написать отключенные и проверять, в то время как другим необходимо писать отключен = "отключен", проверено = "проверено". Например, при использовании ATTR («проверено») для получения проверенного свойства флажести вы можете получить значение при его выборе. Значение «проверено», но если вы не выберете его, оно не определен.
JQ предоставляет новый метод «опора» для получения этих свойств, который должен решить эту проблему. В прошлом мы использовали ATTR для получения проверенного свойства и возвращались «проверено» и «», но теперь мы используем метод пропления для получения свойств и возврата TRUE и FALSE.
Итак, когда использовать attr () и когда использовать prop ()?
1. Добавьте имя атрибута. Этот атрибут вступит в силу. Вы должны использовать rop ();
2. Есть два свойства, которые обладают истинным и ложным использованием prop ();
3. Используйте attr () для других;
Каждый должен обратить на это внимание при обновлении jQuery в проекте!
Ниже приведены официальные предложения по использованию attr () и prop ():
Ниже приведены официальные предложения по использованию attr () и prop ():