[Jquery] css 선택자와 사용 방법

Jquery를 사용하여 쉽게 css 속성을 부여하고 변경할 수 있다.

 

        function myFunc(){
            $("#title").css("color","red")
        }

 

위 코드는 document.getElementById("title").style.color="red"와 같다.

즉, ID가 title인 요소를 선택하여 color를 red로 변경한다.

        function myFunc(){
            $("#title").css("backgroundColor","blue")
        }

 

그렇다면 위 코드는 document.getElementById("title").style.backgroundColor="blue"와 같다.

 

또한 이렇게 따로따로 적을 필요 없이 아래처럼 하면 더 쉽게 여러가지 속성을 부여할 수 있다.

 

        function myFunc(){
            $("#title").css("color","red").css("backgroundColor","blue")
        }

 

이처럼 .css("color",red").css("backgroundColor","blue") 처럼 이어서 작성도 가능하여 체이닝이라 부른다.

그리고 다음처럼 작성도 가능하다.

 

        function myFunc(){
            $("#title").css({"color":"red",
                             "backgroundColor":"blue"})
        }

 

 위와 같이 중괄호를 열고 콤마로 구분하여 작성하면 더 깔끔하고 쉽게 작성이 가능하다.