본문 바로가기

학원/jQuery

19_jQuery 기본 명령

728x90
반응형

jQuery 주요 명령

.css(이름, 값) 이름에 해당하는 css속성을 값으로 변경 .html(값) innerHtml 변경
.css(이름) css 속성을 반환 .html() innerHtml 반환
.val(값) value 변경(input, select, textarea) .prop(이름, 값) 태그 속성(property) 변경
.val() value 반환 .prop(이름) 반환
.text(값) textContent 변경 .attr(이름, 값) 태그 속성(attribute) 변경
.text() textContent 반환 .attr(이름) 반환
    .data(이름) 커스텀 속성(data-) 반환

jQuery 이벤트 명령

.on(종류, 함수) 이벤트 발생 시 함수를 실행 .submit(함수) .on("submit", 함수)
.off(종류) 지정한 종류에 대한 이벤트를 제거 .change(함수) .on("change", 함수)
.click(함수) .on("click", 함수) .blur(함수) .on("blur", 함수)

jQuery DOM 탐색 명령

.next() .nextElementSibling  다음태그 .children("span") .children[0] 하위 태그
.nextAll() 뒤에 있는 모든 태그 .find() .querySelector()  내부 태그 검색
.prev() .prevElementSibling  이전 태그 .filter() 조건으로 한번 더 필터링
.prevAll() 앞에 있는 모든 태그 .first() 첫 번째 태그를 선택
.parent() 상위 태그 .last() 마지막 태그를 선택
.parents() 상위 모든 태그 .eq(index) 지정된 index 위치의 태그를 선택

jQuery 삭제명령

.remove() 대상을 삭제 .empty() 대상의 내부 요소를 삭제

jQuery 추가명령

A.append(B) A의 내부 마지막에 B를 추가 B.appendTo(A) A의 내부 마지막에 B를 추가
A.prepend(B) A의 내부 처음에 B를 추가 B.prependTo(A) A의 내부 처음에 B를 추가
A.after(B) A의 바로 뒤에 B를 추가 B.insertAfter(A) A의 바로 뒤에 B를 추가
A.before(B) A의 바로 앞에 B를 추가 B.insertBefore(A) A의 바로 앞에 B를 추가

jQuery 클래스 제어

.addClass() 클래스 추가 .removeClass() 클래스 제거
.hasClass() 클래스 검사 .toggleClass() 클래스 토글

jQuery 표시제어

  표시 숨김 토글
기본 .show() .hide() .toggle()
슬라이드 .slideDown() .slideUp() .slideToggle()
페이드 .fadeIn() .fadeOut() .fadeToggle()

jQuery 태그 속성 제어

.prop("이름","값") property 속성 입력 .attr("이름","값") attribute 속성 입력
.prop("이름") property 속성 반환 .attr("이름)" attribute 속성 반환

마우스 이동

 .mouseenter()  마우스 들어갈 때 이벤트  .mouseleave() 마우스 나갈 때 이벤트

시간제어

setTimeout(함수, 시간); 지정한 시간 이후에 함수 실행 setInterval(함수, 시간); 지정한 시간 간격으로 함수 실행
728x90
반응형

'학원 > jQuery' 카테고리의 다른 글

20_jQuery 기본 명령 활용  (1) 2023.03.14