[jQuery] 제이쿼리란? jQuery 설치

Jquery

• jquery.com/로 접속
• jQuery는 이벤트 위주의 언어이다
• jquery는 책이 따로 없다  홈페이지에 내용이 잘되어 있다

Download jQuery를 클릭한다

버전이 2개가 존재하는데

1.x 모든 브라우저가 돌아가지만 2.x 버전은 구버전은 호환이 안되는 것들이 존재한다

development jQuery를 다운한다

production은 JavaScript 크기를 줄이기 위해서 공백을 모두 없애 파일 크기가 작지만

development는 공백을 모두 표시해서 파일 크기가 거진다

하지만 production을 사용 시 에러가 발생 가능성 존재해서 development를 사용

# jQuery 설치

최근 만들었던 네이버 영화의 테이블 Movie 테이블에

배우 추가와 영화 추가 버튼을 통해 데이터를 입력해 본다

WebContent 안에 resouce란 폴더를 생성한다 그 후 리소스 폴더 안에 js라는 폴더를 생성한다

js 폴더 안에 jQuery 파일을 넣는다

URL로 폴더에 접근을 하면 jQuery를 볼 수 있다

# Web Resource 파일

• Dynamic Type File
• • 동적인 자원
  • jsp
• Static Type File
• • 정적인 자원들
  • ex) 이미지, css, js(JavaScript)
  • resource란 폴더 내에 넣어두는 것이 일반적
  • 업체마다 조금씩 다르다

# jQuery 추가

jQuery를 추가 후 버튼을 생성하기 위해 JSP파일에서 버튼을 추가한다

그리고 위쪽으로 가서 Title 밑에 script를 추가해 준다

그리고 스크립트 구문을 추가 후 다음과 같이 jQuery를 작성한다

$(document(현재 문서).ready(준비가 되었다면);

을 뜻하는 키워드이다

레디 안의 펑션은 모두 저런양식으로 작성을 해주면 된다

# 간단한 jQuery 양식

window는 브라우저를 나타내고 document는 현재 문서를 나타낸다

alert는 화면에 알림창이 뜨지만 console.log는 화면에 실행에 방해되지 않으므로 자주 사용된다

크롬 개발자 도구의 console에서 확인 가능

위와 같이 알림창이 뜨고 개발도구의 콘솔창을 본다면

아래와 같이 내용이 뜬다

이제는 버튼 클릭시 행동을 취할 수 있는데 아래와 같이 작성한다

$()에서 이름을 지정시 #을 붙여준다 (html 요소의 name)