มีวิธีง่าย ๆ ในการรวม jQuery ในคอนโซล Chrome JavaScript สำหรับไซต์ที่ไม่ได้ใช้หรือไม่ ตัวอย่างเช่นในเว็บไซต์ฉันต้องการรับจำนวนแถวในตาราง ฉันรู้ว่านี่เป็นเรื่องง่ายด้วย jQuery

$('element').length;

เว็บไซต์ไม่ได้ใช้ jQuery ฉันสามารถเพิ่มมันจากบรรทัดคำสั่งได้หรือไม่

เรียกใช้สิ่งนี้ในคอนโซล JavaScript ของเบราว์เซอร์ของคุณจากนั้น jQuery ควรจะพร้อมใช้งาน ...

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

หมายเหตุ:หากไซต์นั้นมีสคริปต์ที่ขัดแย้งกับ jQuery (libs อื่น ๆ ฯลฯ ) คุณยังอาจพบปัญหา

ปรับปรุง:

การทำให้ดีที่สุดให้ดีขึ้นการสร้างที่คั่นหนังสือทำให้สะดวกมาก ๆ ลองทำกันและข้อเสนอแนะเล็ก ๆ น้อย ๆ ก็ยอดเยี่ยมเช่นกัน:

1. คลิกขวาที่แถบบุ๊กมาร์กแล้วคลิกเพิ่มหน้า
2. ตั้งชื่อตามที่คุณต้องการเช่น Inject jQuery และใช้บรรทัดต่อไปนี้สำหรับ URL:

javascript: (ฟังก์ชั่น (e, s) {e.src = s; e.onload = ฟังก์ชั่น () {jQuery.noConflict (); console.log ('jQuery ฉีด')}; document.head.appendChild (e); }) (document.createElement ( 'สคริปต์') '// code.jquery.com/jquery-latest.min.js')

ด้านล่างเป็นรหัสที่จัดรูปแบบ:

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

ที่นี่ใช้ jQuery CDN URL อย่างเป็นทางการอย่าลังเลที่จะใช้ CDN / เวอร์ชั่นของคุณเอง

รันสิ่งนี้ในคอนโซลของคุณ

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

มันสร้างแท็กสคริปต์ใหม่เติมด้วย jQuery และผนวกเข้ากับส่วนหัว

คัดลอกทุกอย่างจาก:
https://code.jquery.com/jquery-3.4.1.min.js

และวางลงในคอนโซล ทำงานได้อย่างสมบูรณ์แบบ

ใช้หนังสือเล่มเล็ก jQueryify:

http://marklets.com/jQuerify.aspx

แทนที่จะคัดลอกการวางโค้ดในคำตอบอื่น ๆ สิ่งนี้จะทำให้เป็นบุ๊กมาร์กที่คลิกได้

การเพิ่มคำตอบของ @ jondavidjohn เราสามารถตั้งเป็นบุ๊คมาร์คที่มี URL เป็นรหัสจาวาสคริปต์

ชื่อ:รวม 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);

จากนั้นเพิ่มลงในแถบเครื่องมือของ Chrome หรือ Firefox เพื่อแทนที่จะวางสคริปต์ซ้ำแล้วซ้ำอีกเราสามารถคลิกที่ bookmarklet

ฉันเป็นกบฏ

วิธีแก้ปัญหา: อย่าใช้ jQuery jQuery เป็นไลบรารี่ที่สร้างความไม่สะดวกให้กับ DOM ในเบราว์เซอร์ เนื่องจากคุณอยู่ในคอนโซลของคุณเองคุณไม่จำเป็นต้องมีสิ่งที่เป็นนามธรรม

สำหรับตัวอย่างของคุณ:

$$('element').length

( $$เป็นชื่อแทนdocument.querySelectorAllในคอนโซล)

สำหรับตัวอย่างอื่น: ฉันแน่ใจว่าฉันสามารถหาอะไรได้ โดยเฉพาะอย่างยิ่งถ้าคุณกำลังใช้เบราว์เซอร์ที่ทันสมัย ​​(Chrome, FF, Safari, Opera)

นอกจากนี้การรู้ว่า DOM ทำงานอย่างไรจะไม่ทำร้ายใครมันจะเพิ่มระดับ jQuery ของคุณเท่านั้น (ใช่การเรียนรู้เพิ่มเติมเกี่ยวกับ javascript จะทำให้ jQuery ดีขึ้น)

ฉันเพิ่งทำ jQuery 3.2.1 bookmarklet พร้อมการจัดการข้อผิดพลาด (โหลดเฉพาะหากยังไม่ได้โหลดตรวจสอบรุ่นหากโหลดแล้วข้อความแสดงข้อผิดพลาดหากเกิดข้อผิดพลาดขณะโหลด) ผ่านการทดสอบใน Chrome 27. มีเหตุผลที่จะใช้ "เก่า" jQuery 1.9.1 บนเบราว์เซอร์ Chrome ตั้งแต่ไม่เป็นjQuery 2.0 API ที่เข้ากันได้กับ 1.9

เพียงเรียกใช้สิ่งต่อไปนี้ในคอนโซลนักพัฒนาซอฟต์แวร์ของ Chrome หรือลากและวางในแถบบุ๊คมาร์คของคุณ :

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

ซอร์สโค้ดที่สามารถอ่านได้มีอยู่ที่นี่

