[ 자바스크립트+jQuery 완전정복 스터디 1 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=9650891)

APPENDIX 02 - 초보자를 위한 jQuery

lesson01 jQuery 소개

01_ jquery란?

여러가지 작업을 쉽고 편리하게 도와주는 크로스 브라우징 라이브러리 입니다.

참고) 프레임워크와 라이브러리 - http://webclub.tistory.com/458

02_ jquery를 사용하는 이유

javascript와 jQuery의 차이

animate 예제

lesson02 jQuery 사용법

01_준비

<!-- 스크립트 파일 연결 -->
<script src="https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview"></script>
<script>
// document(dom)의 로드가 끝난 뒤에 아래 함수를 실행
$(document).ready(function() {
  // 브라우저의 alert을 통해 '반갑습니다' 를 출력
  alert('반갑습니다~');
});
</script>

참고) Microsoft CDN - https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview

02_jquery를 이용한 노드 찾기

var $변수이름 = $(‘css선택자’);

$의 정체
$()는 jQuery가 아닌 함수 이름이 $인 함수의 호출일 뿐입니다. $()함수는 선택자에 해당하는 노드를 찾아주는 역활을 합니다.

CSS선택자
말 그대로 CSS선택자로 여러분이 찾고 싶은 선택자를 만들어 $()함수의 매개변수 값으로 넣어주면 됩니다.(jquery에서의 선택자가 css선택자와 완벽히 동일하지는 않습니다)

$변수이름
$()함수에서 리턴(반환)해주는 값을 저장하기 위해 만든 변수로 변수 이름에 $를 붙여준 이유는 jQuery의 기능이 들어있는 변수라는 것을 표현하기 위함 입니다.
(변수 이름에 $를 붙여 작성하는 것은 선택사항이지만 붙이는 것을 권장합니다.)

예제

참고) 노드 - http://tcpschool.com/javascript/js_dom_node

03_jQuery와 CSS와의 관계

jQuery가 큰 인기를 누릴 수 있었 던 것은 CSS선택자를 활용해 노드를 찾을 수 있는 기능때문이며 CSS선택자의 개념을 알고 있다면 jQuery를 이미 어느정도 사용할 수 있다고 판단해도 좋을만큼 밀접한 관계를 맺고 있습니다.

사용 예

$('div');
$('.select')
$('div > p')
$('div ul li.select')

04_초보자가 알아야할 jQuery 핵심기능

01. 이벤트의 등록

$대상.on(‘이벤트명’, 이벤트리스너);
또는
$대상.단축이벤트메서드(이벤트리스너);

jQuery에서 제공하는 on()메서드와 단축 이벤트 이벤트 메서드를 이용하면 이벤트를 쉽게 등록할 수 있습니다.

예제

02. 스타일 설정하기

// $(대상).css('스타일속성명', '값');

// 설정 내용이 하나인 경우
$('div').css('color', 'red');

// 설정 내용이 여러개인 경우(괄호 안에 중괄호를 추가하여 값을 나열)
$('div').css({
  'color': 'red',
  'position': 'relative',
  'background': '#000'
});

// 메서드 체이닝을 사용하여 여러번 작성해도 되지만 누가봐도 좋지 않은 방법
$('div').css('color', 'red').css('background-color', '#000').css('position', 'relative');

예제

자바스크립트 jquery 완전정복 스터디 1 - AD2 - 초보자를 위한 jQuery