如何在JS文件中添加jQuery

时间：2009-07-16 21:25:31

标签： javascript jquery

我有一些特定于排序表的代码。由于代码在大多数页面中很常见，我想制作一个JS文件，其中包含代码，所有使用它的页面都可以从那里引用它。

问题是：如何将jQuery和表格排序器插件添加到该.js文件中？

我试过这样的事情：

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

但这似乎行不通。

这样做的最佳方式是什么？

19 个答案:

答案 0 :(得分：151)

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

答案 1 :(得分：79)

如果你想包含来自另一个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");
  });
});

答案 2 :(得分：13)

您可以使用以下代码在JS文件中加载jQuery。我还添加了一个正在运行的jQuery JSFiddle，并且它使用了一个自调用函数。

＆＃13;
＆＃13; 
// 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!");
        });
    });
})();
＆＃13;
＆＃13;
＆＃13;

其他选项： - 您也可以尝试Require.JS这是一个JS模块加载器。

答案 3 :(得分：6)

如果你想从你的项目添加对任何js文件的引用，你也可以使用reference标签直接添加它，在Visual Studio IDE中，这是通过拖放外部文件自动处理的从解决方案资源管理器到当前文件（这适用于标记文件，.js和.css文件）

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

答案 4 :(得分：6)

/* 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 :)');
    }

答案 5 :(得分：5)

问题是你在脚本中使用</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>');

答案 6 :(得分：5)

以下是我在其他论坛中采用的一些解决方案的解决方案。

这样你就可以在一个js文件中引用css文件和其他js文件，从而下次只在一个地方进行更改。如果您有任何疑问，请与我们联系。

我做了以下事情：

  1. 我创建了一个名为jQueryIncluder.js
    2. 的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. 我在我的.Net项目的另一个js或xsl文件中引用了上面的jQueryIncluder.js文件，如下所示：

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

    4. 我希望我的努力得到赞赏。

    由于

答案 7 :(得分：5)

无法在另一个js文件中导入js文件

在js中使用jquery的方法是

导入html或您正在使用的任何视图页面中的js，您将在其中包含js文件

<强> view.html 

 <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');
    });
});

这肯定会对你有用

答案 8 :(得分：4)

Theres是一个jquery插件，你可以在其中包含你需要的文件到其他js文件中，这里是它的链接http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/。

此document.write行也将在html中编写脚本标签，而不是在js文件中。

所以我希望这可以帮助你解决一些问题

答案 9 :(得分：2)

我相信您仍然想在html dom中包含此js文件，如果是这样，则此方法将起作用。

  1. 在您将jQuery代码写入javascript文件时 将在您的html dom中
  2. 在关闭body标签之前包括jquery框架
  3. 包含jqyery文件之后包含javascript文件

示例： // js文件

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time
driver=webdriver.Chrome(executable_path="C:/for_ilden/chromedriver.exe")
driver.get("https://10.63.10.4/")
print (driver.title)
print (driver.current_url)
driver.find_element_by_xpath("//*[@id='details-button']").click()
print (driver.title)
driver.find_element_by_xpath("//*[@id='proceed-link']").click()
time.sleep(3)
print (driver.title)
#user_name=driver.find_element_by_xpath("//*[@id='usernameInput']")
#driver.find_element_by_id("usernameInput").click()
driver.set_window_size(1280, 680)
driver.switch_to.frame(0)
user_name=driver.find_element_by_id('usernameInput')
#pass_name=driver.find_element_by_xpath("//*[@id='passwordInput']")
pass_name=driver.find_element_by_id('passwordInput')
user_name.send_keys("Admin")
pass_name.send_keys("shrogjd")
driver.find_element_by_id("ID_LOGON").click()
print (driver.title)
time.sleep(3)
driver.find_element_by_xpath('/html/body/div/div[2]/ul/li[1]/ul/li[2]/a').click()
print (driver.title)
time.sleep(5)
driver.quit()

// html dom 

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

答案 10 :(得分：1)

如果您经常想要将您的jquery文件链接更新到新版本文件，请在多个页面上的网站上一次性更新..

创建一个javascript文件（.js）并输入以下代码，并将此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('>');

答案 11 :(得分：1)

您可以创建不包含js和jquery文件的母版页库。将内容占位符放在head部分的master页面中，然后创建一个从该master页面继承的嵌套母版页。现在将您的包含在嵌套母版页的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>

答案 12 :(得分：0)

如果document.write（'＆lt; \ script ...'）无效，请尝试使用document.createElement（'script'）...

除此之外，你应该担心你正在制作的网站类型 - 你真的认为从.js文件中包含.js文件是个好主意吗？

答案 13 :(得分：0)

从js文件动态添加jQuery，CSS。 当我们在主体上添加onload函数时，我们可以使用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>

答案 14 :(得分：0)

经过大量研究，我通过ofir_aghai答案中有关脚本加载事件的提示解决了这个问题。

基本上，我们需要将$用于JQuery代码，但是直到加载JQuery才能使用它。我使用document.createElement为JQuery添加脚本，但问题是加载时花费时间，而使用$的javascript中的下一条语句失败。所以我用下面的解决方案。

myscript.js 具有使用JQuery的代码 main.js 用于同时加载jquery js文件和myscript.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（）无效。立即转到使用$的下一条语句。

答案 15 :(得分：0)

我发现最好的方法就是使用它...... 

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

这是来自Codecademy＆＃39;制作互动网站＆＃39;项目

答案 16 :(得分：0)

只需将两个文件中的代码复制到顶部的文件中即可。

或使用此类http://code.google.com/p/minify/之类的内容动态组合您的文件。

约什

答案 17 :(得分：-2)

为什么使用Javascript编写脚本标记？只需将脚本标记添加到您的头部。所以你的文档看起来像这样：

<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>

答案 18 :(得分：-2)

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);
相关问题
最新问题