본문 바로가기
JQuery

[제이쿼리] 속성 관련 메서드

by 코린이 박원장👶 2022. 9. 3.

속성 관련 메서드

메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다.
제이쿼리에 사용되는 메서드에 대해 알아보겠습니다.


1. 클래스 관련 메서드
2. 속성 관련 메서드
3. 스타일 관련 메서드

■ 메서드의 기본 형식

1. $("선택자").메서드명();

⇒매개변수가 없는 유형

2. $("선택자").메서드명(값);

⇒매개변수가 한개인 유형

3. $("선택자").메서드명(function(){});

⇒매개변수가 함수인 유형

4. $("선택자").메서드명(값1,값2,...);

⇒매개변수가 여러개인 유형

5. $('선택자').메서드명({
    옵션: 값,
    옵션: 값
});

⇒매개변수가 객체방식인 유형

한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다.
어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형을 가질 수 있습니다.

01_ attr() 메서드

선택한 요소의 atribute(속성)을 선택, 생성, 변경할 수 있습니다.

실행 분류 형식
취득 $("a").attr("href");
생성, 변경 $("a").attr("href", "http://tistory.com").attr("target", "_blank");
$("a").attr({"href", "http://tistory.com", target: "_blank"});
콜백 함수 $("a").attr("href", function(index, h){
    // index는 각 a 요소의 index 0, 1, 2
    // h는 각 a요소의 class속성
    return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다.
});
...
<a href="http://www.daum.net" target="_balnk" title="새창">다음</a>
<a href="http://www.naver.com" target="_balnk" title="새창">네이버</a>
<a href="http://www.tistory.net" target="_balnk" title="새창">티스토리</a>

예시


02_ prop() 메서드

요소의 속성을 불린(true/false)로 제어할 수 있습니다.

예시


🤷‍♀️ attr()과 prop()의 차이점?

attr()은 속성과 관련된 메서드입니다. 또 checked속성이 요소에 추가됩니다.
prop()은 프로퍼티에 관련된 메서드입니다. 이 메서드의 true는 js의 프로퍼티로 처리됩니다.

728x90

댓글


HTML이미지
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지