jQuery 기본(선택자)

 jQuery 는 두 가지 방법으로 사용할 수 있습니다.

첫 번째 방법은 CDN 호스트를 사용하는 방법이고, 두 번째는 직접 다운 받아 사용하는 방식입니다.

 

첫 번째 CDN 호스트 방법

 

https://jquery.com/

jQuery

두 번째 다운로드 방법

 

• jQuery 기능

-DOM과 관련된 처리를 쉽게 구현

-일괄된 이벤트 연결을 쉽게 구현

-시각적 효과를 쉽게 구현

-Ajax 애플리케이션을 쉽게 개발

 

 $(document).ready() 메서드는 문서 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미입니다. 또, 여러 개의 함수를 연결할 수 있습니다.

 

• jQuery 기본 선택자 두 가지 형태

-첫 번째 형태

-두 번째 형태

이 형태는 문서 객체를 다룰 때 사용하는 jQuery 형태입니다.

 

• jQuery 속성 선택자

선택자 형태	설명
요소[속성]	특정 속성을 가지고 있는 문서 객체를 선택합니다.
요소[속성=값]	속성 안의 값이 특정 값과 같은 문서 객체를 선택합니다.
요소[속성~=값]	속성 안의 값이 특정 값을 단어로써 포함하는 객체를 선택합니다.
요소[속성^=값]	속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택합니다.
요소[속성$=값]	속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택합니다.
요소[속성*=값]	속성 안의 값이 특정 값으로 포함하는 문서 객체를 선택합니다.

 

HTML

 

실행한 화면

 

• jQuery 입력 양식 필터 선택자(1)

선택자 형태	설명
요소: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인 문서 객체를 선택합니다.

 

• jQuery 입력 양식 필터 선택자(2)

선택자 형태	설명
요소:checked	체크된 입력 양식을 선택합니다.
요소:disabled	비활성화된 입력 양식을 선택합니다.
요소:enabled	활성화된 입력 양식을 선택합니다.
요소:focus	초점이 맞춰져 있는 입력 양식을 선택합니다.
요소:input	모든 입력 양식을 선택합니다.(input, textarea, select, button 태그).
요소:selected	option 객체 중 선택된 태그를 선택합니다.

 

HTML

실행한 화면

 

• jQuery 기본 필터 선택자

선택자 형태	설명
요소:odd	홀수 번째에 위치한 문서 객체를 선택합니다.
요소:even	짝수 번째에 위치한 문서 객체를 선택합니다.
요소:first	첫 번째 위치한 문서 객체를 선택합니다.
요소:last	마지막에 위치한 문서 객체를 선택합니다.
요소:add	문서 객체를 추가로 선택합니다.
요소:end	메서드를 연쇄적(chain)으로 사용할 경우 앞쪽에 선택되었던 요소를 선택합니다.
요쇠:add	문서 객체를 추가합니다.
요소:is	문서 객체에 해당하는 것이 하나라도 있으면 'true'를 반환합니다.
요소:find	어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다.

 

HTML

실행한 화면

 

• jQuery 함수 필터 선택자

선택자 형태	설명
요소:contains(문자열)	특정 문자열을 포함하는 문서 객체를 선택합니다.
요소:eq(n)	n번째에 위치하는 문서 객체를 선택합니다.
요소:gt(n)	n번째 초과에 위치하는 문서 객체를 선택합니다.
요소:has(h1)	h1 태그를 가지고 있는 문서 객체를 선택합니다.
요소:lt(n)	n번째 미만에 위치하는 문서 객체를 선택합니다.
요소:not(선택자)	선택자와 일치하지 않는 문서 객체를 선택합니다.
요소:nth-child(3n+1)	3n+1번재에 위치하는 문서 객체를 선택합니다.(1,4,7,……).
요소:filter()	문서 객체를 필터링 합니다.

 

HTML

실행한 화면

 filter() 메서드의 매개 변수에 함수를 넣습니다. 이때 입력하는 함수는 매개 변수로 index를 갖습니다. 함수에서 리턴하는 값에 따라 문서 객체를 선택합니다.