제이쿼리(J-Query) 사용법과 선택자

제이쿼리

: 자바스크립트의 생산성을 향상시켜주는 자바스크립트 라이브러리.

html 로드가 끝난 후 실행된다.

 

 

사용법

: 상단에 제이쿼리를 불러온 후 사용한다. 제이쿼리를 불러오는 방법은 두가지가 있다.

 

1. 제이쿼리 사이트에서 파일을 다운받아 상단에 연결하여 사용

2. CDN 주소를 상단에 연결하여 사용

<script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- 가장 최신 버전으로 연결해주는 cdn 주소 -->

<script>

  $(function(){

 

  });

</script>

 

* 브라우저 버전 별 cdn 주소를 연결 할 수도 있다.

브라우저마다 해당 버전 cdn을 연결하는 것이 아니고 연결은 하나만 하되 어느 브라우저에서 뿌리는 cdn을 선택하는 것으로 

각 버전마다 응답 시간 및 다운로드 속도가 다르므로 개발자가 선택 할 부분이다.

 

jquery.com/download/

Download jQuery | jQuery

 

 

 

문법 :

$(function(){

  코드

});

 

*자바스크립트 문법과 약간 다르니 주의할 것.

function(){

  코드

}

 

 

 

 

 

선택자 

: 직접 선택자와 인접 선택자로 나뉜다.

 

 

구조

: $("선택자").메소드({속성값});

 

 

1. 직접 선택자

: 전체 선택자, 클래스 선택자, 아이디 선택자, 태그 선택자, 그룹 선택자, 종속 선택자.

 

- 전체 선택자 : $("*")   //html 전체 요소, css와 동일

- 클래스 선택자 : $(".test") 

- 아이디 선택자 : $("#test")

- 태그 선택자 : $("div"), $("table")

- 그룹 선택자 : $("div, a, p")  //원하는 요소를 쉼표로 구분하여 작성

- 종속 선택자 : $("h1.tit"), $("div#box")

 

 

2. 인접 선택자

: 지정 자식 선택자, 순서 선택자, 동생 선택자, 부모 선택자, 탐색 선택자... (이 외에도 다양하다. 제이쿼리 사이트 참고)

 

- 지정 자식 선택자 : '>'

$(".btn > span ").css({

  "border":"1px solid #000"

})  //.btn 안에 바로 아래에 있는 자식 'span' 만 선택

 

- 순서 선택자 : '.eq(숫자)', css의 nth-child와 같은 의미

$(".btn").eq(2).css({ 

  "border":"3px solid #f00"

})  // 세번째 .btn에 해당 css를 추가하라

 

- 동생 선택자 : '.next()' , 선택한 태그를 제외하고 그 다음부터 적용

$(".btn").next().css({

  "color":"#f69834"

})  // .btn의 다음에 오는 요소들 선택 

 

- 부모 선택자 : '.parent()' , 지정 요소의 부모 요소를 선택.

$(".btn").parent().css({

  "background":"#333"

}) //.btn 의 부모, 만약 btn을 감싸는 요소가 <div class="box">라면 .box 요소에 해당

 

* 상위 선택자 '.parents()'와 헷갈리지 말 것.

상위 선택자 '.parents'의 경우 지정 요소의 상위에 있는 모든 요소를 선택한다.

 

- 탐색 선택자 : '.find()', 지정 선택자와 비슷하나 '.find()' 의 경우 찾고자 하는 자식 요소를 모두 찾아준다.

$(".btn").find("span").css({

  "font-weight":"bold"

})  //.btn 하위에 있는 모든 span 태그를 선택

 

예를 들어 

<a class="btn">

  <span>버튼</span>

  <em><span>확인</span></em>

</a>

의 구조에서 지정 선택자의 경우 .btn 바로 아래의 span 만 선택한다면

탐색 선택자 .find() 의 경우에는 em 아래의 span 태그까지 선택된다.

 

 

 

 

* 선택자 주의 사항

document, window, this 는 따옴표로 묶어주지 않는다.

ex. $(document), $(window), $(this)

 

 

 

api.jquery.com/category/selectors/basic-css-selectors/

Basic | jQuery API Documentation