Cách thêm jQuery trong tệp JS

Tôi có một số mã cụ thể để sắp xếp các bảng. Vì mã là phổ biến trong hầu hết các trang, tôi muốn tạo một tệp JS sẽ có mã và tất cả các trang sử dụng nó có thể tham chiếu nó từ đó.

Vấn đề là: Làm cách nào để thêm jQuery và plugin sắp xếp bảng vào tệp .js đó?

Tôi đã thử một cái gì đó như thế này:

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

nhưng điều này dường như không hoạt động.

Cách tốt nhất để làm việc này là gì?

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

Nếu bạn muốn bao gồm mã jQuery từ một tệp JS khác, điều này nên thực hiện thủ thuật:

Tôi đã có những điều sau đây trong tệp HTML của mình:

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

Tôi đã tạo một tệp my_jquery.js riêng biệt bằng cách sau:

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

Bạn có thể sử dụng đoạn mã dưới đây để đạt được tải jQuery trong tệp JS của mình. Tôi cũng đã thêm một jQuery JSFiddle đang hoạt động và nó đang sử dụng một hàm tự gọi.

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

Tùy chọn khác : - Bạn cũng có thể thử Require.JS là trình tải mô-đun 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 :)');
    }

Trong trường hợp bạn muốn thêm tham chiếu vào bất kỳ tệp js nào, giả sử, từ dự án của bạn, bạn cũng có thể thêm trực tiếp bằng thẻ tham chiếu , trong Visual Studio IDE, điều này được xử lý tự động bằng cách kéo và thả tệp bên ngoài từ trình khám phá giải pháp vào tệp hiện tại ( Điều này cũng hoạt động để đánh dấu các tệp, các tệp .js & .css)

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

Vấn đề là bạn đang sử dụng </script>trong tập lệnh đang kết thúc thẻ tập lệnh. Thử cái này:

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

Đây là giải pháp mà tôi đã áp dụng như một sự kết hợp của một số giải pháp được đề xuất trong một số diễn đàn khác.

Bằng cách này, bạn có thể tham chiếu cả tệp css và tệp js khác trong một tệp js, do đó chỉ thực hiện thay đổi lần sau ở một nơi duy nhất. Xin vui lòng cho tôi biết nếu bạn có bất kỳ mối quan tâm về nó.

Tôi đã làm như sau:

1. Tôi đã tạo một js với tên jQueryIncluder.js

2. khai báo và thực thi mã sau trong tập tin này

   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. Tôi đã tham chiếu tệp jQueryIncluder.js ở trên trong một tệp js hoặc xsl khác của dự án .Net của tôi như sau:

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

Tôi hy vọng nỗ lực của tôi được đánh giá cao.

Cảm ơn

không thể nhập tệp js bên trong tệp js khác

Cách sử dụng jquery bên trong js là

nhập js trong html hoặc bất kỳ trang xem nào bạn đang sử dụng bên trong mà bạn sẽ bao gồm tệp js

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

điều này chắc chắn sẽ làm việc cho bạn

Có một plugin cho jquery nơi bạn chỉ có thể bao gồm các tệp bạn cần vào một số tệp js khác, đây là liên kết cho nó http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- cắm vào/ .

Ngoài ra, dòng document.write này sẽ ghi các thẻ script trong html không có trong tệp js của bạn.

Vì vậy, tôi hy vọng điều này có thể giúp bạn, một chút với vấn đề của bạn

Nếu bạn thường xuyên muốn cập nhật liên kết tệp jquery của mình thành tệp phiên bản mới, trên trang web của bạn trên nhiều trang, cùng một lúc ..

Tạo một tệp javascript (.js) và đặt mã bên dưới và ánh xạ tệp javascript này tới tất cả các trang (thay vì ánh xạ tệp jquery trực tiếp trên trang), vì vậy khi liên kết tệp jquery được cập nhật trên tệp javascript này, nó sẽ phản ánh trên toàn trang web.

Các mã dưới đây được thử nghiệm và nó hoạt động tốt!

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

Bạn có thể tạo cơ sở trang chính mà không bao gồm các tệp js và jquery. Đặt một chủ sở hữu nội dung trong cơ sở trang chính trong phần đầu, sau đó tạo một trang chính lồng nhau kế thừa từ cơ sở trang chính này. Bây giờ đặt bao gồm của bạn trong một asp: nội dung trong trang chính lồng nhau, cuối cùng tạo một trang nội dung từ trang chính lồng nhau này

Thí dụ:

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

Thêm động, jQuery, CSS từ tệp js. Khi chúng tôi thêm chức năng onload vào phần thân, chúng tôi có thể sử dụng jQuery để tạo trang từ tệp 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>

Nếu document.write ('<\ script ...') không hoạt động, hãy thử document.createEuity ('script') ...

Ngoài ra, bạn nên lo lắng về loại trang web bạn đang tạo - bạn có thực sự nghĩ rằng nên bao gồm các tệp .js từ các tệp .js không?

chỉ cần sao chép mã từ hai tệp vào tệp của bạn ở trên cùng.

hoặc sử dụng cái gì đó như thế này http://code.google.com.vn/p/minify/ để kết hợp các tệp của bạn một cách linh hoạt.

Josh

Tôi thấy rằng cách tốt nhất là sử dụng ...

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

Đây là từ dự án Codecademy 'Make a Interactive Website'.

Sau rất nhiều nghiên cứu, tôi giải quyết vấn đề này bằng gợi ý từ câu trả lời của ofir_aghai về sự kiện tải tập lệnh.

Về cơ bản chúng ta cần sử dụng $mã jQuery, nhưng chúng ta không thể sử dụng nó cho đến khi jQuery được tải. Tôi đã từng document.createElement()thêm một tập lệnh cho jQuery, nhưng vấn đề là phải mất thời gian để tải trong khi câu lệnh tiếp theo trong JavaScript sử dụng $không thành công. Vì vậy, tôi đã sử dụng giải pháp dưới đây.

myscript.js đang có mã sử dụng jQuery main.js được sử dụng để tải cả hai tệp jquery.min.js và myscript.js để đảm bảo rằng jQuery đã được tải.

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

Cách này đã làm việc. Sử dụng loadJQueryFile()từ myscript.js không hoạt động. Nó ngay lập tức đi đến tuyên bố tiếp theo sử dụng $.

Tôi tin rằng những gì bạn muốn làm vẫn là đưa tập tin js này vào trong html dom của bạn, nếu vậy thì apporach này sẽ hoạt động.

1. Viết mã jquery của bạn trong tệp javascript của bạn như trong mã html của bạn
2. Bao gồm khung jquery trước khi đóng thẻ body
3. Bao gồm tệp javascript sau khi bao gồm tệp jqyery

Ví dụ: // tệp js

     $(document).ready(function(){
     alert("jquery in js file");
     });

// quản trị html

    <body>
   <!--some divs content--->

   <script src=/path/to/jquery.js ></script>
   <script src=/path/to/js.js ></script>
   </body>

Tại sao bạn sử dụng Javascript để viết các thẻ script? Đơn giản chỉ cần thêm các thẻ script vào phần đầu của bạn. Vì vậy, tài liệu của bạn sẽ trông giống như thế này:

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