00.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,...)