[TIL] FrontEnd 관련 이것저것 3 (jQuery, Bootstrap)

jQuery
기본 구문은 Selector를 사용하여 DOM 객체를 탐색하고, 반환된 래퍼세트를 통해 함수를 수행한다.
Selector 표현식과 Action 메소드를 조합한 형태로 구문을 작성한다 >> ex) $(selector).action();
jQuery로 DOM을 탐색하기 전에, 웹 브라우저에 문서가 모두 로드되어 있어야 한다.
jQuery는 Document Ready 이후 처리할 수 있는 두 가지 방법을 제공한다.

 

jQuery는 가벼운 자바스크립트 라이브러리로 DOM 조작, Ajax지원 등을 쉽고 빠른 개발을 지원한다.

 

selector 종류	selector 표현방법
All	selector $("*")
ID	selector $("#id")
Element	selector $("elementName")
Class	selector $(".className")
Multiple	selector $("selector1, selecotr2, selecroe3, ...")

jQuery 이벤트
jQuery Event 처리
jQuery Event로 기존 javascript dom event를 간편하게 처리, 연결 가능
이벤트 핸들러를 할당, 해제할 수 있는 통합 메소드를 제공
DOM Element의 이벤트 타입마다 여러 핸들러 할당 가능
click, mouseover 등과 같은 표준 이벤트 타입명을 사용
핸들러의 매개변수로 이벤트 인스턴스를 사용 가능
자주 사용하는 이벤트 인스턴스의 프로퍼티 등에 일관된 이름 제공
하나의 API로 표준 호환 브라우저와 IE 동시 지원

 

 

jQuery Event 기능
click 함수로 클릭 이벤트 처리
bind, on 함수를 이용한 모든 이벤트 처리
unbind, off 함수를 이용하여 이벤트 제거


요약
jQuery는 DOM 탐색을 위하여 CSS에서 사용하는 selector 표현 방식을 사용
jQuery는 선택자를 통해 HTML DOM 계층 구조에 접근하고 제어하는 쉬운 방법을 제공
필터 선택자는 DOM요소를 탐색한 결과에서 원하는 요소를 걸러 내기 위하여 사용
jQuery 래퍼세트 객체에는 내포된 DOM 객체들을 처리하는 다양한 메소드가 있다.

 

순수 자바 스크립트만을 이용하여 DOM 객체 구조를 처리하는 것은 쉽지 않은 작업이다.
jQuery 메소드를 사용하면, DOM객체를 다루는 작업을 간단하게 처리할 수 있다.
jQuery 안티패턴은 성능에 좋지 않은 코딩 패턴을 말한다. 이러한 코딩을 지양하여 성능을 개선한다.
jQuery Effect를 사용하여 화면에서 발생하는 시각 효과를 구현할 수 있다.

 

JavaScript는 DOM에서 발생하는 다양한 이벤트에 반응하여 원하는 작업을 수행할 수 있다. 
jQuery는 기존 JavaScript DOM Event를 간편하게 처리하고 연결할 수 있는 메소드를 제공
bind, delegate, live, on과 같은 함수는 이벤트핸들러를 DOM 요소에 적용하는 jQuery함수이다.
계층구조를 가진 DOM 객체에서 정확한 이벤트 처리를 하려면, 기본이벤트와 이벤트 전파 방식 이해가 필요

 

 

Bootstrap
.container 클래스는 반응형 고정 너비 컨테이너를 제공
.container-fluid 클래스는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 제공

 

Grid System
부트 스트랩의 그리드 시스템은 플렉스 박스로 구축되어 페이지에 최대 12개의 열을 허용한다.
12개 열을 모두 개별적으로 사용하지 않으려면 열을 함께 그룹화하여 더 넓은 열을 만들 수 있다.
클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있다.