제이쿼리 기초문법 질문드립니다.

제이쿼리 기초문법 질문드립니다.

QA

제이쿼리 기초문법 질문드립니다.

본문

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>

attr({}).attr({});

이렇게 두 개를 붙이더라도 실행은 되어야 정상입니다.

그리고 알고 계신 것처럼

$(document).ready(function() {

});

$(function() {

});

이 두 가지는 차이점이 없습니다.

 

가장 먼저 페이지에 로드된 jquery 버전이 얼만지 확인해 보세요.

click() 메소드는 실행이 되는데 on() 메소드가 안 된다는 걸 보면 1.7이 안 될 가능성이 있습니다.

브라우저 콘솔에서 에러가 어떻게 나는지 확인해 보시는 게 가장 정확합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT