Javascript 如何将 jQuery 代码添加到 HTML 页面中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29796169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add jQuery code into HTML Page
提问by justin_graham92
$(".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");
});Can anyone help? It's for an upload function I found at http://codepen.io/iremlopsum/pen/YPWPap. Trying to get it into my website
任何人都可以帮忙吗？这是我在http://codepen.io/iremlopsum/pen/YPWPap找到的上传功能。试图让它进入我的网站
采纳答案by nikssa23
1) Best practice is to make new javascript file like my.js. Make this file into your js folder in root directory -> js/my.js . 2) In my.js file add your code inside of $(document).ready(function(){}) scope.
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) add your new js file into your html
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>
回答by Aravind Bharathy
Before the closing bodytag add this (reference to jQuery library). Other hosted libraries can be found here
在结束body标记之前添加这个（参考 jQuery 库）。其他托管库可以在这里找到
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
And this
和这个
<script>
//paste your code here
</script>
It should look something like this
它应该看起来像这样
<body>
........
........
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script> Your code </script>
</body>
回答by Chetabahana
I would recommend to call the script like this
我建议像这样调用脚本
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</body>
The js and css files must be treat differently
js 和 css 文件必须区别对待
Put
jqueryas the first before otherJS scriptsat the bottom of<BODY>tag
放在标签底部
jquery的第一个之前JS scripts<BODY>
- The problem caused is that they block parallel downloads. The
HTTP/1.1 specificationsuggests that browsers download no more than two components in parallel per hostname. - So select 2 (two) most important scripts on your page like analytic and pixel script on the
<head>tags and let the rest including thejqueryto be called on the bottom<body>tag.
- 造成的问题是它们阻止了并行下载。这
HTTP/1.1 specification表明浏览器每个主机名并行下载的组件不超过两个。 - 因此，在您的页面上选择 2（两）个最重要的脚本，例如
<head>标签上的分析和像素脚本，然后让其余脚本（包括jquery在底部<body>标签上调用）。
Put
CSS styleon top of<HEAD>tag after the other more priority tags
放在其他更优先标签之后的标签
CSS style之上<HEAD>
- Moving style sheets to the document
HEADmakes pages appear to be loading faster. This is because putting style sheets in theHEADallows the page to render progressively. - So for
csssheets, it is better to put them all on the<head>tag but let the style that shall be immediately rendered to be put in<style>tags inside<HEAD>and the rest in<body>.
- 将样式表移动到文档
HEAD会使页面加载速度更快。这是因为将样式表放入HEAD允许页面逐步呈现。 - 所以对于
csssheet来说，最好把它们都放在<head>标签上，而让应该立即渲染的样式放在<style>标签里面<HEAD>，其余的放在<body>.
You may also find other suggestion when you test your page like on Google PageSpeed Insight
当您在Google PageSpeed Insight上测试您的页面时，您还可能会发现其他建议
回答by Rinus
- Create a file for the jquery eg uploadfuntion.js.
- Save that file in the same folder as website or in subfolder.
- In
headsection of your html page paste:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- 为 jquery 创建一个文件，例如 uploadfuntion.js。
- 将该文件保存在与网站相同的文件夹或子文件夹中。
- 在
head您的 html 页面粘贴部分：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
and then the reference to your script eg: <script src="uploadfuntion.js"> </script>
然后引用您的脚本，例如： <script src="uploadfuntion.js"> </script>
4.Lastly you should ensure there are elements that match the selectors in the code.
4.最后，您应该确保有与代码中的选择器匹配的元素。
回答by mpalencia
for latest Jquery. Simply:
对于最新的 Jquery。简单地：
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
回答by user13369396
You should make sure you add the Jquery library into your page by adding this line into your <head>block:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
您应该确保通过将此行添加到您的<head>块中来将 Jquery 库添加到您的页面中：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
