วิธีเพิ่ม jQuery ในไฟล์ JS

ฉันมีรหัสเฉพาะสำหรับการจัดเรียงตาราง เนื่องจากโค้ดเป็นเรื่องธรรมดาในเพจส่วนใหญ่ฉันจึงต้องการสร้างไฟล์ 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);

หากคุณต้องการรวมโค้ด jQuery จากไฟล์ JS อื่นสิ่งนี้ควรทำตามเคล็ดลับ:

ฉันมีสิ่งต่อไปนี้ในไฟล์ 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");
  });
});

คุณสามารถใช้โค้ดด้านล่างเพื่อโหลด jQuery ในไฟล์ JS ของคุณได้ ฉันได้เพิ่ม 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!");
        });
    });
})();

ตัวเลือกอื่น ๆ : - คุณยังสามารถลอง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 จะจัดการโดยอัตโนมัติโดยการลากและวางไฟล์ภายนอกจากโซลูชัน explorer ไปยังไฟล์ปัจจุบัน ( ใช้ได้กับไฟล์มาร์กอัปไฟล์. 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 อื่น ๆ ในไฟล์ js ไฟล์เดียวดังนั้นจึงทำการเปลี่ยนแปลงในครั้งต่อไปในที่เดียวเท่านั้น โปรดแจ้งให้เราทราบหากคุณมีข้อกังวลใด ๆ

ฉันได้ดำเนินการดังต่อไปนี้:

1. ฉันได้สร้าง js ที่มีชื่อ jQueryIncluder.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. ฉันอ้างถึงไฟล์ jQueryIncluder.js ด้านบนในไฟล์ js หรือ xsl อื่นของโปรเจ็กต์. Net ของฉันดังต่อไปนี้:

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

ฉันหวังว่าความพยายามของฉันจะได้รับการชื่นชม

ขอบคุณ

ไม่สามารถนำเข้าไฟล์ js ภายในไฟล์ js อื่นได้

วิธีใช้ jquery ภายใน js คือ

นำเข้า 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');
    });
});

สิ่งนี้จะได้ผลสำหรับคุณอย่างแน่นอน

มีปลั๊กอินสำหรับ jquery ที่คุณสามารถรวมไฟล์ที่คุณต้องการลงในไฟล์ js อื่น ๆ นี่คือลิงค์สำหรับมันhttp://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- เสียบเข้าไป/ .

นอกจากนี้บรรทัด document.write นี้จะเขียนแท็กสคริปต์ใน html ที่ไม่อยู่ในไฟล์ js ของคุณ

ดังนั้นฉันหวังว่านี่จะช่วยคุณได้เล็กน้อยสำหรับปัญหาของคุณ

หากคุณต้องการอัปเดตลิงก์ไฟล์ 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('>');

คุณสามารถสร้างฐานเพจต้นแบบโดยไม่รวมไฟล์ js และ jquery วางที่ยึดเนื้อหาในฐานหน้าต้นแบบในส่วนหัวจากนั้นสร้างเพจต้นแบบที่ซ้อนกันซึ่งสืบทอดมาจากฐานหน้าต้นแบบนี้ ตอนนี้ใส่การรวมของคุณในเนื้อหา asp: ในหน้าต้นแบบที่ซ้อนกันสุดท้ายสร้างหน้าเนื้อหาจากหน้าต้นแบบที่ซ้อนกันนี้

ตัวอย่าง:

//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, CSS จากไฟล์ js เมื่อเราเพิ่มฟังก์ชั่น 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 dom ถ้าเป็นเช่นนั้น apporach นี้จะใช้งานได้

1. เขียนโค้ด jquery ของคุณในไฟล์ javascript เหมือนที่คุณทำใน html dom
2. รวม jquery framework ก่อนปิด body tag
3. รวมไฟล์ javascript หลังรวมไฟล์ jqyery

ตัวอย่าง: // ไฟล์ 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>

หาก document.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>**

มาจากโครงการ 'Make an Interactive Website' ของ Codecademy

หลังจากค้นคว้ามากมายฉันก็แก้ปัญหานี้ด้วยคำใบ้จาก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);
 }

วิธีนี้ได้ผล ใช้loadJQueryFile()จากmyscript.jsไม่ได้ผล $ทันทีที่ไปถึงคำสั่งต่อไปซึ่งการใช้งาน

เหตุใดคุณจึงใช้ 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);