Working with jQuery when there is no Internet conn

2020-02-09 08:10发布

I am completely new to jQuery. When working with jQuery, I disconnected the Internet to check if my webpage works fine without an Internet connection. It displayed some thing which is not required. When I saw the source code, it displayed:

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

So I downloaded the code and kept it in my root folder. Still it's not working well. I wanted to know whether we can work with jQuery whilst offline?

Here is my code:

<!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>

When I remove this line:

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

It creates a problem.

I have downloaded jQuery and kept on the desktop. The HTML file is also on the desktop. Please tell me why it's not working.

6条回答
太酷不给撩
2楼-- · 2020-02-09 08:53

To work offline with jquery just copy the jquery.js file and place it in your local directory and in the script tag change the src

<script src="/path/jquery.min.js"></script>
查看更多
时光不老,我们不散
3楼-- · 2020-02-09 09:01

The most solution will be to serve the files via localhost. This post explains this in detail.

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

查看更多
在下西门庆
4楼-- · 2020-02-09 09:04

Yes, it's possible. You've mentioned that you downloaded the file - that's a good first step, but you also have to change all the href and src references.

For example,

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

should become

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

Also remember to get the offline version of the jQuery JS library, too:
Download jquery.js, put it in your root folder & reference it:

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

And if you want it in a subdirectory:

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

Remember that both files need to be offline and in your working local directory. This means that you cannot remove the stylesheet nor the jQuery JS library. Keep both of them, in the local formats I've mentioned above.

Also, putting the <script> tag in the <head> is bad practice; move it just before the </body> tag instead.


Your code should now look (in short, note that I haven't put much) like:

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

Again, make sure that base.css and jquery.min.js are the exact file names and are in the same folder as this .html file

查看更多
走好不送
5楼-- · 2020-02-09 09:04

Download jquery and link to it like so

<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.css">
查看更多
仙女界的扛把子
6楼-- · 2020-02-09 09:06

Try this source: http://www.initializr.com/

It's an HTML5 templates generator to help you getting started with a new project. There is a script which loads the web jquery file if there is internet connection. If there is no Internet Connection it takes the local one.

Cheers.

查看更多
够拽才男人
7楼-- · 2020-02-09 09:07

It will not work if you don't have internet connection. To work locally you should copy jquery.js to your local directory and give relative path.

<script src="/jquery/1.5/jquery.min.js"></script>
查看更多
登录 后发表回答