[jQuery] 메서드

Narcoker·2023년 5월 25일
0

jQuery

목록 보기
3/3

메서드(이펙트)

파라미터로 속도를 지정할 수 있다.
params: 'fast', 'slow', 숫자(밀리초)
아무것도 넣지 않으면 기본값이 적용된다.

  • .show() : 보이기
  • .hide() : 숨기기
  • .toggle() : 보이기/감추기
  • .slideDown() : 아래로 서서히 내려오면서/올라가면서 보이기
  • .slideUp() : 위로 서서히 올라가면서/내려오면서 감추기
  • .slideToggle() : 서서히 내려오면서 보이고 올라가면서 감추기
  • .fadeIn() : 서서히 나타나는 것
  • .fadeOut() : 서서히 사라지는 것
  • .fadeToggle(): 서서히 나타나고 사라지기
  • .stop(): 해당 애니메이션 큐 데이터 삭제
$('.menu li').mouseenter(function(){
    $(this).children('.sub-menu').stop().slideDown()
})

$('.menu li').mouseleave(function(){
    $(this).children('.sub-menu').stop().slideUp()
})

메서드(클래스 제어)

  • .addClass() : 선택 요소에 클래스 넣기
  • .removeClass() : 선택 요소에 클래스 빼기
  • .toggleClass() : 선택 요소에 클래스 넣고 빼기

요소 기존 스타일을 자식 선택자로 사용했다면
그 선택자를 따라 스타일을 만들어야한다.

css

        .container div{
            background-color: dodgerblue;
            width: 250px;
            height: 300px;
            margin-top: 10px;
            text-align: center;
            line-height: 300px;
            color: white;
            /* display: none; */
        }
        
        .container div.active{
            background-color: red;
        }
        /* 동작 안함
    	.active{
            background-color: red;
        }
        */

custom.js

$('.add-btn').click(function(){
    $('.container div').addClass('active')
})

$('.remove-btn').click(function(){
    $('.container div').removeClass('active')
})

$('.toggle-btn').click(function(){
    $('.container div').toggleClass('active')
})

메서드(요소 탐색)

  • .children() : 선택요소의 바로 아래 단계인 자식 요소 선택, 파라미터로 자식 지정 가능
  • .parent() : 부모
  • .siblings() : 선택 요소의 형제요소 선택
  • .find() : 자손들, 파라미터로 자손 지정 가능
  • .next() : 선택요소 바로 앞
  • .prev() : 선택요소 바로 전

메서드(속성 탐색)

  • .val() : value 프로퍼티를 가져오는 메서드

this
이벤트가 일어난 요소

$('.btn span').click(function(){
  $(this).addClass('active')
  $(this).siblings().removeClass('active')
})
profile
열정, 끈기, 집념의 Frontend Developer

0개의 댓글