gwooden_코린이

제이쿼리 기능 적용 및 nodejs 적용하기 본문

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

제이쿼리 기능 적용 및 nodejs 적용하기

gwooden22 2022. 12. 23. 14:46
728x90

1. 제이쿼리 기능 사용

 

  • uncompressed : 풀버전 (모든 기능 포함)
  • minified : 띄어쓰기, 탭키, 스페이스바 기능이 제외된
  • slim
  • slim minified

 

자바스크립트가 제일 마지막에 읽혀야 되기 때문에 제이쿼리는 자바스크립트 링크 위에 배치

<!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="ab">
    알림창
    <button onclick="alertBox()">X</button>
  </div>

  <div class="box">a</div>
  <div class="box">a</div>
  <div class="box">a</div>
  
  <button onclick="alertBox('첫 번째')">알림창1 표시</button>
  <button onclick="alertBox('두 번째')">알림창2 표시</button>
  <button onclick="alertBox('세 번째')">알림창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: 20px;
  border-radius: 10px;

  display: none;
}

.box {
  height: 100px;
  border: 1px solid black;
}

 

$('.box').html('hi');
$('.box').eq(0).html('hihihihihi');

 

function alertBox(text) {

//$('선택자') 제이쿼리 문법
$('.alert-box').html(text);
$('.alert-box').css('display', 'block');

//자바스크립트 문법으로 작업한 (위에 제이쿼리 문법과 동일한 기능)
document.querySelectorAll('.alert-box')[0].innerHTML = text;
document.querySelectorAll('.alert-box')[0].style.display = 'block';

}

 

2. nodejs 설치해서 적용하기

 

nodejs를 설치한다.

 

비주얼스튜디오에서 터미널 창을 띄운다. (터미널 창 띄우는 단축키 컨트롤+ ')

nodsjs 비주얼스튜디오 터미널에서 오류가 뜨는 경우 비주얼스튜디오 재실행~

 

npm init이라고 타이핑 후 엔터 치면 된다.

Is this OK? (yes) 가 나올때 까지 엔터 치면서 계속 넘어가면 된다.

마지막에 'yes' 타이핑 훈 엔터하면 초기설정이 완료 된다.

 

이제 마지막에 npm install @types/jquery --save 타이핑 후 엔터 치면 완료!

 

제이쿼리가 정상적으로 적용됐는지 확인해보면 끝!

728x90
저작자표시 비영리 변경금지 (새창열림)

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

자바스크립js 요소(태그)들 추가 / 삭제  (1) 2022.12.26
제이쿼리 기능 사용해보기  (0) 2022.12.23
자바스크립트js DOM  (0) 2022.12.23
자바스크립트js 메서드  (0) 2022.12.23
자바스크립트js Object 객체  (0) 2022.12.22
'프론트엔드/자바스크립트' Related Articles more
Comments