Cómo agregar jQuery en el archivo JS

Tengo un código específico para ordenar tablas. Dado que el código es común en la mayoría de las páginas, quiero hacer un archivo JS que tenga el código y todas las páginas que lo usen pueden hacer referencia desde allí.

El problema es: ¿Cómo agrego jQuery y el plugin clasificador de tablas en ese archivo .js?

Intenté algo como esto:

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

Pero esto parece no funcionar.

¿Cuál es la mejor manera de hacer esto?

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

Si desea incluir el código jQuery de otro archivo JS, esto debería ser el truco:

Tenía lo siguiente en mi archivo HTML:

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

Creé un archivo my_jquery.js separado con lo siguiente:

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

Puede usar el siguiente código para lograr cargar jQuery en su archivo JS. También he agregado un jQuery JSFiddle que está funcionando y está utilizando una función de invocación automática.

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

Otra opción : - También puede probar Require.JS, que es un cargador de módulos 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 :)');
    }

Si desea agregar una referencia a cualquier archivo js, ​​por ejemplo, desde su proyecto, también puede agregarlo directamente usando la etiqueta de referencia , en Visual Studio IDE esto se maneja automáticamente arrastrando y soltando el archivo externo del explorador de soluciones al archivo actual ( Esto funciona también para archivos de marcado, archivos .js y .css)

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

El problema es que está utilizando </script>dentro del script, que está finalizando la etiqueta del script. Prueba esto:

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

Aquí está la solución, que adopté como una combinación de algunas soluciones propuestas en otros foros.

De esta manera, puede hacer referencia tanto a los archivos css como a otros archivos js en un archivo js, ​​haciendo así el cambio la próxima vez solo en un solo lugar. Avíseme si tiene alguna inquietud al respecto.

He hecho lo siguiente:

1. He creado un js con el nombre jQueryIncluder.js

2. declarado y ejecutado siguiendo el código en este archivo

   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. Hice referencia al archivo jQueryIncluder.js anterior en otro archivo js o xsl de mi proyecto .Net de la siguiente manera:

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

Espero que mi esfuerzo sea apreciado.

Gracias

no es posible importar un archivo js dentro de otro archivo js

La forma de usar jquery dentro de js es

importe el js en el html o cualquier página de vista que esté utilizando dentro de la cual va a incluir el archivo 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');
    });
});

esto definitivamente funcionará para ti

Hay un complemento para jquery donde puede incluir los archivos que necesita en algún otro archivo js, ​​aquí está el enlace para http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- enchufar/ .

También esta línea document.write escribirá las etiquetas de script en el html no en su archivo js.

Así que espero que esto pueda ayudarte, un poco con tu problema

Si con frecuencia desea actualizar el enlace de su archivo jquery a un nuevo archivo de versión, en su sitio en muchas páginas, de una sola vez ...

Cree un archivo javascript (.js) e ingrese el siguiente código, y asigne este archivo javascript a todas las páginas (en lugar de asignar el archivo jquery directamente en la página), de modo que cuando el enlace del archivo jquery se actualice en este archivo javascript reflexionar a través del sitio.

¡El código a continuación se prueba y funciona bien!

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

Puede crear una base de página maestra sin los archivos js y jquery incluidos. Coloque un marcador de posición de contenido en la base de la página maestra en la sección de encabezado, luego cree una página maestra anidada que herede de esta base de la página maestra. Ahora ponga sus inclusiones en un asp: contenido en la página maestra anidada, finalmente cree una página de contenido a partir de esta página maestra anidada

Ejemplo:

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

Dinámica agregando jQuery, CSS desde el archivo js. Cuando agregamos la función de carga al cuerpo, podemos usar jQuery para crear una página desde un archivo 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>

Si document.write ('<\ script ...') no funciona, intente document.createElement ('script') ...

Aparte de eso, debería preocuparse por el tipo de sitio web que está creando. ¿Realmente cree que es una buena idea incluir archivos .js de archivos .js?

simplemente copie el código de los dos archivos en su archivo en la parte superior.

o use algo como esto http://code.google.com/p/minify/ para combinar sus archivos dinámicamente.

Josh

Me parece que la mejor manera es usar esto ...

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

Esto es del proyecto Codecademy 'Make an Interactive Website'.

Después de mucha investigación, resuelvo este problema con una pista de la respuesta ofir_aghai sobre el evento de carga de script.

Básicamente, necesitamos usar el $código jQuery, pero no podemos usarlo hasta que se cargue jQuery. Solía document.createElement()agregar un script para jQuery, pero el problema es que lleva tiempo cargar mientras se usa la siguiente declaración en JavaScript$ falla . Entonces, usé la siguiente solución.

myscript.js tiene un código que usa jQuery main.js se usa para cargar archivos jquery.min.js y myscript.js asegurándose de que jQuery esté cargado.

código 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);
 }

De esta manera funcionó. El uso loadJQueryFile()de myscript.js no funcionó. Inmediatamente va a la siguiente declaración que utiliza $.

Creo que lo que quieres hacer es incluir este archivo js en tu html dom, si es así, este apporach funcionará.

1. Escriba su código jquery en su archivo javascript como lo haría en su dom html
2. Incluya jquery framework antes de cerrar la etiqueta del cuerpo
3. Incluir archivo javascript después de incluir el archivo jqyery

Ejemplo: // archivo 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>

¿Por qué estás usando Javascript para escribir las etiquetas de script? Simplemente agregue las etiquetas de script a su sección principal. Entonces su documento se verá así:

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