为什么Jquery / javascript不能在我的网站上运行?

时间:2015-05-08 18:01:15

标签: javascript jquery html css

我正在创建一个网站,我需要在其上使用javascript / jquery。我试图在滚动到顶部按钮上使用它,它将无法正常工作。那么我在一个简单的警报(“...”)上尝试了它;它仍然行不通。所以我想知道jquery或某些东西是否没有正确加载。我试过也尝试了警报(“......”);在我的html文件中,发现它在那里工作,但我需要它在我的.js文件中工作。这也许会有所帮助,但在我的.js文件中,我的所有$都用红色加下划线,并且说“找不到名字'$'any”。请嘿嘿! :)

这是主要的html,它没有太多内容,因为它将出现在其他html文件中以创建不同的页面。对不起,如果代码布局不太好,这是我第一次使用堆栈溢出aha。 (我也在Mac上使用Visual Studio Code,如果这与事情有关)

我的HTML:          

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Web Tutorials</title>
    <link rel="stylesheet" type="text/css" href="TutorialSiteCSSv1.css" />
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="siteJScript.min.js" type="text/javascript"></script>
</head>

<body>

<div id="banner">
<h1>Website Design and Construction Basic Tutorials</h1>
</div>

<div id="menunav">
<ul >
<li><a href="TutorialSitev1.html">Home</a></li>
<li><a href="StructuringPage.html">Structuring</a>
    <ul>
        <li><a href="StructuringPage.html#divs">Divs</a></li>
        <li><a href="StructuringPage.html#paragraphs">Paragraphs</a></li>
    </ul>
</li>
<li><a href="#html5">HTML5</a>
    <ul>
        <li><a href="#whatsHTML5">What's HTML5?</a></li>
    </ul>
</li>
<li><a href="#css">CSS</a>
<ul>
<li><a href="#whatsCSS">What's CSS?</a></li>
<li><a href="#cssText">CSS Text</a></li>
<li><a href="#cssMedia">CSS Media</a></li>
<li><a href="#cssPositioning">CSS Positioning</a></li>
</ul>
</li>
</ul>
</div>

<div id="webIntro">
<h2>Home</h2>

<p> content.....
</p> 

<p> 
content....
</p>

</div>

<a href="#" class="scrollToTop"></a>

</body>

</html>

MY JS文件

$(document).ready(function(){
$(document).ready(function(){
alert("jQuery is working!");
});
});    

我也有一个css文件,但不认为这与该问题有关。我本以为会显示警报,但事实并非如此。我真的需要一些帮助,所以如果你可以,我会非常感激,因为我有一个截止日期,谢谢你:)

这是我的新JS:

$(document).ready(function() {

//if window is not at the top then display the button
$(window).scroll(function() {
    if($(this).scrollTop()>100) {
        $('.scrollToTop').fadeIn();
    }
    else{
        $('.scollToTop').fadeOut();
    }
});

//scrolls to top when clicked
    $('.scrollToTop').click(function() {
        $('html, body').animate({ scrollTop:0}, 800);
        return false;
    });
}); 

2 个答案:

答案 0 :(得分:0)

我认为您的代码没有任何明显的问题。我试图在http服务器上本地运行您的代码并获得警报。所以我会查看javascript文件路径,并确保在html文件中正确添加了该文件路径。

你可以做的另一件事就是调试问题是打开chrome中的html页面(如果你愿意,可以打开firefox),并试着通过打开开发人员工具来查看控制台是否出现任何错误。

如果脚本有任何问题,可以在控制台上报告。

提示:您可以按F12或(Ctrl + Shift + I)打开控制台。

你确实有两个$ .ready函数互相嵌套但不应该运行你的javascript。

答案 1 :(得分:0)

从我可以看到你的代码看起来是正确的。尝试打开W​​eb调试器工具(chrome中的f12)并查看是否有任何错误。此外,如果您查看网络选项卡并刷新页面以查看所有请求,它将告诉您页面是否已加载。这会告诉您jquery链接是否正常工作或者您的JavaScript路径是否错误。我猜这是其中一个问题,因为这会导致$ jquery库中找不到$(即一个或两个或者你的jquery文件不被包含在内)希望这会有所帮助。