JavaScript 입문과 웹 UI개발(7)-jQuery 사용법 간단정리
2022. 9. 30. 15:45ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- css 짜기 귀찮아서 Bootstrap 라이브러리 사용할거임
구글에 bootstrap 검색 사이트에 들어가서 cdn link를 붙여넣어라
CSS는 head 태그안에 넣어주고 JS는 body태그 닫히는</body>
바로 전에 넣어줘라
-->
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<!--================숙제용 모달창====================================-->
<!--검은박스는 모달창 외의 화면을 어둡게 만들려고 있는거임
하얀박스에 모달창 내용이 나옴
-->
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<!--========================================================-->
<!--네비게이션 바-->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!--소메뉴-->
<ul class="list-group" id="test1">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<button id="wow">로그인</button>
<button id="test-btn" onclick="toggle()">토글</button>
<p class="hello" >안녕</p>
<p class="hello" >안녕</p>
<p class="hello" >안녕</p>
<p class="hello" >안녕</p>
<p class="hello" >안녕</p>
<script>
document.getElementsByClassName("navbar-toggler")[0].addEventListener('click', function(){
document.getElementsByClassName("list-group")[0].classList.toggle("show");
});
//jquery는 라이브러리일 뿐 -> 함수명만 짧아짐
//위에 적혀진 javascript를 jQuery 로 바꾸면 아래와 같다
//selector는 $()로 바뀌고 addEventListener는 on()으로 바뀐다
//구글에 jQuery cdn을 검색해서 첫번째 걸로 들어가서 minified를 선택해서 들어가면 script 태그를 복사해서 붙여넣는다
//p태그의 안녕을 바보로 만들건데 jQeury와 javascript의 코드를 비교해보면 제이쿼리가 훨씬 코드가 짧다.
//document.querySelector('.hello').innerHTML='바보'; //자바스크립트
//위에 다섯개의 안녕을 바보로 만드려면 javascript는 일일이 입력해줘야 한다
// document.querySelector('.hello')[0].innerHTML='바보';
// document.querySelector('.hello')[1].innerHTML='바보';
// document.querySelector('.hello')[2].innerHTML='바보';
// document.querySelector('.hello')[3].innerHTML='바보';
// document.querySelector('.hello')[4].innerHTML='바보';
$('.hello').html('바보'); //제이쿼리는 한줄로 끝~~!!
$('.hello').css('color', 'red'); //css 변경하는 경우
function toggle(){
$('.hello').toggleClass('list-group');// 클래스 탈부착
}
//addEventListener 대신에 on 사용
$('#test-btn').on('click', function(){
$('.hello').css('background-color', 'blue');
$('.hello').slideToggle(); //sildedown과 slideup 왔다갔다 함
//다른 UI 애니메이션
// .hide() 는 사라지게
// .fadeOut() 은 서서히 사라지게
// .slideUp() 은 줄어들며 사라지게 만들어줍니다.
})
//주의
//$('셀렉터')로 찾은 것들은 뒤에 jquery 함수만 붙일 수 있고
//querySelector('셀렉터')로 찾으면 자바스크립트 함수만 붙일 수 있다
//숙제
//로그인 버튼을 만들어서 누르면 모달창을 띄워라
// 답
//모달창 띄우는부분
$('#wow').on('click', function(){
$('.black-bg').addClass('show-modal');
//$('.black-bg').css('display', 'block');
})
//모달창 닫는부분
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
//$('.black-bg').css('display', 'none');
})
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
main.css
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}
.list-group{
display: none;
}
.show{
display: block;
}
/* 모달창 용 =====================*/
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 160px;
display: none;
/* position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다.
이때 요소들의 수직 위치를 z-index 속성으로 정합니다.
값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록
아래로 내려갑니다. */
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
/* ==========================*/
.show-modal{
display: block;
}로그인하세요
- An active item
- A second item
- A third item
- A fourth item
- And a fifth one
안녕
안녕
안녕
안녕
안녕
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(9)-폼만들며 배워보는 if else 그리고 input, change 이벤트와 and, or 연산자 (0) | 2022.10.02 |
|---|---|
| JavaScript 입문과 웹 UI개발(8)-모달창 만들기와 간단한 애니메이션 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기 (1) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(5)-자바스크립트 이벤트 리스너 (1) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(4)-function의 파라미터 문법 (0) | 2022.09.30 |