研修41日目
$:jQuery
$(コレクター)-コレクターに対応するオブジェクトを取得します.
オブジェクト。length-オブジェクトの数
$( document).ready(関数);-bodyを描画して関数を実行します.
= window.onload
実行順序ready......,onload
readyはonloadの前に実行
オブジェクト。on(イベントタイプ、関数);-このタイプのイベントが発生したときに関数を実行します。
オブジェクト.on(イベントタイプ、コレクタ、関数);
イベントをオブジェクトに割り当てます.
$(this)-イベントターゲットオブジェクト
実習試験
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.a{
background-color: red;
}
</style>
<script type="text/javascript"
src="./jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //body가 다 그려진 이후 함수 실행
// window.onload 와 동일하나 onload 보다 선실행
// 복수 선언 가능
$("#btn").on("click", test);
$("#tb tbody").on("click","tr", function(){
alert($(this).attr("name"));
if($(this).attr("class") =="a"){
$(this).removeAttr("class"); //attr 삭제시
} else{
$(this).attr("class", "a");
}
$("#txt").val($(".a").length + "개");
});
});
function test(){
/* 기존 방식
alert(document.getElementById("txt").value);
document.getElementByid("txt").value = "바꿨다.";
*/
alert($(".d").val()); //val() : value 취득
$(".d").val("바꿨다"); // val(값) : value에 값 할 당
}
</script>
</head>
<body>
<input type="text" id="txt" class="d"/>
<input type="button" value ="눌렀다" id="btn"/>
<br/>
<table id="tb">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
<thead>
<tbody>
<tr name="1">
<td>1</td>
<td>홍길동</td>
<td>300살</td>
</tr>
<tr name="2">
<td>2</td>
<td>김철수</td>
<td>37살</td>
</tr>
</tbody>
</table>
</body>
</html>
オブジェクト。animate(オプション、時間、関数);
関数:終了時に実行、オプション要素
オプション:javascriptオブジェクトシェイプ
{鍵:値
}
実習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 실습2일차 실습1</title>
<style type="text/css">
.box{
display: inline-block;
vertical-align: top;
width: 200px;
height: 200px;
border : 20px solid #000000;
background-color: rgb(0, 0, 0);
}
html, body{
margin: 0;
height: 100%;
}
.side{
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 100%;
z-index: 100;
box-shadow: 1px 0px 1px #000000;
background-color: orange;
}
</style>
<script type="text/javascript"
src="./jquery/jquery-1.12.4.js"></script>
<!-- 내용을 덮어 씌우기 때문에 밑에 하나 스크립트를 하나 더 만들어야한다. -->
<script type="text/javascript">
var r = 0;
var g = 0;
var b = 0;
$(document).ready(function(){
$(".btn_wrap").on("click", "input[type='button']", function(){
switch ($(this).val()) {
case "rUp":
if(r < 255){
r += 5 ;
}
break;
case "rDown":
if( r > 0){
r -= 5 ;
}
break;
case "gUp":
if(g < 255){
g += 5 ;
}
break;
case "gDown":
if( g > 0){
g -= 5 ;
}
break;
case "bUp":
if(b < 255){
b += 5 ;
}
break;
case "bDown":
if( b > 0){
b -= 5 ;
}
break;
}
$(".box").css("background-color",
"rgb("+ r + ","+ g + ","+ b + ")");
console.log($(".box").css("background-color"));
});
$(".btn_wrap2").on("click", "input[type='button']", function(){
switch($(this).val()){
case "show" :
//보통 나타날대는 show 감출때는 fadeout 물론 상황에 따라 다름
//$(".box").show();
//$(".box").fadeIn("fast");
$(".box").slideDown(300);
break;
case "hide" :
//$(".box").hide();
//$(".box").fadeOut(300);
$(".box").slideUp(300);
break;
case "big" :
//console.log($(".box").width()); //패딩없음
//console.log($(".box").innerwidth()); //패딩포함
//$(".box").width($(".box").width() + 50);
//$(".box").height($(".box").height() + 50);
$(".box").animate({
width: "+=50px",
height: "+=50px",
opacity: "1.0"
}, 500);
break;
case "small" :
//$(".box").width($(".box").width() - 50);
//$(".box").height($(".box").height() - 50);
$(".box").animate({
width: "-=50px",
height: "-=50px",
opacity: "0.1"
}, 500);
break;
case "ani":
$(".box").slideUp("slow").delay(1000).slideDown("slow", function() {
alert("ani end!");
});
break;
case "aniStop":
$(".box").stop(); //현재 실행 중인 Animate에 대하여 처리
$(".box").stop(); //딜레이에 대한 스탑,
$(".box").stop(); // slideDown에 대한 스탑
break;
case "side":
$(".side").animate({
opacity: "1.0",
left:"0px"
},300);
break;
}
});
$(".side").on("click", function(){
$(".side").animate({
opacity: "0.0",
left: "-200px"
},300);
});
});
</script>
</head>
<body>
<div class="btn_wrap">
<input type="button" value="rUp"/>
<input type="button" value="rDown"/>
<input type="button" value="gUp"/>
<input type="button" value="gDown"/>
<input type="button" value="bUp"/>
<input type="button" value="bDown"/>
</div>
<div class="btn_wrap2">
<input type="button" value="show"/>
<input type="button" value="hide"/>
<input type="button" value="big"/>
<input type="button" value="small"/>
<input type="button" value="ani"/>
<input type="button" value="aniStop"/>
<input type="button" value="side"/>
</div>
<div class="box"> </div>
<div class="side">HelloWorld</div>
</body>
</html>
アイテム
.is(セレクタ):セレクタに対応していますか?.prop(データム):データム状態を返します.
ex)checked=>checked状態.
※isは汎用性が高いので、isを使うことをお勧めします!
each
$(コレクター).each(関数);
実習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="./jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#all").on("click", function(){
if($(this).is(":checked")){
$("#wrap input").prop("checked", true);
} else{
$("wrap input").prop("checked", false);
}
checkTxt();
});
$("#wrap").on("click", "[type='checkbox']", function(){
if($("#wrap [type='checkbox']").length
==$("#wrap [type='checkbox']:checked").length){
$("#all").prop("checked", true);
} else{
$("#all").prop("#checked", false);
}
checkTxt();
});
});//ready end
function checkTxt(){
$("#txt").val("");
$("#wrap [type='checkbox']:checked").each(function(){
$("#txt").val($("#txt").val()+","+$(this).val());
});
$("#txt").val($("#txt").val().substring(1));
}
</script>
</head>
<body>
<input type="checkbox" id="all"/><label for="all">전체선택</label>
<br/>
<div id="wrap">
<input type="checkbox" id="c1" value="사과"/><label for="c1">사과</label>
<input type="checkbox" id="c2" value="오렌지"/><label for="c2">오렌지</label>
<input type="checkbox" id="c3" value="배"/><label for="c3">배</label>
</div>
<input type="text" id="txt" readonly="readonly"/>
</body>
</html>
1週間のプロジェクト会議と確定したプロジェクトをもとに、ウェブサイトを完成しました.週末にアップロードするはずです...結局は私のせいだ.
Reference
この問題について(研修41日目), 我々は、より多くの情報をここで見つけました https://velog.io/@wogus216/교육-41일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol