jQuery의 DOM 요소 속성 attr() 및 RemoveAtrr() 조작에 대한 자세한 토론

jQuery에서 요소 속성을 조작하는 방법:
attr(): 일치하는 요소의 속성값을 읽거나 씁니다.
​removeAttr(): 일치하는 요소에서 지정된 속성을 제거합니다.

attr() 메소드 읽기 작업

　attr() 읽기 작업입니다. 읽는 내용은 일치하는 요소의 첫 번째 요소에 지정된 속성 값입니다.
형식: .attr(attributeName), 반환 값 유형: 문자열. 존재하지 않는 속성을 읽으면 정의되지 않은 값이 반환됩니다.

선택기의 선택 결과는 집합일 수 있으며 여기서는 집합의 첫 번째 요소의 속성 값만 가져옵니다.
​예를 살펴보세요:

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

머리>

1항

2항

제목 가져오기버튼>
본문>

실행 결과: 팝업 상자 표시: title1.

각 요소의 속성을 개별적으로 얻으려면 .each() 또는 .map() 메서드와 같은 jQuery의 루프 구조를 사용해야 합니다.
위의 예는 다음과 같이 변경할 수 있습니다.

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

각 요소의 속성을 별도로 얻을 수 있습니다

attr() 메소드 쓰기 작업

　attr() 쓰기 작업. 일치하는 요소의 하나 이상의 속성에 값을 할당합니다.
일반 형식: .attr(attributeName, value), 속성 값을 설정합니다.
반환 값 유형: jQuery도 체인 메서드 호출을 지원합니다.

쓰기 작업을 수행할 때 지정된 속성 이름이 없으면 해당 이름의 속성이 추가됩니다. 즉, 해당 이름은 속성 이름이고 해당 값은 값입니다.
컬렉션의 각 요소와 일치하도록 속성 쓰기가 수행됩니다. 예를 참조하세요.

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

머리>

이것은 단락입니다.

이것은 div입니다.

이것은 또 다른 문단입니다.

이것은 또 다른 div입니다.

본문>

버튼을 클릭하면 모든 p에 제목이 "Hello World"라는 속성이 추가됩니다.

쓰기 작업에는 두 가지 다른 형식이 있습니다.
　.attr(속성) 및 .attr(속성이름, 함수).
​다음 내용을 별도로 소개합니다.

.attr(속성):

여기서 속성 유형은 여러 속성을 한 번에 설정하는 데 사용할 수 있는 PlainObject입니다.
PlainObject란 무엇입니까? 간단한 이해는 중괄호로 둘러싸인 일련의 키-값 쌍입니다. 지침은 질문 끝에 있는 링크를 참조하세요. 키와 값은 콜론(:)으로 구분되며, 각 키-값 쌍은 쉼표(,)로 구분됩니다.
참고: 여러 속성 값을 설정할 때 속성 이름의 따옴표는 선택 사항입니다(있을 수도 있고 없을 수도 있음). 그러나 클래스 속성은 예외이므로 따옴표로 묶어야 합니다.

예:

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

머리>

이것은 단락입니다.

이것은 div입니다.

이것은 또 다른 문단입니다.

이것은 또 다른 div입니다.

본문>

두 개의 버튼을 클릭하면 요소가 다음과 같이 변경됩니다.

그 중

의 hello는 값이 World인 새로운 맞춤 속성입니다.

.attr(속성이름, 함수(index, oldValue)):
함수를 사용하여 속성 값을 설정합니다. 함수의 첫 번째 매개변수는 index이고 두 번째 매개변수는 속성의 이전 값입니다. ​예를 살펴보세요:

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

div {
색상: 파란색;
}
스팬 {
색상: 빨간색;
}
ㄴ {
글꼴 두께: 굵게;
}
스타일>


머리>

0번째

첫 번째

두 번째

본문>

　　上side例子,对应的页side结果如下:

 
　　사용하는 방법은 정의되지 않았으며, 이전에는 사용할 수 없는 기능입니다.
　　即操作会被忽略.
　　还是상면의 예,attr()의 중간 기능은 정의되지 않음:
　　아래:

复主代码 代码如下:

 
　　返回的页面效果如下:

　　即没有进行任何修改操作,还是保持来的属性值.
 
　　참고:jQuery는및유형이 다르므로 주의하세요.
　　这是因为IE浏览器中不能修改type属性.

removeAttr()방법

　　移除匹配元素集合中每一个元素의 결정성.
　　RemoveAttr()방법에 사용되는 JavaScriptremoveAttribute()방법,但是它能사용jQuery对象直接调사용,并且它考虑到并处理了各个浏览器上的属性name称可能不统一的问题.
　　예:

复主代码 代码如下:

   
   
머리>

제로

본문>

버튼을 클릭하면
의

제목 속성이 삭제됩니다.
참고: onclick을 제거하기 위해 RemoveAttr()을 사용하면 IE6-8에서 작동하지 않습니다. 이 문제를 방지하려면 .prop() 메서드를 사용해야 합니다.
예:

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

$element.prop( "onclick", null );
console.log( "onclick 속성: ", $element[ 0 ].onclick );