คำตอบด้านบนโดย jondavidjohnเป็นสิ่งที่ดี แต่ฉันต้องการที่จะปรับแต่งให้อยู่คู่ของจุด:

• เบราว์เซอร์ต่างๆออกคำเตือนเมื่อโหลดสคริปต์จากไปยังหน้าhttphttps
• เพียงแค่เปลี่ยนjquery.comโปรโตคอลของhttpsผลลัพธ์การเตือนถ้าคุณลองตรงจากแถบ URL ของเบราว์เซอร์:This is probably not the site you are looking for!
• ฉันชอบใช้ CDN ของ Google เมื่อฉันใช้คอนโซลเพื่อทดลองกับเว็บไซต์ Google เช่น Gmail

ปัญหาเดียวของฉันคือฉันต้องรวมหมายเลขรุ่นที่อยู่ในคอนโซลฉันต้องการล่าสุดเสมอ

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

ตามคำตอบนี้ :

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

ด้วยเหตุผลบางอย่างฉันต้องดำเนินการสองครั้งเพื่อรับ '$' ใหม่ (ซึ่งฉันต้องทำด้วยวิธีอื่นเช่นกัน) แต่ก็ใช้งานได้

นี่เทียบเท่าถ้าเบราว์เซอร์ของคุณไม่ทันสมัย:

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

มันค่อนข้างง่ายที่จะทำด้วยตนเองเช่นเดียวกับคำตอบอื่น ๆ ที่อธิบาย แต่นอกจากนี้ยังมีjQuerify Plug-in

FWIW, Firebug ฝังincludeคำสั่งพิเศษและ jQuery นั้นใช้นามแฝงเป็นค่าเริ่มต้น: https://getfirebug.com/wiki/index.php/Include

ดังนั้นในกรณีของคุณคุณต้องพิมพ์:

include("jquery");

Florent

คำตอบนี้ตามคำตอบ @ Genesis ตอนแรกฉันลองใช้บุ๊กมาร์กเวอร์ชั่น @jondavidjohn และมันใช้งานไม่ได้ดังนั้นฉันจึงเปลี่ยนเป็นส่วนนี้ (เพิ่มลงในบุ๊คมาร์คของคุณ):

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

คำเตือนไม่ถูกทดสอบใน chrome แต่ทำงานใน firefox และไม่ได้ทดสอบในสภาพแวดล้อมที่มีข้อขัดแย้ง

หนึ่งในวิธีที่สั้นที่สุดคือเพียงคัดลอกการวางโค้ดด้านล่างลงในคอนโซล

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

หากคุณต้องการทำสิ่งนี้กับ userscript ฉันเขียนสิ่งนี้: http://userscripts.org/scripts/show/123588

มันจะให้คุณใส่ jQuery รวมถึง UI และปลั๊กอินที่คุณต้องการ ฉันใช้มันในเว็บไซต์ที่มี 1.5.1 และไม่มี UI สคริปต์นี้ให้ฉัน 1.7.1 แทนบวก UI และไม่มีความขัดแย้งใน Chrome หรือ FF ฉันไม่ได้ทดสอบ Opera ด้วยตัวเอง แต่คนอื่นบอกฉันว่ามันทำงานได้ดีเหมือนกันดังนั้นสิ่งนี้น่าจะเป็นโซลูชั่นผู้ใช้ข้ามเบราว์เซอร์ที่สมบูรณ์ถ้าคุณต้องการทำสิ่งนี้

นี่คือรหัสทางเลือก:

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

ซึ่งสามารถวางโดยตรงในคอนโซลหรือสร้างหน้าบุ๊กมาร์กใหม่ (ใน Chrome คลิกขวาบนแถบบุ๊กมาร์กเพิ่มหน้า ... ) และวางรหัสนี้เป็น URL

หากต้องการทดสอบว่าใช้งานได้หรือไม่โปรดดูด้านล่าง

ก่อน:

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

หลังจาก:

$()
[]

หากคุณต้องการใช้ jQuery บ่อยๆจากคอนโซลคุณสามารถเขียน userscript ได้อย่างง่ายดาย ก่อนอื่นให้ติดตั้ง Tampermonkey หากคุณใช้ Chrome และ Greasemonkey หากคุณใช้ Firefox เขียน userscript อย่างง่ายพร้อมฟังก์ชั่นการใช้งานเช่นนี้:

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

โซลูชั่นแบบครบวงจร:

ใส่รหัสของคุณในyourCode_hereฟังก์ชั่น และป้องกัน HTML ที่ไม่มีแท็ก 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>");
}

เบราว์เซอร์สมัยใหม่ (ทดสอบกับ Chrome, Firefox, Safari) ใช้ฟังก์ชั่นตัวช่วยโดยใช้เครื่องหมายดอลลาร์$ที่คล้ายกับ jQuery (หากเว็บไซต์ไม่ได้กำหนดสิ่งที่ใช้window.$)

ยูทิลิตี้เหล่านั้นค่อนข้างมีประโยชน์สำหรับการเลือกองค์ประกอบใน DOM และแก้ไข

เอกสาร: Chrome , Firefox

ใช้งานง่ายหนึ่งซับ

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

คุณสามารถเปลี่ยนที่srcอยู่
ฉันอ้างถึงReferenceError: ไม่พบตัวแปร: jQuery