Як додати 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 це обробляється автоматично, перетягуючи зовнішній файл із провідника розв’язань у поточний файл ( Це працює і для розмітки файлів, .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: 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>

Динамічне додавання jQuery, CSS з js-файлу. Коли ми додали функцію 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>

Якщо 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>**

Це з проекту 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 не вийшло. Це негайно переходить до наступного твердження, яке використовує $.

Я вважаю, що ви хочете зробити, це все-таки вписати цей файл js у ваш ht dom, якщо так, то ця програма буде працювати.

1. Запишіть свій код jquery у свій файл JavaScript так, як у вашому html домі
2. Включіть рамку jquery перед закриттям тегу body
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>

Чому ви використовуєте 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);