jQuery9 jQuery(페이드 효과)_2024-07-30 페이드(fade) 효과제이쿼리에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현합니다.이러한 페이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같습니다.1. .fadeIn()2. .fadeout()3. .fadeTo()4. .fadeToggle() 페이드 인(fade in)과 페이드 아웃(fade out).fadeIn() 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeOut() 메소드는 서서히 나타나게 합니다.예제$(function() { $("#fadeInBtn").on("click", function() { $("#divBox").fadeIn(); // id가 "divBox"인 요소를 점점 나타나게 함. }); $(.. 2024. 7. 30. jQuery(jQuery.fx 객체)_2024-07-29 jQuery.fx 객체제이쿼리의 jQuery.fx 객체는 이펙트 효과가 구현되는 방법을 제어하는 다양한 프로퍼티를 가지고 있습니다.1. jQeury.fx.speeds2. jQeury.fx.interval3. jQeury.fx.off jQuery.fx.speeds 프로퍼티jQuery.fx 객체의 speeds 프로퍼티는 "slow", "normal", "fast" 값을 가지고 이펙트 효과의 속도를 나타냅니다.제이쿼리에서 제공하는 jQuery.fx.speed 프로퍼티의 기본값은 다음과 같습니다.프로퍼티 값밀리초(milisecond)fast200normal400slow600이러한 속도의 기본값을 speeds 프로퍼티를 이용하여 변경할 수도 있습니다.예제$(function() { $("#toggleBtn").. 2024. 7. 30. jQuery(슬라이드 효과)_2024-07-25 슬라이드(slide) 효과제이쿼리에서 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현합니다.이러한 슬라이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같습니다.1. .slideUp()2. .slideDown()3. .slideToggle() 슬라이드 업(slide up)과 슬라이드 다운(slide down).slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여줍니다.또한, .slideDown() 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여줍니다.예제$(function() { $("#slideUpBtn").on("click", function() { $("#divBox").slideUp(); /.. 2024. 7. 29. jQuery(jQuery 기본 및 DOM 조작 가이드)_2024-07-29 선택자와 이벤트1) 기본 선택자$("p") : 모든 태그 선택 $("#test") : id가 "test"인 요소 선택 2) 이벤트click() : 클릭 이벤트 발생 시 실행dblclick : 더블 클릭 이벤트mouseenter : 마우스가 요소 위로 이동할 때mouseleave : 마우스가 요소 밖으로 이동할 때mousedown : 마우스 버튼을 누를 때hover() : 마우스가 요소 위로 이동하거나 벗어날 때focus() : 요소가 포커스를 얻을 때 (주로 input 요소)blur() : 요소가 포커스를 잃을 때 복잡한 선택자1) 하위 요소 선택.list2 > li[class*='list']:class 속성에 "list"를 포함하는 .list2의 모든 li자식 요소 선택.list1 > li[class .. 2024. 7. 29. jQuery(요소의 복사 및 삭제)_2024-07-25 요소의 복사다음 메소드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성할 수 있습니다.1. .clone() .clone() 메소드.clone() 메소드는 선택한 요소를 복사하여 새로운 요소를 생성합니다.예제$(function() { $("button").on("click", function() { // id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함. $("#firstItem").clone().appendTo("#list"); });}); 다음 예제는 앞서 살펴본 .appendTo() 메소드의 예제입니다.예제$(function() { $("#firstBtn").on("click", function() { .. 2024. 7. 25. jQuery(getter 메소드와 setter 메소드)_2024-07-25 대표적인 getter 메소드와 setter 메소드요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 getter 메소드와 setter 메소드는 다음과 같습니다..html()해당 요소의 HTML 콘텐츠를 반환하거나 설정함..text()해당 요소의 텍스트 콘텐츠를 반환하거나 설정함..width()선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함..height()선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함..attr()해당 요소의 명시된 속성의 속성값을 반환하거나 설정함..position()선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메소드).val()요소의 값을 반환하거나 설정.. 2024. 7. 25. 이전 1 2 다음
