如何在 JS 文件中添加 jQuery

我有一些特定于排序表的代码。因为这些代码在大多数页面中都很常见,所以我想创建一个 JS 文件,它将包含这些代码,并且所有使用它的页面都可以从这里引用它。

问题是: 如何在.js 文件中添加 jQuery 和表排序插件?

我试过这样的方法:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></script>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></script>');

但这似乎不起作用。

最好的方法是什么?

599111 次浏览

为什么要使用 Javascript 来编写脚本标记?只需将 script 标记添加到 head 部分即可。所以你的文档应该是这样的:

<html>
<head>
<!-- Whatever you want here -->
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.tablesorter.js" type="text/javascript"></script>
</head>
<body>
The contents of the page.
</body>
</html>

如果 document.write (“ < script...”)无法工作,请尝试 document.createElement (“ script”) ..。

除此之外,你应该担心的类型的网站,你正在做-你真的认为这是一个好主意,包括。的 js 文件。JS 文件?

把这两个文件中的代码复制到顶部的文件中。

或者使用类似的 http://code.google.com/p/minify/来动态组合您的文件。

乔什

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
document.getElementsByTagName('head')[0].appendChild(script);

问题是您在脚本中使用的是 </script>,它结束了 script 标记:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></sc'+'ript>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></sc'+'ript>');

有一个用于 jquery 的插件,你可以把你需要的文件包含到其他的 js 文件中,下面是它的链接 http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/

同样,这一行将在 html 中而不是在 js 文件中写入 script 标记。

所以我希望这个能帮你解决你的问题

下面是我在其他论坛中结合一些提议的解决方案而采用的解决方案。

通过这种方式,您可以在一个 js 文件中引用 css 文件和其他 js 文件,因此下次只需在一个地方进行更改。如果你对此有任何疑问,请告诉我。

我做了以下几件事:

  1. 我已经创建了一个名为 jQueryPacker.js 的 js
  2. 在此文件中以下面的代码声明和执行

    function getVirtualDirectory() {
    var vDir = document.location.pathname.split('/');
    return '/' + vDir[1] + '/';
    }
    
    
    function include_jQueryFilesToPage() {
    var siteAddress = location.protocol + '//' + document.location.hostname + getVirtualDirectory();
    var jqCSSFilePath =  siteAddress + 'includes/jQueryCSS/ehrgreen-theme/jquery-ui-1.8.2.custom.css';
    var jqCoreFilePath = siteAddress + 'includes/jquery-1.4.1.min.js';
    var jqUIFilePath =   siteAddress + 'includes/jquery-ui-1.8.2.custom.min.js';
    var head  = document.getElementsByTagName('head')[0];
    
    
    // jQuery CSS jnclude
    var jqCSS = 'cssIDJQ';  // you could encode the css path itself to generate id.
    if (!document.getElementById(jqCSS)) {
    var link  = document.createElement('link');
    link.id  = jqCSS;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = jqCSSFilePath;
    link.media = 'all';
    head.appendChild(link);
    }
    
    
    // Core jQuery include
    var jqc = "coreFileRefIDJQ";
    if (!document.getElementById(jqc))
    document.write('<scr' + 'ipt type="text/javascript" id="' + jqc + '" src="' + jqCoreFilePath + '"></scr' + 'ipt>');
    
    
    // jQueryUI include
    var jqUI = "uiFileRefIDJQ";
    if (!document.getElementById(jqUI))
    document.write('<scr' + 'ipt type="text/javascript" id="' + jqUI + '" src="' + jqUIFilePath + '"></scr' + 'ipt>');
    }
    
    
    include_jQueryFilesToPage();
    
  3. I referenced the above jQueryIncluder.js file in another js or xsl file of my .Net project as following:

    <script type="text/javascript" src="~/includes/jQueryIncluder.js"></script>
    

I hope my effort is appreciated.

Thanks

如果您经常想要更新您的 jquery 文件链接到一个新的版本文件,在您的站点上的许多页面上,一次性。.

创建一个 javascript 文件(。然后将这个 javascript 文件映射到所有页面(而不是直接映射到页面上的 jquery 文件) ,这样当 jquery 文件链接在这个 javascript 文件上更新时,它就会在整个站点上反映出来。

下面的代码经过了测试,运行良好!

document.write('<');
document.write('script ');
document.write('src="');
//next line is the path to jquery file
document.write('/javascripts/jquery-1.4.1.js');
document.write('" type="text/javascript"></');
document.write('script');
document.write('>');

如果您希望从另一个 JS 文件中包含 jQuery 代码,这应该可以实现:

在我的 HTML 文件中有以下内容:

<script src="jquery-1.6.1.js"></script>
<script src="my_jquery.js"></script>

我用以下代码创建了一个单独的 my _ jquery. js 文件:

$(document).ready(function() {
$('a').click(function(event) {
event.preventDefault();
$(this).hide("slow");
});
});

如果你想要添加对任何 js 文件的引用,比如说,从你的项目中,你也可以直接使用 参考文献标签添加它,在 Visual Studio IDE 中,这是通过将外部文件从解决方案资源管理器拖放到当前文件来自动处理的(这适用于标记文件,。JS & .Css 档案)

/// <reference path="jquery-2.0.3.js" />

您可以在不包含 js 和 jquery 文件的情况下创建母版页基础。在标题部分的母版页基底中放置一个内容占位符,然后创建从该母版页基底继承的嵌套母版页。现在将您的包含内容放在嵌套母版页中的 asp: content 中,最后从该嵌套母版页创建一个内容页

例如:

//in master page base


<%@  master language="C#" autoeventwireup="true" inherits="MasterPage" codebehind="MasterPage.master.cs" %>
<html>
<head id="Head1" runat="server">
<asp:ContentPlaceHolder runat="server" ID="cphChildHead">
<!-- Nested Master Page include Codes will sit Here -->
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<!-- some code here -->
</body>
</html>


//in nested master page :
<%@  master language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true"
codebehind="MasterPageLib.master.cs" inherits="sampleNameSpace" %>
<asp:Content ID="headcontent" ContentPlaceHolderID="cphChildHead" runat="server">
<!-- includes will set here a nested master page -->
<link href="../CSS/pwt-datepicker.css" rel="stylesheet" type="text/css" />


<script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>


<!-- other includes ;) -->
</asp:Content>
<asp:Content ID="bodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ContentPlaceHolder ID="cphChildBody" runat="server" EnableViewState="true">
<!-- Content page code will sit Here -->
</asp:ContentPlaceHolder>
</asp:Content>

我发现最好的方法就是用这个..。

**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>**

这是来自 Codecademy 的“制作一个互动网站”项目。

不可能将 js 文件导入到另一个 js 文件中

在 js 中使用 jquery 的方法是

导入 html 中的 js 或者任何你要在其中包含 js 文件的视图页面

视图

 <script src="<%=request.getContextPath()%>/js/jquery-1.11.3.js"></script>
<script src="<%=request.getContextPath()%>/js/default.js"></script>

Default.js

$('document').ready(function() {
$('li#user').click(function() {
$(this).addClass('selectedEmp');
});
});

这绝对对你有用

/* Adding the script tag to the head as suggested before */


var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://code.jquery.com/jquery-2.2.1.min.js";


// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = handler;
script.onload = handler;


// Fire the loading
head.appendChild(script);


function handler(){
console.log('jquery added :)');
}

您可以使用下面的代码来实现在 JS 文件中加载 jQuery。我还添加了一个 jQueryJSFiddle,它正在工作,并且使用了一个自调用函数。

// Anonymous "self-invoking" function
(function() {
var startingTime = new Date().getTime();
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);


// Poll for jQuery to come into existance
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
}
else {
window.setTimeout(function() { checkReady(callback); }, 20);
}
};


// Start polling...
checkReady(function($) {
$(function() {
var endingTime = new Date().getTime();
var tookTime = endingTime - startingTime;
window.alert("jQuery is loaded, after " + tookTime + " milliseconds!");
});
});
})();

其他选项 :-您也可以尝试 必要条件,它是一个 JS 模块加载程序。

