2013-07-24 4 views
0

Я только что закончил учебники по codecademy по html, css, js и jQuery. Теперь я пытаюсь создать что-то самостоятельно. Но я не могу сделать даже самую простую работу. До сих пор я делал все в какой-то «браузерной лаборатории». Вопрос в том, как использовать или включать jQuery в свой index.html, чтобы он работал, когда я открываю его в браузере? После некоторых поисков я использовал ссылки, размещенные в библиотеке google, но он все равно не работает. У меня есть 3 файла: index.html, style.css и script.js.Использование jqueryui в index.html

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

index.html код:

<!DOCTYPE html> 
<html> 
<head> 
    <title>My thing</title> 
    <link rel='stylesheet' type='text/css' href='style.css'/> 
    <script type='text/javascript' src='script.js'></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 

</head> 
<body> 
    <div> 
    </div> 
</body> 
</html> 

style.css код:

div { 
height: 250px; 
width: 250px; 
background-color: #008800; 
} 

script.js код:

$(document).ready(function(){ 
    $('div').click(function(){ 
     $(this).effect('explode'); 
    }); 
}); 

ответ

3

должно быть

<!DOCTYPE html> 
<html> 
<head> 
    <title>My thing</title> 
    <link rel='stylesheet' type='text/css' href='style.css'/> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
    <script type='text/javascript' src='script.js'></script> 

</head> 
<body> 
    <div> 
    </div> 
</body> 
</html> 

Ваша страница сценария script.js используется JQuery, поэтому она должна быть включена после того, как JQuery библиотеки

Демонстрация: Plunker

+0

Сочетание добавления http и перемещения ссылки «script.js» после того, как эти ссылки были обработаны. –

+1

@ruby_ruby нет необходимости добавлять 'http:', как я показал в демо –

+0

Я вижу, что он работает в демо, но когда я удаляю http: в моем файле, он реально не взрывается. Когда я держу его там, он работает. В любом случае, спасибо за помощь новичку. –

1

Вы Отсутствует часть протокола из URL-адресов источника скрипта. Добавьте либо http:, либо https: в зависимости от того, откуда вы их получаете.

+1

, что это хорошо, он будет использовать protoco Я использовал для загрузки индексной страницы –

0
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 

вы пропустите Http: попробовать это и посмотреть, если он работает

+1

, это нормально, он будет использовать протокол, используемый для загрузки индексной страницы. –

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