* 로컬에서는 실행 결과를 확인할 수 없기 때문에 AutoSet(서버)을 사용해야 한다.
1. AutoSet10 설치하기 : https://2boki.tistory.com/128
2. 파일 업로드
<jq_1_news.html>, <jq_1_test.html> 이 두 개의 파일을
C:\AutoSet10\public_html\0706 이 경로에 업로드함 (제이쿼리도 업로드 할 것)
3. html 파일 구성
- jq_1_news.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script>
</script>
</head>
<body>
<p id="news_1">this is news 1</p>
<p id="news_2">this is news 2</p>
</body>
</html>
- jq_1_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
// load 메소드
// $(요소 선택).load(url, data, 콜백함수);
// jq_1_news.html에 있는 #news_1, #news_2의 값을 그대로 가져옴 (태그까지 모두)
// 이를 #newsWrap_1, #newsWrap_2에 출력
$("#newsWrap_1").load("jq_1_news.html #news_1");
$("#newsWrap_2").load("jq_1_news.html #news_2");
});
</script>
</head>
<body>
<h1>LOAD 1</h1>
<div id="newsWrap_1"></div>
<h1>LOAD 2</h1>
<div id="newsWrap_2"></div>
</body>
</html>
4. 서버에 접속해서 확인해보기
http://localhost/0706/jq_1_test.html
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] datepicker() (0) | 2020.08.13 |
|---|---|
| [제이쿼리] Ajax, parsing XML (0) | 2020.08.13 |
| [제이쿼리] JSON 값 사용하기 (0) | 2020.08.13 |
| [제이쿼리] one(), select(), after(), triggerHandler() (0) | 2020.08.12 |
| [제이쿼리] select(), change(), keydown(), keyup(), keypress(), scroll() (0) | 2020.08.12 |
