1. jQuery 란?
- Javascript Library 중 하나
- 브라우저 호환성 o
- ajax 통신처리 용이
- 참고: http://www.jquery.com
2. jQuery 사용 이점
- 크로스 브라우징: 한번의 코딩으로 모든 브라우저에 적용됨
- 다양한 플러그인: jquery 기반 플러그인들이 무료로 배포되고 있음.
3. jQuery 사용 선언
- jQuery를 사용하기 위해 다운로드 받은 js 파일을 HTML 내에서 참조해야 한다.
<!-- JQUERY --> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/jquery.session.js"></script> <script type='text/javascript' src='${pageContext.request.contextPath}/resources/js/jquery/jquery.cookie.js'></script> <script type='text/javascript' src='${pageContext.request.contextPath}/resources/js/jquery/jquery.hoverIntent.minified.js'></script> <script type='text/javascript' src='${pageContext.request.contextPath}/resources/js/jquery/jquery.dcjqaccordion.2.9.js'></script> <script type='text/javascript' src='${pageContext.request.contextPath}/resources/js/jquery/jquery.form.min.js'></script> <script type='text/javascript' src='${pageContext.request.contextPath}/resources/js/jquery/jquery.validate.js'></script> |
- 위와 같은 방법 외에 src="http://code.jquery.com/jquery-1.11.0.min.js" 라고 설정하여 받아올 수도 있지만 이는 원격지 파일을 참조하는
것이기 때문에 인터넷이 가능한 환경에서만 정상 수행된다.
4. 최상위 객체 '$'
- $ 객체는 jQuery의 모든 기능을 담고 있는 최상위 객체다.
5. 셀렉터 (Selector)
셀렉터 때문에 개발 처음 할 때 고생을 좀 했다. 정리해 보면 쉽게 구별해 쓸 수 있었다. 셀렉터는 좀 알아둬야 할 것같다.
* class 셀렉터: (".class명")
* id 셀렉터: ("#id명")
* 태그 셀렉터: ("태그명")
- 셀렉터 조합
* 여러 셀렉터에 접근: 콤마로 구분
(".class명 , #id명")
* 계층관계 셀렉터 접근: 연속으로 명시 (공백 없이)
(".class명#id명")
* 셀렉터 내 특정 값을 가진 요소에 접근: [요소=값]
$(this).find("input[type=text]").each(function(j,field) { ...... } --> input type이 text인 요소들 각각 을 선택하는 셀렉터 |
__________________________________________________________________________________________________________________________________________________________
** 본 포스팅에 대해 수정해야할 부분이나 추가 의견 등이 있으신 분들은 댓글 달아주세요. 언제나 환영입니다 :)
** 본 포스팅은 아래의 reference 들을 참고하여 내용을 덧붙인 글입니다. 혹시, 문제가 되는 경우 알려주시면 조치하도록 하겠습니다.
** 본 포스팅을 reference 자료로 참고하실 분들은 출처를 꼭 밝혀주시기 바랍니다.
'UX' 카테고리의 다른 글
[WebSquare5] 웹스퀘어5 연동 (0) | 2017.04.29 |
---|---|
AJAX 통신 기초 (0) | 2017.02.26 |
Javascript 기초2 (0) | 2017.02.26 |
Javascript 기초 (0) | 2017.02.26 |
[Error] maven 프로젝트 checkout 후 JSP 파일 에러 (0) | 2017.01.29 |