jQuery 3탄(요소선택 응용, mouseenter, mouseleave, hover, prop)
어쩌다 보니 3탄까지 가게 되었습니다.
1탄 : https://pabeba.tistory.com/175
2탄 : https://pabeba.tistory.com/176
slideToggle
html에 작성된 내용이 스르륵 내려오는 형태를 보여줍니다.
<!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 toggle</title>
<style type="text/css">
#detailInfo{
display: none;
}
#toggleSpan{
background-color: yellow;
}
</style>
</head>
<body>
<div class="container pt-3">
<script type="text/javascript">
$(function() {
$("#toggleSpan").click(function() {
$("#detailInfo").slideToggle(1000,function(){
if($(this).css("display")=="none"){//보이지 않는 상태 : toggleSpan 에 정보 더보기
$("#toggleSpan").text("정보 더보기");
}else{//보이는 상태 : toggleSpan 에 접기
$("#toggleSpan").text("접기");
}
});
});
});
</script>
<span id="toggleSpan">정보 더보기</span>
<br><br>
<p id="detailInfo">
호소세<br><br>
출생
2000년 13월 36일, 서울특별시 <br><br>
국적
대한민국파일:대한민국 <br><br>
본관
호소 호씨[3]<br><br>
신체
185.7cm 80kg<br><br>
가족
부모님, 남동생, 형, 누나, 언니, 오빠 <br><br>
</p>
</div>
</body>
</html>이번에 새로 추가된 내용입니다.
document ready를 작성하지 않아도 저렇게만 작성하여도 dom이 생성되고 함수를 사용할 수 있게 되었습니다. 코드가 줄었네요 ㅎㅎ
그래서 아이디가 toggleSpan 인 태그를 누르면 숨겨진 내용이 나오게 됩니다.
직접 코드를 옮겨서 확인해 보세요.
요소선택 응용버전
<!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 form 요소 제어</title>
</head>
<body>
<div class="container pt-3">
<form action="test.jsp" id="testForm">
<br> <input type="checkbox" name="hobby" value="노래">노래<br>
<input type="checkbox" name="hobby" value="코딩">코딩<br>
<input type="checkbox" name="hobby" value="독서">독서<br>
<input type="submit" value="전송">
</form>
<script type="text/javascript">
$(function(){
$("#testForm").submit(function() {
// testForm id 폼의 checkbox name이 hobby인 요소들 중 체크되어진 요소에 접근
let hobbyElement=$("#testForm :checkbox[name=hobby]:checked");
if(hobbyElement.length==0){
alert("취미를 하나 이상 선택하세요");
}else{
for(let i=0;i<hobbyElement.length;i++){
// hobbyElement : jquery object , hobbyElement[i] : javascript object
// $(hobbyElement[i]) : jquery object 로 만들어서 val() jquery 함수를 적용해야 한다
alert($(hobbyElement[i]).val());
}
}
return false; //submit 시에 return false를 하면 전송되지 않는다
});
});
</script>
</div>
</body>
</html>1. html 태그를 가져오는 방식이 신기한데요
let hobbyElement=$("#testForm :checkbox[name=hobby]:checked");
id가 testForm 인 체크박스 중에 name 이 hobby이고 체크가 된 태그를 할당했습니다.
2. 체크된 태그를 for문을 사용하여 알람이 뜨게 하는데
3. 🌟javascript 객체로 변경된 hobbyElement를 다시 jQuery 객체로 변경해야 합니다.🌟
4. 변경된 객체로 jQuery 문법을 사용하면 됩니다.
mouseenter, mouseleave
<body>
<div class="container pt-3">
<span id="infoSpan">마우스를 올려보세요</span><br>
<img src="images/록키.jpg" class="img-circle" id="friendImg" width="304" height="236">
</div>
<script type="text/javascript">
$(function(){
$("#infoSpan").mouseenter(function() {
$("#friendImg").show();
});
$("#infoSpan").mouseleave(function() {
$("#friendImg").hide()
});
});
</script>
</body>문법 그대로입니다.
마우스가 span 안으로 들어가면 사진이 보이게 됩니다.
hover
hover 함수도 mouseenter와 비슷합니다. 하지만 하나 다른 것은 나갔다가 들어오는 함수를 한 번에 작성할 수 있습니다.
$(function(){
$("#membody td").click(function() {
alert($(this).text());
});
$("#membody td").hover(function() {//마우스 진입시 동작되는 익명함수
$(this).css("background","yellow");
$("#memInfo").text($(this).text());
}, function() {//마우스 벗어나면 동작되는 익명함수
$(this).css("background","white");
$("#memInfo").text("");
});
});hover 함수를 보시면 내부 함수가 컴마(,)를 사용하여 2개로 나누어져 있습니다.
$("#membody td"). hover(
function() { $(this). css("background", "yellow");
$("#memInfo"). text($(this). text()); },
function() {//마우스 벗어나면 동작되는 익명함수
$(this). css("background", "white");
$("#memInfo"). text("");
});
보이시죠. 첫 번째 함수와 두 번째 함수
mouseenter leave와 이러한 차이점이 있습니다.
prop
<body>
<div class="container pt-3">
<input type="checkbox" id="mailing">메일체크<br>
<input type="button" id="checkBtn1" value="체크하기">
<input type="button" id="checkBtn2" value="체크해제하기">
<input type="button" id="checkBtn3" value="체크상태확인">
<script type="text/javascript">
$(function() {
$("#checkBtn1").click(function() {
$("#mailing").prop("checked", true);
});
$("#checkBtn2").click(function() {
$("#mailing").prop("checked", false);//체크해제상태로 변경
});
$("#checkBtn3").click(function() {
alert($("#mailing").prop("checked"));//체크박스 상태를 확인
});
});
</script>
</div>
</body>직접 파일을 옮겨서 확인하시면 더 재밌습니다. 저는 이거 처음 할 때 '메일함을 만들 수 있겠구나'라고 소리 질렀습니다.
prop은 property를 변경하거나 가져오는 데 사용되는 함수입니다.
위에 사용한 checked 외에도 button을 prop("disabled", true) 이런 식으로 변경할 수 있습니다.
selected, readonly 등도 가능하답니다.
소감
딥 다이브는 정말 끝이 안 보입니다. 깊은 해저로 가는 것이 아닌 끝이 없는 우주로 나아가는 기분입니다. 딥 유니버스 다이브라고 새로 명명하고 싶습니다.
하지만 이렇게 힘이 들어도 포기하지 않고 웃는 사람이 일류라고 합니다. 모두 힘들지만 빵끗 웃어보아요~