$('.example-class').on('click', function() { $('.example-class').toggleClass('active'); }); 위 코드는 만약 example-class라는 클래스가 여러 요소에 정의되어 있을 경우 모든 요소에 active 클래스가 추가됩니다. 만약 모든 요소가 아니라 선택된 요소에만 클래스를 추가하고 싶다면 아래 처럼 this 키워드를 사용하면 됩니다. $('.example-class').on('click', function() { $(this).toggleClass('active'); }); this는 CSS 클래스가 아니라 JavaScript 키워드이기 때문에 ' '가 필요 없습니다.
$("#name") //id 명이 name 인 엘리먼트 호출 $(".name") //class 명이 name 인 엘리먼트 호출 $(".name > ul > li ") // class 명이 name 아래에 ul 아래의 li 호출 $(".son").parent() //class 명이 son 인 엘리먼트의 부모(위의 속성) 호출 $(".son").next() //class 명이 son 인 엘리먼트의 다음에 있는 형제속성 호출 (이전에 없으면 호출 안됨) $(".son").prev() //class 명이 son 인 엘리먼트의 이전에 있는 형제속성 호출 (다음에 없으면 호출 안됨) $(".son").siblings() //class 명이 son 인 엘리먼트의 형제속성 모두 호출
jQuery를 사용한 모든 웹페이지는 다음 코드로 시작합니다. $(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다. jQuery 이벤트 메서드 중 하나입니다. 이 메서드는 비슷한 기능을 수행합니다. 고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있습니다. 반면에 jQuery의 이벤트 메서드는 표준 이벤트 모델이나 인터넷 익스플로러 이벤트 모델과 마찬가지로 이벤트로 여러개의 함수를 연결할 수 있습니다. 아래의 예제는 실행하게되면 문서가 준비되는 순간 경고창 세 개가 연달아 표시됩니다. $(document).ready() 메서드는 굉장히 많이 사용되므로 jQuery에서는 간단하게 사용할 수 있는 형태를 제공합니다.