(→같이 보기) |
Jmnote bot (토론 | 기여) 잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight )) |
||
| (사용자 2명의 중간 판 17개는 보이지 않습니다) | |||
| 4번째 줄: | 4번째 줄: | ||
==어떤 js를 연결하는 것이 좋을까?== | ==어떤 js를 연결하는 것이 좋을까?== | ||
{{참고|jQuery 최신 버전 사용}} | |||
*버전별 js파일은 http://code.jquery.com 에 있다. | *버전별 js파일은 http://code.jquery.com 에 있다. | ||
*거기에는 또 같은 버전이라도 비압축 버전(uncompressed)과 압축버전(compressed)이 있다. | *거기에는 또 같은 버전이라도 비압축 버전(uncompressed)과 압축버전(compressed)이 있다. | ||
| 9번째 줄: | 10번째 줄: | ||
==example01.php== | ==example01.php== | ||
< | <syntaxhighlight lang='html5'> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="ko"> | <html lang="ko"> | ||
<head> | <head> | ||
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||
<script | <script src="//code.jquery.com/jquery.min.js"></script> | ||
</head> | </head> | ||
<body> | <body> | ||
| 20번째 줄: | 21번째 줄: | ||
<div>원래 내용 2</div> | <div>원래 내용 2</div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$('div').text('새 내용'); | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
;실행결과 | |||
< | <syntaxhighlight lang='text'> | ||
새 내용 | 새 내용 | ||
새 내용 | 새 내용 | ||
</ | </syntaxhighlight> | ||
* 모든 div 태그의 내용이 "새 내용"으로 대체되었다. | * 모든 div 태그의 내용이 "새 내용"으로 대체되었다. | ||
* 예시: http:// | * 예시: http://zetawiki.com/ex/jquery/example01.php | ||
==example01B.php== | ==example01B.php== | ||
여기서는 div 부분과 script 부분의 순서를 바꿔보자. 그러면 실행결과는 어떻게 될까? | 여기서는 div 부분과 script 부분의 순서를 바꿔보자. 그러면 실행결과는 어떻게 될까? | ||
< | <syntaxhighlight lang='html5'> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="ko"> | <html lang="ko"> | ||
<head> | <head> | ||
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||
<script | <script src="//code.jquery.com/jquery.min.js"></script> | ||
<script | <script> | ||
$('div').text('새 내용'); | |||
</script> | </script> | ||
</head> | </head> | ||
| 51번째 줄: | 52번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
;실행결과 | |||
< | <syntaxhighlight lang='text'> | ||
원래 내용 1 | 원래 내용 1 | ||
원래 내용 2 | 원래 내용 2 | ||
</ | </syntaxhighlight> | ||
* 새 내용으로 바뀌지 않고 원래 내용이 그대로 나온다. | * 새 내용으로 바뀌지 않고 원래 내용이 그대로 나온다. | ||
* 새 내용을 적용하라는 명령 이후에 "원래 내용"이 나오기 때문에, 나중에 나온 "원래 내용"이 적용된 것이다. | * 새 내용을 적용하라는 명령 이후에 "원래 내용"이 나오기 때문에, 나중에 나온 "원래 내용"이 적용된 것이다. | ||
* 예시: http:// | * 예시: http://zetawiki.com/ex/jquery/example01B.php | ||
==example01C.php== | |||
<syntaxhighlight lang='html5'> | |||
<!DOCTYPE html> | |||
<html lang="ko"> | |||
<head> | |||
<meta charset="utf-8" /> | |||
<script src="//code.jquery.com/jquery.min.js"></script> | |||
<script> | |||
$(function() { | |||
$('div').text('새 내용'); | |||
}); | |||
</script> | |||
</head> | |||
<body> | |||
<div>원래 내용 1</div> | |||
<div>원래 내용 2</div> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
*예제: http://zetawiki.com/ex/jquery/example01C.php | |||
;실행결과 | |||
<syntaxhighlight lang='text'> | |||
새 내용 | |||
새 내용 | |||
</syntaxhighlight> | |||
* 스크립트가 위에 있지만 "새 내용"으로 바뀌었다. | |||
* <code>$(function() {</code> … <code>});</code> 내부에 기술하였기 페이지가 로드된 후 실행된 것이다. | |||
:→ [[jQuery ready()]] 참조 | |||
==같이 보기== | ==같이 보기== | ||
| 67번째 줄: | 98번째 줄: | ||
*[[JQuery 모바일 시작하기]] | *[[JQuery 모바일 시작하기]] | ||
*[[jQuery UI 시작하기]] | *[[jQuery UI 시작하기]] | ||
*[[jQuery 최신 버전 사용]] | |||
*[[jQuery]] | *[[jQuery]] | ||
*[[자바스크립트 import]] | |||
==주석== | ==주석== | ||
<references/> | <references/> | ||
==참고 | ==참고== | ||
*http://www.w3schools.com/jquery/default.asp | *http://www.w3schools.com/jquery/default.asp | ||
[[분류: jQuery]] | [[분류: jQuery]] | ||
[[분류: 웹]] | [[분류: 웹]] | ||
[[분류: 튜토리얼]] | |||
2020년 11월 2일 (월) 02:53 기준 최신판
- jQuery 시작하기
- jQuery 튜토리얼
1 어떤 js를 연결하는 것이 좋을까?[ | ]
jQuery 최신 버전 사용 문서를 참고하십시오.- 버전별 js파일은 http://code.jquery.com 에 있다.
- 거기에는 또 같은 버전이라도 비압축 버전(uncompressed)과 압축버전(compressed)이 있다.
- 안정화 최신 버전은 http://code.jquery.com/jquery.js (일반버전)과 http://code.jquery.com/jquery.min.js (압축버전)이다. 이것으로 연결하면 jquery 측에서 안정화 버전을 올릴 때, 자동으로 업데이트가 되는 효과가 있다.[1]
2 example01.php[ | ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<script src="//code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div>원래 내용 1</div>
<div>원래 내용 2</div>
<script type="text/javascript">
$('div').text('새 내용');
</script>
</body>
</html>
- 실행결과
새 내용
새 내용
- 모든 div 태그의 내용이 "새 내용"으로 대체되었다.
- 예시: http://zetawiki.com/ex/jquery/example01.php
3 example01B.php[ | ]
여기서는 div 부분과 script 부분의 순서를 바꿔보자. 그러면 실행결과는 어떻게 될까?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$('div').text('새 내용');
</script>
</head>
<body>
<div>원래 내용 1</div>
<div>원래 내용 2</div>
</body>
</html>
- 실행결과
원래 내용 1
원래 내용 2
- 새 내용으로 바뀌지 않고 원래 내용이 그대로 나온다.
- 새 내용을 적용하라는 명령 이후에 "원래 내용"이 나오기 때문에, 나중에 나온 "원래 내용"이 적용된 것이다.
- 예시: http://zetawiki.com/ex/jquery/example01B.php
4 example01C.php[ | ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
$('div').text('새 내용');
});
</script>
</head>
<body>
<div>원래 내용 1</div>
<div>원래 내용 2</div>
</body>
</html>
- 실행결과
새 내용
새 내용
- 스크립트가 위에 있지만 "새 내용"으로 바뀌었다.
$(function() {…});내부에 기술하였기 페이지가 로드된 후 실행된 것이다.
- → jQuery ready() 참조
5 같이 보기[ | ]
6 주석[ | ]
- ↑ 흔한 경우는 아니겠으나, 이로 인해서 어느날 갑자기 예전에 되던 기능이 되지 않을 수도 있다.
7 참고[ | ]
로그인하시면 댓글을 쓸 수 있습니다.
{{ comment.name }}
{{ comment.created | snstime }}
-
{{comment.page_title}} ―{{comment.name}}