[jQuery] 제이쿼리의 기본 속성 (1) -window.onload와의 유사점
제이쿼리는 기본적으로 자바스크립트의 라이브러리이기 때문에 기본적인 기능은 유사하다.
하지만 몇가지 차이점이 있기때문에 유의 해야한다.
1) 스크립트 부분에서 window.onload를 사용하여 스크립트를 실행할 수 있는데, 이때 2개이상의 window.onload를 실행시킨다면 마지막에 작성한 window.onload만 실행되게 된다.
2)jQuery는 onload와 유사하게 실행하지만 중복과 상관없이 모두 실행된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 3px solid #999;
margin: 30px auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
/* onload를 2개 먹이면 `1개만 적용이된다.
window.onload=function(){
document.getElementById("boxLayout").style.background="blue";
}
window.onload=function(){ // 위에 배경색은 실행되지 않고 마지막 onload가 실행된다.
alert("환영합니다.");
}
*/
$(function(){ //onload와 유사함
$("#boxLayout").css("background","#f0f");
});
$(function(){
alert("환영합니다.");
});//jquery는 $로 대체 가능
</script>
</head>
<body>
<div id="boxLayout" class="box">
</div>
</body>
</html>
|
cs |
'Web > jQuery' 카테고리의 다른 글
| [jQuery] 셀렉터(2) (0) | 2020.11.17 |
|---|---|
| [jQuery] 주요 셀렉터 & 필터 셀렉터 (0) | 2020.11.17 |
| [jQuery] 태그의 자손, 자식, 형제 범위 설정하는 법 (0) | 2020.11.16 |
| [jQuery] 제이쿼리를 이용하여 css 접근하기 (0) | 2020.11.16 |
| [jQuery] 제이쿼리란? (0) | 2020.11.13 |
댓글