Сначала откройте Baidu, затем нажмите F12, чтобы открыть его. Если это не элемент консоли, нажмите на элемент консоли, потому что мы хотим управлять им в консоли. Полем
См. Следующий контент:
Хорошо, давайте сначала очистим контент, вы можете щелкнуть правой кнопкой мыши и выбрать меню Clear Console или ввести Clear ().
Далее мы вводим Document.getElementById ('kw1'); и затем нажмите Enter, чтобы увидеть информацию элемента с ID KW1.
Разве это не очень просто? Следующим шагом является использование console.dir для просмотра информации элемента.
Введите console.dir (document.getElementbyId ('kw1')); А потом нажмите Enter и что -то странное выходит.
Вы можете щелкнуть эту вещь, и она расширит и перечислит все методы атрибута. Проще говоря, это метод атрибута DOM этого элемента.
Хорошо, я не буду вдаваться в подробности об этом. Во всяком случае, DIR Метод также является одним из инструментов отладки.
Эти вопросы на самом деле предвещают сегодняшний контент. Мы только что видели, как просмотреть элемент и его методы атрибутов на консоли.
На самом деле, консоль предоставляет нам множество API командной строки. Проще говоря, это функция, которую может использовать только консоль.
В настоящее время методы и свойства консоли: (Chrome 34)
Кода -копия выглядит следующим образом:
["$$", "$ x", "Dir", "Dirxml", "Keys", "Values", "Profile", "Proflend", "Monitorevents", «Unmonitorevents», «Просмотр», «Копия», «Clear», «geteventListeners», «Undebug», «Монитор», «Unmonitor», «$» «$», «$», «$», «$», «$», «$», «$ 1», «$». "3 доллара", "$ 4", "$ _"]
PS: Что касается того, чтобы просмотреть эти вещи, я расскажу о них позже. Я боюсь, что вы не поймете их на данный момент.
Вы также можете обратиться к «Console Object #3. API командной строки», чтобы увидеть некоторые из его использования.
То, что мы часто используем, это $, $ _, $ 0-4, DIR, ключи, значения. Если вы заинтересованы или хотите учиться в глубине, пожалуйста, прочитайте материалы самостоятельно.
Кода -копия выглядит следующим образом:
$ // Просто поймите, что это Document.queryselector.
$$ // просто поймите, что это Document.queryselectorallall.
$ _// является значением предыдущего выражения и объекта консоли № 3. API командной строки объясняется.
$ 0- 4 $ // является элементом DOM, выбранным на последних 5 панелях элементов, и будет обсуждаться позже.
dir // это на самом деле console.dir
Ключи // Возьмите имя ключа объекта, верните массив, состоящий из имен ключей
Значения // Удалить значение объекта и вернуть массив значений
Хорошо, из объяснения действительно нетрудно понять, но это не было сделано раньше, и никто не знает, что произойдет.
Черт возьми, он на самом деле загружал jQuery 1.10.2. Первоначально, окружающая среда Байду чиста, и более уместно говорить об этом, но оказалось дураком. Полем
Давайте перейдем к Сосо, чтобы объяснить. Полем Откройте http://www.soso.com/, а затем откройте консоль.
Теперь мы используем $ для просмотра элемента с помощью идентификационного запроса (например, элемент KW1 в Baidu), а затем проверяем метод атрибута элемента.
Та же функция, что и раньше, но код теперь очень прост. Используя три консольные свойства и методы $, dir, $ _, мгновенно облегчает отладку?
Некоторые люди могут сказать, что в настоящее время обычно используется jQuery, что мне делать, если я хочу проверить это?
Вернем в Байду, давайте сделаем операцию только сейчас.
Он немного отличается от того, что только сейчас, потому что шаг $ ('#KW1') получает объект jQuery, поэтому метод атрибута jQuery, с которым мы также приходят.
Если вы хотите увидеть метод атрибута реального элемента, добавьте [0]
Конечно, если вы просто хотите увидеть объект jQuery, то нет никаких проблем. Полем Что касается отладки, конечно, вы должны попробовать при корректировке. Полем
На самом деле, есть еще один очень простой метод, который должен щелкнуть значок увеличительного стекла в верхнем левом углу и выбрать поле ввода.
Таким образом, мы можем напрямую использовать $ 0, чтобы просмотреть его. Мы представили 0-4 доллара. Это функция, это просто.
Давайте кратко поговорим о ключах и ценностях, которые будут использоваться позже. Полем Но некоторым людям все еще нравится просматривать это напрямую.
Кода -копия выглядит следующим образом:
var obj = {name: 'nima', возраст: 22, desc: 'ilk one'};
Я считаю, что вы можете понять это с первого взгляда и понять это с первого взгляда.
Хорошо, сегодняшний контент почти все это. Конечно, я должен попробовать это сам, иначе я не смогу по -настоящему изучить эти знания. Полем
Если мы сможем просто прочитать это, мы все будем лучшими бомбардирами на вступительном экзамене в колледже, верно?
Наконец, позвольте мне рассказать вам небольшую трюк, которая заключается в том, чтобы использовать команды, которые я вводил раньше, вам не нужно повторно входить. Вы можете искать вверх и вниз через клавиши со стрелками ↑ и ↓. Эта функция похожа на CMD и очень удобна. Полем
Упражнения после класса: (теперь нажмите F12 напрямую, чтобы открыть консоль)
1. Проверьте исходный код функции, рекомендованный этой функцией ниже статьи (конечно, вы можете нажать на рекомендацию, я не остановил вас. O (∩_∩) o)
2. Положение в местоположении файла, где находится функция. (Кульминация идет)
3. Измените функцию, чтобы аннулировать ее. (На самом деле, это просто глобальная модификация и отладка.)
Наконец, если то, что сказано, неправильно, или не может понять, или прогресс не может не отставать и т. Д., Пожалуйста, отправьте и жаловайтесь.
Кроме того, если вы хотите, чтобы я что-то добавил или отлаживает какие-либо реальные проекты или плагины, вы также можете опубликовать это. Конечно, если это очень хлопотный проект, я не могу написать статью, чтобы представить ее. Я не статья. Полем Полем