Apakah ada cara mudah untuk memasukkan jQuery di konsol JavaScript Chrome untuk situs yang tidak menggunakannya? Misalnya, di situs web saya ingin mendapatkan jumlah baris dalam sebuah tabel. Saya tahu ini sangat mudah dengan jQuery.

$('element').length;

Situs ini tidak menggunakan jQuery. Bisakah saya menambahkannya dari baris perintah?

Jalankan ini di konsol JavaScript browser Anda, maka jQuery harus tersedia ...

var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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();

CATATAN: jika situs memiliki skrip yang bertentangan dengan jQuery (libs lain, dll.) Anda masih dapat mengalami masalah.

Memperbarui:

Membuat yang terbaik, membuat Bookmark membuatnya sangat nyaman, mari kita lakukan, dan sedikit umpan balik juga bagus:

1. Klik kanan Bilah Bookmark, dan klik Tambah Halaman
2. Beri nama sesuai keinginan Anda, mis. Suntikkan jQuery, dan gunakan baris berikut untuk URL:

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

Di bawah ini adalah kode yang diformat:

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

Di sini URL CDN jQuery resmi digunakan, jangan ragu untuk menggunakan CDN / versi Anda sendiri.

Jalankan ini di konsol Anda

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Itu membuat tag skrip baru, mengisinya dengan jQuery dan menambahkan ke kepala.

Salin semuanya dari:
https://code.jquery.com/jquery-3.4.1.min.js

Dan rekatkan ke konsol. Bekerja dengan sempurna.

Gunakan buklet jQueryify:

http://marklets.com/jQuerify.aspx

Alih-alih menyalin kode di jawaban lain, ini akan membuatnya menjadi bookmark yang dapat diklik.

Menambahkan ke jawaban @ jondavidjohn, kita juga dapat mengaturnya sebagai bookmark dengan URL sebagai kode javascript.

Nama: Sertakan 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);

dan kemudian menambahkannya ke bilah alat Chrome atau Firefox sehingga alih-alih menempelkan skrip berulang-ulang, kita cukup mengklik bookmarklet.

Saya seorang pemberontak.

Solusi: jangan gunakan jQuery. jQuery adalah pustaka untuk abstrak inkonsistensi DOM di seluruh browser. Karena Anda berada di konsol Anda sendiri, Anda tidak perlu abstraksi semacam ini.

Sebagai contoh Anda:

$$('element').length

( $$adalah alias untuk document.querySelectorAlldi konsol.)

Untuk contoh lain: Saya yakin saya dapat menemukan apa pun. Terutama jika Anda menggunakan browser modern (Chrome, FF, Safari, Opera).

Selain itu, mengetahui cara kerja DOM tidak akan menyakiti siapa pun, itu hanya akan meningkatkan level jQuery Anda (ya, mempelajari lebih lanjut tentang javascript membuat Anda lebih baik di jQuery).

Saya baru saja membuat bookmarklet jQuery 3.2.1 dengan penanganan kesalahan (hanya memuat jika belum dimuat, mendeteksi versi jika sudah dimuat, pesan kesalahan jika kesalahan saat memuat). Diuji di Chrome 27. Tidak ada alasan untuk menggunakan jQuery 1.9.1 "lama" di browser Chrome karena jQuery 2.0 kompatibel dengan API .

Jalankan saja yang berikut di konsol pengembang Chrome atau seret & letakkan di bilah bookmark Anda :

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...")}}})())

Kode sumber yang dapat dibaca tersedia di sini

The top jawaban, oleh jondavidjohn baik tetapi saya ingin men-tweak itu untuk mengatasi beberapa poin:

• Berbagai browser mengeluarkan peringatan saat memuat skrip dari httpke halaman https.
• Hanya mengubah jquery.comprotokol untuk httpsmenghasilkan peringatan jika Anda mencobanya langsung dari bilah URL browser:This is probably not the site you are looking for!
• Saya suka menggunakan CDN Google ketika saya menggunakan konsol untuk bereksperimen dengan situs-situs Google seperti Gmail.

