JQuery & Ajax & Json 예제
·
자바스크립트&jQuery
1. 클라이언트: jQuery Ajax 요청GET 요청 (데이터 조회)클라이언트가 서버에서 데이터를 조회하는 GET 요청입니다. 서버로부터 받은 response를 if 조건문으로 처리합니다.$.ajax({ url: "server.php", // PHP 파일 경로 type: "GET", // GET 요청 dataType: "json", // 서버에서 받을 데이터 형식 success: function(response) { // 응답 결과 처리 if (response.status === "success") { console.log("요청 성공:", response.message); console.log("받은 데이터:", response.data); // 성공 시 ..
JQuery ajax 사용법
·
자바스크립트&jQuery
1. GET 요청 예제GET 요청은 서버에서 데이터를 조회할 때 사용됩니다.$.ajax({ url: "https://api.example.com/users", // 요청을 보낼 URL type: "GET", // HTTP 요청 방식 data: { id: 123 }, // 서버로 보낼 데이터 (쿼리 파라미터로 전달) dataType: "json", // 서버로부터 받을 데이터 형식 success: function(response) { console.log("요청 성공:", response); // 성공 시 실행 }, error: function(xhr, status, error) { console.error("요청 실패:", error); // 실패 시 실행 console.er..
jQuery 체크박스 제어 [체크, 해제, 전체선택]
·
자바스크립트&jQuery
jQuery 체크박스 제어 완벽 가이드 - 체크, 해제, 전체선택 구현하기웹 개발을 하다 보면 체크박스를 다루는 일이 매우 빈번합니다. 특히 jQuery를 사용할 때 체크박스를 효율적으로 제어하는 방법을 알아야 합니다. 이 글에서는 jQuery를 사용한 체크박스 제어 방법을 상세히 알아보겠습니다.1. 체크박스 상태 확인하기체크박스의 상태를 확인하는 것은 폼 처리에서 가장 기본적인 작업입니다.단일 체크박스 확인// ID로 확인$("#checkbox_id").is(":checked");$("input:checkbox[id=checkbox_id]").is(":checked");// NAME으로 확인 $("input:checkbox[name=checkbox_name]").is(":checked");2. 체크박스..
Textarea 에 최대 글자 수 남은 글자 수 출력
·
자바스크립트&jQuery
1. 사용법$(document).ready(function() { $('.textarea-count').each(function() { var $textarea = $(this); var $counter = $textarea.next('.character-counter'); var maxLength = $textarea.attr('maxlength'); // 초기 카운터 텍스트 설정 $counter.text('0/' + maxLength); $textarea.on('input', function() { var text = $textarea.val(); var..
로컬스토리 간단한 다크 모드 구현
·
자바스크립트&jQuery
기본적인 코드로만 구현한 다크모드다크모드 토글 버튼을 누를 때마다 로컬스토리지에 현재 모드를 저장해서 불러오는 코드 입니다.css는 일반, 다크모드 따로 분리해서 파일로 만들어주면 조금 더 쉽게 만들 수 있습니다.   예제) 다크 모드 예제 다크 모드 토글
로컬스토리지 사용방법: 저장, 수정, 삭제
·
자바스크립트&jQuery
로컬스토리지 사용방법: 저장, 수정, 삭제로컬스토리지(LocalStorage)는 웹 브라우저에서 데이터를 클라이언트 측에 영구적으로 저장할 수 있는 기능입니다. 이 기능은 페이지가 새로고침되거나 브라우저가 닫혀도 데이터가 유지된다는 장점이 있습니다. 이번 글에서는 로컬스토리지의 저장, 수정, 삭제 방법을 중심으로 설명하겠습니다.로컬스토리지의 주요 특징데이터 영구성: 브라우저 종료 후에도 데이터가 유지됩니다.문자열 형식: 모든 데이터는 문자열로 저장되며, 객체나 배열은 JSON 형식으로 변환해야 합니다.5MB 용량 제한: 각 도메인당 약 5MB의 데이터를 저장할 수 있습니다.도메인 기반: 동일한 도메인 내에서만 데이터가 공유됩니다. 1. 로컬스토리지 기본 메서드1.1 데이터 저장하기로컬스토리지에 데이터를 ..
자바스크립트로 각자리 숫자 합계 구하기
·
자바스크립트&jQuery
김호의 뜬금 없는 과제..var num = 12345;일때 각 자리수를 더한 결과 값을 15가 되도록 출력.문자열로 변환하지말고 작업 처음엔 아래와 같이 코드 작성  그러나 위와 같이 작성시에는 자리수를 알고 계산 해야 하므로 while 문을 이용해서 자리수 제한 없이 계산 가능 하도록 (김호가 작성한 코드와 병합(while문) )
jquery scrollTop(), position()
·
자바스크립트&jQuery
맨위 [맨아래로 이동] 맨 아래 [맨위로 이동] dd 해당 페이지 맨위와 divb(맨 아래)로 애니메이션 이동 확인:http://azit4u.phps.kr/jquery/scrollTop.html
jQuery preventDefault();
·
자바스크립트&jQuery
하이퍼 링크가 작동 하지않는다. $(".roll").click(function(event) { event.preventDefault(); });
jQuery hover(), toggleClass(), toggle()
·
자바스크립트&jQuery
hover(마우스오버시 이벤트,마우스아웃시 이벤트) $("#button").hover( function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); } ); $("#button").hover(function(){ $("#button").toggleClass("hover"); }); 위 두 소스는 같은 결과를 출력 toggleClass() - 선택한 엘리먼트에 클래스가 이미 적용되어 있으면 해당 클래스를 제거 하고 그렇지 않으면 해당 클래스를 적용 한다. toggle(handler0,handler1) - 선택한 엘리먼트에 두개 이벤트 연결 한번 실행 마다 0,1 의 핸들러 함수 실행 $("#button").togg..
만두남
'자바스크립트&jQuery' 카테고리의 글 목록