본문 바로가기

CSS, Javascript, jQuery/information

jQuery 메서드

jQuery addclass()
addclass()는 선택한 요소에 하나 이상의 클래스 이름을 추가해 기존 클래스 속성을 제거하지 않고 클래스 속성에 하나 이상의 클래스 이름만 추가한다.

jQuery removeclass()
removeclass()는 선택한 요소에서 하나 이상의 클래스 이름을 제거한다.
*참고: 매개변수를 지정하지 않으면 이 메서드는 선택한 요소에서 모든 클래스 이름을 제거한다.

jQuery toggleclass()
toggleclass()는 선택한 요소에서 하나 이사의 클래스 이름 추가 및 제거 사이를 전환한다.
이 메서드는 지정된 클래스 이름에 대해 각 요소를 확인해 클래스 이름이 누락된 경우 추가되고 이미 설정된 경우에는 제거된다.
이런식의 토글 효과를 생성한다.
하지만 "switch" 매개 변수를 사용하여 제거만 지정하거나 클래스 이름만 추가하도록 지정할 수 있다.

jQuery animate()
animate()는 CSS 속성 집합의 사용자 지정 애니메이션을 수행한다.
이 메서드는 CSS 스타일을 사용하여 한 상태에서 다른 상태로 요소를 변경한다.
CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 생성한다.
숫자 값만 애니메이션화를할 수 있다.(예: "margin:30px") 
문자열 값은 "show", "hide" 및 "toggle" 문자열을 제외하고 "background-color:red"와 같이 애니메이션으로 만들 수 없다. 이 값을 사용하면 애니메이션 요소를 숨기거나 표시할 수 있다.

요소의 길이관련 메서드
$(selector).width();
$(selector).width(가로길이값);
$(selector).innerWidth();
$(selector).innerWidth(padding포함한 가로길이값);
$(selector).outerWidht();
$(selector).outerWidht(border포함한 가로길이값);

화면에서 스크롤 된 값을 알아내는 메서드
$(selector).scrollTop();
$(selector).scrollLeft();

화면에서 스크롤 된 값을 설정하는 메서드
$(selector).scrollTop(position);
$(selector).scrollLeft(position);

요소의 위치를 알아내거나 세팅하는 메소드(요소의 left,top속성 값을 알아내거나 위치 설정 가능하다)
.offset()
$(selector).offset();
$(selector).offset().top;
$(selector).offset().left;
$(selector).offset({top:value,left:value})

DOM(Document Object Model)
-웹 페이지가 로딩될 때 브라우저는 해당 페이지의 DOM을 생성한다.
-HTML DOM은 다음과 같은 트리 구조를 갖는다.
-CSS에서는 대상에 접근하기 위하여 선택자를 사용했지만 Javascript에서는 문서객체모델을 사용한다.


이벤트가 발생되면 이벤트에 매개변수로 넘긴 함수가
호출되는데, 이때 매개변수로 event 객체를 넘겨준다.
이 event 객체의 프로퍼티에는 이벤트 발생시 얻을 수 있는 정보가
들어있으며, 이벤트 모델의 전파 과정을 컨트롤할 수 있는 메서드와
브라우저 기본 동작이 발생하지 않도록 하는 메서드가 포함되어 있다.

'CSS, Javascript, jQuery > information' 카테고리의 다른 글

jQuery selector  (0) 2023.05.24
jQuery 객체 생성  (0) 2023.05.22
javascript란  (0) 2023.05.12
jQuery 사용법  (0) 2023.05.11
javascript & jQuery  (0) 2023.05.08