Bagaimana cara menambahkan jQuery dalam file JS

Saya punya beberapa kode khusus untuk menyortir tabel. Karena kode ini umum di sebagian besar halaman saya ingin membuat file JS yang akan memiliki kode dan semua halaman yang menggunakannya dapat merujuknya dari sana.

Masalahnya adalah: Bagaimana cara menambahkan jQuery, dan plugin penyortir tabel ke dalam file .js?

Saya mencoba sesuatu seperti ini:

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

tapi ini sepertinya tidak berhasil.

Apa cara terbaik untuk melakukan ini?

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

Jika Anda ingin memasukkan kode jQuery dari file JS lain, ini harus dilakukan caranya:

Saya memiliki yang berikut dalam file HTML saya:

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

Saya membuat file my_jquery.js terpisah dengan yang berikut ini:

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

Anda dapat menggunakan kode di bawah ini untuk mencapai pemuatan jQuery di file JS Anda. Saya juga menambahkan JSFiddle jQuery yang berfungsi dan menggunakan fungsi self-invaging.

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

Opsi Lainnya : - Anda juga dapat mencoba Require.JS yang merupakan pemuat modul 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 :)');
    }

Jika Anda ingin menambahkan referensi ke file js apa pun, katakanlah, dari proyek Anda, Anda juga dapat menambahkannya langsung menggunakan tag referensi , di Visual Studio IDE ini ditangani secara otomatis dengan menyeret dan menjatuhkan file eksternal dari solusi explorer ke file saat ini ( Ini juga berfungsi untuk menandai file, file .js & .css)

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

Masalahnya adalah Anda menggunakan </script>dalam skrip, yang mengakhiri tag skrip. Coba ini:

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

Inilah solusinya, yang saya adopsi sebagai kombinasi dari beberapa solusi yang diajukan di beberapa forum lain.

Dengan cara ini Anda dapat mereferensikan file css dan file js lainnya dalam satu file js, sehingga membuat perubahan lain kali hanya di satu tempat. Tolong beri tahu saya jika Anda memiliki masalah tentang hal itu.

Saya telah melakukan hal berikut:

1. Saya telah membuat js dengan nama jQueryIncluder.js

2. dideklarasikan dan dieksekusi kode berikut dalam file ini

   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. Saya mereferensikan file jQueryIncluder.js di atas di file js atau xsl lain dari proyek .Net saya sebagai berikut:

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

Saya harap usaha saya dihargai.

Terima kasih

tidak mungkin mengimpor file js di dalam file js lainnya

Cara menggunakan jquery di dalam js adalah

impor js di html atau halaman tampilan apa pun yang Anda gunakan di dalamnya Anda akan memasukkan file 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');
    });
});

ini pasti akan bekerja untuk Anda

Ada plugin untuk jquery di mana Anda hanya bisa memasukkan file yang Anda butuhkan ke beberapa file js lainnya, di sini adalah tautan untuk itu http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- plugin / .

Baris document.write ini juga akan menulis tag skrip di html bukan di file js Anda.

Jadi saya harap ini bisa membantu Anda, sedikit dengan masalah Anda

Jika Anda sering ingin memperbarui tautan file jquery Anda ke file versi baru, di seluruh situs Anda di banyak halaman, sekaligus.

Buat file javascript (.js) dan masukkan kode di bawah ini, dan petakan file javascript ini ke semua halaman (alih-alih memetakan file jquery langsung di halaman), jadi ketika tautan file jquery diperbarui pada file javascript ini, ia akan mencerminkan di seluruh situs.

Kode di bawah ini diuji dan berfungsi dengan baik!

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

Anda dapat membuat basis halaman master tanpa menyertakan file js dan jquery. Tempatkan pemegang tempat konten di pangkalan halaman master di bagian kepala, lalu buat halaman master bersarang yang mewarisi dari pangkalan halaman master ini. Sekarang masukkan semua konten Anda di asp: konten di halaman master bersarang, akhirnya buat halaman konten dari halaman master ini

Contoh:

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

Dynamic menambahkan jQuery, CSS dari file js. Ketika kita menambahkan fungsi onload ke tubuh kita dapat menggunakan jQuery untuk membuat halaman dari file 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>

Jika document.write ('<\ script ...') tidak berfungsi, coba document.createElement ('script') ...

Selain itu, Anda harus khawatir tentang jenis situs web yang Anda buat - apakah Anda benar-benar berpikir itu ide yang baik untuk memasukkan file .js dari file .js?

cukup salin kode dari dua file ke file Anda di atas.

atau gunakan sesuatu seperti ini http://code.google.com/p/minify/ untuk menggabungkan file Anda secara dinamis.

Josh

Saya menemukan bahwa cara terbaik adalah menggunakan ini ...

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

Ini dari proyek Codecademy 'Make an Interactive Website'.

Setelah banyak penelitian, saya memecahkan masalah ini dengan petunjuk dari ofir_aghai jawaban tentang peristiwa pemuatan skrip.

Pada dasarnya kita perlu menggunakan $kode jQuery, tetapi kita tidak bisa menggunakannya sampai jQuery dimuat. Saya dulu document.createElement()menambahkan skrip untuk jQuery, tetapi masalahnya adalah butuh waktu untuk memuat sementara pernyataan berikutnya dalam JavaScript $gagal digunakan . Jadi, saya menggunakan solusi di bawah ini.

myscript.js memiliki kode yang menggunakan jQuery main.js digunakan untuk memuat kedua jquery.min.js dan myscript.js file memastikan bahwa jQuery dimuat.

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

Cara ini berhasil. Menggunakan loadJQueryFile()dari myscript.js tidak berfungsi. Segera pergi ke pernyataan berikutnya yang digunakan $.

Saya percaya apa yang ingin Anda lakukan adalah tetap memasukkan file js ini di html dom Anda, jika demikian maka apporach ini akan bekerja.

1. Tulis kode jquery Anda dalam file javascript Anda seperti yang Anda lakukan pada dom html Anda
2. Sertakan kerangka jquery sebelum menutup tag tubuh
3. Sertakan file javascript setelah memasukkan file jqyery

Contoh: // file 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>

Mengapa Anda menggunakan Javascript untuk menulis tag skrip? Cukup tambahkan tag skrip ke bagian kepala Anda. Jadi dokumen Anda akan terlihat seperti ini:

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