gwooden_코린이

제이쿼리 기능 사용해보기 본문

프론트엔드/자바스크립트

제이쿼리 기능 사용해보기

gwooden22 2022. 12. 23. 15:53
728x90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="1.css">
</head>
<body>

  <div class="alert-box" id="ab1">a
    <button onclick="showClose('ab1')">x</button>
  </div>
  <div class="alert-box" id="ab2">b
    <button onclick="showClose('ab2')">x</button>
  </div>
  <div class="alert-box" id="ab3">c
    <button onclick="showClose('ab3')">x</button>
  </div>

  <button onclick="show('ab1')">알림창1 표시</button>
  <button onclick="show('ab2')">알림창2 표시</button>
  <button onclick="show('ab3')">알림창3 표시</button>

  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <script src="1.js"></script>
</body>
</html>
.alert-box {
  background-color: aqua;
  padding: 10px;
  margin: 5px;

  display: none;
}
function show(id) {
  document.getElementById(id).style.display = 'block';
  
}


function showClose(id) {
  document.getElementById(id).style.display = 'none';
  
}

- 제이쿼리로 문법 다시 정리


function show(id) {
  //document.getElementById(id).style.display = 'block';
  //document.querySelectorAll(`#${id}`)[0].style.display = 'block'
  $(`#${id}`).css('display', 'block');
  
}


function showClose(id) {
  //document.getElementById(id).style.display = 'none';
  //document.querySelectorAll('#' + id)[0].style.display = 'none';
  //$('#' + id).eq(0).css('display', 'none');
  $(`#${id}`).css('display', 'none');
  
}

 

공통되는 부분 합쳐서 하나로 했을때

  //HTML
  
  <div class="alert-box" id="ab1">a
    <button onclick="show('ab1', 'none')">x</button>
  </div>
  <div class="alert-box" id="ab2">b
    <button onclick="show('ab2', 'none')">x</button>
  </div>
  <div class="alert-box" id="ab3">c
    <button onclick="show('ab3', 'none')">x</button>
  </div>

  <button onclick="show('ab1', 'block')">알림창1 표시</button>
  <button onclick="show('ab2', 'block')">알림창2 표시</button>
  <button onclick="show('ab3', 'block')">알림창3 표시</button>
//JavaScript

/*
function show(id, dp) {
document.querySelectorAll(`#${id}`)[0].style.display = dp;
}
*/


function show(id, dp) {
  $(`#${id}`).css('display', dp);
}

onclick 이벤트 하나로 끄기/켜기 기능 넣어보기

  <div class="box">
    보였다 안보였다
  </div>
  <button onclick="onOff()">on/off</button>

 

onclick 홀짝으로 끄기/켜기

let cnt = 0;
  
function onOff() {
  cnt ++;

  if(cnt % 2 === 1) {
  $('.box').css('display', 'none');
  } else {
    $('.box').css('display', 'block');
  }
  
}

 

onclick 스위치 형식으로 끄기/켜기

let cnt = 0;
  
function onOff() {

  if(cnt == 0) {
    $('.box').css('display', 'none');
    cnt = 1;
    } else {
      $('.box').css('display', 'block');
      cnt = 0;
    }
  
}

 

 

  <div class="box">
    보였다 안보였다
  </div>
  <button onclick="onOff()" id="butt">on</button>

let cnt = 0;
  
function onOff() {
  cnt ++;

  if(cnt % 2 === 1) {
  $('.box').css('display', 'none');
  $('#butt').html('off');
  } else {
    $('.box').css('display', 'block').html('off');
    $('#butt').html('on');
  }
  console.log(cnt);
}

 

 

중복되는 부분 상수로 선언해서 간소화 시키기

제이쿼리 문법 자체가 이미 간소화 되어 있어서 추가적으로 간소화작업은 굳이 필요없다고 느낀다.

//const 상수로 선언해서 사용 값이 바뀌면 안되기 떄문에
const box = $('.box');
const butt = $('#butt')

let cnt = 0;
  
function onOff() {
  cnt ++;

  if(cnt % 2 === 1) {
  box.css('display', 'none');
  butt.html('off');
  } else {
    box.css('display', 'block').html('off');
    butt.html('on');
  }
}

자바스크립트로 했을 때

 

html에서 버튼 처음보여지는 문자를 자바스크립트에서 처리했을떄

중복 되는 document.querSelectorAll('')[0]; 부분을 상수로 선언해서 간소화 시키기

  • 숨기기 기능 hide
  • 보이기 기능 show
  • 끄기/켜기 기능 toggle
function sh() {
  $('.box2').toggle();
}

 

자바스크립트 문법이 길다보니 제이쿼리 문법으로 더 축소하고 더욱 직관적으로 쓸 수 있다.

하지만, 지금은 제이쿼리 보다는 '리액트'를 주로 많이 사용한다.

728x90
저작자표시 비영리 변경금지

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

자바스크립트 + 제이쿼리 장바구니 카드 만들기  (0) 2022.12.26
자바스크립js 요소(태그)들 추가 / 삭제  (1) 2022.12.26
제이쿼리 기능 적용 및 nodejs 적용하기  (0) 2022.12.23
자바스크립트js DOM  (0) 2022.12.23
자바스크립트js 메서드  (0) 2022.12.23
'프론트엔드/자바스크립트' Related Articles more
Comments