# Los contenidos de Hoy:
1. JavaScript:
1. ECMAScript:
2. lista de materiales:
3. El DOM:
1. Evento
## DOM aprender simple: Con el fin de satisfacer las necesidades de cada caso
* Función: control de los documentos de contenido HTML
* Código: Obtener objetos de página de etiquetas (elementos ) Elemento del objeto
* document.getElementById ("valor de id"): obtenga el objeto del elemento por su id
* Opere el objeto del elemento:
1. Modifique el valor del atributo:
1. Compruebe qué objeto se obtiene?
2. Revisión de la documentación de la API para encontrar qué propiedades de la cual se pueden establecer
2. Modificar el contenido del cuerpo de la etiqueta:
atributos *: innerHtml
1. Obtiene el objeto elemento
2. Utilice la propiedad innerHTML para modificar el contenido del cuerpo de la etiqueta
## incidentes de sencillo aprendizaje
* Función: Algunos componentes Después de realizar ciertas operaciones, se activa la ejecución de ciertos códigos.
* Sentencia: xxx es xxx, soy xxx
* Después de que nuestro cristal fue destruido, culpé a mis compañeros de equipo.
* Después de que el cristal enemigo fuera destruido, me alabé.
* Cómo vincular el evento
1. Especifique el atributo (operación) del evento directamente en la etiqueta html, el valor del atributo es el código js
1. Evento: onclick --- haga clic en el evento
2. Obtenga el objeto elemento a través de js, especifique el atributo del evento, establezca Una función.
Ejemplo: cuerpo>
<img id = "light" src = "img / off.gif" onclick = "fun ();">
<img id = "light2" src = "img / off.gif"
>
función <script> fun () {
alert ("Fui ordenado");
alert ("Fui ordenado nuevamente");
}
function fun2 () {
alert ("咋 老 点 我");
var light2 = document.getElementById ("light2");
// 2. Evento de enlace
light2.onclick = fun2;
</ script>
</ body>
# BOM:
1. Concepto: Navegador Modelo de objetos Navegador Modelo de objetos
* Navegará Los diversos componentes del navegador están encapsulados en objetos del navegador.
2. Composición:
* Ventana: objeto de ventana
1. Crear
2. Método
1. Métodos relacionados con el cuadro emergente:
alert () muestra un cuadro de alerta con un mensaje y un botón de confirmación.
confirm () muestra un cuadro de diálogo con un mensaje y botones de confirmación y cancelación.
* Si el usuario hace clic en el botón confirmar, el método devuelve verdadero
* Si el usuario hace clic en el botón cancelar, el método devuelve falso
prompt () muestra un cuadro de diálogo que proporciona la entrada del usuario.
* Valor de retorno: Obtenga el valor ingresado por el usuario
2. El método relacionado con la apertura:
cerrar () cierra la ventana del navegador.
* Quien me llame, me apagaré.
open () abre una nueva ventana del navegador
* devuelve un nuevo objeto Window
3. El método
setTimeout () relacionado con el temporizador llama a una función o expresión después de un número específico de milisegundos.
* Parámetro:
código 1.js u objeto del método
2. Valor de milisegundos
* Valor de retorno: identificador único, utilizado para cancelar el temporizador
clearTimeout (): cancela el tiempo de espera establecido por el método setTimeout ().
setInterval () llama a una función o expresión en un período especificado (en milisegundos)
clearInterval () cancela el tiempo de espera establecido por setInterval ()
3. Propiedades:
1. Obtener la ubicación del
historial de otros objetos BOM Pantalla del navegador 2. Obtener el documento del objeto DOM 4. Características * Los objetos de ventana se pueden usar directamente sin crear objetos. ventana Nombre del método (); * Se puede omitir la referencia de ventana. Nombre del método (); * Navegador: objeto de navegador * Pantalla: objeto de pantalla de visualización * Historial: objeto de registro de historial Historial: objeto de registro de historial
1. Crear (obtener):
1.window.history
2.history
2. Método:
* back () cargar la URL anterior en la lista de historial
* forward () cargar la siguiente URL en la lista de historial
* go (parámetro)
* parámetro :
* Número positivo: reenviar varios registros históricos
* Número negativo: retroceder varios registros históricos
3. Atributo:
* longitud Devuelve el número de URL en la lista de historial de la ventana actual.
* Ubicación: objeto de la barra de direcciones
1. Crear (adquirir):
1.
ubicación de ventana 2. ubicación
2. Método:
* reload () Recargar el documento actual. Actualizar
3. Propiedades
* href Establece o devuelve la URL completa.
## DOM:
* Concepto: Modelo de objeto de documento Modelo de objeto de documento
* Encapsula los diversos componentes de documentos de lenguaje de marcado como objetos. Puede usar estos objetos para realizar operaciones dinámicas CRUD en documentos de lenguaje de marcado.
* El estándar DOM del W3C se divide en 3 partes diferentes:
* DOM básico: un modelo estándar para cualquier documento estructurado
* Domcumento: Objeto de documento:
1. Crear (Obtener ): En el modelo html dom, puede usar el objeto de ventana para obtener
1. window.document
2. document
2. Métodos:
1. Obtener el objeto Element:
1. getElementById (): Obtener el objeto element de acuerdo con el valor del atributo id, el valor del atributo id es generalmente único
2. getElementsByTagName (): obtiene objetos de elementos basados en nombres de elementos. El valor de retorno es una matriz
3. getElementsByClassName (): obtiene los objetos del elemento de acuerdo con el valor del atributo de clase, el valor de retorno es una matriz
4. getElementsByName (): obtiene objetos de elemento de acuerdo con el valor del atributo de nombre, el valor de retorno es una matriz.
2. Crear otros objetos DOM:
1. createAttribute (nombre)
2. createComment ()
3. createElement
4. createTextNode ()
3. Atributo
* Elemento: Elemento Objeto
1. Adquirir / Crear: Adquirir y crear a través del documento
2. Método:
1. removeAttribute (): eliminar atributo
2. setAttribute (): establecer atributo
* Atributo: objeto de atributo
* Texto: objeto de texto
* Comentario: objeto de comentario
* Nodo: objeto de nodo, otros 5 objetos principales
* Características: Todos los objetos dom pueden considerarse como un nodo
* Método:
* Árbol dom CRUD:
* appendChild (): Agregue un nuevo nodo hijo al final de la lista de nodos hijos del nodo.
* removeChile (): elimina (y devuelve) el nodo secundario especificado del nodo actual.
* replaceChild (): reemplaza un nodo secundario con un nuevo nodo.
* Propiedades:
* replaceChild (): devuelve el nodo primario del nodo.
* Modelo estándar DOM XML para documentos XML
* Modelo estándar DOM HTML para documentos HTML
1. Configuración y obtención del cuerpo de la etiqueta: innerHTML
2. Uso de atributos del objeto elemento html
3. Control del estilo del elemento
1. Uso del atributo estilo del elemento Para configurar
como:
// Modificar estilo 1
div1.style.border = "1px rojo sólido";
div1.style.width = "200px";
// font- size-> fontSize
div1.style.fontSize = "20px";
2. Defina el selector de clase de antemano Estilo, establezca el atributo de clase del elemento a través del atributo className del elemento.
## Mecanismo de monitoreo de eventos:
* Concepto: después de que ciertos componentes se ejecutan con ciertas operaciones, se activa la ejecución de ciertos códigos.
* Evento: ciertas operaciones. Por ejemplo: haga clic, doble clic, teclado, presione, movimientos del mouse
* Fuente del evento: componente. Por ejemplo: cuadro de entrada de texto del botón ...
* Oyente: Código
* Monitoreo de registro: combine eventos, orígenes de eventos y oyentes juntos. Cuando se produce un evento en la fuente de tiempo, desencadena la ejecución de un código de escucha.
* Eventos comunes:
1. Haga clic en evento:
1. onclick: haga clic en evento
2. ondblclick: haga doble clic en evento
2. foco evento
1. onblur: pierda foco
2. onfocus: el elemento se enfoca.
3. Evento de carga:
1. onload: se carga una página o una imagen.
4. Eventos del mouse:
1. se presiona el botón del mouse onmousedown
2. se suelta el botón del mouse onmouseup
3. se mueve el mouse onmousemove
4. se mueve el mouse onmouseover sobre un elemento
5. el mouse onmouseout se aleja de un elemento
5. evento del teclado :
1. al presionar una tecla, se presiona
una tecla del teclado 2. al presionar una tecla se suelta un botón del teclado
3. al presionar una tecla se presiona y se suelta el teclado
6. selección y cambio
1. el contenido del campo de cambio se cambia
2. al seleccionar Se selecciona texto
7. Eventos de formulario:
1. se hace clic en el botón de confirmación de
envío 2. se hace clic en el botón de reinicio de reinicio
06_JavaScript Advanced
Supongo que te gusta
Origin www.cnblogs.com/ktfeng/p/12688308.html
Recomendado
Clasificación