我的Jquery在我的html文件中不起作用

Question

好的，我不是一個完全菜鳥，但還是jQuery/javascript的初學者，我只是不明白為什么這個jqueryman.js沒有鏈接到我的html。 我很確定我的文件夾樹正確，我什至將我的js文件放在與html相同的文件夾中，只是為了確保在那里沒有錯誤。

index.html的頭

<!-- metas -->
<meta charset='UTF-8'>
<!-- stylesheets -->
    <link rel='stylesheet' href='../css/mainpage.css'>
    <link rel='stylesheet' href='../css/index.css'>
<!-- all the scripts loosly taken online -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script src='http://malsup.github.com/jquery.cycle2.js'></script>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<!-- script files -->
    <script src="jqueryman.js"></script>    <!-- (this is the trouble maker) -->

index.html的主體

<h1 class="h1">neckbeards</h1>


<div class='cycle-slideshow'
    data-cycle-fx='scrollHorz'
    data-cycle-pause-on-hover='false'
    data-cycle-speed='5000'>
    <img class='sliderimg' id="Carl"    alt='Carl'      src='http://i.imgur.com/7kJOy7k.jpg'>
    <img class='sliderimg' id="Tugboat" alt='Tugboat'   src='http://i.imgur.com/mRGbOKv.jpg'>
    <img class='sliderimg' id="P0J0"    alt='P0J0'      src='http://i.imgur.com/UiAIWGf.png'>
    <img class='sliderimg' id="Ffej"    alt='Ffej'      src='http://i.imgur.com/isl6UhR.png'>
</div>
<h1 id="name">Carl</h1>

jqueryman.js

 $(document).ready(
        function () {
            $('.h1').hide()
        });
    );

Answer 1

更新：這是工作示例： JSFiddle
您需要刪除. 來自$('.h1').hide(); 的. 是指一個類，但您只想隱藏基本h1元素。

$(document).ready(function () {
    $('h1').hide();
});

另外，也可以僅隱藏一個元素，只需按其ID 。

$(document).ready(function () {
    $('#name').hide();
});

這里是jQuery Selectors教程的鏈接。

另外，如注釋中所述，您的JavaScript也有語法錯誤。

$(document).ready(
    function () {
        $('.h1').hide() // As with both my example above you need to add a semicolon 
    });
); // Additional brace & semicolon that would cause a syntax error.

Answer 2

您當前的jQuery代碼：

 $(document).ready(
     function () {
          $('.h1').hide()
     });
 );

沒有使用正確的語法。 （您有一個額外的); 在末尾）。

嘗試這個：

 $(document).ready(function() {
     $('.h1').hide();
 });

Answer 3

去除 。 從h1 ...

$('h1').hide()

點是用於類的。 因此，如果您有這樣的事情：

<h1 class='myh1'>

您使用$（'。myh1'）進行訪問。 但是，如果您談論的是標簽，h1，h2，a，img，div，span，則不要使用點。

有趣的是，您甚至可以（但不應該）在大多數瀏覽器中這樣做：

<panda>hello</panda>

然后使用

$('panda')

因為那不是類，而是非標准標記。

Answer 4

我已經在本地對它進行了測試，即使對以下兩個問題，它也對我有用：

（1）您有語法錯誤。 刪除多余的); 從腳本末尾開始。

$(document).ready(
    function () {
        $('.h1').hide()
    });
);  // <--- This is not needed.

（2）您兩次包含jQuery：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
...
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

Answer 5

通常，我將避免創建與標簽名稱相同的類名稱。 我認為，如果其他編碼人員要查看javascript代碼而不要立即查看html，這會增加混亂。

Answer 6

我找到了解決方案，並且類名沒有問題。

使用它會起作用，因為您只忘記了分號（;）：

$(document).ready(function () {
    $('.h1').hide();
});