jQuery 소개
jQuery는 자바스크립트 라이브러리로 Javascript 프로그래밍을 크게 단순화합니다.
HTML/DOM 조작, CSS 조작, 이벤트, 효과 및 애니메이션, Ajax등의 기능이 포함되어 있습니다.
jQuery 연결하기
jQuery를 연결하는 방법에는 두 가지가 있습니다.
1. 다운로드 받기
html의 <head>안에 <script>태그로 참조합니다.
src 속성에는 js파일의 경로를 정확히 입력해야 합니다.
<head>
<script src="jquery-3.6.0.min.js"></script> <!-- 같은 디렉토리일 경우 -->
</head>
2. CDN 이용
html의 <head>안에 <script>태그로 참조합니다.
<head>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
jQuery 구문
jQuery의 기본 형식입니다.
$(selector).action(); // $(선택자).동작함수()
$(document).ready() 안에 jQuery 함수를 입력합니다.
→ 문서가 완전히 로드되고 나서 jQuery를 실행합니다.
$(document).ready(function(){
// jQuery methods go here...
});
jQuery 선택자
선택자를 사용하여 이름, ID, 클래스, 속성, 값 등으로 HTML 요소를 선택하고 조작합니다.
선택자는 $( )로 이루어져 있습니다.
1. 요소 선택자
요소 이름을 기반으로 요소를 선택합니다
ex) 페이지의 모든 <p> 요소를 선택합니다.
$("p")
2. #id 선택자
특정 id를 가진 요소를 선택합니다.
ex) id가 milk인 요소를 선택합니다.
$("#milk")
3. .class 선택자
특정 class를 가진 요소를 선택합니다.
ex) class가 milku인 요소를 선택합니다.
$(".milku")
jQuery 이벤트
웹 페이지가 응답할 수 있는 다양한 작업을 이벤트라고 합니다.
click() : 선택된 요소를 클릭하면 함수를 실행합니다.
$("p").click(function(){ // <p>요소에서 클릭 이벤트 발생 시
$(this).hide(); // 그 <p>요소를 숨깁니다.
});dbclick() : 선택된 요소를 더블클릭하면 함수를 실행합니다.
mouseenter() : 선택된 요소에 마우스 포인터가 들어갈 때 함수를 실행합니다.
$("#p1").mouseenter(function(){ // id가 p1인 요소에 마우스를 올릴 때
alert("You entered p1!"); // alert창을 띄웁니다.
});mouseleave() : 선택된 요소에서 마우스 포인터가 떠날 때 함수를 실행합니다.
mousedown() : 선택된 요소 위에서 마우스 버튼을 누르면 함수가 실행됩니다.
mouseup() : 선택된 요소 위에서 마우스 버튼을 놓으면 함수가 실행됩니다.
hover() : mouseenter()와 mouseleave()의 조합입니다.
$("#p1").hover(function(){ // id가 p1인 요소에 마우스를 올릴 때 첫 번째 함수 실행
alert("You entered p1!");
},
function(){ //마우스를 떠날 때 두 번째 함수 실행
alert("Bye! You now leave p1!");
});focus() : 양식 필드에 포커스가 있을 때 실행됩니다. ex) input
blur() : 양식 필드가 포커스를 잃을 때 실행됩니다.
on() : 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결합니다.
$("p").on({
mouseenter: function(){ //마우스 진입 시 함수1 실행
$(this).css("background-color", "lightgray");
},
mouseleave: function(){ //마우스 이탈 시 함수2 실행
$(this).css("background-color", "lightblue");
},
click: function(){ //마우스 클릭 시 함수3 실행
$(this).css("background-color", "yellow");
}
});
jQuery 이펙트
1. 숨김/표시
hide() : 선택한 요소를 숨깁니다.
show() : 선택한 요소를 표시합니다.
toggle() : 선택한 요소를 숨김/표시합니다. (토글)
* 인자를 설정하여 숨김/표시의 속도를 지정할 수 있습니다.
$("p").hide(1000);
$("p").hide("slow");
2. 페이드
fadeIn() : 선택한 요소를 페이드 인합니다. (서서히 밝아지며 나타납니다.)
fadeOut() : 선택한 요소를 페이드 아웃합니다.
fadeToggle() : 선택한 요소를 페이드 인/아웃합니다. (토글)
* 인자를 설정하여 페이드인/아웃의 속도를 지정할 수 있습니다.
fadeTo() : 선택한 요소의 불투명도를 지정하여 페이딩을 지정합니다.
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15); //$(selector).fadeTo(speed,opacity,callback);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
3. 슬라이딩
slideDown() : 선택한 요소를 아래로 슬라이드합니다.
slideUp() : 선택한 요소를 위로 슬라이드합니다.
slideToggle() : slideDown(), slideUp()를 토글합니다.
$("#flip").click(function(){ //id가 flip인 요소를 클릭하면
$("#panel").slideToggle(); //id가 panel인 요소가 slideUp/slideDown 토글됩니다.
});
4. 애니메이션
animate() 메서드로 사용자 지정 애니메이션을 만들 수 있습니다.
$("button").click(function(){ // 버튼 클릭 시
$("div").animate({left: '250px'}); // div 요소를 left 250px으로(오른쪽) 이동합니다. (현위치: left 0px)
});
$("button").click(function(){ // 4개 animate()가 순차적으로 실행됩니다.
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow"); //높이 300px, 투명도 0.4
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
5. jQuery 중지
stop() : 슬라이딩, 페이딩, 애니메이션 등 모든 jQuery 이펙트에 대해 작용하며, 이펙트가 완료되기 전에 중지합니다.
6. jQuery 콜백
현재 효과가 완료된 후 콜백 함수가 실행됩니다.
$( selector ).hide( speed,callback );
$("button").click(function(){
$("p").hide("slow", function(){ // hide() 실행 완료 후
alert("The paragraph is now hidden"); //alert를 띄웁니다.
});
});
7. jQuery 체이닝
체이닝으로 동일한 요소에서 여러 jQuery 명령을 차례로 실행할 수 있습니다.
브라우저가 동일한 요소를 두 번 이상 찾을 필요가 없습니다.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
// id가 p1인 요소의 color를 red로 바꾼 후, 위로 슬라이드한 다음, 아래로 슬라이드합니다.
jQuery HTML
1. GET
내용을 가져오는 text(), html(), val() 메소드에는 인자가 없습니다
text() : 선택한 요소의 텍스트 내용을 반환합니다.
html() : 선택한 요소(HTML 마크업 포함)의 내용을 반환합니다.
val() : 양식 필드의 값(value 속성 값)을 반환합니다.
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); //id가 test인 요소의 텍스트 내용을 반환
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html()); //id가 test인 요소의 html태그 포함 내용을 반환
});
2. SET
내용을 설정하는 text(), html(), val() 메소드에는 인자가 있습니다
text() : 선택한 요소의 텍스트 내용을 설정합니다.
html() : 선택한 요소(HTML 마크업 포함)의 내용을 설정합니다.
val() : 양식 필드의 값(value 속성 값)을 설정합니다.
$("#btn1").click(function(){
$("#test1").text("Hello world!"); //id가 test1인 요소의 텍스트 내용을 설정합니다.
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>"); //id가 test2인 요소의 html태그 포함 내용을 설정합니다.
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck"); //id가 test3인 요소의 value 속성의 값을 설정합니다.
});
3. 추가
선택한 요소의 앞 또는 뒤에 내용을 추가합니다.
append() : 선택한 HTML 요소 끝 부분에 내용을 추가합니다. (선택한 요소 태그 안에 자식요소로 추가)
prepend() : 선택한 HTML 요소 시작 부분에 내용을 추가합니다.
after() : 선택한 HTML 요소 뒤에 내용을 추가합니다. (선택한 요소 태그 밖 뒤에 형제 요소로 추가)
before() : 선택한 HTML 요소 뒤에 내용을 추가합니다.
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");
4. 제거
remove() : 선택한 요소와 그 자식 요소 모두를 제거합니다.
empty() : 선택한 요소의 자식 요소를 제거합니다.
$("#div1").remove();
$("#div1").empty();
5. CSS 클래스 조작
addClass() : 선택한 요소에 하나 이상의 클래스를 추가합니다.
removeClass() : 선택한 요소에서 하나 이상의 클래스를 제거합니다.
toggleClass() : 선택한 요소에서 클래스 추가/제거 사이를 전환합니다.
$("button").click(function(){
$("#div1").addClass("important blue"); // important와 blue 클래스를 추가합니다.
});
$("button").click(function(){
$("h1, h2, p").removeClass("blue"); // blue 클래스를 제거합니다.
});css() : 스타일 속성을 설정하거나 반환합니다.
$("p").css("background-color"); //배경색을 반환합니다.
$("p").css("background-color", "yellow"); //배경색을 노란색으로 설정합니다.
$("p").css({"background-color": "yellow", "font-size": "200%"});
//배경색을 노란색으로 설정하고 폰트를 200%로 설정합니다.
6. 높이, 너비
width(), height() : element의 너비와 높이
innerwidth(), innerheight() : element+padding*2 를 포함한 너비와 높이
outerwidth(), outerheight() : element+padding*2+border*2 를 포함한 너비와 높이
outerwidth(true), outerheight(true) : element+padding*2+border*2+margin*2 를 포함한 너비와 높이
jQuery 요소 관계
1. 부모 요소
parent() : 선택한 요소의 직접 부모 요소를 반환합니다. (바로 위 부모만)
parents() : 요소의 root 요소까지 모든 상위 요소를 반환합니다.
parentsUntil() : 주어진 두 인자 사이의 모든 상위 요소를 반환합니다.
$("span").parentsUntil("div"); //span의 상위 요소 반환(div 아래까지)
2. 자식 요소
children() : 선택한 요소의 모든 직계 자식 요소를 반환합니다. (인자에 하위 요소 필터링 가능)
→ children("p.first") : 직계 자식 p 중 클래스가 first인 모든 요소를 반환합니다.
find() : 선택한 요소의 모든 하위 요소를 반환합니다.
→ find("span") : 하위 모든 요소 중 모든 span을 반환합니다.
→ find("*") : 모든 하위 요소를 반환합니다.
3. 형제 요소
siblings() : 선택한 요소의 모든 형제 요소를 반환합니다.
sibling("p") : 선택한 요소의 형제 요소 중 p를 반환합니다.
next() : 선택한 요소의 다음 형제 요소를 반환합니다.
nextAll() : 선택한 요소의 다음 모든 형제 요소를 반환합니다.
nextUntil() : 두 인자 사이의 모든 형제 요소를 반환합니다. (→)
$("h2").nextUntil("h6"); // h2 다음부터 h6 전까지 형제 요소 반환
prev() : 선택한 요소의 이전 형제 요소를 반환합니다.
prevAll() : 선택한 요소의 이전 모든 형제 요소를 반환합니다.
prevUntil() : 두 인자 사이의 모든 형제 요소를 반환합니다. (←)
4. 필터링
first() : 지정된 요소 중 첫 번째 요소를 반환합니다.
last() : 지정된 요소 중 마지막 요소를 반환합니다.
eq() : 선택한 요소의 특정 인덱스 번호를 가진 요소를 반환합니다. (인덱스는 0부터 시작)
filter() : 선택한 요소 중 기준에 일치하는 요소를 반환합니다.
not() : 선택한 요소 중 기준에 일치하지 않는 요소를 반환합니다.
$("p").eq(1); // 인덱스 번호가 1인 p요소 (두 번째 p 요소) 반환
$("p").filter(".intro"); // p 중 클래스가 intro인 요소 반환
$("p").not(".intro"); // p 중 클래스가 intro가 아닌 요소 반환