반응형

# 제이쿼리 학습 정리

# 선택자

  • CSS선택자와 마찬가지로 선택한 요소의 디자인 속성 등을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일(CSS)는 사용자의 동작에 의해 변경될 수 없기 때문에 "정적이다"고 표현한다.
  • 하지만 제이쿼리는 선택자를 사용 시 "동적"으로 스타일을 적용할 수 있다. 선택자를 정확하고 깊이 있게 공부하기 위해서는 문서 객체 모델에 대해 알아야 한다.
  • 문서 객체 모델 : HTML 문서 객체 구조를 의미, HTML 문서의 기본 객체 구조는 최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있다.
  • <body> 태그는 문단 태그, 테이블 태그, 폼 태그 등을 포함할 수 있다. 이때 문서 객체 모델에서는 모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있다. (예) <img> 태그의 경우 이미지 출력하는 기능이 존재, 속성에는 src, alt, width, height 등이 있다.)
  • HTML의 문서 객체 구조를 그림으로 표현 시 트리 구조가 된다. 이때 가장 상위에 위치하는 <html>을 뿌리(Root)라고 부르며, 뿌리에서 가지처럼 뻗어나가는 모양의 요소를 노드(Node)라고 부른다. 노드에는 요소 노드, 텍스트 노드, 속성 노드 등이 있다.

 

## 선택자의 사용

  • 제이쿼리 선택자로 스타일, 속성 적용을 위한 기본형 : 선택자는 $()에 문자형 데이터로 CSS 선택자를 입력한다.
1. 선택한 요소에 지정한 스타일 적용
$("CSS 선택자").css("스타일 속성명", "값")

2. 선택한 요소에 지정한 속성 적용
$("CSS 선택자").attr("속성명", "값");

 

