336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
jQuery 속성 다루기
속성은 일반 속성과 사용자 정의 속성이 있습니다. 많이 사용하는 id, class, <a>태그의 href 속성, <img> 태그의 src도 일반 속성이라고 할 수 있습니다. 그리고 data-value와 같이 사용자가 필요에 의해서 만들어 사용하는 속성을 사용자 정의 속성이라고 합니다.
1.속성 값 구하기
1 2 | $대상.attr("속성이름") $대상.data("data-속성이름") |
2.속성 값 설정하기
1 2 | $대상.attr("속성이름","값") $대상.data("data-속성이름","갑") |
예제를 위해 아래와 같이 코드를 준비하였습니다.
1 2 | <a id="ktkoAtag" href="http://ktko.tistory.com" data-value="ktko">ktko</a> <img id="ktkoImgtag" src="https://t1.daumcdn.net/cfile/tistory/996F7F3F5B4EDDC322" data-sex="man"> |
1.속성 값 구하기
1 2 | $대상.attr("속성이름") $대상.data("data-속성이름") |
1 2 3 4 | console.log( $("#ktkoAtag").attr("href") ); //http://ktko.tistory.com console.log( $("#ktkoImgtag").attr("src") ); //https://t1.daumcdn.net/cfile/tistory/996F7F3F5B4EDDC322 console.log( $("#ktkoAtag").attr("data-value") ); //ktko console.log( $("#ktkoImgtag").attr("data-sex") ); //man |
2.속성 값 설정하기
1 2 | $대상.attr("속성이름","값") $대상.data("data-속성이름","갑") |
그냥 값만 넣어주면 되기 때문에 위의 예제는 따로 설명하지 않겠습니다.
jQuery 1.6버전에서 생긴 prop()에 대해서
jQuery 1.6버전 이전에는 attr()을 통해 속성을 통해 속성 값을 가져왔었는데, 많은 것들을 attr()로 처리하다 보니 많은 문제점이 생겼습니다. 그래서 prop()에 대해서 간략하게 작성했습니다.
attr()과 prop의 차이
attr() |
prop() |
HTML의 속성을 취급 HTML의 속성값을 String으로 가져옴. |
javascript의 프로파티를 취급 프로퍼티 값이 넘어오기 때문에 date, boolean, function등등 가져올 수 있음. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <body> <a id="ktkoAtag1" href="#none" data-value="ktko">ktko</a> <a id="ktkoAtag2" href="http://ktko.tistory.com" data-value="ktko">ktko</a> <script> $(document).ready(function() { console.log($("#ktkoAtag1").attr('href')); //#none console.log($("#ktkoAtag1").prop('href')); //file:///C:/workspace/Project_board/WebContent/jQuerySample.html#none console.log($("#ktkoAtag2").attr("href") ); //http://ktko.tistory.com console.log($("#ktkoAtag2").prop("href") ); //http://ktko.tistory.com/ }); </script> </body> |
'jQuery' 카테고리의 다른 글
| jQuery 스타일 다루기 (0) | 2018.07.18 |
|---|---|
| jQuery 노드의 내용 읽고 변경하기 (0) | 2018.07.18 |
| jQuery 노드를 생성/추가/삭제/이동 하기 (0) | 2018.07.17 |
| jQuery 선택자 다루기 (0) | 2018.07.17 |
| jQuery 선택자(자식, 부모, 형제) (2) | 2018.07.17 |
