6.21 개발일지. jQuery선택자

김지형·2022년 6월 21일

ai-school

목록 보기

25/61

jQuery 함수

함수는 jQuery에서 가장 중요한 요소이다
JS는 생성된 객체 멤버를 추가하는 것이 자유롭다(jQuery 라이브러리)
jQuery 함수는 jQuery(객체) 형태로 작성
Query 6글자 대신에 $(객체)로 작성할 수도 있다.

Ready 함수

JS의 window.onload와 흡사
eclipse에서 위 코드를 작성하고 실행해보면
웹 페이지를 불러올 때 on load라고 출력된다
on load는 웹 페이지를 불러올 때 실행하는 JS함수를 on load 함수인데 jQuery에서 이와 같은 기능을 하는 함수가 Ready 함수이다

여기서 on load와 Ready의 차이는

on load는 위와 같이 함수를 여러번 적어도 마지막 함수만 출력되지만

Ready 함수는 모든 함수가 출력된다

jQuery 선택자

jQuery에서 사용되는 선택자는

기본 선택자
기본 선택자 조합
순서 필터 선택자
인덱스 필터 선택자
속성 선택자
상태 선택자
From 태그 선택자

등이 있다

기본 선택자

기본 선택자는 가장 기본이 되는 선택자이고, 다른 선택자들은 기본 선택자를 조합해서 만든다

전체 선택자( * ) : HTML 문서 내의 모든 태그를 선택
태그 이름 선택자( 태그 이름 ) : 지정한 태그 이름에 해당하는 태그 객체를 가져온다
아이디 선택자 ( #아이디 ) : id 속성을 통해 태그 객체를 가져온다
클래스 선택자 ( .클래스 ) : class 속성을 통해 태그 객체를 가져온다

1
*는 문서 내의 모든 태그를 선택한다

태그 지정 선택자는 지정한 태그만 선택된다
아이디 ( . ) 와 클래스( # ) 선택자 또한 지정한 아이디 혹은 클래스만 선택된다

기본 선택자 조합

기본 선택자를 사용할 수도 있지만, 기본 선택자를 조합하여 사용하는 경우가 많다

가령 위와 같이 div 태그와 p 태그에 똑같이 a1이라는 클래스가 지정되었을 때,
( .a1 )으로 선택하면 2개의 태그가 같이 선택되기 때문이다

조합에는 다음과 같은 종류가 있다

선택자1, 선택자2 : 동시에 여러 태그를 선택할 때 사용
선택자1 > 선택자2 : 태그의 바로 하위의 태그들을 선택할 때 사용
선택자1 선택자2 : 태그 내부의 모든 태그들을 선택할 때 사용
선택자1.선택자2 : 모든 선택자를 만족하는 태그를 선택
선택자1 + 선택자2 : 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
선택자1 ~ 선택자2 : 선택자1 태그 다음에 있는 모든 선택자2 태그를 선택

2
body를 작성하고
2개 이상의 선택자들의 실행문이 같은 경우가 있다
그럴때는 따로 적지 않고 ( , ) 를 이용해 하나의 함수로 작성할 수 있다

3
id="a1" 바로 하위에 있는 h1 태그만 선택
id="a1" 하위에 있는 모든 h1 태그를 선택

4

클래스 이름이 같은 태그가 있지만, 특정 클래스만 선택

5
a1 선택자( 3번째 p 태그 ) 다음 p 태그( 4번째 p 태그 ) 선택
단, a1 선택자 다음에 p 태그 대신 다른 태그가 들어와있으면
아무것도 선택되지 않는다

6
~ 선택자는 첫 선택자( #a1 ) 이후에 다른 선택자가 있으면 ( div ) 무시하고, 이후에 있는 모든 선택자( p )를 선택
떨어져 있는 경우에도 찾아서 모두 선택한다

순서 필터 선택자

선택자를 통해 선택된 태그 중에 태그의 상태에 따라 선택할 수 있는 선택자
순서, 태그의 현재 상태등

첫 번째 태그 선택

:first : 선택자에 해당하는 태그 중 가장 처음 태그
:first-child : 선택자에 해당하는 태그 중 각 영역별 첫 번째 태그가 선택
처음 태그가 선택자에 해당하지 않으면 선택되지 않음
:first-of-type : 선택자에 해당하는 태그 중 각 영역별 처음 태그가 선택

마지막 태그 선택

:last : 선택자에 해당하는 태그 중 가장 마지막 태그가 선택
:last-child : 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택
마지막 태그가 선택자에 해당하지 않으면 선택되지 않음
:last-of-type : 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택

그 외 순서 필터 선택자

:odd : 인덱스 번호 ( 0부터시작 )가 홀수인 태그 선택
:even : 인덱스 번호 ( 1부터시작 )가 짝수인 태그 선택
:only-child : 영역 내에서 선택자에 해당하는 태그가 하나일 경우 선택
다른 태그가 있으면 선택되지 않음
:only-of-type : 영역 내에 선택자에 해당하는 태그가 하나일 경우 선택

1
홀수 번째: 빨간색
짝수 번째: 노란색
(인덱스는 0번 부터 시작)
중간에 다른 태그가 섞여있어도 무시하고 순서를 계산한다

2

only-child: 선택한 태그가 딱 하나만 있는 경우 선택
only-of-type: 같은 영역에 여러 태그가 존재하더라도, 선택한 태그가 하나만 있을 경우 선택

인덱스 번째 태그 선택

:ep(인덱스) : 인덱스 (0부터시작) 번때 해당하는 태그를 선택
:nth-child(인덱스) : 각 영역의 인덱스 (1부터시작) 번째 해당하는 태그를 선택
인덱스 번째 태그가 선택자에 해당하지 않으면 선택되지 않음
:nth-of-type(인덱스) : 각 영역의 인덱스 (1부터시작) 번째 해당하는 태그를 선택
:gt(인덱스) : 선택자에 해당하는 태그중 인덱스 (0부터시작) 번째 태그 이후의 태그들이 선택
:lt(인덱스) : 선택자에 해당하는 태그중 인덱스 (0부터시작) 번째 태그 이전의 태그들이 선택
:nth-last-child(인덱스) : 뒤에서 인덱스 (1부터시작) 번째 태그가 선택
인덱스 번째 태그가 선택자와 다르면 선택되지 않음
:nth-last-of-type(인덱스) : 뒤에서 인덱스 (1부터시작) 번째 태그가 선택

1
0번째 인덱스에 해당하는 태그
각 영역의 1번째 p 태그 선택 ( 1번째가 p태그가 아니면 선택하지 않음 )
각 영역의 1번째 p 태그 선택 ( 1번째가 p태그가 아니라도 각 영역의 가장 첫 p 태그 선택 )

2
위의 1 코드에서 수정하면서 진행했다
0번째 p태그 다음 p태그들 모두 선택
7번째 P태그 이전 p태그들 모두 선택
각 영역의 마지막 p태그들 선택(마지막 태그가 p가 아니면 선택하지 않음)
각 영역의 마지막 p태그들 선택(마지막 태그가 p가 아니어도 가장 마지막 p태그 선택)

3
a1 클래스를 제외한 모든 태그 선택

속성 선택자

태그에 설정되어 있는 속성을 통해 선택하는 선택자

[속성] : 속성을 가지고 있는 태그를 선택
[속성= 값] : 속성의 값이 지정된 값과 일치하는 태그를 선택
[속성!= 값] : 속성의 값이 지정된 값과 일치하지 않는 태그를 선택
[속성$= 값] : 속성의 값이 지정된 값으로 끝나는 태그를 선택
[속성|= 값] : 속성의 값이 지정된 속성의 값과 일치하거나 지정된 속성으로 시작하고 하이픈으로연결된 태그를 선택
[속성^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선택
[속성~= 값] : 속성의 값이 지정된 값을 단어로 가지고 있는 태그를 선택
[속성*= 값] : 속성의 값이 지정된 값을 포함하는 태그를 선택

1

1. title값이 있는 p 태그 선택 ( 2, 3 )
2. aaa1이라는 이름의 title값이 있는 p 태그 선택 ( 2 )
3. aaa1이라는 이름의 title값을 가지지 않은 p 태그 선택 ( 1, 3 )

2
위의 1 코드에서 수정하면서 진행했다
1. a3으로 끝나는 title값이 있는 p 태그 선택 ( 1 )
2. title 이름이 aaa3이거나 aaa3-을 포함한 p 태그 선택 ( 1, 2 )
3. title 이름이 aaa3으로 시작하는 p 태그 선택 ( 1, 2, 3 )