이벤트의 위임(event delegation)제이쿼리는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 조상 요소에 단 한 번만 연결하면 동작 가능// 다음 예제는 의 자식 요소 중 에 대해 요소마다 각각 이벤트 핸들러를 직접 연결$(function() { $("ul a").on("click", function(event) { // 의 자식 요소 중 를 클릭했을 때, event.preventDefault(); // 의 클릭시 기본 동작인 링크의 작동을 중지시킴. $("#text").append("이 링크는 동작하지 않습니다!"); });});// 요소마다 직접 등록된 이벤트 핸들러는 현재 존재하는 에만 연결되며, 새롭게..

CSS 스타일 설정.css()선택한 요소의 CSS 스타일을 간단하게 설정선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정$(function() { $("button").on("click", function() { $("p").css("fontSize", "25px"); // 모든 요소의 글씨 크기를 25px로 설정함. $("#text").html($("p").css("fontSize")); // 첫 번째 요소의 글씨 크기를 반환함. });});위의 예제에서 사용된 첫 번째 .css() 메서드는 선택한 요소의 글씨 크기를 25px로 설정하지만 두 번째..

요소의 크기 제이쿼리는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메서드를 제공 inner와 outer 접두사로 inner가 붙은 메서드는 선택한 요소의 크기에 패딩(padding) 영역이 포함된 크기 정보를 반환 접두사로 outer가 붙은 메서드는 패딩 영역뿐만 아니라 테두리(border) 영역까지 포함된 크기 정보를 반환 또한, 접두사로 outer가 붙은 메서드에 인수로 true 값을 전달하면, 패딩과 테두리 영역뿐만 아니라 마진(margin) 영역까지 포함된 크기 정보를 반환 메서드 반환값 .width(), .height() 요소의 크기 .innerWidth(), .innerHeight() 요소의 크기 + 패딩(padding)의 크기 .outerWidth(), .o..

기타 탐색 메서드 DOM 트리에서 요소의 탐색을 위해 사용되는 메서드 .add() : 선택한 요소의 집합에 전달받은 요소를 추가 $(function() { $("button").on("click", function() { $("li").add("p") // 선택한 요소의 집합에 요소를 추가함. .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경 }); }); $(function() { $("button").on("click", function() { $("#list").append("새로 추가된 아이템이에요!"); }); }); 위의 예제에서 알 수 있듯이 .add() 메서드는 선택한 '요소의 집합'에 인수로 전달받은 요소를 추가하는 메서드 하지만 ...