- JQuery 기본
1) JQuery 개요
- JQuery: 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
2) 목적
-
문서 객체 모델(Document Object Model)과 관련된 처리를 쉽게 구현
-
일관된 이벤트 연결을 쉽게 구현
-
시각적 효과를 쉽게 구현
-
Ajax 어플리케이션을 쉽게 개발
3) 사용 방법
- 다운로드 후 스크립트 내에서 참조
다운로드 URL: https://jquery.com/download/
참조코드:
- 웹을 통해서 참조(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로 사용하게 됨
