728x90
728x170
* 선택자란?
- 선택자(Selector)를 사용하면 지정한 문서 객체를 선택해 올 수 있음.
- 제이쿼리 선택자에는 직접 선택자, 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택하는 인접 관계 선택자, 선택된 요소 중 더 세밀하게 선택할 수 있는 탐색 선택자가 있음.
* 제이쿼리 선택자 사용 준비하기
- 선택자를 사용하기 위해서는 문서 객체가 필요함.
1. 잘못된 적용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<html>
<head>
<title>잘못된 선택자 적용</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
문단 요소보다 먼저 실행됨
</script>
</head>
<body>
문단 요소
</body>
</html> |
cs |
-> 자바스크립트가 인터프린터 언어이기 때문에 제이쿼리가 먼저 실행되고 난 후 <body> 영역에 문서 객체가 로딩됨.
-> 선택자가 먼저 실행되어 문서 객체를 선택할 수 없음.
2. 정상 적용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<html>
<head>
<title>선택자 정상 적용</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
문단 요소가 로딩된 후 실행됨.
});
</script>
</head>
<body>
문단 요소
</body>
</html> |
cs |
3. 정상 적용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<html>
<head>
<title>선택자 정상 적용</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
문단 요소가 로딩된 후 실행됨.
});
</script>
</head>
<body>
문단 요소
</body>
</html> |
cs |
-> 실행문에 있는'$'는 제이쿼리 문서 객체 선택자의 메서드를 나타냄.
-> 여기서 익명 함수를 입력하면 문서를 모두 로딩한 후에 실행문을 실행하는 의미를 갖게 됨.
- 다음의 1과 2는 <body> 영역에 모든 문서 객체를 로딩한 후 실행문을 실행함.
|
1. $(document).ready(function(){실행문}); 2. $(function(){실행문}); |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
728x90
그리드형(광고전용)
'Programming > jQuery' 카테고리의 다른 글
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
|---|---|
| 객체 조작 메서드 - 속성 조작 메서드 (0) | 2017.05.22 |
| 선택자와 함께 사용하면 편리한 메서드들 (0) | 2017.05.22 |
| 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 속성 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 위치 탐색 선택자 (0) | 2017.05.22 |
| 직접 선택자와 인접 관계 선택자 (0) | 2017.05.22 |
| 제이쿼리란? (0) | 2017.05.22 |
