jQuery5 5월 15일 (2) Spring - AJAX AJAX(비동기전송) 프론트엔드(html, jsp, thymeleaf, js 등)와 백엔드(Spring Framework) 간 통신 1. 동기(Synchronous) 통신 페이지가 변경되는 전송 방식(새로고침 포함) , , location.href="/..." 2. 비동기(Asynchronous) 통신 js에서만 처리. 페이지는 변경되지 않고, 같은 페이지의 특정 부분을 변경. aja(jQuery). 이 방식을 RESTful방식이라고 함. 참고> SPA(Single Page Application) 하나의 페이지 템플릿만을 사용하여 전체 사이트를 구축하는 방식. AJAX(Asynchrounous Javascript And Xml) 자바스크립트에서 제공하는 비동기 통신용 객체인 XMLHttpRequest를 .. 2023. 5. 15. 3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 + 메서드 체이닝(Method Chaining) 기능들이 연결된 것처럼 연속적으로 처리된다. 동일한 요소에 여러 명령을 차례로 실행할 수 있는 연결 기술 기존명령 + .새메서드() + .새메서드() + ....... $("선택자").css("color", "red").slideUp().slideDown(); 3. 형제 요소 선택 $("선택자").siblings() : 모든 동일 계층 요소 $("선택자").prev() : 선택자 이전요소(하나) 선택요소 위쪽 $("선택자").prevAll() :이전의 모든 요소 $("선택자").prevUntil("지정요소") : 선택자와 지정요소 사이의 모든 요소 (선택자와 지정요소 제외) $("선택자").next() : 선택자 요소의 다음 요소(하나) 선택요소 아래쪽 $.. 2023. 3. 21. 3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) 어제 이어서 slidetoggle 예제 수정 부분 $("#flip2").click(function () { $("#p2").slideToggle("show", function(){ let view = $("#p2").css("display"); if(view == "none"){ $("#flip2").text("토글 - 다운"); } else { $("#flip2").text("토글 - 업"); } }); }); 기본선택자 1) 태그명 - $("div") 2) class - $(".box") 3) id - $("#d1") 선택자 전체 요소 선택자 - $("*") 현재 요소 선택자 - $(this) 속성 선택자 - $("[]") 조합 선택자 태그명과 class 혼합 - $("p.c1") 같은 형제 태그들 .. 2023. 3. 21. 3월 20일 (2) JavaScript - jQuery event, effect ready() html 요소가 모두 로드된 뒤에 처리될 수 있도록 js 코드는 ready() 함수 내에 작성한다. $(document).ready(function() { 여기에 모든 자바스크립트 코드를 작성 }); -> 단축형태 $(function(){ 여기에 모든 자바스크립트 코드를 작성 }); $(document).ready(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 단축 $(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 버튼 jQuery 이벤트 키워드 이벤트는 ~ 할 때, ~될 때 시점을 말한다. 1. 마우스 이벤트 click : 클릭이벤트.. 2023. 3. 20. 3월 20일 (1) JavaScript - 예제, jQuery p 620 light box 예제 사용자 정의 속성 : 사용자(개발자)가 어떤 목적으로 사용하기 위해 임의의 이름으로 작성한 속성. 자바스크립트, CSS에서 활용할 수 있다. 라이트박스 예제에서는 썸네일 이미지와 연결할 본 이미지의 정보를 저장하기 위해 'data-src'라는 임의의 이름으로 작성하였다. html 5에서 새로 생긴 일종의 메타 데이터 속성 data-XXX 사용자 정의 속성은 CSS 부트스트랩을 사용할 때 자바스크립크과 같이 많이 사용된다. 이벤트에서의 this 이벤트가 발생된 html 요소 . html 문서 CSS 문서 @charset "UTF-8"; .row { width: 420px; margin: 0 auto; } .row ul { list-style: none; margin: 0;.. 2023. 3. 20. 이전 1 다음
