如何將 jQuery 代碼添加到 HTML 頁面中
[英]How to add jQuery code into HTML Page
問題描述
$(".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找到的上傳功能。 試圖讓它進入我的網站
6 個解決方案
解決方案1
45 已采納 2015-04-22 11:40:24
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>
解決方案2
22 2015-04-22 11:34:10
在結束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>
解決方案3
14 2018-05-13 01:42:33
我建議像這樣調用腳本
...
<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上測試您的頁面時，您還可能會發現其他建議
解決方案4
5 2019-07-29 06:59:31
對於最新的 Jquery。 簡單地：
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
解決方案5
4 2015-04-22 12:04:24
- 為 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.最后，您應該確保有與代碼中的選擇器匹配的元素。
解決方案6
0 2020-04-21 08:06:47
通過將下面顯示的行添加到<head>塊中，確保將 jQuery 庫嵌入到頁面中：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
如何在iframe中添加包含jquery腳本的html頁面的結果
[英]How to add result of html page which contains jquery scripts in iframe
如何使用JavaScript或jQuery在html頁面中添加doctype
[英]How to add doctype in html page using JavaScript or jQuery
如何使用 Javascript 和 Ace.JS 將代碼單元添加到 HTML 頁面？
[英]How to add code cells to HTML page with Javascript and Ace.JS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.