如何将 JQuery 导入另一个 html 文件答案

【问题标题】：how to import JQuery to another html file如何将 JQuery 导入另一个 html 文件
【发布时间】：2022-02-09 19:58:58
【问题描述】：

我有一个 html 文件，其中我有一些 html 和 jquery 我想将 jquery 导入另一个 html 文件这是我的 html 代码↓↓↓

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Register Form Test JQuery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var data = "";
        let arr = [];


        $(document).ready(function() {
            var skills = [];
            var subjects = [];

            $("button").click(function() {
                $.each($("input[name='subject']:checked"), function() {
                    subjects.push($(this).val());

                });


                $.each($("input[name='skill']:checked"), function() {
                    skills.push($(this).val());
                });


                var email = $("#email").val();
                var password = $("#password").val();
                var dob = $("#dob").val();
                var gender = $("#gender").val();
                var address = $("#address").val();
                var city = $("#city").val();
                var telephone = $("#telephone").val();
                var aadhaar = $("#aadhaar").val();
                var role = $("#role").val();


                data = "Email: " + email + ", " + "Password: " + password + ", " + "Date Of Birth: " + dob + ", " + "Gender: " + gender + ", " + "Address: " + address + ", " + "City: " + city + ", " + "Subjects: " + subjects.join(", ") + ", " + "Skills: " + skills.join(", ") + ", " + "Telephone Number: " + telephone + ", " + "Aadhaar Number: " + aadhaar + ", " + "Role: " + role;
                arr.push(data);
                console.log(data)
            });
        });
    </script>
</head>

<body>
    <form>
        <label>Email:</label><br>
        <input id="email" type="email" required><br>
        <label>Date Of Birth:</label><br>
        <input id="dob" type="date" required><br>
        <label>Role:</label><br>
        <select id="role" required>
    <option>Learner</option>
    <option>Educator</option>
    <option>Both</option>
    </select><br>
        <label>Gender:</label><br>
        <select id="gender" required>
      <option>Male</option>
      <option>Female</option>
      <option>other</option>
    </select><br>
        <label>Address:</label><br/>
        <input id="address" type="text" required><br/>
        <label>City:</label><br>
        <input id="city" type="text" required><br>
        <label>Subject/s</label><br>
        <label><input type="checkbox" value="Math" name="subject"> Math</label>
        <label><input type="checkbox" value="Science" name="subject"> Science</label>
        <label><input type="checkbox" value="SST" name="subject"> SST</label>
        <label><input type="checkbox" value="English" name="subject"> English</label>
        <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>
        <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
        <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
        <label>Skill/s</label>
        <BR>
        <label><input type="checkbox" value="Drawing/Doodling" name="skill"> Drawing/Doodling</label>
        <label><input type="checkbox" value="Instrument Playing" name="skill"> Instrument Playing</label>
        <label><input type="checkbox" value="Dance and/or Music" name="skill"> Dance and/or Music</label>
        <label><input type="checkbox" value="sports (any)" name="skill"> sports (any)</label><br>
        <label>Telephone Number:</label><br>
        <input type="tel" id="telephone" placeholder="1234-567890" pattern="[0-9]{4}-[0-9]{6}"><br>
        <label>Aadhaar Number (if available):</label><br>
        <input id="aadhaar" placeholder="1234-5678-9000" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"><br>
        <label>Password:</label><br>
        <input type="password" id="password" required><br><br>
        <button type="button" value="submit">Submit</button>
    </form>
</body>

</html>

如何将这个 html 文件中的 jquery 脚本导入另一个也包含 jquery 的 html 文件？我需要在我的其他文件中输入任何代码还是需要在这个 html 文件中链接它？

感谢您的帮助！

【问题讨论】：

标签： javascript html jquery import

【解决方案1】：

只需将代码复制到外部 js 文件中，并将其包含在每个 html 文件中即可。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="myJQueryScript.js"></script>

记得在 jquery 源文件之后包含这个

【讨论】：

谢谢，但在应用您所说的代码后，我无法访问脚本中的某个变量。
听起来你的变量不是全局的或者是在你的函数范围之外启动的。如果您无法更改变量的位置，您可以使用“window.yourVariable”开始您的变量。这不是最佳做法 - 但应该可以。

【解决方案2】：

我们可以做的是获取一个脚本文件并在该 JS 文件中添加 jQuery 链接。例如：MyJSFile.js

var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

    var data = "";
    let arr = [];

    $(document).ready(function() {
        var skills = [];
        var subjects = [];

        $("button").click(function() {
            $.each($("input[name='subject']:checked"), function() {
                subjects.push($(this).val());

            });

            $.each($("input[name='skill']:checked"), function() {
                skills.push($(this).val());
            });

            var email = $("#email").val();
            var password = $("#password").val();
            var dob = $("#dob").val();
            var gender = $("#gender").val();
            var address = $("#address").val();
            var city = $("#city").val();
            var telephone = $("#telephone").val();
            var aadhaar = $("#aadhaar").val();
            var role = $("#role").val();

            data = "Email: " + email + ", " + "Password: " + password + ", " + "Date Of Birth: " + dob + ", " + "Gender: " + gender + ", " + "Address: " + address + ", " + "City: " + city + ", " + "Subjects: " + subjects.join(", ") + ", " + "Skills: " + skills.join(", ") + ", " + "Telephone Number: " + telephone + ", " + "Aadhaar Number: " + aadhaar + ", " + "Role: " + role;
            arr.push(data);
            console.log(data)
        });
    });

现在您可以将 MyJSFile.js 文件导入尽可能多的 HTML 文件，如下所示。

<!DOCTYPE html>
<html>    
<head>
    <meta charset="utf-8">
    <title>Register Form Test JQuery</title>
    <script src="MyJSFile.js"></script>
</head>
   <body>
   </body>
</html>

【讨论】：

谢谢，但是当我将此代码应用到我的脚本时，它不允许我访问变量。

【解决方案3】：

只需将 CDN 脚本复制到您的正文底部或 HTML 标记的头部即可。你可以在这里找到链接： https://releases.jquery.com/

【讨论】：