[jQuery] .attr() / .prop() - 속성값을 가져오거나 추가하는 메서드

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
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	31

Tags more

Archives

Today

Total

관리 메뉴

wrkbrs

[jQuery] .attr() / .prop() - 속성값을 가져오거나 추가하는 메서드 본문

jQuery

[jQuery] .attr() / .prop() - 속성값을 가져오거나 추가하는 메서드

zcarc 2019. 1. 10. 14:08

.prop()

.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다.

문법 1

1
.prop( propertyName )

속성값을 가져옵니다.

문법 2

1
.prop( propertyName, value )

속성값을 추가합니다.

예제 1

a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <p><a href="#">Link</a></p>
    <p>
      <script>
        document.write( $( 'a' ).attr( 'href' ) );
        document.write( '<br>' );
        document.write( $( 'a' ).prop( 'href' ) );
      </script>
    </p>
  </body>
</html>

예제 2

제일 위의 체크박스를 체크하거나 체크 해제를 하면 아래의 모든 체크박스가 체크되거나 체크 해제됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '.check-all' ).click( function() {
          $( '.ab' ).prop( 'checked', this.checked );
        } );
      } );
    </script>
  </head>
  <body>
    <form>
      <p><input type="checkbox" name="all" class="check-all"> <label>Check ALL</label></p>
      <hr>
      <p><input type="checkbox" name="cb1" class="ab"> <label>Checkbox 1</label></p>
      <p><input type="checkbox" name="cb2" class="ab"> <label>Checkbox 2</label></p>
    </form>
  </body>
</html>

출처 : https://www.codingfactory.net/10341

저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

[jQuery] .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드 (0)	2019.01.10
[jQuery] 메소드 정리 (0)	2019.01.10
[jQuery] 속성, 내용, 스타일, 데이터 조회 및 변경 (0)	2019.01.10
[jQuery] 사용자 속성 선택자로 접근하는 방법, 사용자 속성 선택자 ( <img data-picnum="1"... ) (0)	2019.01.10
[jQuery] Value() 값 가져오기, 설정하기 & 태그의 속성 선택 (0)	2019.01.10

'jQuery' Related Articles

wrkbrs

[jQuery] .attr() / .prop() - 속성값을 가져오거나 추가하는 메서드 본문

[jQuery] .attr() / .prop() - 속성값을 가져오거나 추가하는 메서드

.prop()

문법 1

문법 2

예제 1

예제 2

'jQuery' 카테고리의 다른 글

티스토리툴바