jQuery(속성 조작 메소드)

여러분 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(탐색 선택자 2)를 알려드리면서 탐색 선택자를 마무리했습니다. 오늘은 jQuery(속성 조작 메소드)을 공부해보려고 합니다. 그럼 긴말 없이 들어가 보도록 하겠습니다. 가시죠!

 

 

객체 조작 메소드

객체를 생성, 복제, 삭제, 속성 변환하는 객체 조작 메소드에 대해 알아보겠습니다. 객체 조작 메서드는 속성 조작 메소드와 수치 조작 메소드 그리고 객체 편집 메소드로 나눌 수 있습니다. 

 

속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메소드는  요소의 너비값 또는 높이값 같은 수치를 바꿀 때 사용합니다. 이 두 메서드는 선택한 요소의 속성을 바꾸는 메소드이므로 성격이 바슷하다고 볼 수 있습니다. 그리고 객체 편집 메소드는 말 그대로 객체를 생성하거나 삭제 또는 복제할 때 사용합니다.

 

속성 조작 메소드

속성 조작 메소드는 요소의 속성을 조작할 때 사용하는 메소드입니다.  그럼 종류와 사용법을 알아보도록 하겠습니다. 

 

html()/text() 메소드

html() 메소드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용합니다.

 

기본형

 

 

코딩해보기

 

 

attr() / removeAttr() 메소드

attr() 메소드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성값을 불러올 때 사용합니다. removeAttr() 메소드는 선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.

 

기본형

 

 

코딩해보기

 

 

addClass( ) / removeClass( ) / toggleClass( ) / hasClass( ) 메소드

addClass() 메소드는 선택한 요소의 클래스를 생성하고, removeClass() 메소드는 선택한 요소에서 지정한 클래스를 삭제합니다.

 

toggleClass() 메소드는 선택한 요소에 지정한 클래스가 없으면 생성하고, 있을 경우에는 삭제합니다.

 

hasClass() 메소드는 선택한 요소에 지정한 클래스가 있으면 true를 반환하고 없으면 false를 반환합니다

 

 

val( ) 메소드

val() 메소드는 선택한 폼 요소의 value 속성값을 가져오거나 새 값을 적용할 때 사용합니다.

 

기본형

 

 

코딩해보기

 

prop() 메소드

prop() 메소드는 선택한 폼 요소(선택 상자, 체크박스, 라디오 버튼)의 상태 속성값을 가져오거나 새롭게 설정할 때 사용합니다.

 

기본형

 

 

코딩해보기

 

 

이것으로 jQuery(속성 조작 메소드)를 마무리했습니다. 정말 수고 많으셨습니다. 예제는 반드시 풀어보시고 따라 치셔야 합니다~ 그리고 제 글을 읽어주신 모든 분들께 감사의 말씀을 전합니다.

 

19살 IT 개발자 포돌이였습니다.


-Coding is an Art-


코딩을 예술이라 생각하는 사람