Front-End (6) 썸네일형 리스트형 jQuery : focus(), blur() 이벤트 focus() : 마우스 포인터가 해당 요소에 위치할 때(포커스가 되었을 때) 발생 blur() : 포커스를 잃었을 때 발생 1. input 태그에 focus(), blur() 이벤트 등록 ID : PW : input 태그에 포커스가 발생했을 때 입력칸을 분홍색으로 바꾸고 포커스를 잃으면 원래대로 흰색으로 바꾼다. - 결과 jQuery 나중에 생성된 요소에 이벤트 등록 $("#btn").on("click",function(){ $("body").append(" click "); $("body").append(" click2 "); }); // 위에 이벤트로 생성된 class='newBtn' 인 버튼에 이벤트 등록 $('.newBtn').click(function(){ alert('click!!'); }) 이렇게 이벤트를 등록하게 되면 class='newBtn'인 버튼('click' 버튼)을 클릭했을 때 alert 창은 뜨지 않는다. 최초에 html을 읽을 때 class='newBtn'인 버튼이 없기 때문이다. 즉, 나중에 생긴 요소는 제어하기 힘들다는 단점이 있다. 그러면 나중에 생긴 요소에 이벤트를 걸 때는 어떻게 해야할까? 1. onclick 활용 $("#btn").. jQuery 이벤트 등록, 삭제 jQuery 에서는 이벤트를 등록하고 실행할 수 있다. jQuery에서 사용되는 이벤트는 종류가 굉장히 많다. 많이 사용되는 몇가지 이 외에 다른 이벤트를 알고싶다면 API 사이트 에서 events 카테고리를 참고하면 된다. ' 이벤트 등록 ' 이벤트 등록 방법 1. $(selector).추가할이벤트(실행할함수) 2. $(selector).on("추가할 이벤트",실행할 함수) 1. $(selector).click(function(){}); .click() : 추가할 이벤트 function(){} : 이벤트가 실행되면 실행할 함수 //hover = mouseenter + mouseleave $("#overzone").hover( function(){ $(this).css({"background-color".. jQuery 기초 빠르게 훑기 jQuery 란? JavaScript의 Library(라이브러리) 이다. 라이브러리는 자주 사용하거나 사용자가 직접 구현이 어려운 기능을 만들어 모아놓은 프로그램으로 JS 의 라이브러리에는 jQuery, RequireJS, Prototype, AngluarJS, Backbone 등이 있다. 굳이 jQuery를 왜 사용할까? 1. 사용이 편리하다. 2. Cross Browsing - java는 jdk를 깔아서 사용했는데 js는 따로 설치하는 것 없이 알아서 돌아갔다. 즉, 브라우저에 js해석기가 붙어있다는 뜻이다. 그런데 이 해석기가 브라우저의 종류나 버전마다 다른 경우가 있어 불편하다. - jQuery는 내부적으로 브라우저마다 설정 처리를 해놓았기 때문에 사용자가 신경 쓸 필요가 없다. 3. 다양한 Pl.. AJAX] 로그인 1. 프로젝트 생성, 기본 설정 스프링과 같음 - project pacets , pom.xml 버전 - web.xml 인코딩 - server path 2. pom.xml 에 AJAX 통신을 위한 라이브러리 추가 메이븐 리포지터리 Maven Repository: Search/Browse/Explore NiFi Kerberos User Service API Last Release on May 26, 2022 mvnrepository.com jackson 이라고 검색하면 이 두개를 pom.xml 에 넣어준다. 버전은 둘 다 2.11.0 으로 했음! 오늘은 비동기 방식의 데이터 전송을 보기 위해 간단한 코드 작성 하고 log를 찍어 데이터 값이 어떻게 들어오는지 확인해본다. home.jsp - 동기방식 form.. AJAX] Ajax란? ??? AJAX (Asynchronous JavaScript And Xml) : 자바스크립트와 xml을 비동기 방식으로 통신한다. 우리가 기존에 해왔던 방식은 동기화 방식. 때문에 어떤 페이지를 요청했을 때 응답이 오는 동안 응답만을 기다린다. 또, 기존 입력된 내용을 기억하지 못한다. 반면, 비동기 방식은 요청을 해놓고 응답이 오는동안 다른 일을 자유롭게 할 수 있다. 기존 입력된 내용을 기억한다. 실생활 예시) 양키통닭에 시금치 치킨을 먹으러 갔을 때 처럼 식당 예약 종이에 이름과 전화번호를 적어서 예약 요청을 하면 내 차례가 되었을 때 전화를 해줬는데 이게 바로 생활 속의 비동기화 구만,, 즉, 예약종이에 이름, 번호 적어둠( 예약 요청 ) -> 전화 올 때까지 카페를 가거나 근처 가게 구경하거나 다른 일.. 이전 1 다음
