jQuery 2탄 (다중선택, show, hide)
https://pabeba.tistory.com/175
jQuery 1탄 (ready, click, text, $(요소 선택) )
jQuery란? jQuery는 JavaScript 기반의 오픈 소스 프론트엔드 라이브러리입니다. 웹 개발을 위한 도구로 사용되며, HTML 문서의 요소를 선택하고 조작하는 데 특히 유용합니다. jQuery는 단순하고 직관적
pabeba.tistory.com
2탄을 들어가기 전 1탄을 보시고 들어가면 좋을 것 같습니다! 2탄은 조금 응용 편입니다.
요소 다중 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
.a{
background-color: yellow;
}
.b{
background-color: lime;
}
#result{
background-color: orange;
}
</style>
<title>jquery study </title>
</head>
<body>
<div class="container pt-3">
<ol class="a food">
<li>치킨</li>
<li>피자</li>
<li>콜라</li>
</ol>
<ul class="food b">
<li>소주</li>
<li>맥주</li>
<li>와인</li>
</ul>
<ol>
<li>하와이</li>
<li>제주도</li>
<li>훗카이도</li>
</ol>
<br><br>
<span id="result"></span>
<hr>
<div class="student">아이유</div>
<div class="teacher">강하늘</div>
<script type="text/javascript">
$(document).ready(function() {
$(".food li").click(function() {
$("#result").text($(this).text());
})
$(".student,.teacher").click(function() {
alert($(this).text());
})
})
</script>
</div>
</body>
</html>css 랑 script가 있어서 더 길어 보이는데 직접 파일을 옮겨서 실행해 보면 그렇게 어려운 코드는 아닙니다. 오히려 쉬운 코드입니다.
1. script에 작성된 내용을 보겠습니다.
2. dom 이 준비되면 함수 안에 있는 함수가 실행 가능합니다.
3. class 가 food 인 <li> 태그를 클릭하면 id 가 result 인 곳에 텍스트를 누른 li의 텍스트로 할당하는 문장입니다.
$(".food li").click(function() {
$("#result").text($(this).text());
})4. class가 student, teacher 인 것을 누르면 누른 것의 텍스트가 알람으로 나옵니다.
$(".student,.teacher").click(function() {
alert($(this).text());
})
이렇게 다중으로 선택을 할 수 있기 때문에 jQuery의 장점을 확인할 수 있습니다.
show(), hide()
이번에는 태그자체를 사라지게 하거나 다시 나타나게 하는 함수를 알아봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>jquery study</title>
</head>
<body>
<div class="container pt-3">
<img src="록키.jfif" id="imgView"><br>
<br>
<button type="button" id="hideBtn">사진감추기</button>
<button type="button" id="showBtn">사진보기</button>
<script type="text/javascript">
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#imgView").hide(2000);
})
$("#showBtn").click(function() {
$("#imgView").show(2000);
})
})
</script>
</div>
</body>
</html>1. script 부분을 확인해 보면
2. dom 이 준비되면 내부 함수를 실행할 수 있습니다.
3. id가 hideBtn 인 것을 클릭하면 id가 imgView 인 태그를 2초에 텀을 두고 서서히 없어지게 하는 문장입니다.
$("#hideBtn").click(function() {
$("#imgView").hide(2000);
})4. 반대로 id 가 showBtn 인 것을 클릭하면 id가 imgView 인 태그를 2초에 걸쳐서 나타나게 해주는 문장입니다.
(자신의 애인 사진이 있으면 그 사진으로 연습해 보면 되겠네요 ㅎㅎ
아.... 그러면 사진 보기만 누르겠네요. 그냥 관심 없는 사진으로 연습해 봐요....ㅎㅎ)
이거는 직접 코드를 옮겨서 실행해 보아요. (사진은 맘에 드시는 거 구해서 링크를 잘 설정하세요.)
소감
요새 프로젝트를 진행하는 중이라 몸이 조금 피곤하군요. 체력관리가 중요하다는 것을 새삼 느끼고 있습니다. 또한 한번 파일을 만들거나 프로젝트에 대한 이야기를 하다 보면 시간이 가는 줄 모르고 일을 하게 되는데, 쉬는 시간을 가지면서 스트레칭을 해야겠습니다.
그래도 하루하루 진행되는 일을 보면서 아주 만족하고 있습니다.
여러분들도 좋아하는 어떤 것에 빠져 살아본 적이 있으신가요? 워런버핏 님께서 인생을 살 때 20가지(좋은 것)만 꾸준히 잘하고 살아도 하이레벨로 살 수 있다고 하십니다. 뭐든 꾸준히 잘해보도록 하겠습니다.