49. Jquery - method

1. method

1. 객체 조작 메소드

1. 객체 조작 메소드 DOM 객체에 접근해서 태그를 삭제, 추가 또는 내용들을 추가/삭제 그리고 속성값들을 가져오거나 변경할 수 있는 메소드.
2. html(): 순수 자바스크립트의 innerHtml과 매핑되는 메소드.
   • 선택자.html(): 선택한 태그의 모든 하위태그들을 문자열로 반환
   • 선택자.html("새로운 태그 문자열"): 선택한 태그의 모든 하위 태그들을 삭제하고 새로운 태그를 생성.
3. text(): 순수 자바스크립트의 innerText와 매핑되는 메소드.
   • 선택자.text(): 선택한 태그의 텍스트 반환
   • 선택자.text("새로운 문자열"): 선택한 태그의 텍스트를 모두 삭제하고 새로운 텍스트 추가.
4. css(): 순수 자바스크립트의 선택자.style.속성과 매핑되는 메소드.
   • 선택자.css("속성"): 선택한 태그의 해당 스타일 속성값을 리턴.
   • 선택자.css("속성", "속성 값"): 선택한 태그의 해당 스타일 속성을 지정한 속성값으로 변경.
5. attr(): 선택한 태그에 있는 속성들을 변경하거나 가져오는 메소드.
   • 선택자.attr("속성"): 선택한 태그의 해당 속성의 속성값 반환.
   • 선택자.atrr("속성", "속성값"): 선택한 태그의 해당 속성의 속성값을 지정한 속성값으로 변경
6. removeAttr("속성"): 선택한 태그에서 지정한 속성 삭제
7. addClass("클래스명"): 선택한 태그에 클래스를 추가하는 메소드.
8. removeClass("클래스명"): 선택한 태그에서 해당 클래스 삭제하는 메소드
9. toggleClass("클래스명"): 선택한 태그에 해당 클래스가 존재하면 클래스를 삭제, 존재하지 않으면 클래스를 추가하는 메소드.
10. hasClass("클래스명"): 선택한 태그에 해당 클래스가 존재하는 지 여부를 확인하는 메소드. 존재하면 true, 존재하지 않으면 false 리턴.
11. val(): 선택된 태그의 value속성 값을 가져오거나 변경 메소드.
    • val(): 선택된 태그의 value속성 값 가져오는 메소드.
    • val("속성 값"): 선택된 태그의 value속성 값을 지정된 속성 값으로 변경.
12. preventDefault(): 이벤트 객체에 기본적인 기능를 방지하는 메소드. 항상 이벤트객체를 매개변수로 받아서 사용해줘야 한다.

2. 수치 조작 메소드

1. 수치 조작 메소드는 attr 메소드나 css 메소드와 비슷하지만 선택한 태그의 수치와 관련된 속성만 변경 또는 가져올 수 있는 메소드.
2. width()/height(): 선택한 태그의 가로길이/세로길이를 가져오거나 값을 변경.
   • 선택자.width()/height(): 선택한 태그의 가로길이/세로길이 리턴.
   • 선택자.width("새로운 width 값")/height("새로운 height 값"): 선택한 태그의 가로길이/세로길이 변경
3. position(): 선택한 태그의 left|top|right|bottom 값을 리턴해주는 메소드. 선택한 태그의 position 속성이 static아닐때만 사용가능.
   • 선택자.position().left|right|top|bottom

3. 객체 편집 메소드

1. 객체 편집 메소드는 선택된 태그에 새로운 태그들을 추가하거나 특정 태그만 삭제할 때 사용하는 메소드
2. 선택자.before("새 태그 문자열")/$("새 태그 문자열").insertBefore("선택자"): 선택된 태그 이전 위치에 새로운 태그를 생성.
3. 선택자.after("새 태그 문자열")/$("새 태그 문자열").insertAfter("선택자"): 선택된 태그 이후 위치에 새로운 태그를 생성.
4. 선택자.append("새 태그 문자열")/$("새 태그 문자열").appendTo("선택자"): 선택된 태그의 하위 태그 마지막에 새로운 태그 추가
5. 선택자.prepend("새 태그 문자열")/$("새 태그 문자열").prependTo("선택자"): 선택된 태그의 하위 태그 첫 번째에 새로운 태그 추가
6. 선택자.empty(): 선택된 태그의 하위 태그 모두 삭제.
7. 선택자.remove(): 선택된 태그를 삭제. 하위 태그들도 삭제됨.
8. 선택자.replaceWith("새 태그 문자열")/$("새 태그 문자열").replaceAll("선택자"): 선택된 태그를 지정한 새 태그로 변경.
9. 선택자.unwrap(): 선택된 태그의 부모태그만 삭제.
10. 선택자.wrap("새 태그"): 선택된 태그 각각을 부모태그로 감쌈.
11. 선택자.wrapAll("새 태그"): 선택된 태그 전체를 하나의 부모 태그로 감쌈.
12. 선택자.wrapInner("새 태그"): 선택된 태그의 자식 태그들을 각각 새 부모 태그로 감쌈.

4. 효과 제어 메소드

1. hide()/show(): 태그를 숨기거나 표출할 때 사용하는 메소드

   선택자.show|hide();
   선택자.show|hide(효과 속도(ms), 콜백함수(태그가 나타나거나 사라지는 효과가 끝났을 때 실행되는 함수));

2. toggle(): 태그가 숨겨져있으면 show() 호출. 태그가 숨겨져있지 않으면 hide() 호출하는 메소드.

   선택자.toggle();
   선택자.toggle(효과 속도(ms), 콜백함수);

3. fadeIn()/fadeOut()/fadeToggle(): 투명도를 조절하여 태그를 숨기거나 표출하는 메소드

   선택자.fadeIn/fadeOut()/fadeToggle();
   선택자.fadeIn/fadeOut/fadeToggle(효과 속도(ms), 콜백함수);

4. fadeTo(): 지정한 투명도까지 태그를 숨겨주는 메소드. 0~1까지의 투명도 지정가능. 1이 가장 선명한 상태

   선택자.fadeTo(효과시간(ms), 투명도, 콜백함수);

5. slideUp()/slideDown()/slideToggle(): 태그를 숨길때는 위로 접히며 숨기는 효과, 태그를 표출할 때는 아래로 펼쳐지듯이 표출하는 메소드

   선택자.slideUp|slideDown|slideToggle(효과시간(ms), 콜백함수);

6. animate(): css 애니메이션 효과를 만들어주는 메소드. animate()에서 색상변경은 불가능. 수치 조작하는 속성들만 애니메이션 효과를 만들수 있다.

   선택자.animate({애니메이션 효과 적용할 속성}, 효과시간(ms), 콜백함수);

7. 애니메이션 제어 메소드: 애니메이션을 정지시키거나 지연시키는 등의 동작을 하는 메소드
   • stop(): 애니메이션 효과를 중단하는 메소드
   • delay(): 애니메이션 효과를 지연 후 실행하는 메소드
   • finish(): 애니메이션 효과는 모두 제거하고 결과만 보여주는 메소드

     선택자.stop();
     선택자.delay(지연시간).animate();
     선택자.finish();