2013-05-06 1 views
1

Я экспериментировал с jQuery в Codecademy, однако после загрузки библиотеки он, похоже, не работает.Проблема с jQuery для работы

Я последовал за следующие действия:

  • Я скачал JQuery 1.9.1 от http://jquery.com/download/ (http://code.jquery.com/jquery-1.9.1.min.js более конкретно)
  • я переименовал файл jquery.js и поместил его в той же папке, как мой исходный HTML/сценарий и т. д.
  • Я связался с ним в своем файле HTML <script src='jquery.js'> </script>
  • Мой скрипт, который использовал jQuery, не работает. Я попробовал базовый тест, чтобы проверить, работает ли jQuery правильно - $(document).ready(function(){ alert("Hello jQuery"); });

Есть ли что-то, что я пропустил?

(Мой код работает отлично на Codecademy, так что я думаю, что это вряд ли будет проблемой в другом месте в моей программе)

Edit 1:

(Полный код, для тех, кто просят:))

HTML/JQuery

<script src='jquery.js'> 
     $(document).ready(function() { 
      alert("Hello jQuery!"); 
      $('.matchtile').click(function() { 
       $(this).fadeTo('slow', 0); 
      }); 
      $('.button').click(function() { 
       fadeIn(); 
      }); 
     }); 

     function fadeIn(){ 
      $('.matchtile').fadeTo('slow', 1); 
     } 
    </script> 
    <title></title> 
</head> 
<body> 
    <div class="matchtile"></div> 
    <div class="matchtile"></div> 
    <div class="matchtile"></div> 
    <div class="matchtile"></div> 
    <div class="button"></div> 
</body> 

CSS

.matchtile { 
    border-radius: 100%; 
    background-color: #FF0000; 
    width: 30px; 
    height: 30px; 
    margin: 30px; 
} 

.button { 
    background-color: #663333; 
    width: 30px; 
    height: 30px; 
    border-radius: 10%; 
    margin: 30px; 
} 
+2

обязательно размещать код здесь на SO ... это помогает получить правильные ответы, быстро :) –

+0

Посмотрите на консоли Javascript - у вас есть любые ошибки? В Chrome этот CTRL + SHIFT + I –

+0

я действительно сделал :) И нет, я нет. – Eilidh

ответ

2

Изменение:

<script src='jquery.js'> 
    $(document).ready(function() { 
     alert("Hello jQuery!"); 
     $('.matchtile').click(function() { 
      $(this).fadeTo('slow', 0); 
     }); 
     $('.button').click(function() { 
      fadeIn(); 
     }); 
    }); 

    function fadeIn(){ 
     $('.matchtile').fadeTo('slow', 1); 
    } 
</script> 

к:

<script src='jquery.js'></script> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     alert("Hello jQuery!"); 
     $('.matchtile').click(function() { 
      $(this).fadeTo('slow', 0); 
     }); 
     $('.button').click(function() { 
      fadeIn(); 
     }); 
    }); 

    function fadeIn(){ 
     $('.matchtile').fadeTo('slow', 1); 
    } 
</script> 

Ваш код jQuery не должен находиться в том же теге скрипта, который загружает фактический jQuery.js

+2

Или, чтобы сформулировать правило в более общих терминах, элемент сценария может напрямую указывать 'src'_or_, содержащий JS, но не оба. – nnnnnn

+0

Как добавить ответ: когда вы используете встроенный код внутри 'script'tag, атрибут src игнорируется. Вот почему связанные скрипты имеют тег скрипта, открытый и закрытый без чего-либо внутри. – RaphaelDDL

2
<script src='jquery.js'></script> 
<script> 
$(document).ready(function() { 
     alert("Hello jQuery!"); 
     $('.matchtile').click(function() { 
      $(this).fadeTo('slow', 0); 
     }); 
     $('.button').click(function() { 
      fadeIn(); 
     }); 
    }); 

    function fadeIn(){ 
     $('.matchtile').fadeTo('slow', 1); 
    } 
</script> 
<title></title> 
</head> 
<body> 
<div class="matchtile"></div> 
<div class="matchtile"></div> 
<div class="matchtile"></div> 
<div class="matchtile"></div> 
<div class="button"></div> 
</body> 
+1

Вы должны объяснить, что вы сделали. – j08691

+0

Как я сделал;) ... –

0

Я работал над тем же примером, используя размещенную версию jQuery Google, чтобы исключить место расположения библиотеки в качестве потенциальной точки отказа. Это прекрасно работает, проверено на месте:

<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      alert("Hello jQuery"); 
     }); 
    </script> 
</head> 
<body> 
</body>