jQuery를 사용하지 않는 사이트에 대해 Chrome JavaScript 콘솔에 jQuery를 포함시키는 쉬운 방법이 있습니까? 예를 들어, 웹 사이트에서 테이블의 행 수를 가져오고 싶습니다. 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 (다른 라이브러리 등)와 충돌하는 스크립트가있는 경우 여전히 문제가 발생할 수 있습니다.

최신 정보:

더 나은 것을 만들고, 북마크를 만들면 정말 편리하고,해볼 수 있으며, 약간의 피드백도 좋습니다.

1. 북마크 바를 마우스 오른쪽 버튼으로 클릭하고 페이지 추가를 클릭 하십시오.
2. 예를 들어 Inject jQuery와 같이 이름을 지정하고 URL에 다음 줄을 사용하십시오.

javascript :( 함수 (e, s) {e.src = s; e.onload = function () {jQuery.noConflict (); console.log ( 'jQuery injection')}}; document.head.appendChild (e); }) (document.createElement ( 'script'), '// 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의 툴바에 추가하여 스크립트를 계속 붙여 넣는 대신 북마크릿을 클릭하면됩니다.

나는 반역자입니다.

솔루션 : jQuery를 사용하지 마십시오. jQuery는 브라우저에서 DOM 불일치를 추상화하는 라이브러리입니다. 자신의 콘솔에 있기 때문에 이런 종류의 추상화가 필요하지 않습니다.

예를 들어 :

$$('element').length

( $$의 별칭입니다document.querySelectorAll 콘솔에서 입니다.)

다른 예를 들면 : 무엇이든 찾을 수있을 것입니다. 특히 최신 브라우저 (Chrome, FF, Safari, Opera)를 사용하는 경우.

또한 DOM의 작동 방식을 아는 사람도 아프지 않으며 jQuery 수준을 높일뿐입니다 (예, 자바 스크립트에 대해 더 많이 배우면 jQuery를 더 잘 활용할 수 있음).

방금 오류 처리 기능이있는 jQuery 3.2.1 북마크를 만들었습니다 (아직로드되지 않은 경우에만로드, 이미로드 된 경우 버전 감지,로드하는 동안 오류가 발생하면 오류 메시지). Chrome 27에서 테스트되었습니다. jQuery 2.0이 1.9와 API 호환 되므로 Chrome 브라우저에서 "이전"jQuery 1.9.1을 사용할 이유가 없습니다 .

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 의 최고 답변 은 좋지만 몇 가지 사항을 해결하기 위해 조정하고 싶습니다.

• 에서 여러 http페이지 로 스크립트를로드 할 때 다양한 브라우저에서 경고가 표시됩니다 https.
• 브라우저의 URL 표시 줄에서 바로 시도하면 jquery.com의 프로토콜을 변경 https하면 경고가 표시됩니다.This is probably not the site you are looking for!
• 콘솔을 사용하여 Gmail과 같은 Google 사이트를 실험 할 때 Google의 CDN을 사용하고 싶습니다.

내 유일한 문제는 콘솔에서 항상 최신 버전을 원하는 버전 번호를 포함해야한다는 것입니다.

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 플러그인 도 있습니다 .

FWIW, Firebug에는 include특수 명령이 포함되어 있으며 jquery의 기본 별칭은 https://getfirebug.com/wiki/index.php/Include입니다.

따라서 귀하의 경우 다음을 입력하면됩니다.

include("jquery");

플로랑

이 답변은 @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')}());

주의 사항은 크롬에서 테스트되지 않지만 파이어 폭스에서 작동하며 충돌 환경에서는 테스트되지 않은 것입니다.

가장 짧은 방법 중 하나는 아래 코드를 콘솔에 붙여 넣는 것입니다.

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

사용자 스크립트를 위해이 작업을 수행하려는 경우 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);})();

콘솔에서 직접 붙여 넣거나 새로운 북마크 페이지를 만들 수있는합니다 (마우스 오른쪽 버튼으로 클릭 크롬을 즐겨 바 , 페이지 추가 ... ) 및 URL로이 코드를 붙여 넣습니다.

그것이 작동하는지 테스트하려면 아래를 참조하십시오.

전에:

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

후:

$()
[]

콘솔에서 jQuery를 자주 사용하려면 사용자 스크립트를 쉽게 작성할 수 있습니다. 먼저 Chrome을 사용하는 경우 Tampermonkey를 설치하고 Firefox를 사용하는 경우 Greasemonkey를 설치하십시오. 다음과 같이 use 함수를 사용하여 간단한 사용자 스크립트를 작성하십시오.

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작동 시키십시오 . HEAD 태그가없는 HTML을 방지하십시오.

(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