[jQuery]제이쿼리 초고속 속성 강좌 (유튜브 타모코딩님 강좌)

프로젝트 중 jQuery를 빠르게 훑고싶어서 유튜브 타모 코딩님 채널의 jQuery 속성 강좌의 내용을 정리했다. js 문법 건너뛰고 1.5배속하면 10분컷 가능이라서 개이득이다.

0. jQuery란? + jQuery 사용방법

• jQuery 란?
  HTML 문서를 더욱 쉽게 간결하게 선택하고 제어할 수 있도록 해주는 JavaScript 라이브러리

• jQuery를 사용하기 위한 준비
  HTML 헤더에 아래 코드 한 줄 끼워넣어주면 준비 완료.

<script src="http://code.jquery.com/jquery-latest.js"></script>

But 실무에서는 이렇게 latest version으로 가져오면 안됨. 버전에 따라 기능이 업데이트되므로 반드시 특정 버전을 정해서 임포트 해와야한다.

** 참고 : 강좌에서는 $(document).ready(handler) 이벤트를 사용하지만, 해당 이벤트는 최신 버전에서는 지원하지 않으므로 $(handler) 문법으로 대체하여 작성하였다.

1. jQuery 문장의 기본 구조 + click 이벤트

기본 구조는 "주어 가 조건 하면 동사 해라" 이다. 매우 직관적이라는 느낌이다. 아래를 보자.

$(function() {
	$(".button").click(function() {
    	alert("경고창!");
    })
});

$(".button") 주어 : div.button 태그를 선택하는 선택자.
click 조건: click 하는 이벤트가 발생하면
function(){ ~ } 동사 : { ~ } 안의 동작을 수행해라!

→ div.button 태그가 클릭되면 경고창을 띄워라 라는 뜻

2. this

$(function() {
	$(".popup_bg").click(function() {
    	$(this).css({"display":"none"});
    })
});

$(this) : 바로 상위 블록에서 선택됐던 본인 자기자신. $(".popup_bg") 이라고 그대로 쓰는 것과 거의 동일하다.

→ div.popup_bg 태그가 클릭되면 그 창을 안보이게 해라 라는 뜻

3. hover 이벤트

$(function() {
	$(".button").hover(function() { // 콜백함수①
    	$(this).css({
          "background" : "skyblue",
          "transition" : "0.7s"
        })
    }, function() { // 콜백함수②
        $(".button").css({
          "background" : "deeppink",
          "transition" : "0.5s"
        })
    }
});

hover : 마우스 커서가 올라가면/내려가면
$(this) 와 $(".button") 의 차이

• $(this) : 지금 선택된 너만 선택
• $(".button") : div.button 전부 다 선택

콜백함수① : mouseenter ( 커서가 올라가는 이벤트 발생 시 실행되는 콜백함수 )
콜백함수② : mouseleave ( 커서가 내려가는 이벤트 발생 시 실행되는 콜백함수 )
css({"transition" : "0.5s"}) : css 효과를 0.5초 동안 줌. 애니메이션 효과 가능.

→ div.button 위에 마우스 커서 올리면 커서 올린 그 버튼만 0.7초에 걸쳐 skyblue 색깔로 바꾸고, 커서 내리면 모든 버튼을 0.5초에 걸쳐 deeppink 색깔로 바꿔라 라는 뜻

4. 속성 선택

$(function() {
	$(".cooking > img").click(function() { // 콜백함수①
    	$(this).attr("src", "img/1.jpg");
    })
});

$(this) : 얘의
attr("src" : src 속성을 선택하여
, "img/1.jpg") : 그 값을 이걸로 변경

→ div.cooking 밑에 img 태그를 클릭하면 그 img 태그의 src 속성 값을 "img/1.jpg"로 바꿔라. = 이미지를 바꿔라. 라는 뜻

5. 그 외 이벤트

이 밖에도 change, focus 등의 이벤트가 있다. 다양한 jQuery 이벤트를 구글링하여 jQuery 공식 문서나 W3School에서 찾아서 공부해볼 수 있다.

끝!

---