[엘리스 AI트랙] 02-03-03 자바스크립트 2 (사실 제이쿼리 소개)

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

 

1. 제이쿼리 선택자

$("h1")
$("#title")
$(".article")
$("~~~")

2. 제이쿼리 이벤트

$("h1").mouseenter // 요소의 경계 밖에서 안으로 마우스가 들어올 때
$("h1").mouseleave // 요소의 경계 안에서 밖으로 마우스가 나갈 때
$("h1").click // 마우스를 클릭할 때


$("h1").hide() // display 속성을 none으로 (감춤)
$("h1").show() // display 속성을 block으로 (보이게)
$("h1").toggle() //현재 상태의 반대로

$("h1").fadeOut() // 선택한 요소가 서서히 사라지게
$("h1").fadeIn() //선택한 요소를 서서히 나타나게
$("h1").fadeToggle() // 서서히 현재 상태의 반대로

$("h1").addClass() //선택한 요소의 클래스를 추가
$("h1").removeClass() //선택한 요소의 클래스를 삭제
$("h1").hasClass() // 선택한 요소에 클래스가 있는지 확인

 

3. this

 

(1) 정의

• 어떤 영역에 이벤트를 적용할 때 this는 선택된 영역만 의미

 

(2) 적용 방법

var $rabbit_icon = $(".rabbit_icon");

$rabbit_icon.click(function() {
	$(this).....
})