JS 파일에서 jQuery를 추가하는 방법

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.6.3.min.js'; // Check https://jquery.com/ for the current version
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 JSFidle을 추가했고 그것은 자동 호출 기능을 사용하고 있습니다.

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

기타 옵션 : - Require도 사용할 수 있습니다.JS 모듈 로더인 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 파일에 참조를 추가하려는 경우, 예를 들어 참조 태그를 사용하여 직접 추가할 수도 있습니다. Visual Studio IDE에서는 외부 파일을 솔루션 탐색기에서 현재 파일로 드래그 앤 드롭하면 자동으로 처리됩니다(이것은 마크업 파일, .js & .css 파일에도 작동합니다).

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

다음은 제가 다른 포럼에서 제안한 솔루션의 조합으로 채택한 솔루션입니다.

이렇게 하면 하나의 js 파일에서 css 파일과 다른 js 파일을 모두 참조할 수 있으므로 다음 번에는 한 곳에서만 변경할 수 있습니다.당신이 그것에 대해 고민이 있다면 저에게 알려주시기 바랍니다.

다음을 수행했습니다.

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. 저는 의 다른 js 또는 xsl 파일에서 위의 jQueryIncluder.js 파일을 참조했습니다.넷 프로젝트는 다음과 같습니다.

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

저의 노력이 감사하기를 바랍니다.

감사해요.

다른 js 파일 내에서 js 파일을 가져올 수 없습니다.

js 내부에서 jquery를 사용하는 방법은

js 파일을 포함할 html 또는 내부에서 사용 중인 보기 페이지에서 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');
    });
});

이것은 분명히 당신에게 효과가 있을 것입니다.

다음 답변은 이전에 다른 사용자가 게시한 것이지만 설명을 제공하지 않아 주석을 달기로 했습니다.

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를 됩니다.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);

필요한 파일을 다른 js 파일에 포함할 수 있는 jquery용 플러그인이 있습니다. 여기 http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/ 링크가 있습니다.

또한 이 문서.write line은 당신의 js 파일이 아닌 html에 스크립트 태그를 쓸 것입니다.

그래서 저는 이것이 당신의 문제에 조금이나마 도움이 되기를 바랍니다.

문제는 당신이 사용하고 있다는 것입니다.</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>');

당신이 원하는 것은 여전히 이 js 파일을 당신의 html dom에 포함시키는 것이라고 믿습니다. 만약 그렇다면 이 접근법은 작동할 것입니다.

1. html dom에서와 같이 jquery 코드를 javascript 파일에 작성합니다.
2. 본문 태그를 닫기 전에 jquery 프레임워크 포함
3. jquery 파일을 포함한 후 javascript 파일 포함

예: //js 파일

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

//복수

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

   <script src=/path/to/jquery.js ></script>
   <script src=/path/to/js.js ></script>
   </body>

당신이 자주 당신의 jquery 파일 링크를 당신의 사이트에 있는 많은 페이지에 있는 새로운 버전 파일로 업데이트하고 싶다면, 한 번에.

javascript 파일(.js)을 만들고 아래 코드를 넣고 jquery 파일을 페이지에 직접 매핑하는 대신 이 javascript 파일을 모든 페이지에 매핑하면 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 파일을 포함하지 않고 마스터 페이지 베이스를 작성할 수 있습니다.헤드 섹션의 마스터 페이지 베이스에 내용 자리 표시자를 넣은 후 이 마스터 페이지 베이스에서 상속되는 중첩된 마스터 페이지를 작성합니다.이제 중첩된 마스터 페이지의 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>

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>

문서화된 경우.write('<\script...')가 작동하지 않습니다. document.createElement('script')...

그 외에, 여러분은 여러분이 만들고 있는 웹사이트의 유형에 대해 걱정해야 합니다. 여러분은 정말로 .js 파일의 .js 파일을 포함하는 것이 좋은 생각이라고 생각하나요?

두 파일의 코드를 맨 위에 있는 당신의 파일에 복사하기만 하면 됩니다.

또는 http://code.google.com/p/minify/ 과 같은 것을 사용하여 파일을 동적으로 결합할 수 있습니다.

조쉬

가장 좋은 방법은 이것을 사용하는 것이라고 생각합니다.

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

이것은 코덱 아카데미의 '대화형 웹사이트 만들기' 프로젝트에서 나온 것입니다.

많은 연구 끝에 스크립트 로드 이벤트에 대한 ir_aghai 답변에서 힌트를 얻어 이 문제를 해결합니다.

기본적으로 우리는 사용해야 합니다.$jQuery 코드의 경우 jQuery가 로드될 때까지 사용할 수 없습니다.사용한document.createElement()jQuery용 스크립트를 추가하지만 문제는 다음 문장을 자바스크립트에서 로드하는 데 시간이 걸린다는 것입니다.$실패합니다. 그래서 아래 솔루션을 사용했습니다.

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

이런 식으로 작동했습니다.사용.loadJQueryFile()내 스크립트에서 JS는 작동하지 않았습니다.이 명령어는 즉시 다음 명령문은 다음 문장을 사용합니다.$.

최신 답변이 오래되었습니다. 다음을 시도해 보십시오.

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

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

왜 자바스크립트를 사용하여 스크립트 태그를 작성합니까?헤드 섹션에 스크립트 태그를 추가하기만 하면 됩니다.따라서 문서는 다음과 같이 표시됩니다.

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

언급URL : https://stackoverflow.com/questions/1140402/how-to-add-jquery-in-js-file