Мои файлы находятся в одной папке. Когда я запускаю команды jQuery в самом файле html или внешнем файле script.js
, ничего не происходит.
Но когда я делаю запрос непосредственно на самой строке, он работает.
Что я делаю не так?
<!--Nothing happens -->
<script src="jquery.js"></script>
<script src="script.js"></script>
<script>
$( "para1" ).click(function() {
$("para1").hide();
});
</script>
<body>
<p id="para1">This is a paragraph</p>
</body>
<!-- Works -->
<body>
<p id="para1" onclick="$(this).hide();">This is a paragraph</p>
</body>
Вы пытаетесь получить доступ к документу HTML, но он еще не создан. Ваш скрипт выполняется до создания вашего документа.
Вам нужно подождать, пока HTML-код будет создан, чтобы начать назначать jquery-материал узлам.
вам нужно сделать это: пусть определит функцию, которая будет вызываться при создании документа:
<script>
function document_created() {
// your document is created now
// you can assign your stuff:
$( "#para1" ).click(function() {
$("#para1").hide();
});
}
</script>
... И теперь позвольте ему позвонить, когда документ был создан.
Откуда вы знаете, когда документ был создан?
Использование jquery:
$(document).ready(document_created);
Использование обычных событий DOM:
<body onload="document_created()">
Это называется "подписка на событие". есть много других интересных событий, которые вы также можете подписаться: выгрузка страницы, изменение размера окна и т. д....
Кроме того, когда вы используете JQuery для доступа к элементу по идентификатору, вам нужно использовать "#" перед именем. Он может работать так, как у вас есть, но не очень корректен. Так:
$("#para1") ---> will access element with ID="para1" - ids are unique, so will be only one-
$(".para1") ---> will select elements with class "para1" - can be many-
В jQuery вам нужно использовать #
в качестве префикса для id-селекторов. Кроме того, те, которые находятся внутри события кликов jQuery bound, определяют контекст this
элемента, который вызвал событие click, поэтому $(this).hide()
будет работать в вашем случае точно так же внутри обработчика события.
измените это:
$( "para1" ).click(function() {
$("para1").hide();
});
чтобы:
$("#para1").click(function() { // add the # prefix
$(this).hide(); // use this
});
DEMO - использование вышеуказанного кода
Эта
$( "para1" ).click(function() {
$("para1").hide();
});
Должно быть
$( "#para1" ).click(function() {
$("#para1").hide();
});
Обратите внимание на использование символа #
в селекторе. Это означает, что вы печатаете после того, как он является идентификатором.