[jQuary]선택자

jQuery를 사용하면 자바스크립트만으로 문법을 작성할 때 보다 훨씬 간결하게 작성이 가능하다.

 

선택자:

jQuery로 특정 요소를 선택하는 용도이다.

사용방법:

$("선택할요소")

jQuery 선택자의 쌍따옴표(혹은 따옴표) 안의 선택 요소는 기존의 CSS선택자와 동일하다.

 

.css() 메소드

jQuery로 선택한 요소의 css 속성 변경하기

$("선택자").css({"속성명":"속성값"};

css에선 속성값 뒤에 세미콜론을 꼭 붙여줘야하지만 jQuery는 안붙여도된다.

중간에 콤마를 사용하여 변경하조자 하는 속성명과 속성값을 추가할 수 있다.

 //.red{color:red;} 를 제이쿼리로 변경하기
 $(".red").css({"color":"red"});  

.attr() 메소드

jQuery로 선택한 요소의 attr 속성 변경하기

$("선택자").attr({"속성명":"속성값"});

css에선 속성값 뒤에 세미콜론을 꼭 붙여줘야하지만 jQuery는 안붙여도된다.

중간에 콤마를 사용하여 변경하조자 하는 속성명과 속성값을 추가할 수 있다.

$(document).ready(function(){
    $(".btn1").on("click",function(){//on 이벤트가 발생하면 이벤트와 함수랑 연결시켜줌
        $(".frame img").attr({
            "src":"./images/bg1.jpg", //상대경로가 중요, html 기준으로 잡기 
            "alt":"시계1"
        })
    }); 

    $(".btn2").on("click",function(){
        $(".frame img").attr({
            "src":"./images/bg2.jpg", 
            "alt":"시계2"
        })
    }); 
});

---