Блог

Главная - Вопросы по программированию - jquery не работает на моей HTML-странице. Я не получаю оповещение о загрузке страницы, как ожидалось

jquery не работает на моей HTML-странице. Я не получаю оповещение о загрузке страницы, как ожидалось

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я ожидал, что появится сообщение о готовности документа, чего на самом деле не происходит по какой-то странной причине. Что может пойти не так? Расположение библиотеки jquery находится в каталоге js. Я пробовал во всех браузерах, но он не работает. Кстати, я очень новичок в jquery и не знаю, как заставить его работать. 

 <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="javascript" src="js/jquery-2.1.1.min.js">

            $(document).ready(function(){
                        alert("Doc Ready"); // I was expecting the alert to work which is not happening.
                    }
            );


        </script>

        <style type="text/css">

            #topbar {
                height: 40px;
                width: 98%;
                background-color: #062f9e;
                border-style: solid;
                border-width: 5px;
                border-color: goldenrod;
                text-align: center;
                font-family: fantasy;
                font-style: normal;
                font-size: 24px;
                color: darkkhaki;
                font-weight: bold;


            }

            #contentPane {
                margin-top : 50px;
                left: 0;
                right: 0;
                height: 100%;
                background-color: sandybrown;
                border-color: darkslategray;
                border: thick;


            }

            body {
                width: 100%;
                height: 100%;
                background-color: darkgrey;
            }

            .image{
                height: auto;
                width: auto;
                float: left;
                border-style: solid;
                border-color: ghostwhite;
                border-width: 10px;
            }

        </style>
    </head>
    <body>

        <div id="topbar">AGNI SHIKHA</div>
        <div id="contentPane">
            <img id="agnishikaImg" class="image" src="res/agnishikha.jpeg" alt="Agnishikha Image">

        </div>
        <div style="clear: both;"></div>

    </body>
    </html>

Ответ №1:

Вам нужно разделить эти скрипты на два отдельных блока:

 <script src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
    alert("Doc Ready"); // I was expecting the alert to work which is not happening.
});
</script>

Комментарии:

1. Каждый раз, когда я вижу это требование, я задаюсь вопросом, почему W3 делает включение скрипта таким нарушенным. С одной стороны, они делают самозакрывающийся тег скрипта недействительным, а с другой стороны, вы ничего не можете в него вставить, если у него есть src. Поди разберись.

Ответ №2:

Скрипты должны быть отдельными.

 <script type="javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
    $(document).ready(function(){

       alert("Doc Ready"); // :)
    });
</script>