javascript - My Jquery isn't working in my html file - Stack Overflow

admin管理员组

文章数量:1426207

Okay so, I'm not a plete noob but still a beginner at jQuery/javascript and I'm just not getting why this jqueryman.js isn't linking to my html. I am pretty sure i have got the folders tree right, i even placed my js file in the same folder as my html just to make sure it wasn't a mistake there.

head of the 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='.min.js'></script>
    <script src='.cycle2.js'></script>
    <script src='.10.2.min.js'></script>
<!-- script files -->
    <script src="jqueryman.js"></script>    <!-- (this is the trouble maker) -->

body of the 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='.jpg'>
    <img class='sliderimg' id="Tugboat" alt='Tugboat'   src='.jpg'>
    <img class='sliderimg' id="P0J0"    alt='P0J0'      src='.png'>
    <img class='sliderimg' id="Ffej"    alt='Ffej'      src='.png'>
</div>
<h1 id="name">Carl</h1>

jqueryman.js

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

Okay so, I'm not a plete noob but still a beginner at jQuery/javascript and I'm just not getting why this jqueryman.js isn't linking to my html. I am pretty sure i have got the folders tree right, i even placed my js file in the same folder as my html just to make sure it wasn't a mistake there.

head of the 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./ajax/libs/jquery/1/jquery.min.js'></script>
    <script src='http://malsup.github./jquery.cycle2.js'></script>
    <script src='http://code.jquery./jquery-1.10.2.min.js'></script>
<!-- script files -->
    <script src="jqueryman.js"></script>    <!-- (this is the trouble maker) -->

body of the 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./7kJOy7k.jpg'>
    <img class='sliderimg' id="Tugboat" alt='Tugboat'   src='http://i.imgur./mRGbOKv.jpg'>
    <img class='sliderimg' id="P0J0"    alt='P0J0'      src='http://i.imgur./UiAIWGf.png'>
    <img class='sliderimg' id="Ffej"    alt='Ffej'      src='http://i.imgur./isl6UhR.png'>
</div>
<h1 id="name">Carl</h1>

jqueryman.js

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

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 4, 2014 at 20:09 user2579865 asked Jan 4, 2014 at 20:04 Louie WoutersLouie Wouters 2511 silver badge66 bronze badges 10

• If you could post the error from your console that would be beneficial. also try added the code to jsfiddle and updating your answer with the link. – Ashley Medway Commented Jan 4, 2014 at 20:12
• You are trying to load 2 versions of jquery at the same time: the one from google and the one from jquery. Lose one of them. Just make sure the jquery plugin you're using is called after jquery. Also check jquery is loading properly by loading your page in firefox, > view source click the jquery link. If you see the code you've loaded it correctly. If not check the path. – dewd Commented Jan 4, 2014 at 20:14
• Also lose the last closing paren in your own code. – dewd Commented Jan 4, 2014 at 20:16
• jsfiddle/MG62E strangly enough this does work.. then I just linked it in a wrong way but it's in the same map.. – Louie Wouters Commented Jan 4, 2014 at 20:19
• Heres a working fiddle jsfiddle/xQ9yE – Ashley Medway Commented Jan 4, 2014 at 20:23

 |  Show 5 more ments

6 Answers 6

Sorted by: Reset to default 2

UPDATE: Heres is working example: JSFiddle
You need to remove the . from $('.h1').hide(); The . is referring to a class but you just want to hide the base h1 element.

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

Alternatively to hide just that one element you can do it by its ID.

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

Heres a link to jQuery Selectors tutorial.

Also as noted from ments you also have a syntax error in your 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.

Your current jQuery code:

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

is not using correct syntax. (You have an extra ); at the end).

Try this:

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

Remove the . from h1...

$('h1').hide()

Dots are for classes. So if you have a something like this:

<h1 class='myh1'>

you use $('.myh1') to access it. But if you are talking about a tag, h1, h2, a, img, div, span, you do not use dots.

Interestingly, you can (but shouldn't) even do this in most browsers:

<panda>hello</panda>

and then access it with

$('panda')

Because that isn't a class, but rather a non-standard tag.

I have tested this locally and it works for me -- even with the two issues mentioned below:

(1) You have a syntax error. Remove the extra ); from the end of the script.

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

(2) You are including jQuery twice:

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

As a rule I would avoid creating a class name the same as a tag name. I think this adds confusion if other coders were to look at the javascript code and not have the html immediately on hand to look at.

I found the solution and there is no problem with the class name.

use this it will work because you only forgot the semicolon(;) :

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

本文标签： javascriptMy Jquery isn39t working in my html fileStack Overflow