jQuery 선택자·이벤트

로드

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

시작

$(document).ready(function() { });

• $(document).ready: DOM 로드 후
• $(window).load: 이미지 등 전체 리소스 로드 후

선택자

$("p")                  // 태그
$("#jq")                // id
$(".jqr")               // class
$("img[alt='flower']")  // 속성

체이닝

$("button").on("click", function() {
  $("#list").find("li").eq(1).html("두 번째")
    .end()
    .eq(2).html("세 번째");
});

요소 추가

.append() / .prepend()           // 선택 요소 안쪽 끝/처음
.appendTo() / .prependTo()       // 소스·타겟 반대
.before() / .after()
.insertBefore() / .insertAfter()

css()

$("p").css("fontSize", "25px");   // 카멜케이스
$("p").css("font-size", "25px");  // 하이픈(jQuery)

이벤트

$("button").on("mouseenter mouseleave", function() { });

$("button").on({
  mouseenter: function() { $("#text").append("진입"); },
  click: function() { $("#text").append("클릭"); },
  mouseleave: function() { $("#text").append("이탈"); }
});

$("button").one("click", function() {  // 1회만
  $("#text").append("첫 클릭");
});