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>'웹프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 메서드 (0) | 2024.05.20 |
|---|---|
| [jQuery] 필터 (+ prop('속성'), attr(), tagName) (0) | 2024.05.17 |
| [jQuery] 선택자 (0) | 2024.05.17 |
| [jQuery] html, text +each문 (0) | 2024.05.17 |
| [jQuery] js와 차이 (0) | 2024.05.16 |
