너와 나의 프로그래밍
JQuery - 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() | 선택한 요소의 진행 중인 애니메이션이 강제로 완료 시점으로 간 후 종료됨 |
출처 : Do it! 자바스크립트 + 제이쿼리 입문
반응형
'Front-End > JQuery' 카테고리의 다른 글
| [JQuery] 동적으로 생성된 Textarea에 자동 높이 이벤트 바인딩 (0) | 2019.05.31 |
|---|---|
| JQuery - IE에서 css: 'background-position-x' 값 못받아 올 때 (0) | 2019.01.24 |
| JQuery - Selectbox 정렬(다중) / 순서바꾸기 (0) | 2018.12.19 |
| JQuery - 버튼 하나로 늘이고 줄이는 애니메이션 구현하기. (0) | 2018.01.26 |
| JQuery - Ajax 기본 문법 (0) | 2017.10.30 |
'Front-End/JQuery' Related Articles
more
