Jmnote bot (토론 | 기여) 잔글 (로봇: 자동으로 텍스트 교체 (-http://jmnote.com/jq/ +http://zetawiki.com/jq/)) |
Jmnote bot (토론 | 기여) 잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight )) |
||
| (같은 사용자의 중간 판 2개는 보이지 않습니다) | |||
| 10번째 줄: | 10번째 줄: | ||
==example01.php== | ==example01.php== | ||
< | <syntaxhighlight lang='html5'> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="ko"> | <html lang="ko"> | ||
| 25번째 줄: | 25번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
;실행결과 | ;실행결과 | ||
< | <syntaxhighlight lang='text'> | ||
새 내용 | 새 내용 | ||
새 내용 | 새 내용 | ||
</ | </syntaxhighlight> | ||
* 모든 div 태그의 내용이 "새 내용"으로 대체되었다. | * 모든 div 태그의 내용이 "새 내용"으로 대체되었다. | ||
* 예시: http://zetawiki.com/ | * 예시: 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"> | ||
| 52번째 줄: | 52번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
;실행결과 | ;실행결과 | ||
< | <syntaxhighlight lang='text'> | ||
원래 내용 1 | 원래 내용 1 | ||
원래 내용 2 | 원래 내용 2 | ||
</ | </syntaxhighlight> | ||
* 새 내용으로 바뀌지 않고 원래 내용이 그대로 나온다. | * 새 내용으로 바뀌지 않고 원래 내용이 그대로 나온다. | ||
* 새 내용을 적용하라는 명령 이후에 "원래 내용"이 나오기 때문에, 나중에 나온 "원래 내용"이 적용된 것이다. | * 새 내용을 적용하라는 명령 이후에 "원래 내용"이 나오기 때문에, 나중에 나온 "원래 내용"이 적용된 것이다. | ||
* 예시: http://zetawiki.com/ | * 예시: http://zetawiki.com/ex/jquery/example01B.php | ||
==example01C.php== | ==example01C.php== | ||
< | <syntaxhighlight lang='html5'> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="ko"> | <html lang="ko"> | ||
| 81번째 줄: | 81번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
*예제: http://zetawiki.com/ | *예제: http://zetawiki.com/ex/jquery/example01C.php | ||
;실행결과 | ;실행결과 | ||
< | <syntaxhighlight lang='text'> | ||
새 내용 | 새 내용 | ||
새 내용 | 새 내용 | ||
</ | </syntaxhighlight> | ||
* 스크립트가 위에 있지만 "새 내용"으로 바뀌었다. | * 스크립트가 위에 있지만 "새 내용"으로 바뀌었다. | ||
* <code>$(function() {</code> … <code>});</code> 내부에 기술하였기 페이지가 로드된 후 실행된 것이다. | * <code>$(function() {</code> … <code>});</code> 내부에 기술하였기 페이지가 로드된 후 실행된 것이다. | ||
| 104번째 줄: | 104번째 줄: | ||
<references/> | <references/> | ||
==참고 | ==참고== | ||
*http://www.w3schools.com/jquery/default.asp | *http://www.w3schools.com/jquery/default.asp | ||
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}}