1월 중순 -> 프로젝트 시작
jQuery script 설정.
jQuery를 사용하는 2가지 방법.
<script>를 <head> 태그 안에 넣어 사용함.
1) 다운로드해서 사용하는 방식
<script src="jquery-3.6.0.min.js"></script>2) jquery CDN으로 사용하는 방식
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>jQuery - basic
syntax
$(selector).action() 형식으로 작성됨.
ex) $(this).hide() $(".test").hide() $("p").hide()
ready()
.ready()
: document가 로딩되기 전까지 기다렸다가 다음을 내용을 실행하라는 의미임.
selector
id,class,input[type],*,:tag명,tag명:자식,,으로 selecte 할 수 있음.
>> 다양한 selector 사용법 w3school 참고
<script>
$(document).ready(function () {
$("button").click(function () {
$(".class").hide();
$("#id").hide();
hide(); //-> 모든 태그 지정
this").hide(); //-> 현재 선택된 <button>태그를 삭제함.
})
})
</script>event
on()
.on()
: on 매서드 안에 object를 넘겨줄 수 있음.
->.on(obejct : function(){});형식으로 작성함.
<script>
$(document).ready(function() {
$("p").on({
mouseenter : function() {
$(this).css("background-color", "lightgray");},
//--> $("p").mouseenter(function(){});와 같은 의미.
mouseleave : function() {
$(this).css("background-color", "lightblue");},
click : function() {
$(this).css("background-color", "yellow");},
})
});
</script>jQuery - Effects
hide(), show(), toggle()
-
.hide(speed,callback)
: 선택된 element를 숨김. -
.show(speed,callback)
: 선택된 element를 보여줌. -
.toggle(speed,callback)
: 선택된 element를 한 번 반응을 주면 보여주고 다시 반응을 주면 보여줌.
->hide()와show()를 반복함.
<script>
$(document).ready(function () {
$("#hide").click(function () {
$(".hidNshw").hide(500); //css) display: none;
});
$("#show").click(function () {
$(".hidNshw").show(1000); //css) display: block;
});
// $(selector).toggle(speed,callback); -> 형식
$("#toggle").click(function() {
$(".toggle").toggle(500);
})
})
</script>fade()
.fadeIn()
: element를 보여줌..fadeOut()
: element를 숨김..fadeToggle()
: 반응을 줄 때마다 element 보여주기와 숨기기 효과를 보여줌.
<script>
$(document).ready(function () {
$("#fadeToggle").click(function () {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(2000);
});
})
</script>
<!-- <body> 태그 안에 있는 내용 -->
<button id="fadeToggle">Click to fade toggle</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
slide()
.slideDown()
: panel을 여는(내리는) 효과..slideUp()
: panel을 닫는(올리는) 효과..slideToggle()
: 반응을 줄 때마다 panel을 닫았다 열였다를 반복함.
<script>
$(document).ready(function () {
$("#flip").click(function () {
// $("#panel").slideDown(500);
$("#panel").slideToggle(500);
});
});
</script>
<!-- <body> 태그 안에 있는 내용 -->
<div id="flip">Click to slideDown() panel</div>
<div id="panel">Hello world!</div>animate()
.animate({css : 'css value'},...);
: animate method에 css 변화 요소를 넣어서 순차적으로 animate 효과를 줌.
<script>
$(document).ready(function () {
$("button").click(function () {
var div = $("div");
// query에 실행할 animate method list를 넣고, 차례로 실행함.
div.animate({ height: '300px', opacity: '0.4' }, "slow");
div.animate({ width: '300px', opacity: '0.8' }, "slow");
div.animate({ height: '100px', opacity: '0.4' }, "slow");
div.animate({ width: '100px', opacity: '0.8' }, "slow");
});
});
</script>callback function()
callback 함수 사용
ex) .hide(time, callback); => hide가 실행이 끝나면, callback 함수 실행함.
<script>
$(document).ready(function() {
$("button").click(function() {
// .hide(time, callback); : hide가 실행이 끝나면, callback 함수 실행
$("p").hide("slow", function() {
alert("This paragraph is now hidden!!");
});
});
});
</script>method Chaining
chaining
: 실행하고자 하는 method들을 연달아 작성하는 방법.
<script>
$(document).ready(function () {
$("button").click(function () {
// chaining : 실행하고자 하는 method들을 연달아 사용하는 방법.
$("#p1").css("color", "red")
.slideUp(500)
.slideDown(500);
/*
=> 동일한 효과.
$("#p1").css("color", "red");
$("#p1").slideUp(500);
$("#p1").slideDown(500);
*/
});
});
</script>jQuery - HTML
html element와 css element를 가져오는 방법에 대한 내용.
Get
text(), html()
.text()
: tag안에 본문 내용만 보여줌, 태그를 뺀 나머지.html()
: tag안에 html 코드를 포함한 내용
<script>
$(document).ready(function () {
$("#btn1").click(function() {
alert("Text : " + $("#test").text());
// 결과: This is some bold text in a paragraph.
})
$("#btn2").click(function() {
alert("HTML : " + $("#test").html());
// 결과: This is some <b>bold</b> text in a paragraph.
})
})
</script>
<!-- <body> 태그 안에 있는 내용. -->
<p id="test">This is some <b>bold</b> text in a paragraph.</p>val()
.val()
: form 태그의 value를 읽어오거나 setting할 때 사용함.
<script>
$(document).ready(function () {
$("button").click(function() {
alert("Value : " + $("#test").val());
// 결과: Mickey Mouse
// -> 입력하는 결과로 출력됨.
});
});
</script>
<!-- <body> 태그 안에 있는 내용. -->
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>attr()
.attr("attribute")
: 매개 attribute의 내용을 가져옴.
+) attribute는 사용자가 새로 만들 수 있음.
<script> // --> <head> 태그 안에 <script>
$(document).ready(function () {
$("button").click(function() {
alert($("#google").attr("href"));
// 결과 : https://www.google.com/
// 사용자가 새로운 attribute를 지정헤 jquery로 사용 가능함.
alert($("#google").attr("data-info"));
// 결과 : this is jQuery
});
});
</script>
<body>
<!--
사용자가 새로운 attribute를 지정 가능함.
+) 작명할 때 'data-어쩌구'로 설정하는 것이 약속임.
-->
<p><a href="https://www.google.com/" id="google" data-info="this is jQuery">goolge.com</a></p>
<button>Show href Value</button>
</body>
그냥 은근슬쩍 살다 가긴 싫어