20230729 jquery 맛보기 ==> 참고해서 같이 보기
jQuery 먼저 해보자
VS Code에서 해보자
하드디스크에 저장하는게 아니라 다른곳에서 가져옴 => CDN
https://developers.google.com/speed/libraries?hl=ko#jquery
호스팅된 라이브러리 | Hosted Libraries | Google for Developers
가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.
developers.google.com
요거 선언해주면 jquery 사용가능
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
head 부분에 넣어주기
<!DOCTYPE html>
<html>
<head>
<title>Jquery</title>
</head>
<body>
<h1>제이쿼리 사용하기</h1>
<p>제이쿼리에 대해 이해하고 사용할 수 있다.</p>
<p>스스로 웹사이트를 제작하고 활용할 수 있다.</p>
</body>
</html>
document는 현재 이 문서를 의미한다.
.ready 선언해주고
여기에 이름없는 익명함수(alert 실행하는 함수) 실행
<head>
<title>Jquery</title>
<script>
// 여기는 스크립트 영역입니다.
$(document).ready(function(){
alert("제이쿼리가 구동되었습니다.")
});
</script>
</head>
실행해보면 팝업창 잘 뜬다.
팝업창 먼저 뜨고나서 아래 body에 있는 글자들이 나타난다.
얘는 스크립트여서 위 => 아래 순서로 코드를 읽기 때문에 팝업창 확인을 누르기 전까지는 아래쪽 코드를 읽지 않는다.
그래서 스프링 write.jsp 에서 jquery 를 맨 아래쪽에 써준거
스크립트 위치를 body의 p태그 아래로 이동해보면
p태그의 문구출력 이후에 alert가 실행된다.
그런데 명령문이 너무 길어서 짧게 쓰기로 했다 (축약문법) _ $(document).ready 부분 생략
<head>
<title>Jquery</title>
<script>
// 여기는 스크립트 영역입니다.
// 원래는 $(document).ready(function(){});
$(function(){
alert("되겠죠?");
});
</script>
</head>
브라우저 열어보면 팝업창이 뜬다.
선택자 (h1_ html tag)에다가 명령(클릭하면~)을 내려보자
$(function(){
// 선택자 html tag, caa id, class 명령
// $(선택자).명령();
$("h1").click();
});
클릭했을 때 어떤 명령을 내릴지는 function() 으로 시키자.
$(function(){
alert("되겠죠?");
// 선택자 html tag, caa id, class 명령
// $(선택자).명령();
$("h1").click(function(){
alert("h1을 클릭했습니다");
});
});
h1("제이쿼리 사용하기") 를 클릭하면 아래처럼 팝업이 뜬다
h1을 클릭하면, h1의 글자색이 바뀌게 해보자
$(function(){
alert("되겠죠?");
// 선택자 html tag, caa id, class 명령
// $(선택자).명령();
$("h1").click(function()
$("h1").css("color", "green");
});
});
h1을 클릭하면, h1의 글자색 & 배경색이 바뀌게 해보자
$(function(){
// alert("되겠죠?");
// 선택자 html tag, caa id, class 명령
// $(선택자).명령();
$("h1").click(function(){
$("h1").css("color", "green");
$("h1").css("backgroundColor", "gray");
});
});
h1을 클릭하면, h1의 글자색 & 배경색이 변경 + 모든 p태그에 border 생기게 해보자
$(function(){
// alert("되겠죠?");
// 선택자 html tag, caa id, class 명령
// $(선택자).명령();
$("h1").click(function(){
$("h1").css("color", "green");
$("h1").css("backgroundColor", "gray");
$("p").css("border", "1px solid gray");
});
});
h1을 클릭하면, h1의 글자색 & 배경색이 변경 + p태크에 border & p태그 text 변경
$(function(){
// alert("되겠죠?");
// 선택자 html tag, caa id, class 명령
// $(선택자).명령();
$("h1").click(function(){
$("h1").css("color", "green");
$("h1").css("backgroundColor", "gray");
$("p").css("border", "1px solid gray");
$("p").text("어서오세요, 제이쿼리의 세상에.");
});
});
마지막 p태그에 class = "p2" 지정해주고
<body>
<h1>제이쿼리 사용하기</h1>
<p>제이쿼리에 대해 이해하고 사용할 수 있다.</p>
<p class="p2">스스로 웹사이트를 제작하고 활용할 수 있다.</p>
</body>
p2 에만 문구변경기능 적용되도록 해보면
$("h1").click(function(){
$("h1").css("color", "green");
$("h1").css("backgroundColor", "gray");
$("p").css("border", "1px solid gray");
$(".p2").text("어서오세요, 제이쿼리의 세상에.");
});
});
두번째 p태그의 문구만 변경된다.
첫번째 p태그에 id="p1" 지정해주고
<body>
<h1>제이쿼리 사용하기</h1>
<p id="p1">제이쿼리에 대해 이해하고 사용할 수 있다.</p>
<p class="p2">스스로 웹사이트를 제작하고 활용할 수 있다.</p>
</body>
p1 에도 문구변경 적용되도록 해보면
$("h1").click(function(){
$("h1").css("color", "green");
$("h1").css("backgroundColor", "gray");
$("p").css("border", "1px solid gray");
$(".p2").text("어서오세요, 제이쿼리의 세상에.");
$("#p1").text("50분 되면 쉬러가세요.");
});
});
p1과 p2 각각 정해준 문구로 변경된다.
p1의 text를 변수 pTag에 넣어주고
pTag 를 alert로 띄워줌.
그 이후에 p1에 문구변경 명령.
$("h1").click(function(){
// alert("h1을 클릭했습니다");
$("h1").css("color", "green");
$("h1").css("backgroundColor", "gray");
$("p").css("border", "1px solid gray");
$(".p2").text("어서오세요, 제이쿼리의 세상에.");
let pTag = $("#p1").text();
alert(pTag);
$("#p1").text("50분 되면 쉬러가세요.");
});
});
클릭해보면 팝업이 먼저 뜨고 확인 누르면 그 이후에 문구가 변경된다. (순서대로 실행)
input 창 & button 추가
range가 있는 슬라이드 바로 생성
<body>
<h1>제이쿼리 사용하기</h1>
<p id="p1">제이쿼리에 대해 이해하고 사용할 수 있다.</p>
<p class="p2">스스로 웹사이트를 제작하고 활용할 수 있다.</p>
<input type="range" min="1" max="100" value="100">
<button>확인</button>
</body>
1~100까지의 슬라이드
'확인' 버튼을 클릭하면 input 의 value 를 가져와서 alert 로 띄워라
$("button").click(function(){
let number = $("input").val();
alert(number);
});
슬라이드 위치에 해당하는 값을 팝업으로 띄운다.
input 에 id 지정
span 태그 추가 & id 지정
<body>
<h1>제이쿼리 사용하기</h1>
<p id="p1">제이쿼리에 대해 이해하고 사용할 수 있다.</p>
<p class="p2">스스로 웹사이트를 제작하고 활용할 수 있다.</p>
<input type="range" min="1" max="100" value="100" id="volume"> <span id="volText"></span>
<button>확인</button>
</body>
=> 슬라이드 옆에 51이라는 text 띄워준거
(슬라이드 옆에 뜨는 숫자를 0으로 해주고)
만일 슬라이드의 값이 바뀐다면 .change ()
변경된 값을 value 라는 변수에 넣어주고
span 태그에(슬라이드 옆의 숫자) value값을 넣어줌
$("#volText").text(0);
$("#volume").change(function(){
let value = $("#volume").val();
$("#volText").text(value);
})
다시 말하면, 슬라이드 위치에 해당하는 숫자를 옆에 띄워준거
