JS dosyasına jQuery nasıl eklenir

Tabloları sıralamak için bazı kod var. Kod çoğu sayfada yaygın olduğundan, kodu içeren bir JS dosyası yapmak istiyorum ve onu kullanan tüm sayfalar oradan başvurabilir.

Sorun: JQuery ve tablo sıralayıcı eklentisini bu .js dosyasına nasıl ekleyebilirim?

Ben böyle bir şey denedim:

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

ama bu işe yaramıyor gibi görünüyor.

Bunu yapmanın en iyi yolu nedir?

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

Başka bir JS dosyasından jQuery kodu eklemek istiyorsanız, bu hile yapmalıdır:

HTML dosyamda aşağıdakiler vardı:

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

Aşağıdakilerle ayrı bir my_jquery.js dosyası oluşturdum:

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

JS dosyanıza jQuery yüklemesini sağlamak için aşağıdaki kodu kullanabilirsiniz. Ayrıca çalışan bir jQuery JSFiddle ekledim ve kendi kendini çağıran bir işlev kullanıyor.

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

Diğer Seçenek : - JS modülü yükleyicisi olan Require.JS'yi de deneyebilirsiniz .

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

Herhangi bir js dosyasına referans eklemek istiyorsanız, örneğin projenizden doğrudan referans etiketi kullanarak ekleyebilirsiniz , Visual Studio IDE'de bu, harici dosyayı çözüm gezginden geçerli dosyaya sürükleyip bırakarak otomatik olarak işlenir ( Bu, işaretleme dosyaları, .js ve .css dosyaları için de geçerlidir)

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

Sorun, </script>komut dosyası etiketinde sonlanan kod içinde kullanmanızdır . Bunu dene:

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

İşte bazı forumlarda önerilen çözümlerin bir kombinasyonu olarak benimsediğim çözüm.

Bu şekilde css dosyalarına ve diğer js dosyalarına tek bir js dosyasında başvurabilirsiniz, böylece bir dahaki sefere yalnızca tek bir yerde değişiklik yapabilirsiniz. Herhangi bir endişeniz varsa lütfen bize bildirin.

Aşağıdaki yaptım:

1. JQueryIncluder.js adında bir js oluşturdum

2. bu dosyada aşağıdaki kod bildirildi ve yürütüldü

   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. Yukarıdaki jQueryIncluder.js dosyasına .Net projemin başka bir js veya xsl dosyasında aşağıdaki gibi başvurdum:

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

Umarım çabam takdir edilir.

Teşekkürler

js dosyasını başka bir js dosyasının içine aktarmak mümkün değildir

Js içinde jquery kullanmanın yolu

js'yi html'ye veya içindeki js dosyasını içereceğiniz herhangi bir görünüm sayfasına aktarın

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

bu kesinlikle senin için çalışacak

Jquery için ihtiyacınız olan dosyaları başka bir js dosyasına ekleyebileceğiniz bir eklenti var, işte bunun için bağlantı http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- eklenti .

Ayrıca bu document.write satırı komut dosyası etiketlerini js dosyanızda olmayan html'ye yazar.

Umarım bu size yardımcı olabilir, probleminizle biraz

Jquery dosya bağlantınızı, sitenizde birçok sayfada tek seferde yeni bir sürüm dosyasına güncellemek istiyorsanız ..

Bir javascript dosyası (.js) oluşturun ve aşağıdaki kodu girin ve bu javascript dosyasını tüm sayfalarla eşleyin (jquery dosyasını doğrudan sayfada eşlemek yerine), bu nedenle jquery dosya bağlantısı bu javascript dosyasında güncellendiğinde site genelinde yansıtmak.

Aşağıdaki kod test edilmiştir ve iyi çalışır!

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 ve jquery dosyaları olmadan bir ana sayfa tabanı oluşturabilirsiniz. Ana sayfa tabanına kafa bölümünde bir içerik yer tutucusu koyun, ardından bu ana sayfa tabanından devralınan iç içe bir ana sayfa oluşturun. Şimdi eklentilerinizi iç içe geçmiş ana sayfadaki bir asp: içeriğine koyun, son olarak bu iç içe geçmiş ana sayfadan bir içerik sayfası oluşturun

Misal:

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

Js dosyasından jQuery, CSS dinamik ekleme. Gövdeye onload işlevi eklediğimizde js dosyasından sayfa oluşturmak için jQuery kullanabiliriz.

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 ...') çalışmıyorsa, document.createElement ('script') deneyin ...

Bunun dışında, yaptığınız web sitesinin türü hakkında endişelenmelisiniz - .js dosyalarını .js dosyalarından eklemenin gerçekten iyi bir fikir olduğunu düşünüyor musunuz?

kodu iki dosyadan en üstteki dosyanıza kopyalamanız yeterlidir.

veya dosyalarınızı dinamik olarak birleştirmek için http://code.google.com/p/minify/ gibi bir şey kullanın .

alay etmek

Bunu kullanmanın en iyi yolunun ...

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

Bu Codecademy 'Etkileşimli Web Sitesi Yap' projesinden.

Birçok araştırmadan sonra, bu sorunu komut dosyası yükleme olayıyla ilgili ofir_aghai yanıtından ipucu ile çözüyorum .

Temelde $jQuery kodu için kullanmamız gerekiyor , ancak jQuery yüklenene kadar kullanamayız. Ben document.createElement()jQuery için bir komut dosyası eklemek için kullanılan , ancak sorun kullanarak JavaScript sonraki ifadesi kullanarak yüklemek için zaman alır$ başarısız . Bu yüzden aşağıdaki çözümü kullandım.

MyScript.js jQuery kullanan kod yaşıyor main.js hem yüklemek için kullanılır jquery.min.js ve MyScript.js emin jQuery yüklenmiş olduğundan yapım dosyaları.

main.js kodu

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

Bu şekilde çalıştı. Myscript.jsloadJQueryFile() dosyasından kullanmak işe yaramadı. Hemen kullanan bir sonraki ifadeye gider .$

Ne yapmak istiyorum hala html dom bu js dosyasını incude etmektir, eğer öyleyse o zaman bu apporach çalışacağına inanıyorum.

1. Jquery kodunuzu javascript dosyanıza html dom'nizdeki gibi yazın
2. Gövde etiketini kapatmadan önce jquery çerçevesini dahil et
3. Jqyery dosyasını ekledikten sonra javascript dosyasını dahil et

Örnek: // js dosyası

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

Komut dosyası etiketlerini yazmak için neden Javascript kullanıyorsunuz? Komut dosyası etiketlerini baş bölümünüze eklemeniz yeterlidir. Böylece belgeniz şöyle görünecektir:

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