기록/자바_국비
[배운내용정리] 0127 자바 국비교육_ jQuery
mois
2021. 2. 13. 22:31
728x90
2021년 01월 27일 9시 ~ 15시 30분 zoom으로 수업 진행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img{
width: 200px;
height: 200px;
position: absolute;
left: 200px;
top: 100px;
}
p {
width: 100px;
border: 1px solid red;
position: absolute;
left: 10px;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js" > </script>
<script type="text/javascript">
$(function () {
//h2 태그 클릭시 p태그를 보이게하고, 안 보이게 하는 코드
$("h2").click(function() {
$("p").toggle();
//each를 통해 p태그를 배열로 넘겨받음 - i는 0부터 시작, 마지막 p태그까지,
$("p").each(function(i) {
$(this).animate({"top":50*(i+1)+"px"}, 1000);//넘겨받은 i번째 p태그에 animation 효과주기
});
});
//bind : 이벤트 연결, click()과 동일한 성능
//$("p").bind("click", function() {});
$("p").click(function() {
var ele = $(this);//click 이벤트가 발생된 p태그를 ele변수에 담는다
//$("p").css({"background":"white"});
//내가 누르려는 p태그말고 다른 p태그도 pink로 바뀌어있을 수 있으니 하얀색으로 지정 후 내가 누른 p태그만 분홍으로 바뀌게 설정
ele.css({"background":"pink"});
ele.siblings("p").css({"background":"white"});//siblings : 본인을 제외한 같은 레벨의 태그를 탐색
//:contains(text) : text를 포함하고 있는 요소
if(ele.is("p:contains(hide)")) {
$("img").hide();
}
if(ele.is("p:contains(show())")) {
$("img").show();
}
if(ele.is("p:contains(toggle())")) {
$("img").toggle();
}
if(ele.is("p:contains(slideUp())")) {
$("img").slideUp();
}
if(ele.is("p:contains(slideDown())")) {
$("img").slideDown();
}
if(ele.is("p:contains(slideToggle())")) {
$("img").slideToggle();
}
if(ele.is("p:contains(fadeOut())")) {
$("img").fadeOut();
}
if(ele.is("p:contains(fadeIn())")) {
$("img").fadeIn();
}
if(ele.is("p:contains(fadeTo())")) {
$("img").fadeTo(2000, 0.2);//서서히 사라지다가 img 태그 opacity 값이 0.2로 고정된다.
//다른 fade 설정에 간섭이 생겨서 잘 사용하지 않는다.
}
if(ele.is("p:contains(fadeToggle())")) {
$("img").fadeToggle();
}
if(ele.is("p:contains(animate())")) {
$("img").animate({"width":"500px", "height":"500px", "left":"600px", "top":"0px"}, 2000);
}
});
});
</script>
</head>
<body>
<h2>이펙트</h2>
<div>
<p>hide()</p>
<p>show()</p>
<p>toggle()</p>
<p>slideUp()</p>
<p>slideDown()</p>
<p>slideToggle()</p>
<p>fadeOut()</p>
<p>fadeIn()</p>
<p>fadeTo()</p>
<p>fadeToggle()</p>
<p>animate()</p>
</div>
<img alt="img1" src="image/cat.png">
</body>
</html>
<!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>
<style type="text/css">
a {
font-weight: bold;
}
#box {
background-color: skyblue;
width: 100px;
height: 100px;
position: relative;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//페이지 로드 시 실행되는 함수
$(function() {
$(".run").click(function() {
//애니메이션 효과 여러 개 주는 방법 .animate().animate();
$("#box").animate({opacity:"0.1", left:"400px"}, 1000)
.animate({opacity:"0.4", top:"160px", width:"20px", height:"20px"}, "slow")
.animate({opacity:"1", left:"0px", height:"100px", width:"100px"}, "slow")
.animate({top:"0px"}, "fast")
.slideUp().slideDown();
//slow : 600 , fast : 200 , default : 400
//css 속성 정의할 때 속성 명을 문자열로 지정하지 않아도 되는 모습 확인
//이렇게 메소드를 연속적으로 사용하는 것 -> 체이닝
});
});
</script>
</head>
<body>
<p><a href="#" class="run">Run</a></p>
<div id="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.main_menu {
width: 300px;
}
.sub_menu1 {
cursor: pointer;
}
.sub_menu2 {
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
//b 태그의 클릭 이벤트를 감지하여 이벤트 처리
$("b").click(function() {
//서브메뉴들이 보이게 처리
$(this).next().slideDown();//내가 누른 태그의 다음으로 오는 요소에 slideDown() 효과주기
//현재 누른 태그 말고 다른 태그의 ul이 열려있을 경우 해당 ul닫아주기
$(this).parent().siblings().find("ul").slideUp();//현재 요소<b>의 부모로 올라가서<li> 부모의 형제중에서 <ul>요소를 찾고 해당 요소를 slideUp()
//한 줄로 표현
//$(this).next().slideToggle().end().parent().siblings().find("ul").slideUp();
//this부터 시작해서 end를 만나면, 앞에 내용 무시하고 다시 this부터 end뒤의 내용부터 코드를 실행한다.
});
});
</script>
</head>
<body>
<p>메뉴 만들기</p>
<ul type="square" class="main_menu">
<li class="sub_menu1">
<b>(1)CSS 선택자</b>
<ul type="circle" class="sub_menu2">
<li> tag로 선택하기 </li>
<li> id로 선택하기 </li>
<li> class로 선택하기 </li>
<li> parent child로 선택하기 </li>
<li> parent > child로 선택하기 </li>
<li> :nth-child로 선택하기 </li>
<li> :first-child로 선택하기 </li>
<li> :last-child로 선택하기 </li>
</ul>
</li>
<li class="sub_menu1">
<b>(2)속성 선택자</b>
<ul type="circle" class="sub_menu2">
<li>[attr]</li>
<li>[attr=value]</li>
</ul>
</li>
<li class="sub_menu1">
<b>(3)폼 선택자</b>
<ul type="circle" class="sub_menu2">
<li>:input 타입</li>
</ul>
</li>
<li class="sub_menu1">
<b>(4)사용자 정의 선택자</b>
<ul type="circle" class="sub_menu2">
<li>:eq()</li>
<li>:first</li>
<li>:last</li>
<li>:parent</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img{
width: 200px;
height: 200px;
}
.addSize {
width: 300px;
height: 300px;
}
.onOffImg{
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("img").toggleClass("onOffImg");
//버튼을 눌렀을 때 class='onOffImg' 속성이 추가되고, 다시 눌렀을 때에는 해당 속성이 사라진다.
//class='onOffImg' 속성이 달리는 순간 display:none 속성이 적용되어 화면에서 지워지게 된다.
});
$("img").click(function() {
if($(this).hasClass("addSize")) {
//내가 누른 this에 addSize 클래스가 존재하는 경우 실행되는 구문
$(this).removeClass("addSize").attr("title", "이미지 축소");
}
else {
$(this).addClass("addSize").attr("title", "이미지 확대");
}
});
});
</script>
</head>
<body>
<button id="btn">이미지 on / off</button>
<br><br>
<img alt="flower1" src="image/flower1.PNG">
<img alt="flower1" src="image/flower2.PNG">
<img alt="flower1" src="image/flower3.PNG">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
//replaceWith(target.replaceWith(new)) : 선택한 요소를 지정한 요소로 대체한다.
$("button:first").click(function() {
$("p").replaceWith("<b>replaceWith</b>");
});
//replaceAll(new.replaceAll(target)) : 선택한 요소를 지정된 요소로 대체
$("button:last").click(function() {
$("<b>replaceAll</b>").replaceAll("p");
});
});
</script>
</head>
<body>
<div>
<p>DOM</p>
<p>DOM</p>
</div>
<button>바꾸기 (replaceWith)</button>
<button>바꾸기 (replaceAll)</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div {
border : 1px solid red;
}
.prepend {
border : 1px dotted blue;
}
.append {
border : 1px dotted green;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
$("button:eq(0)").click(function() {
//$("div").prepend("123");//div태그안에서 제일 먼저 배치된다.
$("div").prepend( $("p").addClass("prepend").text("prepend") );//div 태그 안에 p태그가 존재하는 자리에 p태그가 없어지고 얘만 2개 존재하게 된다.
});
$("button:eq(1)").click(function() {
//$("div").append("123");//div태그안에서 제일 마지막 위치에 배치된다.
$("div").append( $("p").addClass("append").text("append") );//얘도 replace마냥 바뀜
});
$("button:eq(2)").click(function() {
$("div").html("<b> HTML 요소를 바꾼다. </b>");
});
$("button:eq(3)").click(function() {
$("div").text("<b> text 요소를 바꾼다. </b>");//태그 적용이 안된다 진짜 텍스트로
});
});
</script>
</head>
<body>
<button>prepend()</button>
<button>append()</button>
<button>html()</button>
<button>text()</button>
<div>
<p>내부 삽입 01 </p>
<p>내부 삽입 02 </p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div {
border: 1px solid red;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
$("button:eq(0)").click(function() {
$("#base").after("<div>새로운 엘리먼트 (after)</div>");//기준이 되는 태그(#base) 바로 다음에 배치시킨다.
//a.after(b); b를 a뒤에 배치시키겠다.
});
$("button:eq(1)").click(function() {
$("<div>새로운 엘리먼트 (inserAfter)</div>").insertAfter("#base");//기준이 되는 태그(#base) 바로 다음에 배치시킨다.
//a.insertAfter(b); a를 b뒤에 배치시키겠다.
});
$("button:eq(2)").click(function() {
$("#base").before("<div>새로운 엘리먼트 (before)</div>");//기준이 되는 태그 바로 앞에 배치시킨다.
});
$("button:eq(3)").click(function() {
$("<div>새로운 엘리먼트 (insertBefore)</div>").insertBefore("#base");//기준이 되는 태그 바로 이전에 배치시킨다.
});
});
</script>
</head>
<body>
<button>after()</button>
<button>insertAfter()</button>
<button>before()</button>
<button>insertBefore()</button>
<br>
<div id="base">
<p>외부 삽입</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box {
border: 2px solid red;
}
#menu {
background-color: orange;
text-align: right;
}
a{
text-decoration: none;
font-size: 20px;
}
#menu div {
display: inline;
margin-right: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
var $box = $("<div>").addClass("box");
//<div class='box'></div> 이렇게 생성된 상태로 $box 변수에 담겨있음.
//내가 클릭한 태그를 box 변수로 감싸고싶다.
//$(".sub_menu:first").wrap($box);
$(".sub_menu").click(function() {
//unwrap()
//메뉴의 div(.sub_menu)를 전체 검색해서 box 클래스를 찾아 unwrap으로 벗긴다.
$(".sub_menu").each(function() {
//each로 접근한 첫번째,,두번째,, 각각의 친구 this..
if( $(this).parent().is(".box") ){
$(this).unwrap(".box");
}
});
$(this).wrap($box);
});
});
</script>
</head>
<body>
<div id="menu">
<div class="sub_menu">
<a href="#"> 국비지원 </a>
</div>
<div class="sub_menu">
<a href="#"> 훈련검색 </a>
</div>
<div class="sub_menu">
<a href="#"> 기관검색 </a>
</div>
<div class="sub_menu">
<a href="#"> 질문답변 </a>
</div>
<div class="sub_menu">
<a href="#"> 자격증 </a>
</div>
</div>
</body>
</html>