JSファイルに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>');

しかし、これは機能しないようです。

これを行う最良の方法は何ですか？

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

別の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ファイルにjQueryをロードできます。また、動作しているjQuery JSFiddleを追加し、それが自己呼び出し関数を使用しています。

// 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モジュールローダーであるRequire.JSを試すこともできます。

/* 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ファイルへの参照を追加する場合は、参照タグを使用して直接追加することもできます。VisualStudio IDEでは、これは外部ファイルをソリューションエクスプローラーから現在のファイルにドラッグアンドドロップすることで自動的に処理されます（これはマークアップファイル、.jsおよび.cssファイルでも機能します）

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

問題は</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>');

これが私が他のフォーラムでいくつかの提案されたソリューションの組み合わせとして採用したソリューションです。

この方法で、CSSファイルと他のjsファイルの両方を1つのjsファイルで参照できるため、次回は1つの場所でのみ変更を加えることができます。ご不明な点がありましたらお知らせください。

私は以下を行いました：

1. jQueryIncluder.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. 次のように、.Netプロジェクトの別のjsまたはxslファイルで上記のjQueryIncluder.jsファイルを参照しました。

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

私の努力が評価されることを願っています。

ありがとう

別のjsファイル内にjsファイルをインポートすることはできません

js内でjqueryを使用する方法は

jsを、htmlまたは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');
    });
});

これは間違いなくあなたのために働くでしょう

必要なファイルを他のjsファイルに含めることができるjqueryのプラグインがあります。ここにリンクがありますhttp://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-プラグイン/。

また、このdocument.write行は、jsファイルではなくhtmlにスクリプトタグを書き込みます。

だから私はこれがあなたの助けになることを願っています

jqueryファイルのリンクを新しいバージョンのファイルに頻繁に更新したい場合は、サイト全体の多くのページで一度に更新してください。

JavaScriptファイル（.js）を作成し、以下のコードを入力して、このJavaScriptファイルをすべてのページにマップします（jqueryファイルをページに直接マッピングするのではなく）。したがって、このJavaScriptファイルでjqueryファイルのリンクが更新されると、サイト全体に反映します。

以下のコードはテストされ、正常に動作します！

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ファイルを含めずにマスターページベースを作成できます。コンテンツプレースホルダーをヘッドセクションのマスターページベースに配置し、このマスターページベースから継承するネストされたマスターページを作成します。次に、ネストされたマスターページの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>

jQueryの動的な追加、jsファイルからのCSS。bodyに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>

document.write（ '<\ script ...'）が機能しない場合は、document.createElement（ 'script'）...を試してください。

それ以外は、作成しているWebサイトのタイプについて心配する必要があります。本当に.jsファイルから.jsファイルを含めるのは良い考えだと思いますか？

2つのファイルから一番上のファイルにコードをコピーするだけです。

または、このhttp://code.google.com/p/minify/のようなものを使用して、ファイルを動的に結合します。

ジョシュ

これを使用するのが最善の方法だと思います...

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

これは、Codecademyの「インタラクティブなWebサイトを作成する」プロジェクトからです。

多くの調査の後、スクリプトの読み込みイベントに関するofir_aghai回答のヒントを使用して、この問題を解決します。

基本的には$jQueryコードに使用する必要がありますが、jQueryがロードされるまで使用できません。以前document.createElement()はjQueryのスクリプトを追加していましたが、問題は、JavaScriptを使用$した次のステートメントが失敗するまでにロードに時間がかかることです。そこで、以下のソリューションを使用しました。

myscript.jsには、jQueryを使用するコードがあります 。main.jsを使用して、jquery.min.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.jsloadJQueryFile()からの使用は機能しませんでした。を使用する次のステートメントにすぐに移動します。$

私はあなたがしたいことはまだあなたがhtml domにこのjsファイルを含めることであると信じています、そうであればこのアプローチはうまくいきます。

1. HTML DOMと同じように、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>

JavaScriptタグを記述するために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>

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