Не подключается подключить jQuery к html

Question

Имеется вот такой код:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="" src="script2.js"></script>
    
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <title></title>
</head>
<body>
    <h1>My page</h1>
    <h2>My page2</h2>
</body>
</html>

и такой код в файле script2.js:

$('h2').css({'color':'red'});
alert('hello');

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

Answer 1

Вам весь jquery код нужно помещать внутрь $(document).ready(function(){ ... });

$(document).ready(function(){
    $('h2').css({'color':'red'});
    alert('hello');
});

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="" src="script2.js"></script>
    
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <title></title>
</head>
<body>
    <h1>My page</h1>
    <h2>My page2</h2>
</body>
</html>

Answer 2

Или поместить <script type="" src="script2.js"></script> в конец, перед </body>

Answer 3

Попробуйте использовать следующую структуру для подключаемого файла script2.js

!function($){
  $(document).ready(function(){
    // ТУТ ВАШ КОД
  });
}(window.jQuery);

Answer 4

Порядок выполнения обычных (не module, не defer, не async) скриптов в HTML седующий:

Приостанавливается парсинг HTML.
Блокируется событие DOMContentLoaded.
Скрипт сразу подгружается, парсится и выполняется.
Гарантируется порядок выполнения относительно других обычных скриптов.

Учитывая вышесказанное, когда браузер встретил ваш скрипт, то пока он не выполнит его, он не отпарсит часть страницы под ним. В то время, когда он выполняется - ваших тегов H1 и H2 еще не существует. Скрипт работает нормально, но jQuery не делает ничего!

Вам нужно догрузить/дорендерить всю станицу, а уже потом, делать с ней что-либо. jQuery рекомендует это делать следующим образом:

$(function() {

  $('h2').css({'color':'red'});
  alert('hello');

});

Answer 5

$

(document).ready(function(){
    $('h2').css({'color':'red'});
    alert('hello');
});
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="" src="script2.js"></script>
    
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <title></title>
</head>
<body>
    <h1>My page</h1>
    <h2>My page2</h2>
</body>
</html>

БЛОГ НА HUSL

Не подключается подключить jQuery к html

Ответы (5 шт):