반응형
<참조> https://0433.tistory.com/30?category=968717
JQuery 기본 문법
직접 선택자
| 종류 | 사용법 | 설명 |
| 전체 선택자 | $("*") | 모든 요소 선택 |
| 아이디 선택자 | $("#아이디 명") | id 속성에 지정한 값을 가진 요소 선택 |
| 클래스 선택자 | $(".클래스 명") | 클래스 속성에 지정한 값을 가진 요소 선택 |
| 요소명 선택자 | $("요소명") | 지정 요소명과 일치한 요소들만 선택 |
| 그룹 선택자 | $("선택1, 선택2, 선택3, ..., 선택n") | 선택1,선택2,...,선택n에 지정된 요소들을 모두 선택 |
인접 관계 선택자
| 종류 | 사용법 | 설명 |
| 부모 요소 선택자 | $("요소 선택").parent() | 선택 요소의 부모 요소 선택 |
| 상위 요소 선택자 | $("요소 선택").parents() | 선택 요소의 상위 요소 모두 선택 |
| 하위 요소 선택자 | $("요소 선택 하위 요소") | 선택 요소에 지정한 하위 요소 선택 |
| 자식 요소 선택자 | $("요소 선택>자식요소") | 선택 요소 기준으로 자식 관계에 지정한 요소 선택 |
| 자식 요소들 선택자 | $("요소 선택").children() | 선택 요소의 모든 자식 요소 선택 |
| 이전(형) 요소 선택자 | $("요소 선택").prev() | 선택 요소의 바로 이전 요소 선택 |
| 이전 요소들 선택자 | $("요소 선택").prevAll() | 선택 요소의 이전 요소 모두 선택 |
| 이전 요소들 선택자 | $("요소 선택").prevUntil("요소명") | 선택 요소부터 지정한 요소의 이전 요소까지 모두 선택 |
| 다음(동생) 요소 선택자 | $("요소 선택").next() $("요소 선택+다음요소") |
선택 요소의 다음 요소 선택 |
| 다음 요소들 선택자 | $("요소 선택").nextAll() | 선택 요소의 다음 요소 모두 선택 |
위치 탐색 선택자
| 종류 | 사용법 | 설명 |
| $("요소 선택:first()") $("요소 선택").first() |
$("li:first()") $("li").first() |
전체 <li> 요소 중 첫 번째 요소 선택 |
| $("요소 선택:last()") $("요소 선택").last() |
$("li:last()") $("li").last() |
전체 <li> 요소 중 마지막 요소 선택 |
| $("요소 선택:odd") | $("li:odd") | <li> 요소 그룹 중 짝수 번째(홀수 인덱스) 요소 선택 |
| $("요소 선택:even") | $("li:even") | <li> 요소 중 홀수 번째(짝수 인덱스) 요소 선택 |
| $("요소 선택:first-of-type") |
$("li:first-of-type") | <li> 요소 중 첫 번째 요소 선택 |
| $("요소 선택:last-of-type") | $("li:last-of-type") | <li> 요소 중 마지막 요소 선택 |
| $("요소 선택:nth-child(숫자)") | $("li:nth-child(3)") | <li> 요소 중 세 번째 요소 선택 |
| $("요소 선택:nth-child(숫자)n") | $("li:nth-child(3n)") | <li> 요소 중 3의 배수 번째 요소 선택 |
| $("요소 선택:nth-last-of-type(숫자)") | $("li:nth-last-of-type(2)") | <li> 요소 중 마지막 위치에서 두 번째 요소 선택 |
| $("요소 선택:only-child") | $("li:only-child") | 부모 요소 내에 <li> 요소가 1개뿐인 <li> 요소 선택 |
| $("요소 선택:eq(index)") $("요소 선택").eq(index) |
$("li:eq(2)") $("li").eq(2) |
<li> 요소 중 인덱스 2에 참조하는 요소만 선택 |
| $("요소 선택").gt(index)") | $("li:gt(1)") | <li> 요소 중 인덱스 1보다 큰 인덱스가 참조하는 요소 |
| $("요소 선택:lt(index)") | $("li:it(1)") | <li> 요소 중 인덱스 1보다 작은 인덱스가 참조하는 요소 |
| $("요소 선택").slice(index) | $("li").slice(2) | <li> 요소 중 인덱스 2부터 참조하는 요소를 불러옴 |
속성 탐색 선택자
| 종류 | 사용법 | 설명 |
| $("요소 선택[속성]") | $("li[title]") | <li> 요소 중 title 속성이 포함된 요소 선택 |
| $("요소 선택[속성=값]") | $("li[title='리스트']") | <li> 요소 중 title 속성값이 '리스트'인 요소 선택 |
| $("요소 선택[속성^=텍스트]") | $("li[href^='http://']" | <li> 요소 중 href 속성값이 'http://'로 시작하는 요소 선택 |
| $("요소 선택[속성$=텍스트]") | $("a[href$='.com']") | <li> 요소 중 href 속성값이 '.com'으로 끝나는 요소 선택 |
| $("요소 선택[href*=텍스트]") | $("a[href*='naver']") | <li> 요소 중 href 속성값 중에서 'naver'를 포함한 요소 선택 |
| $("요소 선택:hidden") | $("li:hidden") | <li> 요소 중 숨겨져 있는 것 선택 |
| $("요소 선택:visible") | $("li:visible") | <li> 요소 중 보이는 것 선택 |
| $(":text") | $(":text") | <input> 요소 중 type 속성값이 "text"인 요소 선택 |
| $(":selected") | $(":selected") | selected 속성 적용된 요소 선택 |
| $(":checked") | $(":checked") | checked 속성 적용된 요소 선택 |
콘텐츠 탐색 선택자
| 종류 | 사용법 | 설명 |
| $("요소 선택:contains(텍스트)") | $("li:contains('내용2')") | <li> 요소 중 '내용2' 텍스트 포함 요소 선택 |
| $("요소 선택").contents() | $("p").contents() | 선택한 요소의 하위 요소 중 가장 가까운 하위 요소 |
| $("요소 선택:has(요소명)") $("요소 선택").has(요소명) |
$("li:has('span')") $("li").has('span') |
<li> 요소 중 <span>을 포함하는 요소 선택 |
| $("요소 선택:not(:제외 요소)") $("요소 선택").not(:제외 요소) |
$("li:not(:first)") $("li") |
<li> 요소 중 첫 번째 요소만 제외하고 선택 |
| $(요소 선택).filter(필터 요소) | $("li").filter(".list2") | <li> 요소 중 class 속성값이 "list2"인 요소 선택 |
| $(요소 선택1).find(요소 선택2) | $("li").find("strong") | <li> 요소에 하위 요소 <strong>만 선택 |
| $(요소 선택1").closest("요소 선택2") | $("strong").closest("div") | <strong>을 감싸는 상위 <div> 요소 중 가장 가까운 요소 |
| end() | $("li").children("a").end() | 필터링이 일어나기 이전 요소인 <li> 선택 |
선택자와 함께 사용하면 편리한 메서드들
| 종류 | 사용법 | 설명 |
| is() | $("li").is(".visible") | 선택한 <li> 요소가 보이면 true 반환 |
| noConfilct() | var m = $.noConfilct(); m("h1").width(100); |
$.noConfilct() 사용하면 "$" 메소드를 변수에 참조시켜 "$" 문자 대신 임의의 문자를 지정하여 사용 |
| get() | $("li").get(0).style.color = "red"; | 제이쿼리 선택요소에 get(0) 메서드 적용하면 자바스크립트에 DOM 선택자로 선택한 태그로 인식되어 이전 자바스크립트 DOM 방식 따름 |
| each() / $.each() | $("li").each(function(){ ... }); $.each($("li"),function(){ ... }); |
선택한 요소들을 순차 접근해 선택 |
| map() | 배열 객체.map(함수) | 배열 데이터를 변환시켜 다시 새로운 배열 객체 생성 |
속성 조작 메서드
| 종류 | 사용법 | 설명 |
| html() | $("요소 선택").html(); $("요소 선택").html(새 요소); |
선택 요소에 하위 요소들 반환하거나 새 요소로 설정 |
| text() | $("요소 선택").text(); $("요소 선택").text(새 텍스트); |
선택 요소 텍스트 반환하거나 새 텍스트로 설정 |
| css("속성") css("속성","값") |
$("요소 선택").css("color"); $("요소 선택").css("color","blue"); |
선택 요소에 스타일(css) 속성값 반환 또는 설정 |
| removeAttr("속성") | $("요소 선택").removeAttr("title"); | 선택 요소의 지정한 속성 삭제 |
| attr("속성") attr("속성","값") |
$("요소 선택").attr("href"); $("요소 선택").attr("href","main.html"); |
선택 요소 속성값을 반환 또는 설정 |
| addClass("클래스 값") | $("요소 선택").addClass("abc"); | 선택 요소에 지정한 클래스 생성 또는 추가 |
| toggleClass("클래스 값") | $("요소 선택").toggleClass("abc"); | 선택 요소에 지정한 클래스 값 생성, 삭제, 반복 |
| removeClass("클래스 값") | $("요소 선택").removeClass("abc"); | 선택 요소의 지정한 클래스 값 삭제 |
| hasClass("클래스 값") | $("요소 선택").hasClass("abc"); | 선택 요소에 지정 클래스 값 포함되어 있으면 true, 없으면 false 반환 |
| prop("속성") | $("요소 선택").prop("속성"); | 선택 태그의 속성들을 반환 |
| val() val(값) |
$("요소 선택").val(); $("요소 선택").val("홍길동"); |
선택한 입력 요소에 지정한 value 값 반환 또는 설정 |
수치 조작 메서드
| 종류 | 사용법 | 설명 |
| height() | $("요소 선택").height(); $("요소 선택").height(100); |
안쪽 여백과 선을 제외한 높잇값 반환하거나 설정 |
| width() | $("요소선택").width(); $("요소선택").width(100); |
안쪽 여백과 선을 제외한 너빗값 반환하거나 설정 |
| innerHeight() | $("요소선택").innerHeight(); $("요소선택").innerHeight(300); |
안쪽 여백 포함한 높잇값 반환하거나 설정 |
| innerWidth() | $("요소선택").innerWidth(); $("요소선택").innerWidth(100); |
안쪽 여백 포함한 너비값 반환하거나 설정 |
| outerHeight() | $("요소선택").outerHeight(); $("요소선택").outerHeight(100); |
선과 안쪽 여백 포함한 높잇값 반환하거나 설정 |
| outerWidth() | $("요소선택").outerWidht(); $("요소선택").outerWidth(100); |
선과 안쪽 여백 포함한 너비값 반환하거나 설정 |
| position() | $("요소선택").position().left; $("요소선택").position().top; |
선택한 요소의 포지션 위치값을 변환 |
| offset() | $("요소선택").offset().left; $("요소선택").offset().top; |
선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지 떨어진 값을 반환 |
| scrollLeft() | $(window).scrollLeft(); | 브라우저의 수평 스크롤 이동 높잇값을 반환 |
| scrollTop() | $(window).scrollTop(); | 브라우저의 수직 스크롤 이동 너빗값을 반환 |
객체 편집 메서드
| 종류 | 사용법 | 설명 |
| before() | $("요소 선택").before("새 요소"); | 선택 요소 이전 위치에 새 요소 추가 |
| after() | $("요소 선택").after("새 요소"); | 선택 요소 다음 위치에 새 요소 추가 |
| append() | $("요소 선택").append("새 요소"); | 선택 요소의 마지막 위치에 새 요소 추가 |
| appendTo() | $("새 요소").appendTo("요소 선택"); | 선택 요소의 마지막 위치에 새 요소 추가 |
| prepend() | $("요소 선택").prepend("새 요소"); | 선택 요소의 맨 앞 위치에 새 요소 추가 |
| prependTo() | $("새 요소").prependTo("요소 선택"); | 선택 요소의 맨 앞 위치에 새 요소 추가 |
| insertBefore() | $("새 요소").insertBefore("요소 선택"); | 선택 요소 이전 위치에 새 요소 추가 |
| insertAfter() | $("새 요소").insertAfter("요소 선택"); | 선택 요소 다음 위치에 새 요소 추가 |
| clone() | $("요소 선택").clone(true or false); | true이면 하위 요소까지 복제, false이면 선택 요소만 복제 |
| empty() | $("요소 선택").empty(); | 선택 요소의 하위 내용들을 모두 삭제 |
| remove() | $("요소 선택").remove(); | 선택 요소를 삭제 |
| replaceAll() replaceWith() |
$("새 요소").replaceAll("요소 선택"); $("요소 선택").replaceWith("새 요소"); |
선택 요소들을 새 요소로 교체 |
| unwrap() | $("요소 선택").unwrap(); | 선택 요소에서 부모 요소 삭제 |
| wrap() | $("요소 선택").wrap(새 요소) | 선택 요소를 새 요소로 각각 감쌈 |
| wrapAll() | $("요소 선택").wrapAll(): | 선택 요소를 새 요소로 한꺼번에 감쌈 |
| wrapInner() | $("요소 선택").wrapInner(새 요소); | 선택 요소 안 내용을 새 요소로 각각 감쌈 |
이벤트 등록 메서드
| 구분 | 종류 | 설명 |
| 로딩 이벤트 | load() | 선택 이미지 또는 프레임 요소에 연동된 소스가 로딩 완료 후 이벤트 발생 |
| ready() | 지정한 html 문서 객체가 로딩이 완료 후 이벤트 발생 | |
| 마우스 이벤트 | click() | 선택 요소를 클릭했을 때 이벤트 발생 |
| dblclick() | 선택 요소를 연속으로 두 번 클릭했을 때 이벤트 발생 | |
| mouseout() | 선택 요소의 영역에서 마우스가 벗어 났을 때 이벤트 발생 | |
| mouseover() | 선택 요소의 영역에서 마우스를 올렸을 때 이벤트 발생 | |
| mouseup() | 선택 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트 발생 | |
| mouseenter() | 선택 요소 범위 내에서 마우스를 올렸을 때 이벤트 발생 | |
| mouseleave() | 선택 요소 범위 내에서 마우스가 벗어났을 때 이벤트 발생 | |
| mousemove() | 선택 요소 범위에서 마우스가 움직였을 때 이벤트 발생 | |
| 포커스 이벤트 | focus() | 선택 요소에 포커스가 생성될 때 이벤트 발생하거나 선택 요소에 강제로 포커스 생성 |
| focusin() | 선택 요소에 포커스가 생성되었을 때 이벤트 발생 | |
| focusout() | 선택 요소에서 포커스가 다른 요소로 이동되었을 때 이벤트가 발생 | |
| blur() | 선택 요소에서 포커스가 다른 요소로 이동될 때 이벤트 발생시키거나 선택 요소에서 포커스 제거함 | |
| 키보드 이벤트 | keypress() | 선택 요소에서 키보드 눌렀을 때 이벤트 발생, 문자 키를 제외한 키 코드값 반환 |
| keydown() | 선택 요소에서 키보드 눌렀을 때 이벤트 발생, 키 코드값 반환 | |
| keyup() | 선택 요소에서 키보드에서 손을 떼었을 때 이벤트 발생 | |
| 기타 이벤트 | scroll() | 스크롤바를 움직일 때 이벤트 발생 |
| change() | 선택 요소에 입력 요소 값이 변경될 때 이벤트 발생 | |
| error() | 선택 요소에서 에러 발생될 때 이벤트 발생 |
그룹 이벤트 등록 메서드
| 종류 | 설명 |
| on() | 선택 요소에 한 개 이상 이벤트를 등록함, 이벤트 등록한 후에도 동적 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트 등록됨 |
| bind() | 선택 요소에 한 개 이상 이벤트 등록 |
| delegate() | 선택 요소에 지정한 하위 요소에 이벤트 등록 |
| live() | 선택 요소에 한 개 이상 이벤트를 등록 가능하며, 이벤트 등록 후에 동적 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트 등록됨 |
| one() | 선택 요소에 이벤트 등록하며, 한번만 이벤트 발생 |
효과 메서드
| 종류 | 설명 |
| hide() | 노출된 요소 숨김 |
| show() | 숨겨진 요소 노출 |
| toggle() | 숨겨진 요소는 노출, 노출된 요소는 숨김 |
| fadeIn() | 숨겨진 요소가 점차 선명해지며 노출 |
| fadeOut() | 노출된 요소가 점차 흐려지며 사라짐 |
| fadeToggle() | 노출된 요소는 흐려지며 사라지고, 숨겨진 요소는 선명해지면서 나타남 |
| fadeTo() | 노출된 요소에 투명도를 사용하여 숨김 |
| slideDown() | 숨겨진 요소가 밑으로 펼쳐지며 나타남 |
| slideUp() | 노출된 요소가 위로 접히면서 사라짐 |
| slideToggle() | 숨겨진 요소는 아래로 펼쳐지며 나타나고, 노출된 요소는 위로 접히면서 사라짐 |
| animate() | 선택 요소에 애니메이션 적용 |
효과 제어 메서드
| 종류 | 설명 |
| stop() | 현재 실행 중인 효과를 모두 정지 |
| delay() | 스택에 대기 중인 애니메이션 효과를 지연함 |
| queue() | 선택 요소의 스택에 대기 중인 큐를 반환하거나 실행문을 큐로 추가 가능 |
| clearQueue() | 첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐는 삭제 |
| dequeue() | 스택에 쌓인 모든 큐 삭제 |
| finish() | 선택 요소의 진행 중인 애니메이션을 완료 시점으로 이동 후 종료함 |
반응형
'JavaScript, jQuery' 카테고리의 다른 글
| 자바스크립트, ASCII 이미지, ASCII 카메라 동영상 출력 (0) | 2022.11.30 |
|---|---|
| 자바스크립트 테트리스 만들기 (0) | 2022.11.30 |
| 자바스크립트, input type="date" 달력 값 변경하기 (0) | 2022.06.18 |
| HTML 포맷에 맞게 객체 값을 넣어서 출력하는 예제 (0) | 2022.06.10 |
| Event Bubbling vs. Capturing (0) | 2022.06.09 |