[jQuery] HTML 요소의 CSS 제어

HTML 요소의 CSS 속성 제어

---

특정 요소에 적용되어 있는 속성값 조회하기

var foo = $("#bar").css('속성이름');

특정 요소의 적용하기

개별적용

$("#bar").css('속성이름', '값');

일괄 적용(json 형태 사용)

$("#bar").css({ 
                    속성이름: '값', 
                    속성이름: '값', 
                    속성이름: '값', 
                    ...
                });

HTML 요소의 CSS 클래스 제어

---

CSS 클래스 적용여부 검사

var foo = $("#bar").hasClass('클래스 이름');    // true, false 리턴

CSS 클래스 적용

$("#bar").addClass('클래스 이름 클래스 이름 ...');

 - 두 개 이상의 클래스를 적용하고자 하는 경우 공백으로 구분

CSS 클래스 삭제

$("#bar").removeClass('클래스 이름 클래스 이름 ...');

 - 두 개 이상의 클래스를 삭제하고자 하는 경우 공백으로 구분

css 클래스 적용/삭제 자동 반복

$("#bar").toggleClass('클래스 이름 클래스 이름 ...');

 - 두 개 이상의 클래스를 처리하고자 하는 경우 공백으로 구분

not()

---

- 복수 요소를 지정하고 있는 jQuery 객체 중에서 특정 요소를 제외한 항목들을 지정하는 기능.

this와 함께 사용하는 경우

$(".btn").click(function () {
    // ".btn"중에서 클릭된 요소
    $(this)
    // ".btn"중에서 클릭되지 않은 나머지 요소(들)
    $(".btn").not(this)
})

jQuery 객체를 사용하여 not()함수 사용

".btn"중에서 id값이 "#hello"인 요소 제외

$(".btn").not($("#hello"))

".btn"중에서 3번째 요소만 제외

$(".btn").not($(".btn:nth-child(3)"))   // 1부터 카운트
$(".btn").not($(".btn:eq(2)"))  // 2부터 카운트

css 셀렉터를 사용하여 not()함수 사용

".btn"중에서 id값이 "#hello"인 요소 제외

$(".btn").not("#hello")

".btn"중에서 3번째 요소만 제외

$(".btn").not(".btn:nth-child(3)")   // 1부터 카운트
$(".btn").not(".btn:eq(2)")  // 2부터 카운트