.prop () против .attr () - PullRequest
Новая
       160

.prop () против .attr ()

2208 голосов
/ 03 мая 2011

Итак 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, почему? И как это повлияет на мое кодирование в будущем?

Ответы [ 17 ]

13 голосов
/ 03 февраля 2014

Обычно вы хотите использовать свойства.Используйте атрибуты только для:

  1. Получение пользовательского атрибута HTML (поскольку он не синхронизирован со свойством DOM).
  2. Получение атрибута HTML, который не синхронизируется со свойством DOM,например, получить «исходное значение» стандартного атрибута HTML, например <input value="abc">.
7 голосов
/ 26 декабря 2014

attributes -> HTML

properties -> DOM

6 голосов
/ 25 октября 2015

До появления jQuery 1.6 метод attr() иногда учитывал значения свойств при получении атрибутов, что вызывало довольно противоречивое поведение.

Введение метода prop() предоставляет способ явного получения значений свойств, тогда как .attr() возвращает атрибуты.

Документы:

jQuery.attr() Получитьзначение атрибута для первого элемента в наборе совпадающих элементов.

jQuery.prop() Получить значение свойства для первого элемента в наборе совпадающих элементов.

2 голосов
/ 17 октября 2015

Осторожное напоминание об использовании 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;
}

Вышеприведенная функция используется для установки флажка 1 и ВСЕГДА возвращает 1. Теперь функция prop () используется какФункция SET.

Не запутайтесь.

P / S: Когда я проверяю изображение src имущество.Если src пуст, prop возвращает текущий URL страницы (неверно), а attr возвращает пустую строку (справа).

0 голосов
/ 11 июня 2019

Одна вещь .attr() может сделать то, что .prop() не может: повлиять на селекторы CSS

Вот проблема, которую я не видел в других ответах.

CSS селектор [name=value]

  • ответит на .attr('name', 'value')
  • но не всегда .prop('name', 'value')

.prop() влияет только на несколько селекторов атрибутов

.attr() влияет на все селекторы атрибутов

0 голосов
/ 18 декабря 2015

1) Свойство находится в DOM; атрибут в HTML, который разбирается в DOM.

2) $ (elem) .attr («проверено») (1.6.1+) «проверено» (строка) Будет изменить с состоянием флажка

3) $ (elem) .attr («проверено») (до 1.6) true (булево) Изменено с состоянием флажка

  • В основном мы хотим использовать для объекта 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>
0 голосов
/ 15 октября 2015

Ответ Гэри Хоула очень важен для решения проблемы, если код написан таким образом 

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

Поскольку функция prop возвращает CSSStyleDeclaration объект, приведенный выше код не будет работать должным образом в некоторых браузерах (протестировано с IE8 with Chrome Frame Plugin в моем случае).

Таким образом, изменив его на следующий код 

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

решил проблему.

Страница:
...