Как добавить jQuery в файл JS

Ответ 1

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

Ответ 2

Если вы хотите включить код 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");
  });
});

Ответ 3

Вы можете использовать приведенный ниже код для загрузки 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!");
        });
    });
})();

Ответ 4

В случае если вы хотите добавить ссылку на любой файл js, скажем, из вашего проекта, вы также можете добавить его напрямую, используя reference тега, в Visual Studio IDE это обрабатывается автоматически, перетаскивая внешний файл из проводника решений в текущий файл (это работает также для файлов с расширением вверх,.js и .css)

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

Ответ 5

/* 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 :)');
    }

Ответ 6

Проблема в том, что вы используете </script> в script, который заканчивается тегом 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>');

Ответ 7

Вот решение, которое я принял как комбинацию некоторых предлагаемых решений на некоторых других форумах.

Таким образом вы можете ссылаться как на файлы css, так и на другие js файлы в одном файле js, тем самым делая изменения в следующий раз только в одном месте. Пожалуйста, дайте мне знать, если у вас есть какие-либо проблемы.

Я сделал следующее:

• Я создал js с именем jQueryIncluder.js

• объявлен и исполнен следующий код в этом файле

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

• Я ссылался на вышеуказанный файл jQueryIncluder.js в другом файле js или xsl моего проекта .Net следующим образом:

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

Я надеюсь, что мои усилия будут оценены.

Спасибо

Ответ 8

невозможно импортировать 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');
    });
});

это определенно сработает для вас

Ответ 9

Theres плагин для jquery, где вы можете просто включить файлы, которые вам нужны, в какой-нибудь другой js файл, вот ссылка для него http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/.

Также эта строка document.write будет записывать теги script в html не в ваш js файл.

Поэтому я надеюсь, что это может помочь вам, немного с вашей проблемой

Ответ 10

Если вы часто хотите обновить ссылку на файл jquery на новый файл версии, на вашем сайте на многих страницах, за один раз.

Создайте файл javascript (.js) и поместите нижеприведенный код и сопоставьте этот файл javascript со всеми страницами (вместо сопоставления файла jquery непосредственно на странице), поэтому, когда ссылка jquery file обновлена ​​на этом 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('>');

Ответ 11

Вы можете создать основную страницу без использования 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>

Ответ 12

Динамическое добавление 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>

Ответ 13

Если document.write('<\script...') не работает, попробуйте document.createElement('script')...

Кроме того, вы должны быть обеспокоены типом веб-сайта, который вы создаете, - вы действительно думаете, что его хорошая идея включать файлы .js из .js файлов?

Ответ 14

просто скопируйте код из двух файлов в ваш файл вверху.

или используйте что-то вроде http://code.google.com/p/minify/, чтобы динамически комбинировать ваши файлы.

Джош

Ответ 15

Я считаю, что лучший способ - использовать это...

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

Это из проекта Codecademy "Сделать интерактивный сайт".

Ответ 16

После долгих исследований я решаю эту проблему с подсказкой ответа ofir_aghai о событии загрузки скрипта.

В основном нам нужно использовать $ для кода JQuery, но мы не можем использовать его, пока не будет загружен JQuery. Я использовал document.createElement для добавления скрипта для JQuery, но проблема в том, что загрузка занимает некоторое время, пока следующий оператор в javascript, использующий $ fails. Поэтому я использовал приведенное ниже решение.

В myscript.js есть код, использующий JQuery main.js, который используется для загрузки как файла jquery 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 не сработало. Это немедленно перейдет к следующему утверждению, которое использует $.

Ответ 17

Почему вы используете Javascript для записи тегов script? Просто добавьте теги script в свой раздел. Поэтому ваш документ будет выглядеть примерно так:

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