jQuery 구문 몇 개 정리

아래 내용은 인터랙티브 웹디자인북 (최성일 저) 에서 나온 내용을 발췌하여 정리한 것이다.

1. $("선택할 요소")

선택하고 싶은 요소를 넣는다.

ex)

$("ul li").css({"color":"blue"})

$(".red").css({"color":"red"})

2. animate() 구문은 앞에 stop(). 구문이 와야 한다. 필수는 아니지만 stop() 구문이 없으면 모션이 중첩하여 실행되기 때문에 모션 당시의 animate()만 실행하려면 앞에 stop() 구문이 있어야 한다.

ex)

$("div").on("mouseenter", function() {

$("div").stop().animate({"width":"500px", "height":"500px"},800,"easeOutBounce")

})

$("div").on("mouseleave", function() {

$("div").stop().animate({"width":"300px","height":"300px"},800,"easeOutBounce")

})

3. $(this)

이벤트가 일어난 주체를 바로 선택해 주는 기능을 한다.

주로 .index()와 같이 사용되고, .index()는 순서값을 알려주는 역할이다.

ex)

$("li").on("click",function() {

let i = $(this).index()

alert(i)

})