JQuery'yi kullanmayan siteler için Chrome JavaScript konsoluna eklemenin kolay bir yolu var mı? Örneğin, bir web sitesinde bir tablodaki satır sayısını almak istiyorum. Bunun jQuery ile gerçekten kolay olduğunu biliyorum.

$('element').length;

Site jQuery kullanmaz. Komut satırından ekleyebilir miyim?

Bunu tarayıcınızın JavaScript konsolunda çalıştırın, ardından jQuery kullanılabilir olmalıdır ...

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

NOT: Sitede jQuery (diğer kütüphaneler, vb.) İle çakışan komut dosyaları varsa, yine de sorun yaşayabilirsiniz.

Güncelleme:

En iyisini daha iyi hale getirmek, bir Yer İşareti oluşturmak gerçekten kullanışlı hale getirir, hadi yapalım ve küçük bir geri bildirim de harika:

1. Yer İşaretleri Çubuğu'nu sağ tıklayın ve Sayfa Ekle'yi tıklayın
2. İstediğiniz gibi adlandırın, örneğin jQuery enjekte edin ve URL için aşağıdaki satırı kullanın:

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

Biçimlendirilmiş kod aşağıdadır:

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

Burada resmi jQuery CDN URL'si kullanılır, kendi CDN / sürümünüzü kullanmaktan çekinmeyin.

Bunu konsolunuzda çalıştırın

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

Yeni bir komut dosyası etiketi oluşturur, jQuery ile doldurur ve başa ekler.

Her şeyi kopyalayın:
https://code.jquery.com/jquery-3.4.1.min.js

Ve konsola yapıştırın. Mükemmel çalışıyor.

JQueryify kitapçığını kullanın:

http://marklets.com/jQuerify.aspx

Kodu diğer yanıtlara kopyalamak yerine, bu tıklanabilir bir yer işareti yapar.

@ Jondavidjohn cevabına ek olarak, javascript kodu olarak URL ile bir yer imi olarak da ayarlayabiliriz.

Ad: Jquery ekle

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

ardından Chrome veya Firefox araç çubuğuna ekleyin, böylece betiği tekrar tekrar yapıştırmak yerine yer işaretini tıklayabiliriz.

Ben bir asiyim.

Çözüm: jQuery kullanmayın. jQuery, tarayıcılar arasındaki DOM tutarsızlıklarını özetleyen bir kütüphanedir. Kendi konsolunuzda olduğunuz için bu tür bir soyutlamaya ihtiyacınız yok.

Örneğiniz için:

$$('element').length

( $$bir takma addır)document.querySelectorAll konsoldaki addır.)

Başka bir örnek için: Eminim bir şey bulabilirim. Özellikle modern bir tarayıcı kullanıyorsanız (Chrome, FF, Safari, Opera).

Ayrıca, DOM'un nasıl çalıştığını kimseye zarar vermeyeceğini bilmek, sadece jQuery seviyenizi artıracaktır (evet, javascript hakkında daha fazla bilgi edinmek sizi jQuery'de daha iyi hale getirir).

Ben sadece hata işleme ile bir jQuery 3.2.1 yer işareti yaptım (sadece yüklü değilse yükle, zaten yüklenmişse sürümü tespit et, yükleme sırasında hata varsa hata mesajı). Chrome 27'de test edilmiştir. JQuery 2.0, 1.9 ile API uyumlu olduğundan, Chrome tarayıcısında "eski" jQuery 1.9.1 kullanmak için bir neden yoktur .

Chrome'un geliştirici konsolunda aşağıdakileri çalıştırın veya yer işareti çubuğunuza sürükleyip bırakın :

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

Okunabilir kaynak kodu burada mevcuttur

En iyi cevap, jondavidjohn tarafından iyi ama birkaç noktaya değinmek için ince ayar yapmak istiyorum:

• Çeşitli tarayıcılar http, sayfasından bir komut dosyasına bir komut dosyası yüklerken uyarı veriyorhttps .
• Sadece değişen jquery.comiçin 'ın protokolühttps düz tarayıcınızın URL çubuğundan denemek eğer bir uyarı sonuçları:This is probably not the site you are looking for!
• Gmail gibi Google sitelerini denemek için konsolu kullanırken Google'ın CDN'sini kullanmayı seviyorum.

Tek sorunum, konsolda her zaman en son istediğim bir sürüm numarası eklemem gerektiğidir.

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

Başına bu cevap :

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

Nedense yeni '$' (diğer yöntemlerle de yapmak zorunda) almak için iki kez yürütmek zorunda, ama işe yarıyor.

Tarayıcınız çok modern değilse bu eşdeğerdir:

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

Diğer cevapların açıkladığı gibi, bunu manuel olarak yapmak oldukça kolaydır. Ancak jQuerify eklentisi de var .

FWIW, Firebug includeözel komutu yerleştirir ve jquery varsayılan olarak diğer addır: https://getfirebug.com/wiki/index.php/Include

Yani sizin durumunuzda, şunu yazmanız yeterlidir:

include("jquery");

Florent

@genesis cevabına dayalı bu cevap, ilk başta @jondavidjohn yer imi sürümünü denedim ve çalışmıyor, bu yüzden bunu değiştiriyorum (yer iminize ekleyin):

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

Dikkatli olun, kromda test edilmez, firefox'ta çalışır ve çakışma ortamında test edilmez.

En kısa yollardan biri, aşağıdaki kodu konsola kopyalamaktır.

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

Bunu bir kullanıcı metni için yapmak istiyorsanız, şunu yazdım: http://userscripts.org/scripts/show/123588

JQuery, artı kullanıcı arayüzü ve istediğiniz eklentileri eklemenize izin verir. 1.5.1 ve kullanıcı arayüzü olmayan bir sitede kullanıyorum; bu komut dosyası bana 1.7.1 artı UI sağlıyor ve Chrome veya FF'de çakışma yok. Opera'yı kendim test etmedim, ancak diğerleri bana onlar için de orada çalıştığını söylediler, bu yüzden bunun için yapmanız gereken buysa, tam bir çapraz tarayıcı kullanıcı metni çözümü olmalı.

Alternatif kod:

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

Konsolu ya doğrudan yapıştırılan veya yeni Sayfaya yer yaratmak mümkündür, (sağ tıklayıp Chrome'da İmi Bar , Sayfa Ekle ... ) ve URL olarak bu kodu yapıştırın.

Bunun işe yarayıp yaramadığını test etmek için aşağıya bakın.

Önce:

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

Sonra:

$()
[]

Konsoldan jQuery'yi sık sık kullanmak istiyorsanız, kolayca bir kullanıcı metni yazabilirsiniz. İlk olarak, Chrome'daysanız Tampermonkey'i ve Firefox'taysanız Greasemonkey'i yükleyin. Bunun gibi bir kullanım işleviyle basit bir kullanıcı metni yazın:

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

Anahtar teslim çözüm:

Kodunuzu yourCode_hereçalışır duruma getirin. HEAD etiketi olmadan HTML'yi önleyin.

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

Modern tarayıcılar (Chrome, Firefox, Safari'de test edilmiştir) jQuery'ye$ çok benzeyen dolar işaretini kullanarak bazı yardımcı işlevler uygular (web sitesi kullanarak bir şey tanımlamazsa window.$).

Bu yardımcı programlar DOM'deki öğeleri seçmek ve değiştirmek için oldukça kullanışlıdır.

Dokümanlar: Chrome , Firefox

sezgisel bir astar

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

srcAdresi değiştirebilirsiniz .
Ben anılacaktır ReferenceError: değişken bulunamıyor: jQuery