3.5 - 제이쿼리(jQuery)

제이쿼리

간단한 명령어로 주요 기능을 쉽게 구현할 수 있도록 도와주는 자바스크립트언어로 구성된 라이브러리이다.

---

자바스크립트와 제이쿼리 비교

JS

var str1 = document.getElementById("title");

jQuery

$("#title")

---

제이쿼리 선택자 종류

CSS 선택자 : h1, #title, .article

제이쿼리 선택자 : $("h1"), $("#title"), $(".article")

---

제이쿼리 이벤트 

$("h1").click(function(){.........});
$("h1").fadeln(function(){...........});
$("h1").slideDown(function(){...........});

 

Mouse 이벤트 

$("h1").mouseenter(....);
$("h1").mouseleave(......);
$("h1").click(.....);

 

Hide, Show, Toggle 이벤트 

$("h1").hide();
$("h1").show();
$("h1").toggle();

 

Fade 이벤트 

$("h1").fadeOut();
$("h1").fadeIn();
$("h1").fadeToggle();

 

Class 이벤트 

$("h1").addClass(...);
$("h1").removeClass(...);
$("h1").hasClass(...);

---

this

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

제이쿼리 this 적용 방법 

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

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