반응형
jQuery
: JavaScript를 간편하게 사용하도록하는 오픈소스 기반의 자바스크립트 라이브러리
기본 문법
$(선택자).메서드();
| JavaScript | jQuery | |
| 창이 모두 로드되었을 때 | window.onload = function() {}; | $(window).load( function() {}); |
| 문서가 모두 로드되었을 때 | $(documunt).ready(function() {}); | |
| $(function() {}); |
onload : 모든 내용을 로드한 뒤에 실행
ready() : 문서만 로딩하고 실행
jQuery에서는 CSS선택자를 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$('#hi').css({ //css적용
backgroundColor: 'red'
})
//속성 변경
$('img').attr('src','http://placehold.it/100x100');
})
})
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h1 id="hi">반갑습니다!</h1>
<img>
</body>
</html>
내용 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$('h1').on('click', function () {
$('#hi').html('<h2>Hello!</h2>');
$('span').html($('#hi').html());
})
})
</script>
</head>
<body>
<h1>안녕하세요</h1>
<div id="hi">반갑습니다!</div>
<span>ㅎㅇㅎㅇ</span>
</body>
</html>$(선택자).html();
: 매개변수 없이 사용하면 선택자 요소안의 HTML태그까지 가져옴
매개변수를 주면 요소안의 내용을지우고 매개변수로준 텍스트를 HTML태그로 인식해 적용
반응형
'WEB > Javascript' 카테고리의 다른 글
| [JavaScript] .filter() (0) | 2020.09.03 |
|---|---|
| [JavaScript] a 태그의 download 속성 (0) | 2020.09.02 |
| [JavaScript]현재 페이지 새로고침(refresh) (0) | 2020.09.02 |
| [JavaScript]문서 객체 모델 DOM (0) | 2020.08.21 |
| [JavaScript]JavaScript 시작하기 (0) | 2020.08.18 |
