没有Internet连接时使用jQuery

时间:2013-04-08 06:12:58

标签: javascript jquery css

我是jQuery的新手。使用jQuery时,我断开了Internet连接以检查我的网页是否在没有Internet连接的情况下正常工作。它显示了一些不需要的东西。当我看到源代码时,它显示:

<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">

所以我下载了代码并将其保存在我的根文件夹中。它仍然运作不佳。我想知道我们是否可以在离线时使用jQuery?

这是我的代码:

<!doctype html>
<!--[if IE 7 ]>      <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]>      <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]>      <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title> Home</title>
    <meta name="author" content="jQuery Foundation - jquery.org">
    <meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
    <script src="jquery.min.js"></script>
    <!--[if lt IE 7]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->
    <script>try{Typekit.load();}catch(e){}</script>
    <meta name="generator" content="WordPress 3.5.1" />

</head>
<body >

<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. 
<a href="http://browsehappy.com/">Upgrade your browser today</a> 
or <a href="http://www.google.com/chromeframe/?redirect=true">install 
Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->

<header>
    <section id="global-nav">
        <nav>
            <div class="constrain">
                <ul class="links">
                    <li><a href="home.jsp">Home</a></li>
                    <li class="dropdown"><a href="CreatPatient.jsp">Patient</a>
                        <ul>
                            <li><a href="CreatePatient.jsp">Create Patient</a></li>
                            <li><a href="Edit Patient">Edit Patient</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="Appointments.jsp">Appointments</a>
                        <ul>
                            <li><a href="CreateAppointments.jsp">Create Appointments</a></li>
                            <li><a href="EditAppointments.jsp/">Edit Appointments</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Reports</a>
                        <ul>
                            <li><a href="PreOperative.jsp">Pre Operative</a></li>
                            <li><a href="IntraOperative.jsp">Intra Operative</a></li>
                            <li><a href="PostOperative.jsp">PostOperative</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
</header>
</body>
</html>

当我删除此行时:

<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">

它会产生问题。

我已下载jQuery并保留在桌面上。 HTML文件也在桌面上。请告诉我为什么它不起作用。

6 个答案:

答案 0 :(得分:17)

是的,这是可能的。您已经提到您下载了文件 - 这是一个很好的第一步,但您还必须更改所有hrefsrc引用。

例如,

<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">

应该成为

<link rel="stylesheet" href="base.css">

另外请记住获取jQuery JS库的离线版本:
下载jquery.js,将其放入根文件夹&amp;参考它:

<script src="jquery-1.9.1.min.js"></script>

如果你想要它在一个子目录中:

<script src="[subdirectory-name]/jquery-1.9.1.min.js"></script>

请记住,两个文件需要脱机并位于您正在工作的本地目录中。这意味着您无法删除样式表 jQuery JS库。以我上面提到的本地格式保留它们。

另外,将<script>标记放在<head>中是不好的做法;请改为在</body>标记之前移动它。


您的代码现在应该看起来(简而言之,请注意我没有放多少),如:

...
<html class="no-js" lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="base.css">
    ...
</head>
<body>
    ...
    <script src="jquery.min.js"></script>
</body>
</html>

再次确保base.cssjquery.min.js确切文件名,并且与此.html文件位于同一文件夹中

答案 1 :(得分:2)

下载jquery并链接到它

<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.css">

答案 2 :(得分:2)

如果您没有互联网连接,它将无效。要在本地工作,您应该将jquery.js复制到本地目录并提供相对路径。

<script src="/jquery/1.5/jquery.min.js"></script>

答案 3 :(得分:2)

要使用jquery离线工作,只需复制jquery.js文件并将其放在本地目录中,然后在脚本标记中更改src

<script src="/path/jquery.min.js"></script>

答案 4 :(得分:0)

最大的解决方案是通过localhost提供文件。这篇文章详细解释了这一点。

http://www.wingoku.com/2016/02/accessing-javascriptjquery-script-files.html

答案 5 :(得分:-2)

试试此来源:http://www.initializr.com/

这是一个HTML5模板生成器,可帮助您开始使用新项目。如果有互联网连接,有一个加载web jquery文件的脚本。如果没有Internet连接,则需要本地连接。

干杯。