Incluez jQuery dans la console JavaScript

Existe-t-il un moyen simple d'inclure jQuery dans la console JavaScript Chrome pour les sites qui ne l'utilisent pas? Par exemple, sur un site Web, j'aimerais obtenir le nombre de lignes dans un tableau. Je sais que c'est très simple avec jQuery.

$('element').length; 

Le site n'utilise pas jQuery. Puis-je l'ajouter à partir de la ligne de commande?

Exécutez ceci dans la console JavaScript de votre navigateur, alors jQuery devrait être disponible …

 var jq = document.createElement('script'); jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // ... give time for script to load, then type (or see below for non wait option) jQuery.noConflict(); 

REMARQUE: si le site comporte des scripts en conflit avec jQuery (autres bibliothèques, etc.), vous pouvez toujours rencontrer des problèmes.

Mettre à jour:

Faire le meilleur meilleur, créer un marque-photo rend vraiment pratique, faisons-le, et un petit commentaire est génial aussi:

  1. Cliquez avec le bouton droit sur la barre de signets, puis cliquez sur Ajouter une page
  2. Nommez-le comme vous le souhaitez, par exemple, Injectez jQuery et utilisez la ligne suivante pour l'URL:

Javascript: (function (e, s) {e.src = s; e.onload = function () {jQuery.noConflict (); console.log ('jQuery injecté')}; document.head.appendChild (e); }) (Document.createElement ('script'), '// code.jquery.com/jquery-latest.min.js')

Ci-dessous le code formaté:

 javascript: (function(e, s) { e.src = s; e.onload = function() { jQuery.noConflict(); console.log('jQuery injected'); }; document.head.appendChild(e); })(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js') 

Ici, l'URL officielle jQuery CDN est utilisée, n'hésitez pas à utiliser votre propre version CDN /.

Exécutez ceci dans votre console

 var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script); 

Il crée une nouvelle étiquette de script, la remplit de jQuery et ajoute à la tête

Utilisez la brochure jQueryify:

http://marklets.com/jQuerify.aspx

Au lieu de copier le code dans les autres réponses, cela en fera un marque-page cliquable.

Copiez le contenu du fichier http://code.jquery.com/jquery-latest.min.js et collez-le dans la console. Fonctionne parfaitement.

En ajoutant à la réponse de @ jondavidjohn, nous pouvons également le définir comme un marque-page avec l'URL comme code javascript.

Nom: Inclure Jquery

Url:

 javascript:var jq = document.createElement('script');jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(jq); setTimeout(function() {jQuery.noConflict(); console.log('jQuery loaded'); }, 1000);void(0); 

Puis ajoutez-le à la barre d'outils de Chrome ou Firefox afin que, au lieu de coller le script encore et encore, nous pouvons simplement cliquer sur le bookmarklet.

Capture d'écran du signet

Je suis un rebelle.

Solution: n'utilisez pas jQuery. JQuery est une bibliothèque pour abstraire les inconcilios de DOM sur les navigateurs. Comme vous êtes dans votre propre console, vous n'avez pas besoin de ce genre d'abstraction.

Pour votre exemple:

 $$('element').length 

( $$ est un alias pour document.querySelectorAll dans la console.)

Pour tout autre exemple: je suis sûr de pouvoir trouver quelque chose. Surtout si vous utilisez un navigateur moderne (Chrome, FF, Safari, Opera).

En outre, savoir comment fonctionne le DOM ne nuirait à personne, cela augmenterait votre niveau de jQuery (oui, en apprenant plus sur javascript vous rend mieux chez jQuery).

Je viens de créer un bookmarklet jQuery 3.2.1 avec une gestion des erreurs (ne chargez que s'il est déjà chargé, détecte la version si déjà chargé, message d'erreur si erreur lors du chargement). Testé sur Chrome 27. Il n'y a aucune raison d'utiliser l'ancien jQuery 1.9.1 sur le navigateur Chrome puisque jQuery 2.0 est compatible avec l'API avec 1.9 .

Il suffit d'exécuter ce qui suit dans la console de développeur de Chrome ou de le glisser dans la barre de signets :

 javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.")};a.onerror=function(){delete jQuery;alert("Error while loading jQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})()) 

