jqeury 페이지의 특정 엘리먼트에 CSS 클래스 적용하기

3. 페이지의 특정 엘리먼트에 CSS 클래스 적용하기

Addclass() 메소드를 사용해서 페이지의 선택한 엘리먼트에 CSS 클래스를 적용하기

인자 값으로 적용할 클래스의 이름 사용합니다.

- CSS 클래스에 대한 스타일 규칙 작성

.hightlight{

Font-style:ilalic

Background-color:#0f0;

}

 

- CSS 적용하기

$(‘div’).addClass(‘highlight’)

$(’body’).addClass(‘highlight’)

 

① Div 엘리먼트를 선택하여 highlight 클래스의 스타일 규칙을 적용합니다

② body 엘리먼트를 접근하여 highlight라는 CSS 클래스를 적용합니다.

4. 다양한 방법으로 HTML 엘리먼트 선택하기

- HTML 엘리먼트를 접근하려면 커스텀 선택자를 사용해야함.

· 주어진 문자열을 포함하는 엘리먼트나 문서의 특정위치에 있는 엘리먼트를 접근하는 데 도움을 줌.

- Life 라는 문자열을 포함하는 엘리먼트들을 모두 찾는 방법

$(‘span:contains(life)’).addClass(‘highlight’)

 

- 문서의 특정 위치에 있는 엘리먼트(세 번째 문단, 마지막 문단) 접근에 도움

$(‘div:odd’).addClass(‘highlight’)

짝수 번째 div 커스텀 엘리먼트 적용

$(‘div:even’).addClass(‘boundary’)

홀수 번째 div 커스텀 엘리먼트 적용

$(‘p:eq(1)’).addClass(‘linkstyle’)

주어진 순서의 문단에 스타일 적용, 커스텀 연산자 :eq를 사용.