[jQuery] jQuery 사용법(3) - 래퍼('CSS스타일 선택자') 방법

 

실제로 웹페이지에 대한 웹 프로그래밍을 하게 되면,

엘리먼트 오브젝트로 전달하는 것보다

CSS스타일 선택자를 전달하는 경우가 많습니다.

 

그 이유는, 전자보다 후자가 더 효과적으로 엘리먼트를 선택할 수 있기 때문에 그렇습니다.

 

근데 어차피 둘다 상황에 맞게 사용하게 되어 있음..

 

 

 

 

 

 

 

 

 

1. 래퍼(wrapper) 란?

jQuery( 엘리먼트 오브젝트 | 'CSS스타일 선택자' )

 

붉은색으로 표시한 부분이 레퍼입니다, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환

 

 

 

 

 

 

 

 

-목차-

2. id 셀렉터, class 셀렉터, 엘리먼트 셀렉터, 다중 셀렉터

3. 필터

4. 속성 셀렉터

 

 

 

 

 

 

 

 

2. id 셀럭터, class 셀렉터, 엘리먼트 셀렉터, 다중 셀렉터 작성법

 

기본 셀렉터 종류

 

#aaaa <- id 셀렉터(선택자)

.aaaa <- class 셀렉터(선택자)

li     <- 엘리먼트(li태그,ul태그 등등) 셀렉터(선택자)

#aaaa, #bbbb  <- 다중 셀럭터(선택자)  (,(콤마)를 통해서 여러개의 엘리먼트들을 설정 할 수 있다)   ("id 셀렉터"말고도, "class 셀렉터", "엘리먼트 셀렉터"도 같이 넣을 수 있습니다)

화면

조건

 

 

 

 

 

 

 

3. 필터 

2번에 적혀 있는 기본 셀렉터을 사용해서  내가 적용할 곳을 찾을 수 있는데,

그 상태에서 더 디테일하게 찾을 수 있게 필터링을 해줄 수가 있습니다.

 

#list li:eq(2)   <-   id값(#)이 list이면서, (자식) li엘리먼트이고, eq(=)이고, eq 안에 있는 매개변수는 인덱스 이다.                         그러면 인덱스가 2이니깐 밑에 결과는 javascript가 출력 된다.

#list li:gt(1)    <-   gt는 < 표시랑 같다 (왼쪽에 있는 것보다 오른쪽에 있는게 크다)                          여기서도 gt 안에는 매개변수가 인덱스를 말하는거다.                          그러면 1보다 큰 엘리먼트들을 출력하라는 거다.                          그러면 결과는 javascript, PHP, MYSQL 이렇게 나온다.

#list li:lt(2)    <-  lt는 > "작다" 라는거다.                        그러면 결과는 HTML, CSS 이렇게 나온다.

#list li:even  <-  홀수 인덱스 값을 가진 엘리먼트들만 선택한다. 해당한다.                       그러면 결과는 HTML, JavaScript, MYSQL 이다.

#list li:odd  <-  짝수 인덱스 값을 가진 엘리먼트들만 선택한다. 해당한다.                      그러면 결과는 CSS, PHP 이다.

#list li:first   <- 첫번째 인덱스 엘리먼트 해당한다.

#list li:last   <- 마지막 인덱스 엘리먼트 해당한다.

 

화면

조건

 

 

 

 

 

 

 

 

 

4. 속성 셀렉터 작성법

 

대괄호([ ])로 시작하고, 그 다음에

속성이름을 적고

등호(=)를 적고

그 뒤에는 속성 값을 적는다.

 

* 근데 등호 적는 곳에 = 이거 말고도 *= 이렇게 적는 것도 $=, ^=, != 등 이렇게 적을 수도 있습니다

 

 

 

화면

조건