jQuery Назначение функций

Итак, я недавно начал изучать jQuery, но у меня возникли проблемы с небольшой анимационной программой, с которой я вышел с сайта jQuery. Итак, вот в чем проблема. Эта программа работает:jQuery Назначение функций

<HTML> 
<HEAD> 
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script> 

<STYLE type="text/css"> 

#content { 
    background-color:#6688ff; 
    position:absolute; 
    width:100px; 
    height:100px; 
    padding:3px; 
    margin-top:5px; 
    left: 100px; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<input type="button" id="left" value="Left"/> 
<input type="button" id="right" value="Right"/> 
<div id="content">Move</div> 
<script type="text/javascript"> 
$("#right").click(function() { 
    $("#content").animate(
      {"left": "+=50px"}, 
      "slow"); 
}); 
$("#left").click(function() { 
    $("#content").animate(
       {"left": "-=50px"}, 
      "slow"); 
}); 
</script> 

</BODY> 
</HTML>

Но эта программа не делает:

<HTML> 
<HEAD> 
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script> 

<script type="text/javascript"> 
$("#right").click(function() { 
    $("#content").animate(
      {"left": "+=50px"}, 
      "slow"); 
}); 
$("#left").click(function() { 
    $("#content").animate(
       {"left": "-=50px"}, 
      "slow"); 
}); 
</script> 

<STYLE type="text/css"> 

#content { 
    background-color:#6688ff; 
    position:absolute; 
    width:100px; 
    height:100px; 
    padding:3px; 
    margin-top:5px; 
    left: 100px; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<input type="button" id="left" value="Left"/> 
<input type="button" id="right" value="Right"/> 
<div id="content">Move</div> 


</BODY> 
</HTML>

Единственное различие между этими двумя программами, где я поставил javscript, так может кто-нибудь объяснить мне, почему это делает разницу? Спасибо, потому что меня это смущает.

источник

2012-02-26 Jack Davis

Документ не готов, когда выполняется второй кусок кода jQuery, поэтому он не работает.

Всегда обернуть код JQuery в $(document).ready() высказыванием:

$(document).ready() { 
    $("#right").click(function() { 
    $("#content").animate({"left": "+=50px"}, "slow"); 
    }); 

    $("#left").click(function() { 
    $("#content").animate({"left": "-=50px"}, "slow"); 
    }); 
});

Ваш второй код ломоть является правильным.

источник

2012-02-26 05:56:58 Blender

Всегда? Вы можете поместить свой блок сценария в конец тела ... – nnnnnn

Зачем вам это нужно? – Blender

Почему бы и нет? Он позволяет браузеру работать с рендерингом фактической страницы без необходимости сначала разбирать сценарий. Сценарий в голове с document.ready (или onload) и скриптом в конце тела - два наиболее распространенных способа сделать это, не так ли? – nnnnnn

Загрузка/разборка браузера/рендеринга html и javascript сверху вниз, одна не работает, поскольку вы помещаете ее перед этими элементами html, и когда она запускается, они не могут найти те теги html, использовать jQuery ready can избегайте этого: http://api.jquery.com/ready/

источник

2012-02-26 05:58:34

css должен появиться перед любым javascript, чтобы документ имел все предварительно загруженные элементы.

источник

2012-02-26 05:58:45

Css? Вы имеете в виду html. – nnnnnn

Я имею в виду, что css должен отображаться выше в DOM до js –

Не имеет значения, является ли css после JS, имеет значение, если элементы html. – nnnnnn

Второй кодовый блок относится к #right до right даже объявлен.

источник

2012-02-26 05:59:29

jQuery Назначение функций

ответ

Смежные вопросы