[JQuery] W3school

JQuery란 덜 작성하고 더 많은 작업을 수행하는 자바스크립트 라이브러리이다.
많은 줄의 자바스크립트를 단 한줄의 코드로 호출할 수 있는 메서드로 묶는다.

W3school의 연습문제를 참고하여 정리했다.
https://www.w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_selectors1

1. 선택자 (Selector)

$("#test").hide();

• id 일때는 #을 붙이고 class일때는 .을 붙여서 선택한다.

$("*").hide();

• 모든 요소들을 숨긴다.

$("[href]").hide();

• href 요소를 숨긴다.

$(tr:odd).hide();
$(tr:even).hide();

• table의 홀수 행 / 짝수 행을 숨긴다.

2. 이벤트 (Event)

$("p").click(function(){
	$(this).hide();
});

• p 요소를 클릭하면 해당 요소를 숨긴다.

$("p").dblclcik(function(){
	$(this).hide();
});

• p요소를 더블클릭 하면 해당 요소를 숨긴다.

$("p").mouseenter(function(){
	$(this).hide();
});

• p요소에 마우스 포인터가 들어가면 해당 요소를 숨긴다.

$("input").keypress(function(){
	$(this).hide();
});

• input요소에 키보드 키를 누르면 해당 요소를 숨긴다.

$("p").on("click", function(){
	$(this).hide();
});

• 모든 p요소에 클릭이벤트 핸들러를 연결한다
• on 이벤트는 이벤트 위임, 여러 이벤트 한번에 처리, 이벤트 핸들러 제거, 다양한 이벤트 타입 지원 등의 기능이 있다.

---

2-1. on 이벤트

1. 이벤트 위임

$(document).on("click", ".dynamic-element", function(){
	// 동적 요소 클릭 시 실행될 코드 
})

• .dynamic-element 클래스가 나중에 추가되더라도, 클릭 이벤트가 정상적으로 동작한다.

2. 여러 이벤트 한번에 처리

$(#"myElement").on("click dblclick", function(event) {
	if(event.type ==="click") {
    	// 클릭 시 실행될 코드
    } else if (event.type === "dblclick") {
    	// 더블클릭 시 실행될 코드
    }
});

3. 이벤트 핸들러 제거

$("#myElement").on("click", function(){
	// 클릭 시 실행될 코드
});
// 나중에 이벤트 핸들러 제거
$("#myElelment").off("click");

---

3. 페이드 (Fade)

• fadeOut의 매개변수를 통해 속도를 조정할 수 있다.

$("p").click(function(){
	$(this).fadeOut("slow");
});

• slow : 천천히
• fast : 빨리
• 숫자(밀리초) : 사용자 지정 시간동안 애니메이션 진행
  -> $(this).hide(1000); : 1000밀리초(1초)동안 애니메이션 진행

$("div").fadeTo("slow",0.2);

• fade를 불투명도 0.2로 페이드 처리한다.

$("button").click(function(){
	$("div").fadeToggle(1000);
});

• 페이드 인/아웃 되는 효과가 1000밀리초 동안 지속된다.

4. 슬라이드 (Slide)

$("div").slideUp();

• div 요소를 위로 밀어 올린다.
• slideUp("slow")와 같이 지속시간을 쓸 수 있다.

$("div").slideDown();

• div 요소를 밑으로 밀어 내린다.

$("button").click(function(){
	$("div").slideToggle();
});

5. 애니메이션 (Animate)

$("div").animate({left : 250px});

• div태그를 오른쪽으로 250px 이동시킨다.
• fontSize, opacity, height 등의 요소들을 사용할 수 있다.

6. 반환 (Get)

$("div").text();
$("div").html();
$("div").val();

• text,html,input창의 value 컨텐츠 반환

$("a").attr("href");

• 링크의 url 주소를 반환한다.

7. 변경 (Set)

$("div").text("Hellow World");
$("input").val("John Doe");
$("img").attr("src", "myimage.jpg");

• div의 text값을 Hellow World로 변경한다.
• 인풋창의 값을 John Doe로 변경한다.
• img의 src속성을 myimage.jpg로 변경한다.

$("#myLink").text("Demo");
$("#myLink").attr("href", "https://www.demo.com");

• id 이름이 myLink인 text값을 Demo로 변경한다.
• id 이름이 myLink인 href속성값을 www.demo.com로 변경한다.

8. 추가 (Add)

$("p").append("Yes!");
$("p").prepend("Yes!");

• p 요소 끝에 Yes를 추가한다.
• p 요소 시작점에 Yes를 추가한다.

9. 삭제 (Remove)

$("div").remove();
$("div").empty();
$("div").remove(".test, .demo");

• div 요소를 삭제한다.
• div 요소 중 자식요소만 삭제한다.
• div 요소 중 class이름이 test, demo인 것만 삭제한다.

10. css class

$("p").addClass("important");
$("p").addClass("important test");
$("p").toggleClass("important");

• addClass : 클래스를 추가한다.
• 클래스명 두개를 띄어쓰기하여 작성 시, 클래스를 한번에 추가할 수 있다.
• toggleClass : 클래스를 토글 (추가하거나 삭제) 한다.

---

10-2. css 적용하기

$("p").css("background-color", "pink");
$("p").css("background-color","5px dotted red");
$("p").css("background-color");
$("p").css({"color":"white", "font-size" : "25px", "padding":"15px"});

• css를 위와같은 방법들로 지정할 수 있다.

---

11. 치수 (Dimension)

$("div").height(500).width(500);
$("div").height();
$("div").innerHeight();
$("div").outerHeight();
$("div").outerHeight(true);

• 높이 500, 넓이 500으로 설정한다.
• div의 패딩,테두리,마진 모두 포함하지 않는 순수 높이를 가져온다.
• div의 패딩 포함 (마진은 포함x) 높이를 가져온다.
• div의 패딩,테두리(border) 포함 높이를 가져온다.

12. 부모/자식/형제 (Traversing)

$("span").parent();
$("span").parents();
$("span").children();
$("div").find("span");

• span의 직접적인 부모 요소를 가져온다.
• span의 부모요소들을 가져온다.
• span의 직계 자식요소를 가져온다.
• div의 자손인 모든 span요소를 가져온다.

$("h2").sibilings();
$("div").first();

• h2의 형제요소들을 가져온다.
• 첫번째 div 요소를 가져온다.