icon_home

07_제이쿼리_문서객체조작_1.클래스조작

• 사용자가 선택한 요소에 클래스를 추가하거나 삭제, 또는 클래스가 없는 요소를 찾아서 서식을 적용하는 메소드이다.

• 활용 : 햄버거/X버튼 따로 만들지 않고 햄버거 메뉴 하나만 만들어서 버튼으로 바꿀 수 있음


1. 클래스 조작

• addClass();: 선택한 요소에 클래스 서식을 추가

• removeClass();: 선택한 요소에 클래스 서식을 제거

• toggleClass();: 선태갛ㄴ 요소에 클래스 서식을 추가+제거

• hasClass();: 선택한 요소에 해당 클래스 이름이 있는지 여부를 판단하여 true, flase 값으로 반환

• class();: 사용자가 선택한 요소에 서식을 적용


아래 버튼을 누르면
현재 박스에 서식을
적용하거나 제거하기

2. 삼성화재 오른쪽 고정배치된 'quick menu' 구현하기

• 오른쪽 사이드에 배치되는 요소 = aside

      $('i.fa-chevron-right').click(function(){
        $(this).toggleClass('on');
        $('aside').toggleClass('on1');
      });

3. 콘트롤버튼(탭메뉴) 서식 만들기

• a의 href="#" 기능을 무력화 시켜주는 것 (#은 새로고침 기능이 있기 때문에 무력화 시켜줘야함)

    1. a의 href에#대신 javascript:void(0)을 넣거나,

    2. 제이쿼리에 return false 를 넣어줌

      // css
      .on2{background: #F59AC3;} 
      
      1. css에 on2 라는 클래스 서식을 만들어 준 뒤
      2. 제이쿼리로 클릭 버튼에 on2 서식을 추가해줌

      // jquery
      $('.tab_mnu li a').click(function(){
        $('.tab_mnu li a').removeClass('on2');
        $(this).addClass('on2');
        return false; //제이쿼리 문법에서 a요소의 #기능을 무력화 시킴
      });

      $('.c_btn li').click(function(){
        $('.c_btn li').removeClass('on2');
        $(this).addClass('on2');
      });