hoon's bLog

이펙트 효과의 지연 설정 .delay() 메서드는 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정 // 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제 $(function() { $("#startBtn").on("click", function() { // id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고 // 1초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함. $("#divBox").fadeOut(500).delay(1000).fadeIn(2000); }); }); 이펙트 효과의 중지 제이쿼리에서는 .stop() 메서드와 .finish() 메서드를 사용하여 실행 중인 이펙트 효과를 중지 .stop() : 선택한 요소에서 실행 중인 모..

요소의 표시와 숨김 .hide() 메서드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정 즉, 이렇게 숨겨진 요소는 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라짐. $(function() { $("#showBtn").on("click", function() { $("#text").show(); // id가 "text"인 요소를 나타나게 함. }); $("#hideBtn").on("click", function() { $("#text").hide(); // id가 "text"인 요소를 숨김. }); }); // CSS의 visibility 속성의 속성값을 hidden으로 설정해도 HTML 요소 숨기기 가능 // 하지만 이때는 보이지만 않을 뿐 숨겨진 요소는 여전히 웹 페이지의..

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

이벤트의 개념 이벤트(event)란? 오늘날 웹 페이지는 사용자가 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작을 수행 위에서 예를 든 사용자의 동작들이 모두 이벤트(event)를 발생 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미 이벤트 핸들러(event handler) 웹 페이지에서는 수많은 이벤트가 계속해서 발생 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행 $(function() { $("button").on..

클래스 설정 HTML 요소의 class 속성은 여러 개의 class 값을 가짐 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 가능 클래스 설정관련 메서드 설명 .addClass() : 선택한 요소에 인수로 전달받은 클래스를 추가함. .removeClass() : 선택한 요소에서 인수로 전달받은 클래스를 제거함. .toggleClass() : 선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함. .hasClass() : 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함. $(function() { $("#addBtn").on("click", function() { // id가 "first"와 "third"인 요소에 "..

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() 메서드는 선택한 '요소의 집합'에 인수로 전달받은 요소를 추가하는 메서드 하지만 ...