00.jQuery 기본

CODEDRAGON Development/JavaScript, jQuery, ...

반응형

   

jQuery(document).ready()

문서의 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미 

<script>

$(document).ready(function(){

 

});

</script>

   

아래의 표현도 동일한 기능 수행

   

<script>

$(function(){

 

});

</script>

   

   

jQuery 기본 선택자

   

선택자

설명

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

입력 양식 필터 선택자

  

 필터 선택자

기본 필터 선택자와 함수 필터 선택자가 있음

   

   

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('*').css('color','red');

});

</script>

   

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

   

<script>

$(document).ready(function(){

$('h1').css('color','orange');

});

</script>

   

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('#target').css('color','red');

});

</script>

   

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('.item').css('color','red');

});

</script>

   

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

   

<script>

$(document).ready(function(){

$('body > div').css('color','red');

});

</script>

   

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

   

<script>

$(document).ready(function(){

$('body div').css('color','red');

});

</script>

   

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

   

선택자 형태

설명

요소[속성]

특정 속성을 가지고 있는 문서 객체를 선택

요소[속성=값]

속성 안의 값이 특정 값과 같은 문서 객체를 선택

요소[속성~=값]

속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택

요소[속성^=값]

속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택

요소[속성$=값]

속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택

요소[속성*=값]

속성 안의 값이 특정 값을 포함하는 문서 객체를 선택

   

입력 양식 필터 선택자

   

선택자 형태

설명

요소:button

input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택

요소:checkbox

input 태그 중 type 속성이 checkbox인 문서 객체를 선택

요소:file

input 태그 중 type 속성이 file인 문서 객체를 선택

요소:image

input 태그 중 type 속성이 image인 문서 객체를 선택

요소:password

input 태그 중 type 속성이 password인 문서 객체를 선택

요소:radio

input 태그 중 type 속성이 radio인 문서 객체를 선택

요소:reset

input 태그 중 type 속성이 reset인 문서 객체를 선택

요소:submit

input 태그 중 type 속성이 submit인 문서 객체를 선택

요소:text

input 태그 중 type 속성이 text인 문서 객체를 선택

   

선택자 형태

설명

요소:checked

체크된 입력 양식을 선택

요소:disabled

비활성화된 입력 양식을 선택

요소:enabled

활성화된 입력 양식을 선택

요소:focus

초점이 맞춰져 있는 입력 양식을 선택

요소:input

모든 입력 양식을 선택(input,textarea,select,button 태그)

요소:selected

option 객체 중 선택된 태그를 선택

   

필터 선택자

   

기본 필터 선택자 

선택자 형태

설명

요소:odd

홀수 번째에 위치한 문서 객체를 선택

요소:even

짝수 번째에 위치한 문서 객체를 선택

요소:first

첫 번째 위치한 문서 객체를 선택

요소:last

마지막에 위치한 문서 객체를 선택

   

함수 필터 선택자 

선택자 형태

설명

요소:contains(문자열)

특정 문자열을 포함하는 문서 객체를 선택

요소:eq(n)

n번째에 위치하는 문서 객체를 선택

요소:gt(n)

n번째 초과에 위치하는 문서 객체를 선택

요소:has(h1)

h1태그를 가지고 있는 문서 객체를 선택

요소:lt(n)

n번째 미만에 위치하는 문서 객체를 선택

요소:not(선택자)

선택자와 일치하지 않는 문서 객체를 선택

요소:nth-child(3n+1)

3n+1번째에 위치하는 문서 객체를 선택(1,4,7,...)

   

    

반응형

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
객체 생성1  (0) 2014.08.26
프로젝트 생성  (0) 2014.08.24
jQuery API 문서 2  (0) 2014.08.23