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;
});

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

관련 라벨：

jquery

원천：php.cn

이전 기사：Move.js_JavaScript를 사용하여 CSS3 애니메이션을 만드는 방법에 대한 소개 가이드 다음 기사：js는 휴대폰(안드로이드 휴대폰 또는 아이폰 휴대폰)_javascript 기술을 결정합니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• BlackRock은 BTC를 독특한 다각화자로 분류합니다
  2024-09-20 15:51:33
• 인터넷 컴퓨터(ICP) 가격 예측: ICP 가격이 24달러에 도달할까요?
  2024-09-20 15:47:32
• Worldcoin (WLD) Price Prediction 2022-23
  2024-09-20 15:45:32
• Top Meme Coins to Invest In Today
  2024-09-20 15:39:32
• Floki (FLOKI) Price Prediction: Will the Revamped Marketing Help Floki Catch Up on October Gains?
  2024-09-20 15:38:32
• Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist
  2024-09-20 15:27:32
• Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization
  2024-09-20 15:26:32
• ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem
  2024-09-20 15:12:32
• 如何下载小狐狸支付平台的Apple版本
  2024-09-20 14:53:01
• 초보자가 MetaMask를 거래하는 방법과 장점과 단점
  2024-09-20 14:51:01

최신 이슈

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...

에서 2024-04-05 09:26:49

0

1

1418

최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...

에서 2024-04-04 18:40:04

0

1

3528

북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...

에서 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...

에서 2024-04-04 12:53:48

0

1

303

관련 주제

더>

• jquery 플러그인이란 무엇입니까?
• jquery로 json을 조작하는 방법
• Jquery에서 요소를 삭제하는 방법
• jQuery hover() 메소드 사용
• jquery는 페이징 방법을 구현합니다.
• Jquery의 숨겨진 요소는 무엇입니까?
• jquery에서 강조표시되는 내용
• QQ 스페이스 웹페이지가 열리지 않는 이유는 무엇인가요?