[JQuery] 제이쿼리 함수 사용법

기본적인 제이쿼리 함수는 생성자 함수, 메서드로 나눈다. 함수의 활용법은 다음과 같다

    <a class="test" href="#none">테스트 입니다</a>
    <div class="test2">보이나여??</div>

 

 

.test2{
    background-color: blue;
    width: 100px;
    margin-top: 10px;
    color: white;
    text-align: center;
    display: none;
}

 

 

$('.test').mouseenter(function(){
    $('.test2').show()
});

$('.test').mouseleave(function(){
    $('.test2').hide()
});

결과

예제를 작성했을 때 다음과 같이 아무것도 보이지 않는다 하지만 마우스를 올려보았을 때 

마우스를 올렸을때

test2의 클래스 div가 출력 되는것을 볼 수 있다. 자바스크립트를 보면 test클래스에 마우스를 올리면 test2가 보이고, 마우스를 띄었을 때 hide 한다는 메서드를 주었기 때문에 이렇게 나오는 것이다.