[jQuery] jQuery ($, 선택자)

 

 $(document).ready(function(){});

 

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

- jQuery 를 통해서 함수를 전달 할 수 있다. (javascript의 onload와 같은 효과)

$(function(){}); = 간단한 형식 정의 , 더 많이 사용됩니다. 

 

 

 

jQuery 기본 선택자 

- jQuery 메서드의 가장 기본적인 형태
 문서 객체를 다룰 때 사용하는 형태

 css의 선택자를 그대로 사용할 수 있도록 만듬. 

 

 jQuery에서 가장 많이 사용하는 형태 => $('h1').css('color', 'red'); // 선택자. 스타일시트 활용 가능 

 

 

전체 선택자

 

< 출력값 > 

 

 

 

태그 선택자 

 

 

< 출력값 >

 

< 출력값 >

 

 

 

아이디 선택자 

- # 을 사용하여서 연결합니다. 

<출력값> 

 

 

클래스 선택자 

 

<출력값>

 

<출력값>

 

 

 

 jQuery 자식(손)선택자와 후손 선택자

<출력값>

 

<출력값>

 

 

속성 선택자  

기본 선택자 뒤에 붙여 사용하며, 입력 양식과 관련된 태그를 선택할 때 많이 사용

<출력값>

 

 

 

위치 필터 선택자

: 선택자를 사용해 문서 객체를 선택한 후에 다음과 같은 위치를 지정

요소:odd -> 홀수 번째에 위치한 문서 객체 선택.
요소:even -> 짝수 번째에 위치한 문서 객체 선택.
요소:first -> 첫번째에 위치한 문서 객체 선택.
요소:last -> 마지막에 위치한 문서 객체 선택.

 

<출력값> 

 

 

 

입력 양식 필터 선택자 

<출력값> 

 

 

함수 필터 선택자 

요소:contains(문자열) - 특정 문자열을 포함하는 문서 객체를 선택
요소:eq(n) - n번째에 위치하는 문서 객체를 선택 
요소:gt(n)  - n번째 초과하는 위치에 있는 문서 객체를 선택 
요소:has(h1) - h1 태그를 가지고 있는 문서 객체를 선택

요소:lt(n) - n번째 미만에 위치하는 문서 객체를 선택

요소:not(선택자) - 선택자와 일치하지 않는 문서 객체를 선택
요소:nth-child(3n+1) (단, n = 0, 1, ...) - 3n+1번째에 위치하는 문서 객체를 선택(인덱스 1부터 카운팅)

 

<출력값>

첫번째 줄 배경색이 검정이 아닌 이유는 인터프린트 언어로 위에서 부터 읽어오기 때문에 

코드가 겹쳐져서 나중에 실행된 초록색으로 출력된 것 입니다.