웹프로그래밍/jQuery

[jQuery] OT

아잠만_ 2024. 5. 14. 17:36

JQuery 다운

jQuery 사이트에서

uncompressed파일을 다른 이름으로 저장하기

새로 HTML프로젝트를 생성하여 js폴더에 다운받은 파일을 넣어두기

 

jquery 사용법

외부 스크립트 불러오기

<script src="../js/jquery-3.7.1.js"></script>

<script src="http://localhost/jqpro/js/jquery-3.7.1.js"></script>

또는 링크로 불러오기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

script와 비교

window.onload = function(){} $(document).ready.(function() { } )
document.querySelector('태그') $('태그')
jquery('태그')
innerHTML html
addEventListener() on()
style.backgroundColor = " "; css("background-color", " ")
더보기 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.1.js"></script>
<script>
const proc1 = () => {
	
	// script 코드
// 	document.getElementById('result1').innerText = "Hello";
	
	// jQuery 코드
	 $('#result1').html('Hello');
// 	 jquery('#result1').html('Hello');
}
</script>
</head>
<body>

	<div class="box">
		<h3>result1을 검색해서 hello출력</h3>
		<input type="button" value="확인" onclick="proc1()"> <br> <br>

		<div id="result1"></div>
	</div>
</body>
</html>

Onclick 이벤트

더보기 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.1.js"></script>
<script>

// window.onload = function() {
$(document).ready(function(){
	
// id = btn1를 검색
// 	document.querySelector('#btn1').addEventListener('click',function(){})
	
	// jquery
	$('#btn1').on('click',function(){
		$('#result1').html("hello");
	})
}

</script>
</head>
<body>

	<div class="box">
		<h3>태그에서 onclick이벤트를 사용하지 않고<br>script에서 id를 검색해서 이벤트핸들러 작성</h3>
		<input type="button" value="확인" id="btn1"> <br> <br>

		<div id="result1"></div>
	</div>
</body>
</html>