기초공사 (html,css,javascript)
1강 jquery / javascript 소스 쓰는 순서 본문
*****javascript
body 로드되고 할일을 아래처럼 쓴다.
//DOMContentLoaded 뜻 body 로드되고 나서 할일.
document.addEventListener('DOMContentLoaded', function(){
document.getElementsByTagName('h1')[0].style.color='red';
});
*****jquery
body 로드 되고 할 일을 아래처럼 쓴다.
// $(document).ready(function(){
// $('h1').css({'color':'red'})
// });---> 아래처럼 간단하게 줄일 수 있다.
$(function(){
$('h1').css({'color':'red'});
});
*****소스 쓰는 순서****
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous">
</script>
<script>
document.getElementsByTagName('h1')[0].style.color='red';
</script>
이두개의 script를 <head></head>사이에 쓰면 적용이 안된다.
body가 시작되 안됐는데 실행이 되버리니 ..
body의 맨밑에 두면 적용이된다.
처음에 쓰고 싶을땐.
body가 로드되면 할일 소스로 입력하면 된다.(아래 기재)
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous">
</script>
<script src="./js/main.js"></script>
//원소스
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css 스타일 변경하기</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/main.css">
<!--
<script src="./js/vendor/jquery-1.10.2.min.js"></script>
<script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
-->
<!--<script src="./js/main.js"></script>-->
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous">
</script>
<!--<script src="./js/main.js"></script>-->
<script>
//document.getElementsByTagName('h1')[0].style.color='red';
//$('h1').css({'color':'red'});
//javascript에서는 html문서가 다 로드되면 할일
//DOMContentLoaded 뜻 html로드되고 나서 할일.
/*document.addEventListener('DOMContentLoaded', function(){
document.getElementsByTagName('h1')[0].style.color='red';
});
*/
//jquery에서는 html문서가 다 로드되면 할일
// $(document).ready(function(){
// $('h1').css({'color':'red'})
// });---> 아래처럼 간단하게 줄일 수 있다.
$(function(){
$('h1').css({'color':'red'});
});
</script>
<!--script잘라서 main.js에 넣고 이부분은 아래처럼 대체된다.-->
</head>
<body>
<header class="page-header" role="banner">
<h1>Creative jQuery Sample</h1>
</header>
<div class="page-main" role="main">
<div id="typo">
<div class="inner">Creative jQuery</div>
</div>
</div>
</body>
</html>
'jquery' 카테고리의 다른 글
| 6_image클릭시 each반복문 / for반복문 (0) | 2023.01.30 |
|---|---|
| animate_find / filter (0) | 2023.01.29 |
| 04_animate (0) | 2023.01.29 |
| 실행지점 제어_event종류 (1) | 2023.01.25 |
| css스타일 변경하기 (0) | 2023.01.25 |
