jQuery 속성 추가

jQuery의 attr() 메서드를 사용하면 선택자와 일치하는 요소의 HTML 속성을 추가하거나 변경할 수 있습니다. 예제를 실행하기 전에 페이지에 jQuery를 불러오세요. 폼 컨트롤의 현재 Boolean 상태를 변경하려면 .prop()을 사용하고, HTML 속성이 아니라 jQuery가 관리하는 데이터를 사용하려면 .data()를 사용하세요.

.attr()로 HTML 속성 하나 설정하기

jQuery 컬렉션에 .attr(name, value)를 호출합니다. name은 설정할 HTML 속성이고, value는 지정할 값입니다. 선택된 모든 요소에 해당 속성이 설정됩니다. 선택자와 일치하는 요소가 없으면 호출해도 아무런 효과가 없습니다.

다음은 브라우저 없이 호출과 결과를 보여 주는 작은 대체 컬렉션을 사용하는 실행 가능한 Node.js 예제입니다. 실제 웹 페이지에서는 jQuery를 불러온 뒤 같은 jQuery 호출을 사용하세요. 대체 컬렉션은 이 예제를 독립적으로 실행하기 위한 것입니다.

다음 예제를 실행하세요:

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const elements = {
  saveButton: { attributes: {}, properties: {}, data: {} },
  reportLink: { attributes: {}, properties: {}, data: {} },
  emailUpdates: { attributes: {}, properties: { checked: false }, data: {} }
};

function $(selector) {
  const element = elements[selector.slice(1)];
  return {
    attr(name, value) {
      if (typeof name === "object") Object.assign(element.attributes, name);
      else element.attributes[name] = value;
      return this;
    },
    prop(name, value) {
      element.properties[name] = value;
      return this;
    },
    data(name, value) {
      element.data[name] = value;
      return this;
    }
  };
}

$("#saveButton").attr("title", "Save your changes");
$("#reportLink").attr({
  href: "/reports/current",
  target: "_blank",
  rel: "noopener"
});
$("#emailUpdates").prop("checked", true);
$("#saveButton").attr("data-category", "books");
$("#saveButton").data("category", "featured");

console.log(JSON.stringify({
  title: elements.saveButton.attributes.title,
  link: elements.reportLink.attributes,
  checked: elements.emailUpdates.properties.checked,
  htmlData: elements.saveButton.attributes["data-category"],
  jqueryData: elements.saveButton.data.category
}, null, 2));

{
  "title": "Save your changes",
  "link": {
    "href": "/reports/current",
    "target": "_blank",
    "rel": "noopener"
  },
  "checked": true,
  "htmlData": "books",
  "jqueryData": "featured"
}

실제 페이지에서는 $("#saveButton")으로 선택한 jQuery 컬렉션에 .attr("title", "Save your changes")를 호출합니다. 속성 이름은 title이고 두 번째 인수는 그 값입니다. 일치하는 모든 요소에 해당 속성이 설정됩니다. 문자열 값을 사용하는 일반적인 속성에는 title, href, src, aria-label이 있습니다.

.attr()로 여러 속성 설정하기

한 번의 호출로 여러 속성을 설정하려면 키가 속성 이름이고 값이 지정할 값인 객체를 전달합니다. 위 예제는 링크를 설정하며 새 탭을 열 때 rel="noopener"도 포함합니다. 서로 관련된 속성을 설정할 때 이 객체 형식을 사용하면, 일치하는 모든 링크에 각 값이 지정됩니다. 페이지에 맞게 링크의 목적지와 텍스트를 선택하세요. target="_blank"와 함께 사용하면 rel 값이 열린 페이지에서 opener 참조를 사용할 수 없게 해 유용합니다.

현재 Boolean 상태에는 .prop() 사용하기

checked, disabled 같은 Boolean HTML 속성은 요소의 초기 상태 또는 기본 상태를 나타냅니다. 사용자가 페이지와 상호작용하면 현재 상태는 바뀔 수 있습니다. 현재 DOM 속성을 변경하거나 읽으려면 .prop()을 사용하세요. .attr()로 속성을 설정하는 것은 체크박스의 현재 체크 상태를 변경하는 신뢰할 수 있는 방법이 아닙니다.

예제에서는 .prop("checked", true)를 사용해 emailUpdates 체크박스의 현재 상태를 체크됨으로 설정합니다. 마찬가지로 .prop("disabled", true)를 사용하면 컨트롤을 비활성화할 수 있고, false를 전달하면 다시 활성화할 수 있습니다. 요소의 title이나 href처럼 HTML 속성을 설정하려는 경우에는 .attr()을 사용하세요. checked와 disabled 같은 Boolean 속성의 현재 값을 다룰 때는 .prop()을 사용합니다.

HTML data-* 속성과 jQuery .data() 구분하기

값을 HTML data-* 속성으로 기록해 요소의 마크업에 남기려면 .attr("data-name", value)을 사용하세요. 예제에서는 .attr("data-category", "books")가 해당 HTML 속성을 설정합니다.

반면 .data("category", "featured")는 jQuery의 데이터 캐시에 값을 저장합니다. 스크립트가 관리하는 상태에는 유용하지만, 이에 대응하는 HTML 속성이 기록되는 것은 아닙니다. 마크업이나 다른 스크립트에서 갱신된 data-* 속성을 읽어야 한다면 .attr()을 사용하세요. 값이 jQuery가 관리하는 데이터일 뿐이라면 .data()를 사용하면 됩니다. 이 차이를 알면 값이 어디에서 사용 가능해야 하는지에 따라 적절한 API를 선택할 수 있습니다.