Проверьте этот jsfiddle и посмотрите на консоль. $$ не определен. Теперь откройте полностью новое окно и введите $$ в консоль. Он определяет функцию для получения (jquery-like) массива всех элементов dom, которые соответствуют селектору:
> $$
bound: function () {
return document.querySelectorAll.apply(document, arguments)
}
Является ли это добавлением инструментов Dev? Он также присутствует при использовании Firebug в Firefox. Используется ли он внутренне самими инструментами?
Ну, Firebug Lite определяет это как:
this.$$=function(selector,doc){if(doc||!FBL.Firebug.chrome){return FBL.Firebug.Selector(selector,doc)
Полная версия Firebug определяет это как
this.$$ = function(selector)
{
return FBL.getElementsBySelector(baseWindow.document, selector);
};
Фактически документировано, и да, он также используется внутри.
Поэтому я предполагаю, что Google Chrome делает что-то подобное.
Во-первых, все ответы ziesemer верны.
Существует ряд функций, доступных в различных консолях браузера devtools. В совокупности методы известны как API командной строки, и все они происходят из Firebug. В настоящее время у нас есть только четность в браузерах, потому что Firebug сделал все (в основном) правильно.
Но назад, когда Firebug создавался (2006), JavaScript-библиотека, которая была в ярости, была Prototype.js. $ был схвачен прототипом для синтаксического сахара getElementById(), поскольку это, безусловно, самый быстрый способ захвата элементов и наиболее распространенная техника сбора элементов в то время. Это была такая временная пауза, люди использовали всю библиотеку только за $sugar.
В начале 2006 года jQuery затем дебютировал и использовал $() для выбора любого элемента на основе селектора css. Поскольку мой старый пост-график движка CSS-селектора показывает, Prototype затем выполнил через четыре дня со своими, но как $ уже были взяты в их библиотеке, они просто пошли в $$(), который теперь известен как функция bling-bling.
Итак, Firebug использовал API-интерфейс Prototype, так как он все еще управлял roost в 2006 году. Теперь, в дни jQuery и post-jQuery aliasing вроде window.$ = document.querySelectorAll.bind(document), мы видим это как совершенно назад. Интересно, что, когда Opera революционизировала Dragonfly, свои инструменты для браузера, они выбрали $ в качестве своего псевдонима querySelectorAll, чтобы лучше соответствовать сегодняшним практикам, что ИМО делает немного более разумным.
Теперь вы спросили об "источнике" $$ в DevTools, и я объяснил историю. Упс! Что касается того, почему он доступен в вашей консоли... все методы API командной строки доступны только в контексте вашей консоли, так же, как удобство методы.
copy() является одним из моих любимых; Я расскажу об этом и других в этом видео JavaScript Console для Power Users.
Посмотрите эту ссылку https://developer.chrome.com/devtools/docs/commandline-api#selector_1.
"API командной строки представляет собой набор функций для выполнения общих задач с помощью инструментов разработчика Chrome. К ним относятся удобные функции для выбора и проверки элементов в DOM, остановки и запуска профилировщика и мониторинга событий DOM".
Он описывает селектор $$ следующим образом:
$$ (селектор)
Возвращает массив элементов, соответствующих указанному CSS-селектору. Эта команда эквивалентна вызову document.querySelectorAll().
Следующий пример использует $$() для создания массива всех <img> элементов в текущем документе и отображает значение свойства каждого элемента src.
var images = $$('img');
for (each in images) {
images[each].src;
}