제이쿼리 기초문법 질문드립니다.
본문
js파일로 만들어서 일반 html문서로 링크걸지 않고,
그냥 일반 html 문서의 <head>안에다가
문법을 넣었습니다.
그런데,
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("img").attr("src","sea.jpg").attr("alt","바다");
});
});
</script>
이건 실행이 됩니다.
그런데, 아래 코드는 실행이 안됩니다.
<script type="text/javascript">
$(document).ready(function(){
$('button').on('click',function(){
$('img').attr({'src':'jellyfish.jpg'}).attr({'alt':'바다'});
});
});
</script>
위 둘 코드의 차이점이라면
위쪽 코드는
$(document).ready(function(){ <<== 이것을 $(function(){ <<== 이렇게 간략히 줄인 것이고,
기타 ( )을 ({ }) 이렇게 변경되고,
$('button').on('click',function(){ 과 $("button").click(function(){
이런 차이점입니다.
제가 알기로는 코드를 간략히 줄인 차이뿐일거 같은데,,
위 코드는 실행되고, 아래 코드는 실행이 안되더군요..
이리저리 해봐도,,뭐가 잘못된 점인지,,,알수가 없습니다.^^;;;
어떤 점이 잘못된 것인가요.. ? -.-;;;
답변 3
다른 부분은 3가지 부분입니다.
1)
(上) $(function(){
(下) $(document).ready(function(){
2)
(上) $("button").click(function(){
(下) $('button').on('click',function(){
3)
(上) $("img").attr("src","sea.jpg").attr("alt","바다");
(下) $('img').attr({'src':'jellyfish.jpg'}).attr({'alt':'바다'});
위의 코드는 실행, 아래 코드는 실행 X 이니..
코드상으로는 아래 코드가 특별히 안될 이유는 없어 보입니다만..
위의 코드를 1), 2), 3) 하나씩 변경->확인해 보면서 문제 지점을 찾아보는 것을 추천합니다.
1) 에서 실행 X라면, $(document).ready(function(){ 부분이 문제라는 얘기이고,
2) 에서 실행 X라면 $('button').on('click',function(){ 부분이 문제라는 얘기이고,
3) 에서 실행 X라면 .attr({'src':'jellyfish.jpg'}).attr({'alt':'바다'}); 부분이 문제라는 얘기일 것입니다.
참고로, 제가 추천하는 코드는 다음과 같습니다. (.ready 축약형, on 메소드 사용)
$(function(){
$("button").on('click', function(){
$("img").attr("src", "sea.jpg").attr("alt", "바다");
});
});
그리고 $("button"), $("img") 는 모든 버튼 태그, 이미지 태그에 적용되는 셀렉터라,
가급적이면, 이벤트를 주는 버튼과 어떠한 액션을 적용하고자 하는 버튼에 ID 를 주어
$("#btn"), $("#img1") 과 같은 셀렉터를 쓰는 것이 좋습니다. http://zzaps.tistory.com/67
알려주신 소스를 그대로 복사해서 교체를 해봤어요..이상하게 안돼어요..-.-;;;
제가 보더라도 전혀 틀린 소스가 아닌데도 말입니다. -.-;;;;
아래가 전문입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("img").attr("src","sea.jpg").attr("alt","바다");
});
});
</script>
</head>
<body>
<button>화면을 변경</button>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
jquery 버전을 1.8.3 또는, 1.12.4 로 교체해 보셨으면 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
감사드립니다. 제이쿼리 버전문제였습니다. -.-;;
on 대신 bind를 사용해 보세요.
그리고 아래와 같이 줄일 수 있습니다.
$('img').attr({'src':'jellyfish.jpg','alt':'바다'});
attr({}).attr({});
이렇게 두 개를 붙이더라도 실행은 되어야 정상입니다.
그리고 알고 계신 것처럼
$(document).ready(function() {
});
$(function() {
});
이 두 가지는 차이점이 없습니다.
가장 먼저 페이지에 로드된 jquery 버전이 얼만지 확인해 보세요.
click() 메소드는 실행이 되는데 on() 메소드가 안 된다는 걸 보면 1.7이 안 될 가능성이 있습니다.
브라우저 콘솔에서 에러가 어떻게 나는지 확인해 보시는 게 가장 정확합니다.