[jQuery] jQuery : JavaScript 라이브러리 기초 - 1

jQuery는 요즘 잘 사용하지 않지만, 유지 보수 팀에 들어가게 되면 사용할 수 있는 기초 지식.

 

👉 jQuery의 특징

     크로스 플랫폼을 지원 (당시 브라우저 춘추전국시대 때, 표준이 없을 때도 브라우저에 상관없이 표준화)

     JavaScript에서 사용하던 코드를 축약해서 사용할 수 있다.

     배포용으로 만들게 되면 더 공유하기 쉬워지기 때문에, 더 보편화되어 있다.

     경량 라이브러리이기 때문에, 복잡한 화면 관리 시 분리 등이 더 용이하다.

     https://trends.builtwith.com/javascript/javascript-library

     jQuery는 트렌디하지 못하다, 하지만 아직 사용하는 회사가 있기 때문에, 알고는 있어야 한다.

     ActiveX 같은 경우에는 익스플로러만 가능했었던 시절이 있었다.

     

• DOM 탐색과 조작
• 이벤트 바인딩과 처리
• Ajax 프로그래밍
• 다양한 효과 제공

   

👉 Ajax

     서버와의 통신을 지원함.

     

👉 jQuery 다운로드

     jquery.com/

     1. 직접 홈페이지에서 다운로드

     2. 주변에 있는 네트워크 상에서 Jquery를 다운로드 받을 수 있는 CDN 방식

     3. Git에서 가져오는 방법

     API를 보고, 사용하는 것이 좋다.

     api.jquery.com/

     

👉 jQuery 기본 구문

     기본 구문은 Selector를 사용하여, DOM 객체를 탐색하고, 반환된 래퍼세트를 통해 함수를 수행.

     $(selector).action() 형태로 구문을 작성한다.

     DOM을 탐색하기 전에 문서가 모두 로드되어있어야 한다.

방법 1	방법 2
$(document).ready(function(){ });	$(function(){ });

 

👉 jQuery의 Selector

    $             ("h1") .             ss("color", "blue");

  jQuery        selector            function

 

👉 Selector의 종류

선택자	특징
*	all selector
element	element selector
#idname tagname#idname	id selector 한 번 찾으면 이후는 탐색하지 않기 때문에, DOM 객체를 가장 빨리 탐색할 수 있다.
.classname tagname.classname	class selector
en1, en2, en3	multiple selector

selector 종류	표현 방법
Child Selector	$("parent > child") 바로 아래 후손 하나
Decendant Selector	$("ancestor descendant") 모든 후손
Next Adjacent Selector	$("previous + next") 바로 다음의 형제수준의 요소 하나
Next Siblings Selector	$("previous ~ siblings") 형제 수준의 모든 요소

 

👉 jQuery란?

    자바스크립트 라이브러리

 

👉 라이브러리와 프레임워크의 차이점

라이브러리	프레임워크
다양한 함수들을 제공해주는 것 많은 기능들 중에서 필요한 부분을 가져와서 사용한다. 같은 일을 하지만, 더 적은 코드로 수행할 수 있도록 한다.	뼈대, 템플릿을 제공해주는 것 프레임워크를 기반으로 해서 구동을 한다.

 

👉 jQuery의 기본 문법

    Element Object를 선택하기 위해서 선택자를 사용.

    NodeList에 있는 노드를 return.

// let $ = jQuery


$(선택자).action(할일);

            action = 이벤트 함수

$(선택자).action(function(  ) {

});

     ElementList, NodeList에 해당하는 배열을 리턴하기 때문에, 그 리턴한 것에 대해서 실행하자는 내용이다.

 

👉 jQuery

     스크립트 양이 많고, 이미지가 많고, 로딩해야 할 내용이 많을 때,

     스크립트 코드를 아래에 두어서 속도를 빠르게 한다.

 

👉 CDN

     content delivery network

     CDN 스크립트 코드를 맨 위에 써준다.