Le code source lisible est disponible ici

La réponse principale, par jondavidjohn, est bonne, mais j'aimerais la régler pour aborder quelques points:

  • Divers navigateurs émettent un avertissement lors du chargement d'un script de http vers une page sur https .
  • Le jquery.com changement du protocole de jquery.com sur https entraîne un avertissement si vous l'essayez directement à partir de la barre d'URL du navigateur: This is probably not the site you are looking for!
  • J'aime utiliser le CDN de Google lorsque j'utilise la console pour expérimenter des sites Google tels que Gmail.

Mon seul problème, c'est que je dois inclure un numéro de version où dans la console, je veux toujours avoir le dernier.

 var jq = document.createElement('script'); jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); jQuery.noConflict(); 

Il est assez facile de le faire manuellement, comme l'expliquent les autres réponses. Mais il y a aussi le plug-in jQuerify .

FWIW, Firebug intègre la commande spéciale include , et jquery est alias par défaut: https://getfirebug.com/wiki/index.php/Include

Dans votre cas, il vous suffit de taper:

 include("jquery"); 

Florent

Une des façons les plus courtes serait simplement de copier le code ci-dessous sur la console.

 var jquery = document.createElement('script'); jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"; document.head.appendChild(jquery); 

Cette réponse basée sur la réponse @genesis, j'ai d'abord essayé la version de signet @jondavidjohn, et ça ne fonctionne pas, alors je la modifie (ajoutez-la à votre signet):

 javascript:(function(){var s = document.createElement('script');s.src = "//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')}()); 

Les mots de prudence, ne sont pas testés dans Chrome, mais fonctionnent dans Firefox et ne sont pas testés dans un environnement conflictuel.

Par cette réponse :

 fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r)) 

Pour une raison quelconque, je dois l'exécuter deux fois pour obtenir le nouveau '$' (que je dois faire avec les autres méthodes aussi), mais cela fonctionne.

Ceci est l'équivalent si votre navigateur n'est pas si moderne:

 fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)}) 

Si vous cherchez à le faire pour un utilisateur, j'ai écrit ceci: http://userscripts.org/scripts/show/123588

Il vous permettra d'inclure jQuery, plus UI et tous les plugins que vous souhaitez. Je l'utilise sur un site qui possède 1.5.1 et aucune interface utilisateur; Ce script me donne 1.7.1 à la place, plus UI, et aucun conflit dans Chrome ou FF. Je n'ai pas testé l'opéra moi-même, mais d'autres m'ont dit qu'il y avait également travaillé pour eux, donc cela devrait être très bien une solution complète d'utilisateurscript cross-browser, si c'est ce que vous devez faire pour cela.

Voici le code alternatif:

 javascript:(function() {var url = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; var n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new Date().getTime());document.body.appendChild(n);})(); 

Qui peut être collé directement dans la console ou créer une nouvelle page de favoris (dans Chrome, cliquez avec le bouton droit de la souris sur la barre de signets , Ajouter la page … ) et collez ce code comme URL.

Pour vérifier si cela a fonctionné, voir ci-dessous.

Avant:

 $() Uncaught TypeError: $ is not a function(…) 

Après:

 $() [] 

Si vous souhaitez utiliser jQuery fréquemment de la console, vous pouvez facilement écrire un utilisateur. D'abord, installez Tampermonkey si vous êtes sur Chrome et Greasemonkey si vous êtes sur Firefox. Écrivez un simple utilisateur avec une fonction d'utilisation comme ceci:

 var scripts = []; function use(libname) { var src; if (scripts.indexOf(libname) == -1) { switch (libname.toLowerCase()) { case "jquery": src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; break; case "angularjs": src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"; break; } } else { console.log("Library already in use."); return; } if (src) { scripts.append(libname); var script = document.createElement("script"); script.src = src; document.body.appendChild(scr); } else { console.log("Invalid Library."); return; } } 

One-Liner intuitif

 document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E')) 

Vous pouvez modifier l'adresse src .
J'ai parlé de ReferenceError: impossible de trouver la variable: jQuery