Jak dodać jQuery w pliku JS

Mam kod specyficzny dla sortowania tabel. Ponieważ kod jest powszechny na większości stron, chcę utworzyć plik JS, który będzie zawierał kod i wszystkie strony, które go używają, będą mogły się do niego odwoływać.

Problem: Jak dodać jQuery i wtyczkę sortowania tabel do tego pliku .js?

Próbowałem czegoś takiego:

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

ale to wydaje się nie działać.

Jaki jest najlepszy sposób, aby to zrobić?

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

Jeśli chcesz dołączyć kod jQuery z innego pliku JS, powinno to załatwić sprawę:

W moim pliku HTML miałem:

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

Utworzyłem osobny plik my_jquery.js zawierający:

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

Możesz użyć poniższego kodu, aby załadować jQuery do pliku JS. Dodałem również jQuery JSFiddle, który działa i używa funkcji samoczynnego wywoływania.

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

Inna opcja : - Możesz także wypróbować Require.JS, który jest programem ładującym moduły 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 :)');
    }

Jeśli chcesz dodać odwołanie do dowolnego pliku js, powiedzmy, z projektu, możesz również dodać go bezpośrednio za pomocą tagu odwołania , w środowisku Visual Studio IDE jest to obsługiwane automatycznie przez przeciągnięcie i upuszczenie zewnętrznego pliku z eksploratora rozwiązań do bieżącego pliku ( Działa to również w przypadku plików znaczników, plików .js i .css)

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

Problem polega na tym, że używasz </script>w skrypcie, który kończy tag skryptu. Spróbuj tego:

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

Oto rozwiązanie, które przyjąłem jako połączenie kilku proponowanych rozwiązań na innych forach.

W ten sposób możesz odwoływać się zarówno do plików css, jak i innych plików js w jednym pliku js, dzięki czemu zmiany następnym razem będą dokonywane tylko w jednym miejscu. Daj mi znać, jeśli masz jakiekolwiek wątpliwości.

Wykonałem następujące czynności:

1. Utworzyłem plik js o nazwie jQueryIncluder.js

2. zadeklarowane i wykonane zgodnie z kodem w tym pliku

   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. Odwołałem się do powyższego pliku jQueryIncluder.js w innym pliku js lub xsl mojego projektu .Net w następujący sposób:

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

Mam nadzieję, że mój wysiłek zostanie doceniony.

Dzięki

nie można zaimportować pliku js do innego pliku js

Sposób użycia jquery wewnątrz js to

zaimportuj plik js do html lub dowolnej strony widoku, której używasz, do której chcesz dołączyć plik 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');
    });
});

to na pewno zadziała dla Ciebie

Jest wtyczka do jquery, w której możesz po prostu dołączyć potrzebne pliki do innego pliku js, tutaj jest link do niego http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- wtyczka / .

Również ta linia document.write zapisze tagi skryptu w html, a nie w pliku js.

Mam więc nadzieję, że to trochę pomoże ci rozwiązać twój problem

Jeśli często chcesz aktualizować link do pliku jquery do nowej wersji pliku w całej witrynie na wielu stronach za jednym razem ...

Utwórz plik javascript (.js) i umieść poniższy kod i zamapuj ten plik javascript na wszystkie strony (zamiast mapować plik jquery bezpośrednio na stronie), więc gdy łącze do pliku jquery zostanie zaktualizowane w tym pliku javascript, odzwierciedlają w całej witrynie.

Poniższy kod został przetestowany i działa dobrze!

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

Możesz utworzyć bazę strony wzorcowej bez dołączonych plików js i jquery. Umieść element zastępczy zawartości w bazie strony wzorcowej w sekcji nagłówka, a następnie utwórz zagnieżdżoną stronę wzorcową, która dziedziczy z tej bazy strony wzorcowej. Teraz umieść dołączenia w asp: zawartość na zagnieżdżonej stronie wzorcowej, na koniec utwórz stronę zawartości z tej zagnieżdżonej strony wzorcowej

Przykład:

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

Dynamiczne dodawanie jQuery, CSS z pliku js. Po dodaniu funkcji onload do body możemy użyć jQuery do stworzenia strony z pliku 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>

Jeśli document.write ('<\ script ...') nie działa, spróbuj document.createElement ('script') ...

Poza tym powinieneś się martwić typem witryny, którą tworzysz - czy naprawdę uważasz, że dobrym pomysłem jest dołączanie plików .js z plików .js?

po prostu skopiuj kod z dwóch plików do swojego pliku u góry.

lub użyj czegoś takiego jak http://code.google.com/p/minify/, aby dynamicznie połączyć pliki.

Josh

Uważam, że najlepszym sposobem jest użycie tego ...

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

Pochodzi z projektu Codecademy „Stwórz interaktywną witrynę internetową”.

Po wielu badaniach rozwiązałem ten problem, podpowiadając odpowiedź ofir_aghai na temat zdarzenia ładowania skryptu.

Zasadniczo musimy użyć $kodu jQuery, ale nie możemy go użyć, dopóki jQuery nie zostanie załadowany. Kiedyś document.createElement()dodawałem skrypt dla jQuery, ale problem polega na tym, że ładowanie zajmuje trochę czasu, podczas gdy następna instrukcja w JavaScript $nie działa. Skorzystałem więc z poniższego rozwiązania.

myscript.js zawiera kod, który używa jQuery main.js jest używany do ładowania plików jquery.min.js i myscript.js , upewniając się, że jQuery jest załadowany.

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

Tak to zadziałało. Używanie loadJQueryFile()z myscript.js nie działało. Natychmiast przechodzi do następnej instrukcji, która używa $.

Wierzę, że nadal chcesz umieścić ten plik js w swoim html dom, jeśli tak, to ten apporach będzie działał.

1. Wpisz swój kod jquery w pliku javascript, tak jak w html dom
2. Uwzględnij środowisko jquery przed zamknięciem tagu body
3. Dołącz plik javascript po dołączeniu pliku jqyery

Przykład: // plik 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>

Dlaczego używasz JavaScript do pisania tagów skryptu? Po prostu dodaj tagi skryptu do sekcji head. Twój dokument będzie wyglądał mniej więcej tak:

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