jQuery.prop() 사용법_jquery에 대한 자세한 설명

prop() 함수는 현재 jQuery 객체와 일치하는 요소의 속성 값을 설정하거나 반환하는 데 사용됩니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다. DOM 요소의 속성을 제거해야 하는 경우에는 RemoveProp() 함수를 사용하세요.

문법

이 기능은 jQuery 1.6에서 추가되었습니다. prop() 함수는 다음 두 가지 용도로 사용됩니다.

용법 1:

jQueryObject.prop( propertyName [, value ] )

지정된 속성 propertyName의 값을 설정하거나 반환합니다. value 매개변수가 지정되면 propertyName 속성의 값이 value로 설정된다는 의미이고, value 매개변수가 지정되지 않으면 propertyName 속성의 값이 반환된다는 의미입니다.

매개변수 값은 함수일 수도 있습니다. prop()은 일치하는 모든 요소를 ​​기반으로 함수를 탐색하고 실행합니다. 함수의 this 포인터는 해당 DOM 요소를 가리킵니다. prop()은 함수에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 요소의 인덱스이고 두 번째 매개변수는 요소의 propertyName 속성의 현재 값입니다. 함수의 반환 값은 요소의 propertyName 속성에 설정된 값입니다.

용법 2:

jQueryObject.prop(객체)

객체 형태로 동시에 여러 속성의 값을 설정합니다. 객체 객체의 각 속성은 propertyName에 해당하고, 속성의 값은 value에 해당합니다.

참고: prop() 함수의 모든 "속성 설정" 작업은 현재 jQuery 개체와 일치하는 각 요소에 대해 수행됩니다. 모든 "속성 읽기" 작업은 첫 번째 일치 요소에 대해서만 수행됩니다.
매개변수

이전 구문 섹션에 정의된 매개변수 이름을 기반으로 해당 매개변수를 찾아보세요.

매개변수 설명
propertyName 문자열 유형으로 지정된 속성 이름입니다.
value option/Object/Function 유형으로 지정된 속성 값 또는 속성 값을 반환하는 함수입니다.
object 여러 키-값 쌍을 캡슐화하고 동시에 여러 속성을 설정하는 데 사용되는 Object 유형으로 지정된 개체입니다.
매개변수 값은 객체와 배열을 포함한 모든 유형이 될 수 있습니다.

반환값

prop() 함수의 반환 값은 모든 유형입니다. 반환 값의 유형은 현재 prop() 함수가 "속성 설정" 작업을 수행하는지 아니면 "속성 읽기" 작업을 수행하는지에 따라 다릅니다.

prop() 함수가 "속성 설정" 작업을 수행하면 현재 jQuery 객체 자체를 반환하고, "속성 읽기" 작업을 수행하면 읽기 속성 값을 반환합니다.

현재 jQuery 객체가 여러 요소와 일치하는 경우 속성 값을 반환할 때 prop() 함수는 그 중에서 첫 번째로 일치하는 요소만 사용합니다. 요소에 지정된 속성이 없으면 정의되지 않은 값이 반환됩니다.

prop()와 attr()의 주요 차이점: prop() 함수는 DOM 요소(JS Element 객체)의 속성을 대상으로 하고, attr() 함수는 DOM에 해당하는 문서 노드의 속성을 대상으로 합니다. 요소. 자세한 내용은 jQuery 함수 attr()과 prop()의 차이점을 참조하세요.

메모

1. prop() 함수를 통해 및 요소의 유형 속성이 변경되면 일반적으로 이 속성은 나중에 변경할 수 없으므로 대부분의 브라우저에서 오류가 발생합니다. .

2. prop() 함수를 사용하여 양식 요소의 선택됨, 선택됨, 비활성화됨 및 기타 속성을 조작하는 경우 해당 요소가 선택(또는 비활성화)되면 true를 반환하고, 그렇지 않으면 (없음을 의미) HTML의 이러한 속성), false를 반환합니다.

3. prop() 함수는 DOM 요소의 Element 객체에 대해 tagName, selectedIndex, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected 및 기타 속성과 같은 특정 속성을 설정하거나 반환할 수도 있습니다.

4. IE9 이하 버전에서는 prop() 함수를 사용하여 설정한 속성값이 단순 원시값(String, Number, Boolean)이 아니고, 해당 DOM 요소가 소멸되기 전에는 속성에 If가 없습니다. 제거하면 메모리 누수가 발생할 수 있습니다. 단순히 데이터를 저장하는 경우에는 메모리 누수를 방지하기 위해 data() 함수를 사용하는 것이 좋습니다.

예 및 지침

다음 HTML 코드를 예로 들어 보겠습니다.

코드 복사 코드는 다음과 같습니다.

CodePlayer

다음 jQuery 코드를 작성합니다.

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined

document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function

// prop()设置的属性也是针对元素(Element对象)，因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以对象形式同时设置多个属性，属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.jb51.net/

// 反选所有的复选框(没选中的改为选中，选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.