如何将 jQuery 代码添加到 HTML 页面中

Question

 $(".icon-bg").click(function () { $(".btn").toggleClass("active"); $(".icon-bg").toggleClass("active"); $(".container").toggleClass("active"); $(".box-upload").toggleClass("active"); $(".box-caption").toggleClass("active"); $(".box-tags").toggleClass("active"); $(".private").toggleClass("active"); $(".set-time-limit").toggleClass("active"); $(".button").toggleClass("active"); }); $(".button").click(function () { $(".button-overlay").toggleClass("active"); }); $(".iconmelon").click(function () { $(".box-upload-ing").toggleClass("active"); $(".iconmelon-loaded").toggleClass("active"); }); $(".private").click(function () { $(".private-overlay").addClass("active"); $(".private-overlay-wave").addClass("active"); });

任何人都可以帮忙吗？ 这是我在http://codepen.io/iremlopsum/pen/YPWPap找到的上传功能。 试图让它进入我的网站

Answer 1

1) 最佳实践是制作像 my.js 这样的新 javascript 文件。 将此文件放入根目录中的 js 文件夹 -> js/my.js 。 2) 在 my.js 文件中，在 $(document).ready(function(){}) 范围内添加您的代码。

$(document).ready(function(){
    $(".icon-bg").click(function () {
        $(".btn").toggleClass("active");
        $(".icon-bg").toggleClass("active");
        $(".container").toggleClass("active");
        $(".box-upload").toggleClass("active");
        $(".box-caption").toggleClass("active");
        $(".box-tags").toggleClass("active");
        $(".private").toggleClass("active");
        $(".set-time-limit").toggleClass("active");
        $(".button").toggleClass("active");
    });

    $(".button").click(function () {
        $(".button-overlay").toggleClass("active");
    });

    $(".iconmelon").click(function () {
        $(".box-upload-ing").toggleClass("active");
        $(".iconmelon-loaded").toggleClass("active");
    });

    $(".private").click(function () {
        $(".private-overlay").addClass("active");
        $(".private-overlay-wave").addClass("active");
    });
});

3) 将新的 js 文件添加到 html 中

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</head>

Answer 2

在结束body标记之前添加这个（参考 jQuery 库）。 其他托管库可以在这里找到

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

和这个

<script>
  //paste your code here
</script>

它应该看起来像这样

<body>
 ........
 ........
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script> Your code </script>
</body>

Answer 3

我建议像这样调用脚本

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</body>

js 和 css 文件必须区别对待

将jquery作为<BODY>标签底部的其他JS scripts之前的第一个

造成的问题是它们阻止了并行下载。 HTTP/1.1 specification建议浏览器每个主机名并行下载的组件不超过两个。
因此，在您的页面上选择 2（两）个最重要的脚本，例如<head>标记上的分析和像素脚本，然后让其余脚本（包括要在底部<body>标记上调用的jquery 。

将CSS style放在<HEAD>标签之上，放在其他更优先的标签之后

将样式表移动到文档HEAD会使页面加载速度更快。 这是因为将样式表放在HEAD可以让页面逐步呈现。
所以对于css表，最好把它们都放在<head>标签上，但让应该立即呈现的<style>放在<HEAD>中的<style>标签中，其余的放在<body> 。

当您在Google PageSpeed Insight上测试您的页面时，您还可能会发现其他建议

Answer 4

对于最新的 Jquery。 简单地：

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Answer 5

为 jquery 创建一个文件，例如 uploadfuntion.js。
将该文件保存在与网站相同的文件夹或子文件夹中。
在 html 页面的head粘贴： <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

然后引用您的脚本，例如： <script src="uploadfuntion.js"> </script>

4.最后，您应该确保有与代码中的选择器匹配的元素。

Answer 6

通过将下面显示的行添加到<head>块中，确保将 jQuery 库嵌入到页面中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

如何将 jQuery 代码添加到 HTML 页面中

问题描述

6 个解决方案

解决方案1
45 已采纳 2015-04-22 11:40:24

解决方案2
22 2015-04-22 11:34:10

解决方案3
14 2018-05-13 01:42:33

解决方案4
5 2019-07-29 06:59:31

解决方案5
4 2015-04-22 12:04:24

解决方案6
0 2020-04-21 08:06:47

如何将 jQuery 代码添加到 HTML 页面中

问题描述

6 个解决方案

解决方案1 45 已采纳 2015-04-22 11:40:24

解决方案2 22 2015-04-22 11:34:10

解决方案3 14 2018-05-13 01:42:33

解决方案4 5 2019-07-29 06:59:31

解决方案5 4 2015-04-22 12:04:24

解决方案6 0 2020-04-21 08:06:47

解决方案1
45 已采纳 2015-04-22 11:40:24

解决方案2
22 2015-04-22 11:34:10

解决方案3
14 2018-05-13 01:42:33

解决方案4
5 2019-07-29 06:59:31

解决方案5
4 2015-04-22 12:04:24

解决方案6
0 2020-04-21 08:06:47