Primero abra Baidu, luego presione F12 para abrirlo. Si no es el elemento de la consola, haga clic en el elemento de la consola porque queremos operarlo en la consola. .
Ver el siguiente contenido:
Bien, primero borremos el contenido, puede hacer clic derecho y seleccionar el menú Borrar consola o ingresar Clear ().
A continuación, ingresamos document.getElementById ('kw1'); y luego presione ENTER para ver la información del elemento con ID KW1.
¿No es muy simple? El siguiente paso es usar console.dir para ver la información del elemento.
Ingrese console.dir (document.getElementById ('kw1')); Y luego presione Entrar y salga algo extraño.
Puede hacer clic en esto, y se expandirá y enumerará todos los métodos de atributos. En pocas palabras, es el método de atributo DOM de este elemento.
Ok, no entraré en detalles sobre esto. De todos modos, el método Dir también es una de las herramientas de depuración.
Estas preguntas son en realidad un presagio del contenido de hoy. Acabamos de ver cómo ver un elemento y sus métodos de atributo en la consola.
De hecho, la consola nos proporciona muchas API de línea de comandos. En pocas palabras, es una función que solo la consola puede usar.
Actualmente, los métodos y propiedades de la consola son: (Chrome 34)
La copia del código es la siguiente:
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$ 3", "$ 4", "$ _"]
PD: En cuanto a cómo ver estas cosas, hablaré de ellas más tarde. Me temo que no los entenderás por el momento.
También puede consultar "Console Object #3. API de línea de comandos" para ver algunos de sus usos.
Lo que a menudo usamos es $, $ _, $ 0- $ 4, dir, claves, valores. Si está interesado o desea aprender en profundidad, lea los materiales usted mismo.
La copia del código es la siguiente:
$ // Simplemente comprenda que es document.Queryselector.
$$ // Simplemente comprenda que es document.Queryselectorall.
$ _ // es el valor de la expresión anterior y el objeto de consola #3. Se explica la API de la línea de comandos.
$ 0- $ 4 // es el elemento DOM seleccionado en los últimos 5 paneles de elementos, y se discutirá más adelante.
dir // en realidad es consola.dir
claves // Tome el nombre clave del objeto, devuelva una matriz compuesta por nombres de claves
valores // Eliminar el valor del objeto y devolver una matriz de valores
Ok, de hecho no es difícil de entender por la explicación, pero no se ha hecho antes, y nadie sabe lo que sucederá.
Maldita sea Baidu, en realidad cargó jQuery 1.10.2. Originalmente, el entorno de Baidu es limpio y es más apropiado hablar de esto, pero resultó ser un tonto. .
Cambiemos a Soso para explicar. . Abra http://www.soso.com/ y luego abra la consola.
Ahora usamos $ para ver el elemento con la consulta de ID (como el elemento KW1 en Baidu) y luego verificar el método de atributo del elemento.
La misma función que antes, pero el código ahora es muy simple. Usando las tres propiedades y métodos de la consola de $, Dir, $ _, ¿facilita la depuración al instante?
Algunas personas pueden decir que hoy en día, JQuery generalmente se usa, ¿qué debo hacer si quiero verificar esto?
De vuelta a Baidu, hagamos la operación justo ahora.
Es un poco diferente al de ahora, porque el paso $ ('#kw1') obtiene un objeto jQuery, por lo que el método de atributo jQuery que también viene.
Si desea ver el método de atributo del elemento real, agregue un [0]
Por supuesto, si solo quieres ver el objeto jQuery, entonces no hay problema. . En cuanto a la depuración, por supuesto que debes probarlo mientras te adaptas. .
De hecho, hay otro método muy simple, que es hacer clic en el icono de lupa en la esquina superior izquierda y seleccionar el cuadro de entrada.
De esta manera, podemos usar directamente $ 0 para verlo. Hemos introducido $ 0- $ 4 en este momento. Esta es la función, es simple.
Hablemos brevemente sobre claves y valores, que se utilizarán más adelante. . Pero a algunas personas todavía les gusta verlo directamente.
La copia del código es la siguiente:
var obj = {nombre: 'nima', edad: 22, desc: 'silk one'};
Creo que puedes entenderlo de un vistazo y entenderlo de un vistazo.
Bien, el contenido de hoy es casi todo eso. Por supuesto, tengo que probarlo yo mismo, de lo contrario no podré aprender realmente estos puntos de conocimiento. .
Si podemos leerlo, todos seremos los mejores anotadores en el examen de ingreso a la universidad, ¿verdad?
Finalmente, déjame decirte un pequeño truco, que es usar los comandos que ingresé antes, no necesitas volver a ingresar. Puede buscar hacia arriba y hacia abajo a través de las teclas de flecha ↑ y ↓. Esta función es similar a la CMD y es muy conveniente. .
Ejercicios posteriores a la clase: (ahora presione F12 directamente para abrir la consola)
1. Verifique el código fuente de la función recomendado por esta función debajo del artículo (por supuesto, puede hacer clic en la recomendación, no lo detuve. O (∩_∩) o)
2. Posición a la ubicación del archivo donde se encuentra la función. (Se acerca el clímax)
3. Modifique la función para invalidarla. (De hecho, es solo una simple modificación global y depuración).
Finalmente, si lo que se dice está mal, o no puede entender, o el progreso no puede mantenerse al día, etc., publique y quejes.
Además, si desea que agregue algo o depugte cualquier proyecto o complemento reales, también puede publicarlo. Por supuesto, si es un proyecto muy problemático, no puedo escribir un artículo para presentarlo. No soy un artículo. . .