JQ-47- .attr() vs .prop()

attr(), prop()
아무거나 때려 넣어보고 나오면 지나가고, 안되면 바꿔보고, 맨날 찾아보고 ...
이게 뭐하는 짓이고 ㅠㅠ

구냥 내가 정리허자
무슨 차이가 있고, 어떤 경우에 어떤 메소드를 사용하는지!

 

 

 

 

.attr() 

https://api.jquery.com/attr/

https://api.jquery.com/attr/

어어 그래그래.
attr내부에 적은 attribute 이름의 값을 가져오는데, 첫번째로 발견된 element의 값을 가져온대
여러개 가져올 수도 있지만 그렇게 하려면 .each() / .map() 메소드의 loop를 통해 가져올 필요가 있다지

이건 prop도 다를바가 없지 않나요...? 😨

 

 

값을 가져올 때 String/Number/Null로 가져온대
이건 몰랐삼
.attr()로 함수를 리턴할 생각은 없으니까 못본 척.. 흐린 눈....

 

https://api.jquery.com/attr/

jQuery만 연결되어 있다면, 어떤 메소드랑도 연결지어 사용할 수 있어서 편리하고,
브라우저 종류나 버전따위에 구애받지 않고 사용 가능해서 좋다네
예예 감사합니다.

 

 

 

 .prop() 등장

https://api.jquery.com/attr/

jQuery 1.6버전부터 .attr() 사용해서 설정되지 않은,
즉 checkbox인데 선택 됐다가, 안됐다가 하는 변동적인 attribute 가져오면 undefined로 출력되기 시작한겨
내가 화딱지가 난 이유기도 허지
DOM 내 properties 값을 가져오거나 그 값에 변화를 주려면 .prop()을 쓰라 이런 말썸 ~

e.g .  checked, selected, disabled 처럼 껐다리 켰다리  바꿨다리 하는 것들 

 

 

 

https://api.jquery.com/attr/

attributes랑 properties 뭐가 다르길래 jQuery 1.6부터 둘을 구분했을까?
1.6 이전에 .attr()을 사용하면 property 값을 가져와서 그 내부의 attribute 값을 가져오는 경우가 종종 잇었다네?
이게 앞서 언급한 .attr()의 장점인 브라우저 종류/버전에 구애받지 않고 사용되던 장점을 무디게 만들었다는 거고..
1.6 이후로 .prop()를 만들어서 둘의 영역을 가른 이유래 ~

 

 

.prop()

야는 리턴 타입이 애니띵이여~
뭐 요청하는 타입에 따라 다른 값이 나오지만
왠만하면 나는 value값을 얻기 위해 사용하니까 요정도만 체크! 흐린 눈.....

 

 

1.6부터는 하이라이트된 것들은 properties 설정할 때 .prop() 사용하란 뜻...

- selectedIndex 
- tagName
- nodeName
- nodeType 
- ownerDocument : Node.ownerDocument - Node의 최상위 객체 반환
- defaultChecked  : checkebox의 디폴트 값 반환
- defaultSelected  

 

 

 

https://api.jquery.com/attr/

jQuery 1.6이후의 .attr(), .prop() 기능이어라

 

 

.attr()       vs       .prop() 

See the Pen Untitled by Soheny (@SohenyP) on CodePen.