Javascript/JQuery

[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! 자바스크립트 + 제이쿼리 입문