제이쿼리 등록하기
https://developers.google.com/speed/libraries?hl=ko#jquery
제이쿼리 기본 사용법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리</title>
<!-- JQuery Library 적용 - jquery.com -->
<!-- 1. 다운로드 -->
<!-- <script src="./js/jquery-3.6.4.min.js"></script> -->
<!-- 2. CDN 방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
//html 문서의 로드가 완료되었을 때 발동하는 이벤트 처리
//객체 쓸 땐 "" 없이 css일 땐 "" 와 써야됨
jQuery(document).ready(function(){
// alert('악');
$('#btn').click(function(){
alert('clicked');
});
//애니 효과 연습
$('#b1').click(function(){
$("img").hide(3000); //숨길 때 걸릴 시간 쓰면 3초만큼 천천히 숨겨짐
});
$('#b2').click(function(){
$("img").show("fast");
});
$('#b3').click(function(){
$("img").toggle("slow");
});
$('#b4').on('click', function(){
$("img").slideUp("slow");
});
$('#b5').on('click', function(){
$("img").slideDown("slow");
});
$('#b6').on('click', function(){
$("img").slideToggle("slow");
});
});
</script>
</head>
<body>
<button id="btn">클릭</button>
<hr>
<!-- 애니메이션 효과 -->
<button id="b1">hide</button>
<button id="b2">show</button>
<button id="b3">toggle</button>
<button id="b4">slideUp</button>
<button id="b5">slideDown</button>
<button id="b6">slideToggel</button>
<br>
<img src="./image/moana/thumb_moana.png" alt="모아나" width="200">
<hr>
<!-- DOM요소 제어 - 속성변경 -->
<p id="p1">이 요소에는 <strong>스트롱</strong> 요소가 있음 </p>
<button id="btn1">text() 읽기</button>
<button id="btn2">html() 읽기</button>
<script>
$('#btn1').click(function(){
alert( $('#p1').text() ); //텍스트만 읽기 : 이 요소에는 스트롱 요소가 있음
});
$('#btn2').click(function(){
alert( $('#p1').html() ); //요소 읽기 : 이 요소에는 <strong>스트롱</strong> 요소가 있음
});
</script>
<hr>
<h3 id="hh">여기에 Text 콘텐츠 작성하기</h3>
<button id="btn3">text() 쓰기</button>
<button id="btn4">html() 쓰기</button>
<script>
$('#btn3').click(function(){
$('#hh').text('텍스트 추가 <a href="">네이바</a> 앵커요소');
//결과 : 텍스트 추가 <a href="">네이바</a> 앵커요소
//태그문도 걍 글씨 취급
});
$('#btn4').click(function(){
$('#hh').html('텍스트 추가 <a href="">네이바</a> 앵커요소');
//결과 : 텍스트 추가 네이바 앵커요소
});
</script>
</body>
</html>
보조기억장치