jQuery 기본 선택자, 타겟 설정 (feat. (document).ready)

선택자 또는 타겟 설정은 jQuery에서 가장 중요하고

가장 많이 사용되는 부분이다.

어렵지 않은 부분이니 바로 보면서 시작하자.

먼저 7line은 제이쿼리 CDN 호스트 주소이다.

제이쿼리를 사용하는 방법에는 두 가지 방법으로 사용 할 수 있다.

첫 번째 방법은 위처럼 CDN 호스트를 사용하는 법이고

두 번째 방법은 직접 다운을받아 사용 하는 방법이다.

CDN호스트를 사용하는것이 편리하기 때문에 학습 목적에는

CDN을 많이 쓰는 편이다.

10lind 의 $(document).ready() 는 문서가 준비되면

매개변수로 넣은 콜백 함수를 실행하라는 의미이다.

jQuery 이벤트 메소드 중 하나이며 웹 개발에서 거의

많이 쓰이기 때문에 구조는 알아두자.

보통 jQuery로 타겟을 잡아서 작업을 할때는 도큐먼트 레디

안에서 많이 이루어지며 타겟 설정 방법은

11line 에서와 같은 방법으로 사용한다.

11line 이 타겟을 잡기위한 기본 구조인데.

$(' ') 안에는 보통 타겟을 잡을 태그를 넣는다.

* 를 넣은것은 TEST를 위한 것이고 *를 넣게되면

모든태그인 html, head, script, body 태그까지 전부 타겟으로

설정한다는 의미이다.

태그 선택자

이젠 h1태그를 타겟으로 잡고 h1태그 부분만

글자색을 red로 바꿔보자.

2개 이상의 타겟을 잡아야 할때는 아래와같이 , 를 이용해 잡을 수 있다.

아이디 선택자

아이디 선택자는 특정한 id속성이 있는 문서 객체를

선택하는 선택자이다. 21line처럼 h1태그에 id값을 넣은 후

11line 에서 id값을 이용해 타겟을 잡을 수 있다

아이디 선택자를 사용해 타겟을 잡을경우

11line 에서처럼 타겟 앞에 #을 붙여줘야한다. 

클래스 선택자

클래스 선택자는 특정한 class속성이 있는 문서 객체를

선택하는 선택자이다. 22line에서 처럼 태그안에 class를 넣어서

11line, 12line 에서처럼 class 를 타겟으로 잡을 수 있다.

타겟을 잡을때는 id선택자와 다르게 . 을 앞에 붙여준다.

타겟을 잡을때의 기본구조는

$(' ').css(" ", " ");

이지만 css 를 빼고 click를 넣어 아래처럼 사용할 수 있다.

보통은 css 보다 click을 사용해 버튼타겟을 잡아

많이 사용한다.