jQuery | 주요 기능 정리 (css, 태그, 이벤트, 모달)

CSS 컨트롤

css 속성 지정하여 추가하기

$('#searchBtn').css('display', 'none');

 

class 추가 하기 , 삭제 하기

$('#searchBtn').addClass('disabled-btn');
$('#searchBtn').removeClass('disabled-btn');

 

class 가 있는지 없는지 확인

$('#searchBtn').hasClass('on') // true & false 로 반환

 

---

태그 속성 컨트롤

a 태그 href 변경하기

<a href="javascript:void(0);" id="mypage">마이페이지</a>


$('#mypage').attr(
    'href',
    `/mypage?offset=0&limit=20`
);

 

a 태그의 href 제거하기 (클릭 disabled)

$('#mypage').removeAttr('href');

 

button disabled 기능 true, false 설정

$('#searchBtn').attr('disabled', true);
$('#searchBtn').attr('disabled', false);

 

태그 자체 삭제

$('#code').remove();

 

태그안의 내용 삭제

$('#code').empty(); //<h1><h1> 이런식으로 처리됨.

 

태그로 감싸진 텍스트, input value 출력 및 수정하기

<span id="title">닉네임검색</span>
<input type="text" id="nick_sch" />

$('#title').text();  //닉네임검색
$('#nick_sch').val();  //input에 입력한 value값 출력

$('#title').text('닉네임조회');  
$('#nick_sch').val('nick');

 

---

이벤트 컨트롤

onclick 이벤트

<button type="submit" id="searchAction"> 조회 </button>

$('#searchAction').click(function () {
       console.log("닉네임 조회 버튼 Click");
});

 

onchange 이벤트 (keyup)

<input type="text" id="nick_sch" />


$(document).ready(function () {
        $('#nick_sch').keyup(function () {
          const qty = $(this).val();
        });
});

 

 

---

bootstrap modal 컨트롤 

modal on , off 컨트롤

$('#modalWallet').modal('toggle');

$('#modalWallet').modal('show');
$('#modalWallet').modal('hide');

 

modal이 꺼지는 것을 감지 (모달 외부를 클릭해서 꺼졌을 때)

$(document).on('hide.bs.modal', '#codeModal', function () {
    $('#code').empty();
});

 

---

추가 기능

여러개의 id가 중복 기능을 해야할 때

$('#id-1, #id-2, #id-3').attr('disabled', true).addClass('disabled-btn');

 

공통으로 쓰이는 변수, 객체 정의 및 사용하기

// 정의
$.LIMIT = 20;
$.ROUTER_URL = {
  login: '/auth/login',
  logout: '/auth/logout',
	mypage: '/mypage'
}


// 사용
const url = `${$.ROUTER_URL.mypage}?offset=0&limit=${$.LIMIT}`