heeestorys :: [jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정

[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop()

Front-End/jQuery 2017. 1. 3. 16:17

제이쿼리를 이용하여 요소의 속성 읽기/설정 - 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 src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <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 src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <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 src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <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

리딩리드

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop()

'Front-End > jQuery' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바