2022년 3월 3일 목요일

이전영·2022년 3월 3일
0
post-thumbnail

jQuery 문법 정리.

앞서 ShopMiniMall을 JSP/Servlet을 이용하여 만드는 프로젝트를 진행중이다.
메인화면, 로그인, 로그아웃, 마이페이지, 상품자세히보기 주문화면,장바구니를 구현하는 프로젝트이고, 현재 나는 메인화면 로그인 마이페이지 상품자세히보기까지 구현했다. 오늘, 금, 토, 일 까지 로그아웃, 주문화면, 장바구니, 로그인에 OAuth적용하기를 끝내야한다. 다음주에는 해당 프로젝트의 자바스크립트로 작성된 코드를 JQuery로 바꾸는 작업을 한다.

우선 이틀간 배운 JQuery에 대해 간단히 작성해 보겠다.

  • jQurey
    : JavaScript의 프레임 워크( or 라이브러리)
    여기서 짚고 넘어가야할 것 프레임 워크와 라이브러리의 차이점이 무엇인가?
  • 프레임 워크란?
    반 이상이 미리 구축된 application이다. 예를들어 Spring frame work. 뼈대가 이미 구축되어있기때문에 해당 프로젝트를 진행중에 다른 사람이 진행하더라도 크게 무리없이 바로 이어서 진행할수있는 장점이 있다. 정해진 뼈대 속에서 기능을 추가하여 사용한다.
  • 라이브러리란?
    외부에서 제공된다는 공통점이 있다.
    프레임워크와는 달리 틀이 정해져 있지않아서 사람에 따라 결과가 크게 달라질수있다. 다양한 형태로 개발이 된다는 점에서 프레임워크와는 다르고, 자유로운 틀속에서 기능을 추가하며 사용한다.

jQuery란 Jdbc -> mybatis 관계처럼 javascript와 관계를 이룬다.

  • jQuery의 실체 : *.js(자바스크립트 파일)

jQuery의 사용법은 CDN방법과 직접 다운로드 방법이 있는데, 홈페이지에서 찾으면 된다.
compressed파일은 배포용으로 모든 코드를 한줄로 작성해 용량이 3분의 1가량 줄어들게 만든다.
uncompressed는 개발용으로 가독성이 좋다. 먼저 uncompressed파일을 받아 개발하고 한줄로 만들어 배포하는 방식을 이용하면 되겠다.

자바스크립트 객체와 jQuery객체를 구분하는 방법은 콘솔창에서 $를 못찾으면 jQuery 인식이 안된것이다.
또한 자바스크립트객체와 jQuery객체는 각자의 함수와 속성만을 가지고 있고, 교차되어 서로의 함수와 속상을 사용할수없다.
자바스크립트 객체 document에 $를 붙인 $(document)가 jQuery의 객체가 된다.

ready함수
$(document).ready()=window.onload()둘이 같은 뜻을 가진다.
문서가 준비되면 실행해라 = > DOM접근 가능함.

jQuery
-basic(직접 다운로드해서 사용, CDN방법)
-ready함수
-selector
CDN방식으로 앞으로 사용.
선택자:* ==> 모든태 그를 의미함.

$(document).ready(function(){
    	 var s = $("*");
    	 console.log(s);
    	 $("*").css("color","red");
    });

(basic, basicfilter, child_filter,form_filter,content_filter)
1차 필터를 배움.
-traversing
2차 필터라고 한다.
(filtering, misc(miscellaneous), tree)
-utility
(each
데이터, eachDOM, map데이터)

-event
(event처리, trigger, 동적 이벤트 처리.)

배운게 졸라 많다.. 한번씩 쓱 보고 외우자. 오늘은 여기까지.. 화이팅
자바스크립트 참고 홈페이지
https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started
모질라.
jQuery API 확인하는 홈페이지
https://api.jquery.com/category/miscellaneous/

profile
개발자 3년차

0개의 댓글