<!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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
// 글자크기를 조절하는 프로그램
$(function () {
let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈
// 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
// 요소를 적용받는다.
$(".zoomBtnZone button").on("click", zoomInOut);
// 별로도 정의한 핸들러
function zoomInOut() {
if ($(this).hasClass("zoomOutBtn")) {
if (baseFontSize <= 8) { // 최소 크기
return false;
}
baseFontSize--;
} else if ($(this).hasClass("zoomInBtn")) {
if (baseFontSize >= 20) { // 최대 크기
return false;
}
baseFontSize++;
} else {
baseFontSize = 14;
}
$(".fontSize").text(baseFontSize + "px");
$("body").css({
fontSize: baseFontSize + "px"
})
}
});
</script>
<style>
body {
font-size: 14px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<p class="zoomBtnZone">
<button class="zoomOutBtn">-</button>
<button class="originBtn">100%</button>
<button class="zoomInBtn">+</button>
</p>
<select>
<option>맑은고딕</option>
<option>헬베티카</option>
<option>산들고딕</option>
</select>
<p class="fontSize">14px</p>
<div id="wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat
consectetur nibh, ut luctus urna placerat non. Phasellus consectetur nunc nec mi
feugiat egestas. Pellentesque et consectetur mauris, sed rutrum est. Etiam odio
nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum
ipsum quis feugiat. Nunc non pellentesque diam, nec tempor nibh. Ut consequat
sem sit amet ullamcorper sodales.
</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>
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
// 글자크기를 조절하는 프로그램
$(function () {
let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈
let body = $("body");
// 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
// 요소를 적용받는다.
$(".zoomBtnZone button").on("click", zoomInOut);
// 별로도 정의한 핸들러
function zoomInOut() {
if ($(this).hasClass("zoomOutBtn")) {
if (baseFontSize <= 8) { // 최소 크기
return false;
}
baseFontSize--;
} else if ($(this).hasClass("zoomInBtn")) {
if (baseFontSize >= 20) { // 최대 크기
return false;
}
baseFontSize++;
} else {
baseFontSize = 14;
}
$(".fontSize").text(baseFontSize + "px");
$("body").css({
fontSize: baseFontSize + "px"
})
}
// 글자 모양 변경
$("#fontStyle").on("change", function () {
body.css("font-family", $(this).val());
});
});
</script>
<style>
body {
font-size: 14px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
/* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family:'Times New Roman', Times, serif */
}
</style>
</head>
<body>
<p class="zoomBtnZone">
<button class="zoomOutBtn">-</button>
<button class="originBtn">100%</button>
<button class="zoomInBtn">+</button>
</p>
<select class="changeStyleZone" id="fontStyle">
<option
class="Lucida Sans"
value="'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">맑은고딕</option>
<option
class="Segoe UI"
value="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">헬베티카</option>
<option class="Times New Roman" value="'Times New Roman', Times, serif">산들고딕</option>
</select>
<p class="fontSize">14px</p>
<div id="wrap">
내 생일 파티에 너만 못 온 그날 혜진이가 엄청 혼났던 그날 지원이가 여친이랑 헤어진 그날 걔는 언제나 네가 없이 그날
너무 멋있는 옷을 입고 그날 Heard him say
</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>
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
// 글자크기를 조절하는 프로그램
$(function () {
let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈
let body = $("body");
// 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
// 요소를 적용받는다.
$(".zoomBtnZone button").on("click", zoomInOut);
$(".colors").on("change", colorChange);
// 별로도 정의한 핸들러
function zoomInOut() {
if ($(this).hasClass("zoomOutBtn")) {
if (baseFontSize <= 8) { // 최소 크기
return false;
}
baseFontSize--;
} else if ($(this).hasClass("zoomInBtn")) {
if (baseFontSize >= 20) { // 최대 크기
return false;
}
baseFontSize++;
} else {
baseFontSize = 14;
}
$(".fontSize").text(baseFontSize + "px");
$("body").css({
fontSize: baseFontSize + "px"
})
}
// 글자 모양 변경
$("#fontStyle").on("change", function () {
body.css("font-family", $(this).val());
});
// 글자 색 변경
function colorChange(){
$("body #wrap").css({color:$(this).val()});
}
});
</script>
<style>
body {
font-size: 14px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
/* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family:'Times New Roman', Times, serif */
}
</style>
</head>
<body>
<p class="zoomBtnZone">
<button class="zoomOutBtn">-</button>
<button class="originBtn">100%</button>
<button class="zoomInBtn">+</button>
</p>
<select class="changeStyleZone" id="fontStyle">
<option
class="Lucida Sans"
value="'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">맑은고딕</option>
<option
class="Segoe UI"
value="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">헬베티카</option>
<option class="Times New Roman" value="'Times New Roman', Times, serif">산들고딕</option>
</select>
<p class="fontSize">14px</p>
<br>
<br>
<label>색상선택 : </label>
<input type="color" class="colors">
<br> <br>
<div id="wrap">
낭비하지 마, 네 시간은 은행 <br>
서둘러서 정리해, 걔는 real bad 받아주면 안돼, no, you better trust me 답답해서, 그래 <br>
저번에도 봤지만 너 없을 때 <br>
걘 여기저기에 눈빛을 뿌리네 아주 눈부시게, honestly, <br>
우리 사이에 He's been totally lying, yeah <br>
내 생일 파티에 너만 못 온 그날 <br>
혜진이가 엄청 혼났던 그날 지원이가 여친이랑 헤어진 그날 걔는 언제나 네가 없이 그날 <br>
너무 멋있는 옷을 입고 그날 Heard him say
</div>
</body>
</html>
이제 애니메이션에 대해 배운다
정말 재미있는 개념이라 계속 만들어보며 공부하면 좋을 것! 게임 만들어보기!
제이쿼리의 애니메이션
애니메이션 효과
hide(), fadeOut(), slideOut() => 숨김
show(), fadeIn(), slideDown() => 노출
toggle(), fadeToggle(), slideToggle(), fadeTo(0 ~ 1)
효과시간
1. slow, normal, fast
2. 1000단위(밀리세컨즈)
$(요소선택).효과메서드(효과시간, 가속도, [콜백함수])
콜백함수는 선택적으로 사용
버튼을 이용한 애니메이션 예제 코드
<!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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
$(".btn2").hide();
$(".btn1").on("click", () => {
$(".box").slideUp(1000,"linear", function(){
$(".btn1").hide();
$(".btn2").show();
});
});
$(".btn2").on("click",() => {
$(".box").fadeIn(4000,"swing",function(){
$(".btn2").hide();
$(".btn1").show();
});
});
$(".btn3").on("click",() => {
$(".box").slideToggle(2000,"linear"); // 반대 상태로 만들어준다
});
$(".btn4").on("click",() => {
$(".box").fadeTo("fast", 0.3); // 투명도 조절
});
$(".btn5").on("click",() => {
$(".box").fadeTo("fast", 1);
});
});
</script>
<style>
.content{
width:400px;
background-color: #eee;
}
</style>
</head>
<body>
<p>
<button class="btn1">slideUp</button>
<button class="btn2">fadeIn</button>
</p>
<p>
<button class="btn3">toggleSide</button>
</p>
<p>
<button class="btn4">fadeTo(0.3)</button>
<button class="btn5">fadeTo(1)</button>
</p>
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas feugiat consectetur nibh,
ut luctus urna placerat non.
Phasellus consectetur nunc nec mi feugiat egestas.
Pellentesque et consectetur mauris, sed rutrum est.
Etiam odio nunc, ornare quis urna sed, fermentum fermentum augue.
Nam imperdiet vestibulum ipsum quis feugiat.
Nunc non pellentesque diam, nec tempor nibh.
Ut consequat sem sit amet ullamcorper sodales.
</div>
</div>
</body>
</html>
stop() : 현재 실행중인 애니메이트를 종료 후 다음 애니메이션 실행
stop(true, true) : 현재 실행중인 애니메이션 종료, 에니메이션의 끝 지점으로 이동한다
대기열을 삭제해 더 이상 애니메이션이 일어나지 않는다.
delay() : 일정시간 큐에서 대기 후 실행
queue() : 함수를 사용해서 에니메이트 효과 구현, 자기 뒤에 있는 에니메이트 효과는 다 날려버림(나머지 대기열 삭제)
예) 게임에서 대빵을 죽였을 때 나머지 공격 효과 X
clearQueue() : 진행 중인 것을 제외하고 대기열 정보 모두 삭제
dequeue() : queue() 이후에 대기열의 정보를 정상적으로 실행시킨다
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
// queue() : 함수를 사용해서 에니메이트 효과 구현, 자기 뒤에 있는 에니메이트 효과는 다 날려버림(나머지 대기열 삭제)
// 예) 게임에서 대빵을 죽였을 때 나머지 공격 효과 X
// clearQueue() : 진행 중인 것을 제외하고 대기열 정보 모두 삭제
// dequeue() : queue() 이후에 대기열의 정보를 정상적으로 실행시킨다
$(".txt1").animate({marginLeft:"200px"},1000)
.animate({marginTop:"200px"},1000)
.queue(function(){ // queue() 뒤에 대기열 삭제
$(this).css({background:"pink"});
})
.animate({marginLeft:"0px"},1000)
.animate({marginTop:"0px"},1000);
});
</script>
<style>
*{margin:0;}
.txt1{width:50px;text-align:
center;background-color: aqua;}
</style>
</head>
<body>
<p class="txt1">내용1</p>
</body>
<!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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
// class 속성을 조작하는 메서드
// addClass("class값").removeClass("class값")
// toggleClass("class값"),hasClass("class값")
$("#p1").addClass("aqua");
$("#p2").removeClass("red");
$("#p3").toggleClass("green"); // 없으면 들어가고 있으면 뺀다. -> 상태가 뭐냐에 따라 반대로 작업
$("#p4").toggleClass("green"); // toggle 자체가 '없으면 들어가고 있으면 뺀다' 같은 개념
$("#p6").text($("#p5").hasClass("yellow")); // 값이 있는지 없는지 판단. 있으면 true, 없으면 false
// hasClass() 기존 값이 사라지고 새로운 값이 들어감
});
</script>
<style>
.aqua {
background-color: #0ff;
}
.red {
background-color: #f00;
}
.green {
background-color: #0f0;
}
.yellow {
background-color: #ff0;
}
</style>
</head>
<body>
<p id="p1">내용1</p>
<p id="p2" class="red">내용2</p>
<p id="p3">내용3</p>
<p id="p4" class="green">내용4</p>
<p id="p5" class="yellow">내용5</p>
<p id="p6"></p>
</body>
</html>
폼태그의 값 조작
일반태그일 떄 text()
폼 태그일 땐 val()
폼태그의 값 조작
val(), val("새로운 값")
prop() -> true, false : 선택상자, 체크박스, 라디오버튼 이런 것들을 활용하고 싶을 때
prop() -> 선택되었을 때 true, 선택되지 않았을 때 false , 선택 유무를 알려준다. 상태 체크!
prop("defalutValue")
<!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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
// 일반태그일 떄 text()
// 폼 태그일 땐 val()
// 폼태그의 값 조작
// val(), val("새로운 값")
// prop() : 선택상자, 체크박스, 라디오버튼 이런 것들을 활용하고 싶을 때
// prop("defalutValue")
let result1 = $("#user_name").val(); // 값을 읽어온다
console.log(result1);
let result2 = $("#user_id").val("javascript"); // () 안의 새로운 값으로 바뀐다
console.log($("#user_id").val());
let result3 = $("#user_id").prop("defaultValue");
console.log(result3);
});
</script>
</head>
<body>
<h1>객체 조작 및 생성</h1>
<form action="#" id="form_1">
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name" value="용대리">
</p>
<p>
<label for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id" value="hello">
</p>
</form>
</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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
let result1 = $("#chk1").prop("checked");
console.log(result1); // false
let result2 = $("#chk2").prop("checked");
console.log(result2); // true
// 동적처리를 통해 스크립트에서 체크 표시를 변경 가능
let result3 = $("#chk3").prop("checked",true);
// 그룹으로 묶여있을 때
// 부모그룸을 지정하면 하위 그룹을 반환해준다
// selected 되어진 인덱스 번호를 반환해준다.
let result4 = $("#se_1").prop("selectedIndex");
console.log(result4); // 2
});
</script>
</head>
<body>
<h1><strong>객체 조작 및 생성</strong></h1>
<form action="#" id="form_1">
<p>
<input type="checkbox" name="chk1" id="chk1">
<label for="chk1">chk1</label>
<input type="checkbox" name="chk2" id="chk2" checked>
<label for="chk2">chk2</label>
<input type="checkbox" name="chk3" id="chk3">
<label for="chk3">chk3</label>
</p>
<p>
<select name="se_1" id="se_1">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3" selected>option3</option>
</select>
</p>
</form>
</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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
// 제이쿼리 이벤트를 주는 두 가지 방식
// 단독 이벤트, 그룹 이벤트
// 단독 이벤트
// $("선택자").이벤트(익명함수 방식의 핸들러 function(){});
// 그룹 이벤트 만드는 방식 두 가지.
// 이벤트 나열할때 스페이스로 구분
// $("선택자").on("이벤트종류1 이벤트종류2 이벤트종류n" , 익명함수 방식의 핸들러 function(){});
// $("선택자").on({"이벤트종류1 이벤트종류2 이벤트종류n":function(){
// }
// });
$(".btn1").click(function(){
$(".btn1").parent().next().css({"color":"red"});
});
// mouseover 마우스를 해당요소에 올려놓았을 때
// mouseout 마우스를 해당 요소에서 다른 곳에 두었을 때
// focus 노드가 포커스를 획득했을 때
// blur 포커스가 해당 요소를 벗어날때 -> tap으로 실행해볼 수 있음
$(".btn2").on({
"mouseover focus":function(){
$(".btn2").parent().next().css({"color":"red"});
},
"mouseout blur":function(){
$(".btn2").parent().next().css({"color":"blue"});
}
});
// 이벤트 제거(이벤트를 동결시킬 때 사용)
$(".btn1").off("click");
});
</script>
</head>
<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>
</html>
-> 그래픽 유저 인터페이스(GUI, Graphical User Interface)는 사용자가 컴퓨터와 상호작용할 수 있는 방법 중 하나로, 아이콘, 메뉴, 창 등 그래픽 요소를 통해 정보를 표현하고 사용자 입력을 받아들입니다. 사용자가 마우스, 키보드 등의 장치를 통해 그래픽 요소를 조작함으로써 소프트웨어를 제어할 수 있습니다. 이는 명령어를 직접 입력해야 하는 텍스트 기반 인터페이스에 비해 직관적이고 사용하기 쉽다는 장점이 있습니다.
와이어프레임(Wireframe)
-> 와이어프레임(Wireframe)은 웹사이트나 애플리케이션의 구조를 시각적으로 표현하는 방법입니다. 이는 화면 레이아웃, 페이지 간의 연결관계, 사용자 인터페이스 요소의 배치와 우선순위 등을 보여주는 역할을 합니다. 와이어프레임을 통해 개발자와 디자이너는 제품의 흐름, 기능, 사용성 등을 이해하고, 사용자 경험을 최적화하는 데 도움이 됩니다.
W3C(World Wide Web Consortium)
-> W3C(World Wide Web Consortium)는 월드 와이드 웹을 위한 표준을 개발하고 관리하는 국제 커뮤니티입니다. 이 조직은 웹의 장기적인 성장을 보장하기 위해 웹 표준을 개발하며, HTML, CSS 등 많은 중요한 웹 기술 표준을 제공하고 있습니다.
웹 표준(Web Standards)
-> 웹 표준(Web Standards)는 웹에서 사용되는 기술이나 규칙을 표준화하여, 웹이 운영체제, 브라우저, 장치 등에 상관없이 일관되게 동작할 수 있도록 하는 규약입니다. 이는 웹 접근성을 보장하고, 웹의 호환성을 높이는데 큰 역할을 합니다. 웹 표준을 준수하면, 웹사이트의 유지보수가 용이하고, 검색 엔진 최적화(SEO)에도 유리합니다.
시험에선 이걸 만들었는데 저 흰색 부분 구현이 안됐고.. 로그인과 자켓 등 뭐 선택하는 태그들에도 데코레이션 논을 안줬다. 생각이 안났다.. 찾아보면 되는건데 왜 그렇게 정신이 없었는지ㅠ
제이쿼리 속성선택자
<!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 src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(function(){
// 속성 선택자
$("#wrap a[target]").css("color","red");
$("#wrap a[href^=https]").css("color","blue");
//앞에 https가 들어간 녀석이 있으면 blue로 바꿔라 , 가장 최근에 사용된 css가 적용이 된다
$("#wrap a[href$=net]").css("color","green");
//net로 끝나는 값이 있으면 green으로 바꿔라
});
</script>
</head>
<body>
<div id="wrap">
<p><a href="https://www.naver.com" target="_blank">naver</a></p>
<p><a href="http://www.daum.net">daum</a></p>
</div>
</body>
</html>
제이쿼리 속성선택자2_1
<!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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function(){
// 속성의 상태 탐색, css를 두 개 이상 주는 법
$('#wrap p:hidden').css({"display":"block","color":"red"});
// val() -> 폼의 value 속성을 가져오는 메서드
// :selected 처럼 뒤에 뭐가 붙어있는지 볼 때 띄어쓰기를 하면 안된다!
let z1 = $("#zone1 :selected").val();
console.log(z1);
let z2 = $("#zone2 :checked").val();
console.log(z2);
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p style="display:none">내용2</p>
<p>내용3</p>
</div>
<form action="#">
<p id="zone1">
<select name="course" id="course">
<option value="opt1">옵션1</option>
<option value="opt2" selected="selected">옵션2</option>
<option value="opt3">옵션3</option>
</select>
</p>
<p id="zone2">
<input type="checkbox" name="hobby1" value="독서">
독서
<input type="checkbox" name="hobby2" value="자전거">
자전거
<input type="checkbox" name="hobby3" value="등산" checked="checked">
등산
</p>
<p id="zone3">
<input type="radio" name="gender" value="male">
남성
<input type="radio" name="gender" value="female" checked="checked">
여성
</p>
</form>
</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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function() {
//contains() : 해당 요소에 해당 문자가 포함되어 있는지 포함되어 있으면 : 해라~
$("#inner_1 p:contains(내용1)").css("color", "red");
//contains() : 해당 요소의 하위요소(1 depth = 1 밑에 = 바로 밑에) 텍스트와 태그노드를 선택
$("#outer_wrap").contents().css({"border":"1px dashed #00f"});
//has() : 해당요소가 지정한 태그를 포함하면 선택
$("#inner_1 p:has(strong)").css("color", "blue");
//not() : 지장한 요소를 제외한 나머지 선택
$("#inner_2 p").not(":first").css({"background-color":"yellow"});
//end() : 현재 선택된 요소의 이전 요소를 선택하는 메서드
//$("#inner_2 p").eq(2).end().css("color","green");
// $("tr")....eq(0) : 첫번째가 선택
// $("tr")....eq(-1) : 마지막에서 첫번째 선택
// $("tr")....eq(-2) : 마지막에서 두번째 선택
$("#inner_2 p").eq(1).css("color", "yellow").end();
});
</script>
</head>
<body>
<div id="outer_wrap">
<h1>콘텐츠 탐색 선택자</h1>
<section id="inner_1">
<h1>contains( ), contents( ), has( )</h1>
<p><span>내용1</span></p>
<p><strong>내용2</strong></p>
<p><span>내용3</span></p>
</section>
<section id="inner_2">
<h1>not( ), end( )</h1>
<p>내용4</p>
<p>내용5</p>
<p>내용6</p>
</section>
</div>
</body>
</html>
end() 메서드
다음은 체이닝과 관련된 end() 메소드입니다.
체이닝이란
$('h1').css('background','orange').filter(':even').css('color', 'red');
이렇게 한줄에 여러 메소드를 이어서 쓰는 걸 말해요.
그리고 필터 메소드의 단점은 사용할수록 범위를 계속 좁게만 선택할 수 있게 되는거에요.
그래서 end()메소드가 필요합니다. end()메소드는 문서객체 선택을 한단계 뒤로 돌려요.
<script>
// EM6 버전으로 넘어오며 생긴 것들
// var, let, const 버전이 업되면서 구분되기 위해 사용
// 될 수 있으면 let을 사용
// 함수의 호이스팅
// 화살표 함수
this.num = 10;
let obj = {
num : 5,
add1 : function(a) {
console.log(this.num + a , this); // 8
},
add2 : (a) => {
// 화살표 함수는 this가 없다
console.log(this.num + a , this); // NaN
}
}
obj.add1(3);
obj.add2(3);
---------------------------------------------------------------------------
// 기본값에 대해
function addNum(a = 0, b = 0){
console.log(a + b); // 기본값 넣기 전 : NaN , 넣은 후 : 5
console.log(a); // 기본값 넣기 전 : 5 , 넣은 후 : 5
console.log(b); //기본값 넣기 전 : undefined , 넣은 후 : 0
}
addNum(5);
---------------------------------------------------------------------------
// EM5
function addNum(){ //가변형인자
// argument
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i])
}
}
console.log(addNum());
console.log(addNum(1));
console.log(addNum(1, 2, 3)); // 배열구조
---------------------------------------------------------------------------
// EM6 가변인자를 직접 표시해서 사용 , 자바와 똑같음
function addNum(... number){
for(let i = 0; i < number.length; i++){
console.log(number[i])
}
}
addNum(1, 2, 3);
---------------------------------------------------------------------------
// 펼침연산자
let numbers = [1, 2, 3, 4, 5];
let max;
max = Math.max(...numbers);
console.log(max); // 5
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(...numbers); // 1, 2, 3, 4, 5
let numbers = [1, 2, 3, 4, 5];
let max;
for(let i = 0; i < numbers.length; i++) {
if (numbers[i] > numbers[0]) {
max = numbers[i];
}
}
console.log(max); // 5
---------------------------------------------------------------------------
// 스크립트의 향상된 for문
let numbers = [1, 2, 3, 4, 5];
for (let i of numbers) {
console.log(i);
}
---------------------------------------------------------------------------
// ~ 자판 영어 상태일 때는 `가 입력된다.
// 표현식 (백티)
let name = 'hong';
console.log("나의 이름은" + name + "입니다.");
let num1 = 1;
let num2 = 2;
let text = `${num1}과 ${num2}의 합계는 ${num1} + ${num2} 입니다`
console.log(text);
---------------------------------------------------------------------------
// 배열의 비구조화
let numbers = [3, 4];
let a, b;
a = numbers[0];
b = numbers[1];
let numbers = [3,4,5];
let [a, b] = numbers;
let [c, ,d] = numbers;
console.log(a); // 3
console.log(b); // 4
console.log(`${c} ${d}`); // 3 5
let numbers = [1, 2, 3];
let [a, ...b] = numbers;
console.log(a); // 1
console.log(b); // (2) [2, 3]
</script>
제이 쿼리
$(function(){
});
위와 같이 쓰는 것이
window.onload = function(){ // 현재 페이지가 모두 로딩되기 전까지 대기
}
와 같다.
제이쿼리를 CDN 방식으로 불러와 작성
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
// 제이쿼리 문법으로 위 식을 표현하기 onload 이벤트와 똑같음.
// $("document").ready(function(){
// });
// 생략된 버전
$(function(){
$("선택자").기능(); // 제이쿼리의 기본 문법
$("#title").css("color", "red");
$("*").css("color","red");
$(".tit").css("color","blue");
$("h3").css("color","green");
$("h1,h2").css("color", "red"); // 두 가지 태그를 넣기
// 종속선택자
$("h2.tit").css("color", "red");
parent(), parents(), parents(div)와 같이 선택할 수 있음, closest(요소이름)
next(), prev(), siblings()
nextAll(), prevAll()
$("h2").next().css("color", "red");
$("h2").parent().css("border", "1px solid red");
$("#inner_wrap h1").css("color", "green");
// 자식선택자
$("#inner_wrap > p").css("color", "red");
$(".txt").siblings().css("color", "red"); // 나를 뺀 형제들을 선택할 때
$(".txt").parents().css("border", "1px solid red")
// 상위요소 closest()
$(".txt1").closest("div").css("border", "1px solid red");
});
</script>
</head>
<body>
<!-- <h1 id="title">제목</h1> -->
<!-- <h1>선택1</h1>
<h2 class="tit">선택2</h2>
<h2>선택2_1</h2>
<h3>선택3</h3> -->
<!-- 인접선택자 -->
<!-- a는 c의 상위 closest
b는 c의 부모 parent
c는 b의 자식 children
d는 e의 형 prev
f는 e의 동생 next -->
<!-- <div id ="wrap">
<div id="inner_wrap">
<h1>제목1</h1>
<h2>제목2</h2>
<p class="txt">내용1</p>
<p>내용2</p>
<p>내용3</p> -->
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
</body>
형식은 무조건 외워야 함. 이해의 문제가 아니라 어떻게 코드를 쓰는 건지는 기본적으로 익숙하게 쳐야 한다.
a는 c의 상위 closest
b는 c의 부모 parent
c는 b의 자식 children
d는 e의 형 prev
f는 e의 동생 next
탐색선택자 / 배열 관련 메서드
<!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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
// 탐색선택자
// $("#menu li:first").css("color", "red");
// $("#menu li:last").css("color", "red");
// $("#menu li:even").css("color", "red"); // 짝수 (기준은 인덱스번호 0, 2)
// $("#menu li:odd").css("color", "blue"); // 홀수 (기준은 인덱스번호 1, 3)
// $("#menu li").eq(2).css("color", "red"); // eq() 가로 안에는 인덱스 번호
// $("#menu li:lt(2)").css("color", "blue"); // lt = less then 자기 자신보다 작은, 미만 (자신 포함 x)
// $("#menu li:gt(2)").css("color", "blue"); // gt = greater then 자기 자신보다 큰 (자신 포함 x)
// nth-child() -> 가로 안에 작성된 순서, 위치 번호 적기
// $("#menu1 li:nth-child(1)").css("color", "red");
// $("#menu1 li:nth-child(2n)").css("color", "blue");
// $("#menu1 li:nth-last-child(2)").css("color", "green"); // 역순
---------------------------------------------------------------------------
// 배열 관련 메서드 -> 읽기 (효율성 증가)
// 배열 안에 객체가 들어있음
each, foreach -> return 이 없다
map : 반복문 -> 결과를 새로운 배열로 만든다.
index() : 요소의 인덱스 번호
let obj = [
{"area" : "서울"},
{"area" : "부산"},
{"area" : "전주"}
];
$(obj).each(function(i, o){ // i => index, o -> 배열의 값
console.log(i + ":" , o) // 객체로 출력
});
// $.each($("#menu2 li"), function(i, o){ // i => index, o -> 배열의 값
// console.log(i + ":" , o) // <li></li> 태그 출력
// });
// obj.forEach(function(value,index,array){
// console.log(`Value: ${value}, Index: ${index}, Array: ${array}`)
// });
let arr1 = [
{
"area" : "서울",
"name" : "무대리"
},
{
"area" : "부산",
"name" : "홍과장"
},
{
"area" : "대전",
"name" : "박사장"
},
{
"area" : "서울",
"name" : "빅마마"
}
];
// map : 반복문, for문이라고 생각하면 된다 -> 결과를 새로운 배열로 만든다.
let arr2 = $.map(arr1, function(a, b){ // a가 배열의 값을 받아온다, b가 인덱스
if (a.area === "서울"){
return a;
}
});
console.log(arr1);
console.log(arr2);
let index = $("li").index($("#list3"));
console.log(index); // 2
});
</script>
</head>
<body>
<ul id="menu1">
<li>내용1_1</li>
<li>내용1_2</li>
<li id="list3">내용1_3</li>
<li>내용1_4</li>
</ul>
<!-- <ul id="menu2">
<li>내용2_1</li>
<li>내용2_2</li>
<li>내용2_3</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>
<script>
// Event 2가지 방식
// 1. 인라인 정의 방식
// 2. 내부 정의 방식
window.onload = function(){
let btn = document.getElementById("target");
btn.addEventListener("click", function(event){
alert('hellow world' + btn.value);
//alert('hellow world' + event.target.value);
});
}
</script>
</head>
<body>
<!-- 1번 방식 -->
<input type="button" onclick="alert('hello' + this.value)" value="인라인 이벤트">
<input type="button" id="target" value="내부 이벤트">
</body>
</html>
