Comment ajouter jQuery dans un fichier JS

Question

Comment ajouter jQuery dans un fichier JS

Demandé el 16 de Juillet, 2009: Quand la question a-t-elle été
549764 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je dispose d'un code spécifique au tri des tableaux. Comme ce code est commun à la plupart des pages, je veux créer un fichier JS qui contiendra le code et toutes les pages qui l'utilisent pourront y faire référence.

Le problème est le suivant : comment ajouter jQuery et le plugin de trieur de tableaux dans ce fichier .js ?

J'ai essayé quelque chose comme ça :

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

mais cela ne semble pas fonctionner.

Quelle est la meilleure façon de procéder ?

Demandé el 16 de Juillet, 2009 par Utilisateur non enregistré

Answer 1

5 Réponses

Answer 2

2voto

GeniusGeek Points 275

Je crois que ce que vous voulez faire est d'inclure ce fichier js dans votre domaine html, si c'est le cas, cette approche fonctionnera.

Écrivez votre code jquery dans votre fichier javascript comme vous le feriez dans votre domotique html. dans votre domaine html
Inclure le framework jquery avant la fermeture de la balise body
Inclure le fichier javascript après avoir inclus le fichier jqyery

Exemple : Fichier //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>

Répondu el 26 de Mai, 2020 par GeniusGeek (275 Points )

Answer 3

2voto

topsoftwarepro Points 529

La réponse suivante a été postée précédemment par un autre utilisateur, mais n'a fourni aucune explication. J'ai donc décidé d'annoter ce qui se passe.

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

Explication

Le problème est résolu en créant un élément script en JavaScript, puis en définissant l'élément src au chemin du fichier jQuery.

var jQueryScript = document.createElement('script');

Ci-dessus, nous créons le script élément.

Ensuite, nous définissons le src au chemin d'accès comme expliqué précédemment. Il peut être défini comme

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

o

/your/path/to/jquery/file

En cours d'utilisation :

jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');

Enfin, et surtout, l'ajout du nouvel élément au document. head :

document.head.appendChild(jQueryScript);

o body :

document.body.appendChild(jQueryScript);

En cours d'utilisation

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

setTimeout(function() {
  // Add the rest of your code here, as we have to wait a moment before the document has jQuery as a part of it.
  $("body").html("<h1>It Works!</h1>");
}, 100);

Répondu el 4 de Novembre, 2021 par topsoftwarepro (529 Points )

Answer 4

1voto

Sam Points 11

Si vous souhaitez fréquemment mettre à jour le lien de votre fichier jquery vers un fichier de nouvelle version, à travers votre site sur de nombreuses pages, en une seule fois .

Créez un fichier javascript (.js) et mettez le code ci-dessous, et mappez ce fichier javascript sur toutes les pages (au lieu de mapper le fichier jquery directement sur la page), ainsi quand le lien du fichier jquery est mis à jour sur ce fichier javascript, il se reflétera sur tout le site.

Le code ci-dessous a été testé et il fonctionne bien !

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

Répondu el 1 de Décembre, 2010 par Sam (11 Points )

Answer 5

1voto

farid Points 13

Vous pouvez créer une base de pages maîtresses sans les fichiers js et jquery inclus. Placez un support de contenu dans la base de page maître dans la section head, puis créez une page maître imbriquée qui hérite de cette base de page maître. Maintenant, mettez vos includes dans un asp:content dans la page maître imbriquée, et enfin créez une page de contenu à partir de cette page maître imbriquée.

Exemple :

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

Répondu el 16 de Février, 2014 par farid (13 Points )

Answer 6

1voto

BlackBackroom Points 11

Ajout dynamique de jQuery, CSS à partir du fichier js. Lorsque nous avons ajouté la fonction onload au corps, nous pouvons utiliser jQuery pour créer une page à partir du fichier 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>

Répondu el 6 de Juillet, 2019 par BlackBackroom (11 Points )

Comment ajouter jQuery dans un fichier JS

Réponses

Explication

En cours d'utilisation

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment ajouter jQuery dans un fichier JS

Réponses

Explication

En cours d'utilisation

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: