Comment ajouter jQuery dans un fichier JS

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 ?

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

Answer 2

Si vous souhaitez inclure le code jQuery d'un autre fichier JS, cela devrait faire l'affaire :

J'avais le texte suivant dans mon fichier HTML :

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

J'ai créé un fichier séparé my_jquery.js avec ce qui suit :

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

Answer 3

Vous pouvez utiliser le code ci-dessous pour réaliser le chargement de jQuery dans votre fichier JS. J'ai également ajouté un JSFiddle jQuery qui fonctionne et qui utilise une fonction auto-invoquante.

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

Autre option : - Vous pouvez aussi essayer Require.JS qui est un chargeur de module JS.

Answer 4

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

Answer 5

Si vous voulez ajouter une référence à n'importe quel fichier js, par exemple, de votre projet, vous pouvez également l'ajouter directement en utilisant référence Dans Visual Studio IDE, cette opération est gérée automatiquement par un glisser-déposer du fichier externe depuis l'explorateur de solutions vers le fichier en cours (cela fonctionne également pour les fichiers de balisage, les fichiers .js et .css).

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