jQuery란?
자바스크립트 언어를 간편하게 사용하기 위한 자바스크립트 라이브러리이다.
HTML DOM을 쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능하다.
jQuery 메소드
변경
$("선택자").val(); : value 값을 가져옴, val() 괄호 안에 설정할 값 ㄱㄴ
$("선택자").css("속성", "속성값"); : css style 변경
$("선택자").attr("속성", "속성값"); : 속성 변경
$("선택자").text(“글자”); : text 변경
$("선택자").html("html"); : html 변경ex) $("p").html("<h1>짜잔~</h1>")
추가
$("선택자").append(요소); : 자식요소 중 마지막으로 추가
$("선택자").prepend(요소); : 자식 요소 중 첫번째로 추가
$("선택자").before(요소); : 형제 요소로 이전 형제로 추가
$("선택자").after(요소); : 형제 요소로 다음 형제로 추가
삭제
$("선택자").remove(); : 선택한 요소를 DOM 트리에서 삭제, 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제
ex) $("p").remove(".container");$("선택자").empty(); : 선택한 요소의 자식 요소를 모두 삭제, 선택된 요소는 남아 있고 그 안이 다 비워짐
탐색
$( 선택자 ).parent().함수() : 바로 위에 존재하는 하나의 부모 요소 선택
ex) $(document).ready( function() { $("p.ef").parent("div.cd").css("color", "red"); } );$("선택자").parents().함수() : 바로 위 부모뿐만 아니라 모든 조상을 선택
$("선택자").next().함수() : 선택된 요소 바로 다음에 위치한 형제 요소 선택
$("선택자").prev().함수() : 선택된 요소 바로 이전에 위치한 형제 요소 선택
$("선택자").children().함수() : 선택된 요소의 자식 요소 모두 선택
클래스 조작
$("선택자").addClass(“클래스명”) : 선택된 요소에 클래스 추가
$("선택자").removeClass(“클래스명”) : 선택된 요소에 클래스 삭제
$("선택자").hasClass(“클래스명”) : 선택된 요소에 클래스가 있는지 확인 (Return 값은 true or false)
$("선택자").toggleClass(“클래스명”) : 선택된 요소에 클래스가 있으면 추가, 없으면 삭제
jQuery 이벤트 리스너
이벤트 리스너란?
클릭, 스크롤, 마우스오버 등의 이벤트가 발생했을 때 처리를 담당하는 함수
- 로딩 이벤트
• .ready() : 스크립트 파일이 위에 있더라도 문서가 로드 된 후 스크립트를 읽을 수 있음ex) $('document').ready(function(){ $('p').click(function(){ $(this).hide(); }) })• $() : jQuery 3.0 이상부터 권장되는 로딩 이벤트
ex) $(function() { $('p').click(function(){ $(this).hide(); }) })
- 마우스 이벤트
• click()
• mouseover() : 마우스를 요소 안에 넣을 때
• hover() : 마우스를 넣을 때, 뺄 때
• scroll()
- 키보드 이벤트
• keydown()
• keyup()
- on 메서드
• on(“이벤트 타입”, 핸들러)ex) $("p").on("click", function(){ console.log("소스 코드 클릭!"); });
Js 이벤트 리스너
• 요소.addEventListener(이벤트타입, 핸들러)
: 선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행
ex) document.querySelector(".box").addEventListener("click", function() {
alert("click");
})이벤트 종류
- Click : 클릭
- Mouse 계열
• Mouseover : 요소에 커서를 올렸을 때
• Mouseout : 마우스가 요소를 벗어날 때
• Mousedown : 마우스 버튼을 누르고 있는 상태
• Mouseup : 마우스 버튼을 떼는 순간
- Focus : 포커스가 갔을 때
- Blur : 포커스가 벗어나는 순간
- Key 계열
• Keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
• Keydown : 키를 누르는 순간에만 발생
• Keyup : 키를 눌렀다가 떼는 순간
- Load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료 되었을 때
- Resize : 브라우저 창의 크기가 변경 될 때
- Scroll : 스크롤이 발생할 때
- Unload : 링크를 타고 이동하거나, 브라우저를 닫을 때
- Change : 폼 필드의 상태가 변경 되었을 때
