반응형
1. JQuery 애니메이션Jquery에서 애니메이션을 사용하는 방법으로 DOM 요소를 쉽게 선택하고 애니메이션 효과를 적용할 수 있는 강력한 기능을 제공합니다. 기본적인 애니메이션 메소드들은 아래와 같습니다..show(): 요소를 보이게 함.hide(): 요소를 숨김.fadeIn(): 요소를 서서히 보이게 함.fadeOut(): 요소를 서서히 숨김.slideDown(): 요소를 아래로 슬라이드하여 보이게 함.slideUp(): 요소를 위로 슬라이드하여 숨김2. 커스텀 애니메이션 사용 예제아래 JQuery를 사용하여 다양한 애니메이션 효과를 적용할 수 있습니다. Fade In/Out Slide Up/Down Animation GitHub - jQuicker/jQ..
1. jQuery 기본 설정JQuery를 사용한 이벤트 처리는 웹 페이지에서 사용자 상호작용을 다루는 데 매우 유용하며, 다양한 이벤트를 쉽게 처리할 수 있는 메서드를 제공합니다. 먼저 jQuery를 페이지에 포함해야 합니다. 클릭하세요 이곳에 텍스트가 표시됨 2. 클릭 이벤트 처리버튼 클릭 시 텍스트를 변경하는 예제입니다.3. 마우스 이벤트 처리마우스 오버 및 마우스 아웃 이벤트를 처리합니다.$(document).ready(function () { $("#myButton").mouseover(function () { $(this).css("background-color", "yellow"); }) .mouseout(function ()..
1. jQuery DOM 조작jQuery는 HTML 문서 탐색, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 할 수 있는 Javascript 라이브러리로, 아래는 jQuery의 주요 DOM 조작 메서드와 예제입니다.2. jQuery 기본 설정먼저, jQuery를 사용하기 위해 HTML 문서에 jQuery 라이브러리를 포함시켜야 합니다. Hello, World 제목 변경 아이템 추가 3. jQuery DOM 조작 예제텍스트 변경버튼 클릭 시 제목을 변경합니다.$(document).ready(function () { $("#changeTitle").click(function () { $("#title").text("제목이 변경되었습니다");..
1. HTML 문서 구조먼저 JQuery를 사용할 HTML 문서의 기본 구조부터 작성해봅시다. JQuery 버튼 클릭시 텍스트 표시 여기에 텍스트가 표시됩니다 클릭 위 예제에 JQuery 버튼 클릭시 텍스트 표시 여기에 텍스트가 표시됩니다 클릭 3.메서드jQuery 다양한 메서드를 사용해 HTML 요소를 조작할 수 있습니다.텍스트 변경$("#ThisText").text("새로운 텍스트"); // 텍스트 변경HTML 변경$("#StrongText").html("강조된 텍스트");CSS 스타일 변경$("#background").css("background-color", "yellow"); // 배경색 변경4. 이벤트 처리jQuery를 사용하면 HT..
2006년 칸 아카데미 소속의 응용 프로그램 개발자 존 레식(John Resig)은 자바스크립트 라이브러리, HTML 문서 탐색과 DOM 조작, 이벤트 처리, 애니메이션, AJAX 요청을 간편하게 수행하는 JQuery를 발표합니다. 제이쿼리는 MIT 라이센스를 가진 자유 오픈 소프트 웨어로 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기 등 Ajax 환경에서 개발을 더욱 쉽게 할 수 있도록 도와줍니다. 1. jQuery의 버전안정화 버전: jQuery의 최신 안정 버전은 2023년 기준 3.x.x 시리즈주요 변화: 성능 개선, 버그 수정, 오래된 기능 제거 등2.jQuery의 장점간편한 문법: 간편한 문법 처리로 DOM 조작과 이벤트 처리가 쉽고 빠르게 개발 가능크로스 브라우저 호환성: 다양..