728x90
제이쿼리(jQuery) 선택자
| 선택자명 | 설명 |
| $("tag") | tag라는 이름의 모든 태그 요소를 선택 |
| $(".class") | class라는 클래스명의 모든 클래스 요소를 선택 |
| $("#id") | id라는 아이디명의 아이디요소를 선택(한페이지에 1개만 가능) |
| $("div li") | div에 있는 li모두 선택 |
| $("div > p") | div의 p태그라는 직계자식을 선택 |
| $(this) | 현재선택중인 요소를 가리킴 |
※ 선택자 태그 입력 시 홑따옴표(') 또는 쌍따옴표("") 모두 입력가능 $('') 또는 $("")
제이쿼리(jQuery) 메소드 모음
| 분류 | 메소드 | 설명 |
| 일반노드찾기 | $(선택자).length | 찾은개수 구하기 |
| $(선택자).eq(index) | n번째 노드 접근하기 | |
| $(선택자).get(index) $(선택자)[index] |
자바스크립트 DOM 객체 접근하기 | |
| $(선택자).each(function(index){ $(this) 또는 $(선택자).eq(index); }); |
순차적으로 노드 접근하기 | |
| $(선택자).filter("선택자") | 찾은 노드 중에서 특정 노드만 찾기 | |
| $(선택자).find("선택자") | 찾은 노드의 자손 노드 중 특정 노드만 찾기 | |
| $(선택자).index() $(선택자).index($(선택자)) $(선택자).index(대상 DOM 객체) |
인덱스 값 구하기 | |
| 자식노드찾기 | $(선택자).children() | 모든 자식 노드 찾기 |
| $(선택자).children("선택자") | 특정 자식 노드만 찾기 | |
| $(선택자).children().first() $(선택자).children(":first") $(선택자).children().eq(0) $(선택자).children("eq(0)") |
첫 번째 자식 노드 찾기 | |
| $(선택자).children().last() $(선택자).children(":last") $(선택자).children().eq( $(선택자).children().length-1 ) $(선택자).children(":eq("+( $(선택자).children().length-1)+") ") |
마지막 번째 자식 노드 찾기 | |
| $(선택자).children().eq(index) $(선택자).children(":eq("+index+")") |
n번째 자식 노드 찾기 | |
| 부모노드찾기 | $(선택자).parent() | 부모 노드 찾기 |
| $(선택자).parents(["선택자"]) | 조상 노드 찾기 | |
| 노드생성/추가 | $("추가노드 DOM 문자열") | 노드 생성 |
| $부모노드.prepend($추가노드) $추가노드.prependTo($부모노드) |
첫 번째 자식 노드로 추가 | |
| $부모노드.append($추가노드) $추가노드.appendTo($부모노드) |
마지막 번째 자식 노드로 추가 | |
| $기준노드.before($추가노드) $추가노드.insertBefore($기준노드) |
특정 노드의 이전 위치에 추가 | |
| $기준노드.after($추가노드) $추가노드.insertAfter($기준노드) |
특정 노드의 다음 위치에 추가 | |
| 노드제거 | $(선택자).remove() | 특정 노드 제거 |
| $(선택자).children().remove() | 모든 자식 노드 제거 | |
| 노드 내용 읽기 및 변경 |
$대상.html() //태그 내용 포함 $대상.text() //태그 내용 제외 |
노드 내용을 문자열로 읽기 |
| $대상.html("수정할 태그 문자열") $대상.text("수정할 텍스") |
노드 내용 수정하기 | |
| $대상.html("추가할 태그 문자열") | 노드 내용을 이용해 여러 개의 자식 노드 추가하 | |
| $대상.html("") | 노드 내용을 이용해 모든 자식 노드 제거하기 |
스타일 메서드
| 메소드 | 설명 |
| $(선택자).css("스타일 속성 이름") $(선택자).css(["스타일 속성 이름", ...]) |
해당 선택자에 원하는 스타일 부여 |
| $(선택자).css("스타일 속성 이름",값) $(선택자).css({스타일 속성 이름:값, ...}) |
해당 선택자에 원하는 스타일 속성 값 설정 |
| $(선택자).addClass("클래스 이름") | 해당 선택자에 클래스 추가 |
| $(선택자).removeClass("클래스 이름") | 해당 선택자 클래스 삭제 |
속성 메서드
| 메소드 | 설명 |
| $(선택자).attr("속성이름") $(선택자).data("data-속성이름") |
해당 선택자에 속성값 구하기 |
| $(선택자).attr("속성이름","값") $(선택자).data("data-속성이름","값") |
해당 선택자에 속성값 설정하기 |
이벤트 메서드
| 메소드 | 설명 |
| $(선택자).on("이벤트 이름", 이벤트리스너) | 해당 선택자에 일반 이벤트 등록 |
| $(선택자).단축 이벤트(이벤트리스너) | 해당 선택자에 단축 이벤트 등록 |
| $(선택자).off("click", 삭제하고 싶은 이벤트 리스너 명) $(선택자).off("click") $(선택자).off() |
해당 선택자에 등록한 이벤트 제거 |
| $(선택자).one("이벤트 이름", 이벤트리스너) | 해당 선택자에 이벤트 한번만 실행 |
| 이벤트 객체.preventDefault() | 기본 행동 취소 |
| 이벤트 객체.stopPropagation() | 버블링 멈추기 |
| $(선택자).on("이벤트 이름", "선택자", 이벤트 리스너) | 버블링 활용:하나의 이벤트 |
위치 및 크기 메서드
| 분류 | 메소드 | 설명 |
| 요소의 위치 및 크기 관련 기능 |
$(선택자).offsetParent() | 해당 선택자에 부모 좌표 노드 구하기 |
| 지역 좌표 위치 구하기 $(선택자).position().left $(선택자).position().top 지역 좌표 위치 설정하기 $(선택자).css("left",위치값) $(선택자).css("top",위치값) 또는 $(선택자).css({left:위치값,top:위치값}) |
해당 선택자에 지역 좌표 위치 다루기 | |
| 전역 좌표 위치 구하기 $(선택자).offset().left $(선택자).offset().top 전역 좌표위치 설정하기 $(선택자).offset({left:위치값,top:위치값}) |
해당 선택자에 전역좌표 위치 다루기 | |
| 기본 크기 구하기 $(선택자).width() $(선택자).height() 기본 크기+padding 크기 구하기 $(선택자).innerWidth() $(선택자).innerHeight() 기본 크기+padding+border 크기 구하기 $(선택자).outerWidth() $(선택자).outerHeight() 기본 크기+padding+border+margin 크기 구하기 $(선택자).outerWidth(true) $(선택자).outerHeight(true) 기본 크기 설정하기 $(선택자).width(크기값) $(선택자).height(크기값) 기본 크기+padding 크기 설정하기 $(선택자).innerWidth(크기값) $(선택자).innerHeight(크기값) |
해당 선택자에 요소 크기 다루기 | |
| 요소의 위치 및 크기 관련 기능 |
스크롤 위치 구하기 $(선택자).scrollLeft() $(선택자).scrollTop() 스크롤 위치 설정하기 $(선택자).scrollLeft(위치값) $(선택자).scrollTop(위치값) |
해당 선택자 요소의 스크롤 위치 다루기 |
| 문서의 위치 및 크기 관련 기능 |
$(document).width() $(document).height() |
문서의 크기 구하기 |
| 화면의 위치 및 크기 관련 기능 윈도우의 위치 및 크기 관련 기능 |
screen.width screen.height |
전체 화면 크기 구하기 |
| screen.availWidth screnn.availHeight |
유효한 전체 화면 크기 구하기 | |
| 기본 크기 구하기 window.innerWidth window.innerHeight 기본 크기+메뉴바+툴바 영역이 포함된 크기 구하기 $(window).width() $(window).height() 기본 크기+메뉴바+툴바+스크롤바 영역이 포함된 크기 구하기 window.outerWidth window.outerHeight |
윈도우 크기 구하기 | |
| window.resizeTo(width,height) | 윈도우 크기 설정하기 | |
| $(window).on("resize", function(){}) | 윈도우 변경 이벤트 처리 | |
| 위치 값 구하기 window.screenLeft window.screenTop 위치 값 설정하기 window.moveTo(dx,dy) window.moveBy(dx,dy) |
윈도우 위치 다루기 | |
| 스크롤 위치 값 구하기 window.pageXOffset window.pageYOffset 스크롤 위치 설정하기 window.scrollTo(x,y) window.scrollBy(x,y) 스크롤 이벤트 처리하기 $(window).on("scroll",function(){}) |
윈도우 스크롤 다루기 | |
| 마우스의 위치 및 크기 관련 기능 |
윈도우 영역을 기준으로 하는 전역 위치 mouseEvent.clientX mouseEvent.clientY 문서 영역을 기준으로 하는 전역 위치 mouseEvent.pageX mouseEvent.pageX |
클릭한 전역 위치 |
| var offsetX = mouseEvent.pageX - $(타깃).offset().left var offsetY = mouseEvent.pageY - $(타깃).offset().top |
클릭한 지역 위치 |
애니메이션 효과 메서드
| 분류 | 메소드 | 설명 |
| 일반 효과 다루기 | 나타나기 $(선택자).show() 사라지기 $(선택자).hide() |
해당 선택자의 나타나고 사라지는 효과 |
| 페이드 인 $(선택자).fadeIn() 페이드 아웃 $(선택자).fadeOut() |
해당 선택자의 페이드 인/아웃 효과 | |
| 슬라이드 업 $(선택자).slideUp() 슬라이드 다운 $(선택자).slideDown() |
해당 선택자의 슬라이드 업/다운 효과 | |
| 사용자 정의 효과 다루기 | $(선택자).animate({스타일 속성 이름:속성값, ...},애니메이션 시간) | 해당 선택자의 사용자 정의 애니메이션 효과 만들기 |
| $(선택자).stop() | 해당 선택자의 애니메이션 효과 멈추기 |
출처: https://itworldyo.tistory.com/157?category=994206 [잇월드:티스토리]
출처: https://itworldyo.tistory.com/156 [잇월드:티스토리]
'Frond-end > javascript' 카테고리의 다른 글
| 아파치 이차트(Apache ECharts) 란? (0) | 2023.11.07 |
|---|---|
| 게시판 페이징 기능 구현 중 에러 (Uncaught SyntaxError: missing ) after argument list) (2) | 2023.09.21 |
| 게시판 페이징 기능 구현 중 board.jsp 중간 기록 (0) | 2023.09.21 |
| ajax xhr서버 요청 실패 에러/ 회원가입 최종성공 jsp코드 (0) | 2023.09.13 |
| [javascript] 자바스크립트 기본 문법 정리 (java와 비교하며 작성) (6) | 2022.09.16 |