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가 아닌 요소 반환
References
https://www.w3schools.com/jquery
jQuery Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com:443
'Programming > Javascript' 카테고리의 다른 글
| [CSS/JS] 텍스트 마우스 오버 시 저장된 이미지 보이기 (0) | 2024.01.18 |
|---|---|
| [JavaScript] isNaN() 함수 / 값이 NaN인지 확인하기 (0) | 2022.09.27 |
| [jQuery] trigger() 함수 / 강제 이벤트 발생 (0) | 2022.09.08 |
댓글