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

+ Recent posts