## 기본 선택자

  • 직접 선택자 : 멀리 떨어진 요소를 직접 선택할 때 사용한다. 전체(*), 아이디(#), 클래스(), 요소명, 그룹(,) 선택자가 있다.
1. $("*")
- 전체 선택자
- 모든 요소를 선택한다.

2. $("#아이디명")
- 아이디 선택자
- id 속성에 지정한 값을 가진 요소를 선택한다.

3. $(".클래스명")
- 클래스 선택자
- class 속성에 지정한 값을 가진 요소를 선택한다.

4. $("요소명")
- 요소 선택자
- 지정한 요소명과 일치하는 요소들만 선택한다.

5. $("선택1, 선택2, 선택3, ... , 선택n")
- 그룹 선택자
- 선택1, 선택2, 선택3, ... , 선택n에 지정된 요소들을 한 번에 선택한다.

6. $("p.txt_1") / $("p#txt_1")
- 종속 선택자
- <p> 요소 중 class 값이 txt_1인 요소 또는 id 값이 txt_1인 요소를 선택한다.
  • 인접 관계 선택자 : 직접 선택자로 요소를 먼저 선택, 그 다음 선택한 요소와 가까이 있는 요소를 선택할 때 사용한다.
1. $("요소 선택자").parent()
- 부모 요소 선택자
- 선택한 요소의 부모 요소를 선택한다.

2. $("요소 선택자").parents()
- 상위 요소 선택자
- 선택한 요소의 상위 요소를 모두 선택한다.

3. $("요소 선택자").closest("div")
- 가장 가까운 상위 요소 선택자
- 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택한다.

4. $("요소 선택 하위 요소")
- 하위 요소 선택자
- 선택한 요소에 지정한 하위 요소를 선택한다.

5. $("요소 선택>자식 요소")
- 자식 요소 선택자
- 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다.

6. $("요소 선택").children()
- 자식 요소들 선택자
- 선택한 요소의 모든 자식 요소를 선택한다.

7. $("요소 선택").prev()
- 형(이전)요소 선택자
- 선택한 요소의 바로 이전 요소를 선택한다.

8. $("요소 선택").prevAll()
- 형(이전)요소들 선택자
- 선택한 요소의 이전 요소 모두를 선택한다.

9. $("요소 선택").prevUntil("요소명")
- 지정 형(이전)요소들 선택자
- 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택한다.

10. $("요소 선택").next() / $("요소 선택+다음 요소")
- 동생(다음)요소 선택자
- 선택한 요소의 다음 요소를 선택한다.

11. $("요소 선택").nextAll()
- 동생(다음)요소들 선택자
- 선택한 요소의 당므 요소 모두를 선택한다.

12. $("요소 선택").nextUntil("h2")
- 지정 동생(다음)요소들 선택자
- 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택한다.

13. $(".box_1").siblings()
- 전체 형제 요소 선택자
- class 값이 box_1인 요소의 형제 요소 전체를 선택한다.

 

## 탐색 선택자

  • 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색, 정확하게 선택할 수 있다.
  • 위치 탐색 선택자 : 기본 선택자로 선택한 요소를 배열에 담고, 배열의 인덱스를 이용하여 특정 요소를 정확히 선택한다.
1. $("요소 선택:first") / $("요소 선택").first()
- 첫 번째 요소 선택
- 요소 중 첫 번째 요소만 선택한다.

2. $("요소 선택:last") / $("요소 선택").last()
- 마지막 요소 선택
- 요소 중 마지막 요소만 선택한다.

3. $("요소 선택:odd")
- 요소 무리 중 짝수 번째(홀수 인덱스) 요소 선택

4. $("요소 선택:even")
- 요소 무리 중 홀수 번째(짝수 인덱스) 요소 선택

5. $("요소 선택:first-of-type")
- 요소 무리 중 첫 번째 요소 선택

6. $("요소 선택:last-of-type")
- 요소 무리 중 마지막 요소 선택

7. $("요소 선택:nth-child(숫자)")
- 요소 무리 중 n번째 요소 선택

8. $("요소 선택:nth-child(숫자n)")
- 요소 무리 중 숫자n 배수 번째 요소 선택

9. $("요소 선택:nth-last-of-type(숫자)")
- 요소 무리 중 마지막 위치로부터 n번째 요소 선택

10. $("요소 선택:only-child")
- 부모 요소 내 특정 요소가 1개 뿐인 요소를 선택

11. $("요소 선택:eq(index)") / $("요소 선택").eq(index)
- 요소 중 인덱스 n가 참조하는 요소 불러오기

12. $("요소 선택:gt(index)")
- 요소 중 인덱스 보다 큰 인덱스가 참조하는 요소 불러오기

13. $("요소 선택:lt(index)")
- 요소 중 인덱스 보다 작은 인덱스가 참조하는 요소 불러오기

14. $("요소 선택").slice(index)
- 요소 중 인덱스 부터 참조하는 요소를 불러온다.
  • 제이쿼리 배열 관련 메서드의 종류
1. each() / $.each()
- 배열에 저장된 문서 객체만큼 메서드 반복 실행
- 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다.
- $("요소 선택").each(function) / $.each($("요소 선택"), function)

2. $.map()
- 배열에 저장된 데이터 수만큼 메서드 반복 실행
- 함수에서 반환된 데이터는 새 배열에 순서대로 저장된다. 새로 저장된 객체를 반환한다.
- $.map(Array, function)

3. $.grep()
- 배열에 저장된 데이터 수 만큼 메서드 반복 실행
- 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환
- $.grep(Array, function)

4. $.inArray()
- 배열 안에서 데이터를 찾는다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환한다.
- 데이터를 찾기 못하면 -1을 반환한다.
- start index의 값을 지정하면 해당 위치부터 데이터를 찾는다.
- $.inArray(data, Array, start index)

5. $.merge()
- 인자값으로 입력한 2개의 배열 객체를 하나로 그룹화 한다.
- $.merge(Array1, Array2)

6. index()
- 선택자로 요소를 먼저 선택한 다음 지정한 요소의 인덱스 정보를 가져온다.
- $("요소 선택").index("지정 요소 선택")
  • 속성 탐색 선택자 : 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 확인하여 요소를 선택하는 선택자 (선택한 이미지(img)요소 중 경로(src)가 일치하는 요소만 선택하고자 할 때 사용)
1. $("요소 선택[속성]")
- 요소 중 선택한 속성이 포함된 요소만 선택한다.

2. $("요소 선택[속성=값]")
- 요소 중 속성값이 [속성=값]과 동일한 요소만 선택한다.

3. $("요소 선택[속성^=텍스트]")
- 요소 중 속성값이 텍스트로 시작하는 요소만 선택한다.

4. $("요소 선택[속성$=텍스트]")
- 요소 중 속성값이 텍스트로 끝나는 요소만 선택한다.

5. $("요소 선택[href*=텍스트]")
- 요소중 href 속성값 중에 텍스트를 포함하는 요소만 선택한다.

6. $("요소 선택:hidden")
- 요소 중 숨겨져 있는 요소만 선택한다.

7. $("요소 선택:visible")
- 요소 중 보이는 요소만 선택한다.

8. $(".txt")
- <input> 요소 중 type 속성값이 "text"인 요소만 선택한다.

9. $(".selected")
- selected 속성이 적용된 요소만 선택한다.

10. $(".checked")
- checked 속성이 적용된 요소만 선택한다.
  • 그 외의 선택자(콘텐츠 탐색 선택자) : 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택한다.
1. $("요소 선택:contains(텍스트)")
- 요소 중 텍스트를 포함하는 요소만 선택한다.

2. $("요소 선택").contents()
- 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택한다.

3. $("요소 선택:has(요소명)")  / $("요소 선택").has(요소명)
- 요소 중 요소명을 포함하는 요소만 선택한다.

4. $("요소 선택:not(:제외요소)")  / $("요소 선택").not(:제외 요소)
- 요소 중 첫 번째 요소만 제외하고 선택한다.

5. $(요소 선택).filter(필터 요소)
- 요소 중 class 값이 필터 요소인 요소만 선택한다.

6. $(요소 선택1).find(요소 선택2)
- 요소의 하위 요소인 요소 선택2만 선택한다.

7. $("요소 선택1").closest("요소 선택2")
- 요소 선택1을 감싸는 상위 요소선택2 요소 중 가장 가까운 상위 요소를 선택한다.

8. end()
- 필터링이 실행되기 이전의 요소가 선택된다.
- 예) $("li").children("a").end()	// 필터링이 실행되기 이전의 요소인 <li>가 선택된다.
  • 선택자와 함꼐 알아두면 유용한 메서드
1. is(."요소 상태")
- 선택한 요소가 요소 상태이면 true 반환
- 주로 입력 요소의 체크박스 or 선택 상자의 선택 여부 or 보이는지 여부를 알아볼 때 사용한다.

2. $.noConflict()
- 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 메서드를 사용한다.
- 예) var 변수 = $.noConflict(); 변수("요소 선택")	
// 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용한다.

3. get()
- 예) $("요소 선택").get(0).style.color="$f00"
// 선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 적용할 수 있다.

 

출처 : Do it! 자바스크립트+제이쿼리 입문책

반응형
저작자표시

'프로그래밍 > JS(JavaScript), jQuery, PHP' 카테고리의 다른 글

제이쿼리 학습 정리-2  (0) 2020.12.20
체이닝 기법  (0) 2020.12.14
함수, 매개변수 없이 함수에 전달된 값 받아오기, 호이스팅  (0) 2020.12.11
수학 객체, 배열객체, 문자열 객체  (0) 2020.12.11
자바스크립트 객체의 종류  (0) 2020.12.10

+ Recent posts

티스토리툴바