Satu-satunya masalah saya adalah bahwa saya harus memasukkan nomor versi di mana di konsol saya selalu ingin yang terbaru.

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

Per jawaban ini :

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

Untuk beberapa alasan saya harus menjalankannya dua kali untuk mendapatkan '$' yang baru (yang harus saya lakukan dengan metode lain juga), tetapi itu berhasil.

Ini setara jika browser Anda tidak terlalu modern:

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

Cukup mudah untuk melakukan ini secara manual, seperti yang dijelaskan oleh jawaban lainnya. Tetapi ada juga plug-in jQuerify .

FWIW, Firebug menyematkan includeperintah khusus, dan jquery secara default alias: https://getfirebug.com/wiki/index.php/Include

Jadi dalam kasus Anda, Anda hanya perlu mengetik:

include("jquery");

Florent

jawaban ini berdasarkan jawaban @ genesis, pada awalnya saya mencoba versi bookmark @ jondavidjohn, dan tidak berfungsi, jadi saya mengubahnya ke ini (tambahkan ke bookmark Anda):

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

kata hati-hati, tidak diuji dalam chrome tetapi bekerja di firefox, dan tidak diuji dalam lingkungan konflik.

Salah satu cara terpendek adalah menyalin kode yang disisipkan di bawah ini ke konsol.

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

Jika Anda ingin melakukan ini untuk skrip pengguna, saya menulis ini: http://userscripts.org/scripts/show/123588

Ini akan memungkinkan Anda memasukkan jQuery, plus UI dan plugin apa pun yang Anda inginkan. Saya menggunakannya di situs yang memiliki 1.5.1 dan tidak ada UI; skrip ini memberi saya 1.7.1 sebagai gantinya, ditambah UI, dan tidak ada konflik di Chrome atau FF. Saya sendiri belum menguji Opera, tetapi orang lain mengatakan kepada saya bahwa Opera juga berfungsi di sana untuk mereka, jadi ini seharusnya solusi yang cukup lengkap untuk pengguna lintas-browser, jika itu yang perlu Anda lakukan untuk ini.

Berikut ini adalah kode 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);})();

yang dapat ditempelkan secara langsung di Konsol atau buat halaman Bookmark baru (di Chrome klik kanan pada Bookmark Bar , Add Page ... ) dan rekatkan kode ini sebagai URL.

Untuk menguji apakah itu berhasil, lihat di bawah.

Sebelum:

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

Setelah:

$()
[]

Jika Anda ingin sering menggunakan jQuery dari konsol, Anda dapat dengan mudah menulis naskah pengguna. Pertama, instal Tampermonkey jika Anda menggunakan Chrome dan Greasemonkey jika Anda menggunakan Firefox. Tulis skrip pengguna sederhana dengan fungsi penggunaan seperti ini:

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

Solusi turnkey:

Masukkan kode Anda dalam yourCode_herefungsi. Dan cegah HTML tanpa tag HEAD.

(function(head) {
  var jq = document.createElement('script');
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
  ((head && head[0]) || document.firstChild).appendChild(jq);
})(document.getElementsByTagName('head'));

function jQueryReady() {
  if (window.jQuery) {
    jQuery.noConflict();
    yourCode_here(jQuery);
  } else {
    setTimeout(jQueryReady, 100);
  }
}

jQueryReady();

function yourCode_here($) {
  console.log("OK");
  $("body").html("<h1>Hello world !</h1>");
}

Browser modern (diuji pada Chrome, Firefox, Safari) menerapkan beberapa fungsi pembantu menggunakan tanda dolar $yang sangat mirip dengan jQuery (jika situs web tidak mendefinisikan sesuatu menggunakan window.$).

Utilitas tersebut cukup berguna untuk memilih elemen di DOM dan memodifikasinya.

Documents: Chrome , Firefox

intuitif satu-liner

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

Anda dapat mengubah srcalamatnya.
Saya merujuk pada ReferenceError: Tidak dapat menemukan variabel: jQuery