经过大量的研究,从 你好对脚本加载事件的回答中得到提示,解决了这个问题。

基本上我们需要对 jQuery 代码使用 $,但是在加载 jQuery 之前我们不能使用它。我使用 document.createElement()为 jQuery 添加了一个脚本,但问题是加载这个脚本需要时间,而使用 $的 JavaScript 中的下一条语句将失败。因此,我使用了下面的解决方案。

Js 拥有使用 jQuery 的代码 Js 用于加载 Jquery.min.jsMyscript.js文件,以确保加载了 jQuery。

Main.js 代码

window.load = loadJQueryFile();
var heads = document.getElementsByTagName('head');


function loadJQueryFile(){
var jqueryScript=document.createElement('script');
jqueryScript.setAttribute("type","text/javascript");
jqueryScript.setAttribute("src", "/js/jquery.min.js");


jqueryScript.onreadystatechange = handler;
jqueryScript.onload = handler;
heads[0].appendChild(jqueryScript);
}


function handler(){
var myScriptFile=document.createElement('script');
myScriptFile.setAttribute("type","text/javascript");
myScriptFile.setAttribute("src", "myscript.js");
heads[0].appendChild(myScriptFile);
}

使用 Myscript.js中的 loadJQueryFile()不起作用,它立即转到下一个使用 $的语句。

动态添加 jQuery,来自 js 文件的 CSS。 当我们将 onload 函数添加到 body 时,我们可以使用 jQuery 从 js 文件创建页面。

init();


function init()
{
addJQuery();
addBodyAndOnLoadScript();
addCSS();
}


function addJQuery()
{
var head = document.getElementsByTagName( 'head' )[0];
var scriptjQuery = document.createElement( 'script' );
scriptjQuery.type = 'text/javascript';
scriptjQuery.id = 'jQuery'
scriptjQuery.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
var script = document.getElementsByTagName( 'script' )[0];
head.insertBefore(scriptjQuery, script);
}


function addBodyAndOnLoadScript()
{
var body = document.createElement('body')
body.onload =
function()
{
onloadFunction();
};
}


function addCSS()
{
var head = document.getElementsByTagName( 'head' )[0];
var linkCss = document.createElement( 'link' );
linkCss.rel = 'stylesheet';
linkCss.href = 'E:/Temporary_files/temp_css.css';
head.appendChild( linkCss );
}


function onloadFunction()
{
var body = $( 'body' );
body.append('<strong>Hello world</strong>');
}
html
{
background-color: #f5f5dc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Temp Study HTML Page</title>
<script type="text/javascript" src="E:\Temporary_files\temp_script.js"></script>
</head>
<body></body>
</html>

我相信你想做的仍然是将这个 js 文件包含在你的 html 域中,如果是这样,那么这个方法将工作。

  1. 在 javascript 文件中编写 jquery 代码 会在你的超文本领域
  2. 在关闭 body 标记之前包含 jquery 框架
  3. 包含 jqyery 文件后包含 javascript 文件

例如: //js 文件

     $(document).ready(function(){
alert("jquery in js file");
});

//html dom

    <body>
<!--some divs content--->


<script src=/path/to/jquery.js ></script>
<script src=/path/to/js.js ></script>
</body>
var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);

下面的答案是由另一个用户先前发布的,但没有提供任何解释,所以我决定对正在发生的事情进行注释。

var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);

解释

通过在 JavaScript 中创建一个 script 元素,然后将 src属性设置为 jQuery 文件的路径,可以解决这个问题。

var jQueryScript = document.createElement('script');

上面我们创建了 script元素。

接下来,我们按照前面的解释将 src属性设置为路径。 可以设置为

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

或者

/your/path/to/jquery/file

使用中:

jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');

最后但并非最不重要的是,将新元素附加到文档 head:

document.head.appendChild(jQueryScript);

body:

document.body.appendChild(jQueryScript);

使用中

var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);


setTimeout(function() {
// Add the rest of your code here, as we have to wait a moment before the document has jQuery as a part of it.
$("body").html("<h1>It Works!</h1>");
}, 1000);

最新的答案已经过时了,试试这个:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script);