[JQuery 요약 정리] 1. JQuery 기본

1. JQuery 기본

1) JQuery 개요

- JQuery: 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리

2) 목적

- 문서 객체 모델(Document Object Model)과 관련된 처리를 쉽게 구현

- 일관된 이벤트 연결을 쉽게 구현

- 시각적 효과를 쉽게 구현

- Ajax 어플리케이션을 쉽게 개발

3) 사용 방법

- 다운로드 후 스크립트 내에서 참조

다운로드 URL: https://jquery.com/download/

참조코드: <script src="경로\jquery-3.3.1.js"></script>

- 웹을 통해서 참조(CDN 방식)

참조 URL 받는 곳: https://code.jquery.com/

4) 기본 형태

- $('선택자').함수명();

5) $(document).ready()

- 문서가 준비되면 실행될 함수

- 자바스크립트의 window.onload = function () {}; 과 같은 역할

6) each() 메소드

- 자바스크립트의 for in 반복문처럼 객체 혹은 배열의 요소를 검사하는 메소드

- 형태

$.each(object, function(index, 값){});

$(선택자).each(function(index, 값){});

- 예시

$('h1').each(function (index, item) {

$(item).addClass('cls'+index); }); // item을 this로 대체 가능

h1태그에 순서대로 index를 붙여서 클래스 적용

7) $.extend() 메소드

- 객체 결합 메소드

- 형태: $.extend(객체, 추가객체, 추가객체...)

- 객체간의 키가 겹칠 경우 이후에 추가된 키의 값으로 초기화됨

- 하나의 객체만 추가할 경우에는 깊은 복사(참조값X)

- 예시

var user={name:david};

$.extend(user, {region: 'New york', age: 20});

-> user 객체는 name, region, age 객체를 가지게 됨

8) $.noConflict()

- $ 식별자 제거

- 식별자 $가 겹칠 경우에 사용

- 식별자 $를 삭제하고 새로운 식별자 선언 가능

- 사용 예시

$.noConflict()

var J=jQuery;

J('div').css('color', 'red');

-> 식별자를 $가 아닌 J로 사용하게 됨