2013-08-05 6 views
1

웹 사이트를 구축하고 싶다면 제가 가고있는 길을 말했기 때문에 온라인 자습서를 사용하여 일부 jQuery를 배우고 있습니다. 나는 HTML, 자바 스크립트 및 CSS의 합리적인 금액을 알아. 기본적으로 온라인 자습서에서이 jQuery 스크립트를 복사하여 스크립트가 잘못 될 수 없습니다. 그래서 내 가정은 내 HTML 문서의 잘못된 위치에 스크립트를 쓰고 있다는 것입니다. 어떤 아이디어? 미리 답변 해 주셔서 감사합니다.jQuery로 만든 사업부가 화면에 나타나지 않습니다.

또한 나는 이것이 새로운 div를 생성한다고 들었다. 나는 그것에 대해 지금 의심하기 시작했습니다. 그것이 틀린 경우에는 이것이 어떻게 제대로 수행되었는지 알려주십시오. 건배.

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href = "Jquery.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
     jQuery('<div/>', { 
      id: 'box', 
      css: { 

       fontWeight: 500, 
       color: 'green' 

      }, 
      click: function(){ 
       alert('You clicked the box'); 
      } 

     }); 
    </script> 
</head> 

<body> 


</body> 
</html> 

답변

7

해당 div를 DOM에 추가해야합니다.

Working Demo

jQuery('<div/>', { 
    id: 'box', 
    css: { 
     fontWeight: 500, 
     color: 'green' 
    }, 
    click: function() { 
     alert('You clicked the box'); 
    } 

}).appendTo('body'); 

또한,이 $(document).ready(function() {...}) 내부에 jQuery 코드를 포장하는 가장 좋은 방법은 다음과 같습니다 한 가지 방법은 jQuery를 appendTo() 방법을 사용하는 것입니다. 이렇게하면 코드가 실행될 때 상호 작용해야하는 DOM 요소가 존재하게됩니다. 여기에 대한 자세한 내용은 여기를 참조하십시오. http://api.jquery.com/ready

+0

답변을 주셔서 감사합니다. 내가 궁금해하는 것이 하나 더있다. .css 파일보다는 fontWeight 및 color와 함께 jQuery에서 배경색, 너비 및 높이를 설정할 수 있습니까? –

+2

도와 줘서 기쁩니다! 행운을 빌어 요 jQuery :) CSS 속성 (http://api.jquery.com/css/)을 사용하여 CSS 속성 대부분을 설정할 수 있습니다. addClass와 removeClass()도 살펴볼 수 있습니다. http://api.jquery.com/addClass/ http://api.jquery.com/removeClass/ – cfs

1

저는 jquery에 대한 전문 지식이 없지만 일반적으로 다루는 것과 다릅니다. 내가 더 간단한 용어로 똑같은 짓을했을 지 모르지만 아마 이걸하는 더 빠른 방법이 있겠지만 내 로컬 설정에서 작동한다.

편집 : 받아 들인 대답을 보면 거기에 모든 것을 다시 쓸 필요가없는 것처럼 보인다. 잘

<!DOCTYPE html> 
<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 

<body> 
<script> 
    $('body').html('<div id = "box">123</div>'); 
    $('#box').css('color','green'); 
    $('#box').css('font-weight','500'); 

    $('#box').click(function(){ 
     alert('You clicked here'); 
    }); 
</script> 
</body> 
</html> 
관련 문제