제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop()
- jQuery 1.5 이하에서는 attr() 메소드로 통합하여 취급했지만 1.6 이상에서는 분리하였다
1. attr()
1) 단일 설정
- attr() 함수를 이용하여 특정 요소의 속성에 접근 할 수 있다
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> </style></head><div id="container"> <ul> <li id="naver"><a href="www.naver.com" rel="externel">naver</a></li> </ul></div><script>$(function(){ $('a[rel="externel"]').attr('title','Move to naver');});</script>
2) 복수 설정
- 해쉬 설정으로 복수도 가능하다
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> </style></head><div id="container"> <img src="nba.png" id="#pic"> </div><script> $(function(){ $('#pic').attr({ alt:'image', title:'This is a nba' }) });</script>
2. prop()
- checked, selected, disabled, multiple 프로퍼티 처럼 HTML 프로퍼티와 Javascript 프로퍼티와의 사이에 값이 다른 것에 대해 이용
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> </style></head><label for="name">Name</label><br/><input type="text" id="name" name="name" value="Hee" disabled/><br/><label for="blood">Blood</label><br/><select id="blood" name="blood" multiple> <option id="typeA" value="A" selected>A Type</option> <option id="typeB" value="B">B Type</option></select><br/><label for="marriage">marriage</label><br/><input type="checkbox" id="marriage" name="marriage" value="1" checked/><script> $(function(){ console.log($('#name').prop('disabled')); console.log($('#name').attr('disabled')); console.log($('#blood').prop('multiple')); console.log($('#blood').attr('multiple')); console.log($('#typeA').prop('selected')); console.log($('#typeA').attr('selected')); console.log($('#marriage').prop('checked')); console.log($('#marriage').attr('checked')); });</script>
- boolean 형식은 prop() 이 낫다
'Front-End > jQuery' 카테고리의 다른 글
| [jQuery] 특정 요소 범위에 한정하여 다른요소 검색 - find() (0) | 2017.01.03 |
|---|---|
| [jQuery] html() vs text() 의 차이 (0) | 2017.01.03 |
| [jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft() (0) | 2017.01.03 |
| [jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height() (0) | 2017.01.03 |
| [jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass (0) | 2017.01.03 |
리딩리드