728x90 반응형 jQuery12 [jQuery] 애니메이션이나 효과를 중지 시키는 stop() 개요 이전 포스팅에서 아래로 슬라이드와 위로 슬라이드, 트리거 사용을 해보았는데요.이번에는 슬라이드 같은 애니메이션을 사용할 때 애니메이션을 나는 그만보고 싶다. 혹은 웹게임을 만들 때, 움직이는 몬스터들에게 꼼짝 못 하게 하는 기능 등 이런저런 상황에서 사용될 수 있는 제이쿼리의 stop() 메서드에 대해서 알아보도록 하겠습니다. 동작 화면 동작하는 이미지는 위와 같습니다.아래로 슬라이드를 눌러서 슬라이드 애니메이션이 작동중일 때,슬라이드 멈추기 버튼을 누르면 작동하는 중간에 애니메이션이 멈추게 됩니다. 코드 이전에 사용했던 슬라이드 애니메이션을 활용하여 stop() 메서드를 사용해 보겠습니다. 슬라이드 멈추기아래로 슬라이드위로 슬라이드Hello world! 슬라이드 멈추기 버튼 아래로 슬.. 2023. 3. 31. [jQuery] 슬라이딩 애니메이션 예제: 부드러운 슬라이딩 효과로 콘텐츠를 전환하는 방법 설명 jQuery의 슬라이드 효과를 사용하면 좀 더 다채로운 웹 페이지를 만들 수 있습니다.이 포스팅에서는 jQuery의 슬라이드 애니메이션에 대해서 자세히 알아보도록 하겠습니다. 먼저, jQuery에는 3가지 슬라이드 효과를 줄 수 있는 메서드가 있습니다.3가지 슬라이드 효과의 종류는 아래와 같습니다. slideDown()slideUp()slideToggle() slideDown은 아래로 슬라이드 되는 것이고, slideUp는 위로 슬라이드 되는 것입니다.slideToggle는 클릭할 때의 상태에 따라 위로 혹은 아래로 슬라이드 됩니다. $(selector). slideToggle(speed, callback); 문법은 위와 같이 사용합니다. speed 위치에는 "slow", "fast" 또는 밀리초가.. 2023. 3. 9. [jQuery] 정규식을 활용한 이메일과 비밀번호 유효성 검사 소개 이메일과 비밀번호를 입력하는 웹페이지가 있다는 가정하에 양식을 제출하기 전에 jQuery를 사용하여 사용자 입력의 유효성을 검사한다고 가정해 보겠습니다. 특히 사용자가 특정 기준을 충족하는 유효한 이메일 주소와 암호를 입력했는지 확인하려고 합니다. 이를 위해 양식에서 제출 이벤트를 수신하는 jQuery 함수를 작성한 다음 이메일 및 비밀번호 입력 필드의 값을 확인합니다.필드가 비어 있거나 지정된 기준을 충족하지 않는 경우 함수는 오류 메시지를 표시하고 양식이 제출되지 않도록 합니다. 코드 $(document).ready(function() { // 양식에서 제출 이벤트 수신 $('form').submit(function(event) { // 이메일 및 비밀번호 입력 필드의 값 가져오기.. 2023. 3. 3. [PHP/jQuery] 간단한 실시간 채팅 애플리케이션 예제 설명 이 예제는 PHP와 jQuery를 이용하여 실시간으로 채팅하는 웹 애플리케이션을 만드는 것입니다.이 예제에서는 PHP를 사용하여 백엔드를 구축하고, jQuery를 사용하여 프런트엔드를 처리합니다.이 예제는 AJAX(Asynchronous JavaScript and XML) 기술을 사용하여 비동기적으로 데이터를 전송합니다. 구현 순서 먼저, 데이터베이스에 연결하여 테이블을 생성합니다. 이 테이블에는 사용자 이름, 메시지, 날짜 및 시간이 저장됩니다.PHP를 사용하여 서버 측 스크립트를 작성합니다. 이 스크립트는 데이터베이스와 연결하고 새 메시지를 추가하거나 기존 메시지를 가져올 수 있도록 합니다.클라이언트 측에서는 jQuery를 사용하여 채팅 창과 입력란, 그리고 메시지를 추가하는 버튼을 만듭니다.A.. 2023. 2. 25. 이전 1 2 3 다음 728x90 반응형
