madori4 madori4

Express에서 jQuery 사용할 수 있는 방법은 두가지이다 1) Static 폴더에 jquery 넣고 사용한다. 스프링과 같은 방법으로 static 등 폴더에 넣고 경로 지정해 사용한다. 2) npm으로 설치한다. 따로 jQuery 파일 가지고 있을 필요 없이 명령어만으로 설치 가능해 편리한 장점이 있다.npm 명령어 통해 jquery 설치 path 모듈 추가해 static 경로 지정할 때 추가한다. path 모듈의 join 메소드를 사용해야 하기 때문.node_modules 폴더에 모듈들이 설치되어 있음 확인할 수 있다.다음과 같이 경로 지정해주면jQuery 사용할 수 있다.

체크박스 예외처리에 이어 전체선택, 해제 예제 포스팅 다음과 같이 jsp파일에 체크박스 하나 추가 후 id 부여한다. 이후 다음과 같이 Script 코드 작성 $("#checkAll").click(function(){ // 전체 선택 버튼 클릭시 var checked = $(this).prop("checked"); if(checked){ $(":checkbox[name=checkbox]").prop("checked", true); } else { $(":checkbox[name=checkbox]").prop("checked", false); } }); prop은 property의 약자로 속성을 의미하고, 태그의 attr 값들의 getter / setter 역할을 수행한다. 다음과 같이 checked 변수..

체크박스, 셀렉터를 함께 포스팅했던 예제가 있다. 그 예제에서는 아무것도 체크하지 않고 요청을 하는 경우 예외처리를 위해 서블릿에서 getParameterValues를 통해 받은 String 배열이 null인지 확인하는 절차가 필요했다. 공부하면서 이를 jQuery를 통해 서블릿에 요청 보내기 전에 확인할 수 있는 방법에 대해 포스팅 좌상단 '선택 사진 삭제' 버튼에 클릭이벤트를 작성한다. 작성자는 id를 delete로 해두었기 때문에 $("#delete").click 을 호출한다. $("#delete").click(function(){ if( $("input[type=checkbox][name=checkbox]:checked").length == 0 ){ alert("삭제할 항목을 하나이상 체크해요."..

앞서 jQuery 사이트에서 이벤트 동작법에 대해 학습했다면 코드를 통해 키보드 이벤트 실습. ※모든 jQuery 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문) Vacations jQuery Travels - Trip Planner Packages Hawaiian Vacation $399.99 per ticket Tickets: Total Price: $399.99 Call us at 555-25937 to make a reservation tod..

앞서 포스팅한 클릭 이벤트 제어와 마찬가지로 마우스와 키보드의 동작에 대해 학습법 포스팅. 코드 작성법은 거의 유사하기 때문에 사용 빈도 높은 이벤트와 동작 방법에 대해 알아보자. 1. http://jquery.com 접속 2. API Documentation 클릭3. 마우스 내리면 이벤트에 대한 문서들 나온다. Mouse Events 클릭4. .mouseenter() 클릭샘플 코드 맨 아래에 데모창에 마우스를 움직이면 동작법의 차이에 대해 파악할 수 있다. mouseover / mouseout : 해당 공간 내에서 움직여도 숫자가 증가됨. 이벤트 인식이 중복된다. mouseenter / mouseleave : 해당 공간에 한번 들어가면 나올때까지 한번만 인식됨. 이벤트 인식을 정확히 한다. mouseo..

버튼을 클릭했을 때 p태그가 나타나도록 하기 이전 포스팅과 같은 html파일이고 모두 같은 button 태그로 등록되어 있다. 이 버튼들을 클릭했을 때 가격을 보여주고 싶다면 해당 태그들에 클릭이벤트를 주면 된다. 다음의 코드처럼 말이다. ※모든 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문) Vacations Vacation Packages jQuery Travels Hawaiian Vacation Comments on this deal: "Ama..

특정 태그를 기준으로 Element를 첨부하고 싶을 때 Selector와 다음 함수들을 사용한다. 코드 먼저 보도록 하자. ※모든 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문) Vacations Vacation Packages jQuery Travels Hawaiian Vacation Comments on this deal: "Amazing Deal!" "Can't wait to take this trip!" GET PRICE Call us at ..

문서에 같은 태그가 여러가지 있는 경우 class나 id를 사용해 제어할 수도 있지만 jQuery에서는 빈번하게 사용되는 패턴의 탐색들에 대해 미리 정의해놓았다. 그중 : 필터를 통해 여러 방법으로 태그에 접근하는 PSEUDO Classes와 그것을 보완하기 위해 나온 DOM Traversing에 대해 포스팅. 1) 특정 구간의 처음과 끝 태그에 접근하는 방법. 'destinations'를 id로 가지고 있는 태그의 li 태그 중 첫번째와 마지막 태그에 ':first', ':last' 키워드를 통해 접근할 수 있다.2) 마찬가지로 ':odd'와 ':even' 키워드로 홀수, 짝수 태그에 접근할 수 있으며, 이때 처음 시작하는 태그의 index가 0이기 때문에 짝수부터 시작한다는 점에 유의하자. 다음과 같..