当前位置: 代码迷 >> JavaScript >> jQuery未与html文件一起运行
  详细解决方案

jQuery未与html文件一起运行

热度:57   发布时间:2023-06-12 14:21:52.0

我知道关于这个主题的问题越来越多,但是似乎没有一个问题可以解决我的问题。 我是jquery新手,正在为我的代码尝试它。 它似乎并没有启动并运行。 我尝试过更改脚本与其他脚本的顺序,已经检查了我的jquery文件所在的目录,尝试使用CDN版本和可下载版本。 似乎没有任何作用。

这是我的html文件的头

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

            <title>Draft1</title>


            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet">

        <link href="./css/style1.css" rel="stylesheet">

        <!-- Custom Fonts -->
            <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
                      <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
            <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
        <link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">


            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>



        <![endif]-->
     </head>

我已经将jQuery放在html正文的末尾

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="./js/jquery-1.11.3"></script>
        <script>
            $(document).ready((function) {

                $("div").css("border", "3px solid red");
            });
        </script>


            <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script> 

在此代码中,我将jquery代码与html代码本身放在一起。 我通过将代码放在单独的文件中并运行它来尝试另一种版本,该方法也不起作用。

任何帮助深表感谢

我认为您在其中添加jquery标签有一个错字。 文件名应该以扩展名.js结尾,所以可能是这样的:

<script src="./js/jquery-1.11.3.js"></script>

尝试

  1. <script src="./js/jquery-1.11.3"></script>更改为<script src="//code.jquery.com/jquery-1.11.3.js"></script>

  2. $(document).ready((function) {更改$(function(){$(document).ready(function(){

您的jquery脚本src缺少.js扩展名

尝试这个:

<script>
        $(document).ready(function($) {
            $("div").css("border", "3px solid red");
        });
</script>

将jQuery放在首位

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Draft1</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="./css/style1.css" rel="stylesheet">
    <!-- Custom Fonts -->
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
                  <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
        <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
    <link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="./js/jquery-1.11.3.js"></script>
    <script>
        $(document).ready((function) {

            $("div").css("border", "3px solid red");
        });
    </script>
    </head>
  相关解决方案