초보자가 알아야 할 jQuery핵심 기능

1. 이벤트 등록

$대상.on("이벤트이름","이벤트리스너");

또는

$대상.단축이벤트메소드(이벤트리스너);

예제: 확인 버튼을 클릭하면 "안녕하세요."메시지를 출력해 주세요.

<script>
  $(document).ready(function(){
    $("#btnCheck").on("click",function(){
      alert("환영합니다."); //일반 이벤트 등록 방법
    });
    //또는
    $("#btnCheck").click(function(){
      alert("환영합니다."); // 단축이벤트 등록 방법
    })
  })
</script>

2. 스타일 설정하기.

설정내용이 하나인 경우

$대상.css("스타일이름", 값);

설정내용이 여러개인 경우

$대상.css({
    "스타일이름":"값"[,
    "스타일이름","값", . . .
    ]
});

jQuery에서 제공하는 css 메소드를 이용하면 스타일을 쉽게 설정가능

예제: 확인 버튼(#btnCheck}을 클럭하면 패널(#panel)으| 외각선(border)을 “4px solid #f00”으로 변경해주세요.

예제: 확인버튼(#btnCheck)을 클릭하면 패널(#panel)의 글자 크기와 색을 각각 16px와 #f00으로 변경해주세요.

정리: jQuery는 수많은 기능(함수)을 가진 하나의 클래스덩어리이며 주로 $()라는 함수 호출을 시작으로 인스턴스가 만들어 진다.

이후 접근연산자(.)로 접근하여 원하는 기능을 사용하게 된다.