Javaweb Learning Notes Compartir (lectura imprescindible)

Autor：Eve Cole Fecha de actualización：2025-04-09 04:32:01

Lista personalizada

<dl> </dl>: representa el rango de la lista

** Inside <dt> </dt>: contenido superior

** Inside <dd> </dd>: contenido inferior

Lista ordenada

<ol> </ol>: rango de lista ordenada

-Attribido Tipo: Establezca el método de clasificación, 1 (predeterminado), A, I,

** En la etiqueta OL <li> Contenido específico </li>

Lista desordenada

<ul> </ul>: rango de lista desordenada

-Attribido Tipo: Círculo (Círculo hueco), disco (Círculo sólido predeterminado), Square (Solid Square)

** En la etiqueta UL <li> Contenido específico </li>

Etiquetas de imagen

-Attributos: SRC, Ancho, Altura, Alt (el texto que se muestra en la imagen, mueve el mouse a la imagen, manténgase por un tiempo para mostrar el contenido o el texto que se muestra cuando la imagen se muestra incorrectamente, pero algunos navegadores no lo muestran, y no hay efecto)

** <img src = "página de la imagen"/>

Introducción a los caminos

*Categoría: dos categorías

** Camino absoluto Eg. http://www.baidu.com/b.jpg

*** Tres rutas relativas La ubicación de un archivo en relación con otro archivo

-El archivo y la imagen HTML están en la misma ruta (directorio), y el nombre del archivo se puede escribir directamente

-En el archivo HTML, use el archivo A.JPG en la carpeta IMG en la misma ruta que es: IMG/A.JPG

** d: /htmlstudy/code/4.html

** d: /htmlstudy/code/img/a.jpg

-La imagen se encuentra en el directorio superior del archivo HTML. En este momento, el método de uso de la imagen: ../c.png ../ representa la ruta superior

Etiquetas de hipervínculo

** Enlace recursos

- <a href = "ruta al enlace a recursos"> Contenido que se muestra en la página </a>

** href: la dirección del recurso vinculado

** Objetivo: Establecer el método de apertura, el valor predeterminado es abrir en la página actual

--_ En blanco: abre en una nueva ventana

--_ Self: Abra la página predeterminada

-<a href = " #"> Título del enlace </a>: Cuando el hipervínculo no necesita saltar a la página, simplemente agregue # (marcador de posición) al href

** Recursos de ubicación

-Si desea localizar recursos: definir una ubicación

-retroceder a esta ubicación

<a href = "#top"> volver a la parte superior </a>

--S-is-output Etiqueta: <pre> contenido que debe ingresarse as-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is -is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is- is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is

Etiquetas de mesa

* Función: puede formatear los datos para hacer que la pantalla de datos sea más clara

*Border de atributo (grosor de la tabla) BorderColor (color de la línea de tabla) Paciación de celda (distancia de celda) Altura de ancho

*<Able> </table>: indica el rango de la tabla

** En la tabla, significa una línea <tr> </tr>

--Set la alineación alineada: centro izquierdo a la derecha

*** En TR, indica la celda en una fila <td> </td>

** Usar este también puede representar las células: puede lograr centrado y audaz en negrita

*El título de la tabla se coloca en la tabla <Tocktion> </tittion>

*Habilidades de operación:

** Primero cuente cuántas filas hay allí y cuente cuántas celdas hay en cada fila

*Fusionar células

** ROWSPAN: ROW CRIBS (FUMBLE VERTICA)

** Colspan: Cross-Column (fusión horizontal)

<td colspan = "3" align = "centro"> ejercicios de formulario </td>

Etiquetas de formulario

*Por ejemplo, al registrar kaixin.com, puede enviar datos al servidor de kaixin.com. Este proceso se puede implementar utilizando etiquetas de formulario.

* <Form> </form>: Defina un alcance de formulario

*propiedad:

** Acción: la dirección presentada, la envío predeterminada a la página actual

** Método: el método de envío de formulario

-Hay dos usados comúnmente: obtener y publicar, que es la solicitud de obtención predeterminada

** La diferencia entre Get and Post

1) La barra de dirección de solicitud GET llevará los datos enviados, y la publicación no lo llevará (los datos están en el cuerpo de solicitud)

2) Obtener el nivel de seguridad de la solicitud es más bajo y el poste es más alto

3) Hay un límite en el tamaño de datos de la solicitud GET, pero no hay límite en la publicación

** Inctype: esta propiedad no es necesaria para las solicitudes, y esta propiedad debe establecerse al cargar archivos.

** Elemento de entrada: la parte donde se puede ingresar o seleccionar el contenido

- La mayoría de los elementos de entrada se pueden usar con <input type = "type de elemento de entrada"/>

************ En el elemento de entrada, debe tener un atributo de nombre

*** Entrada normal: <input type = "text"/>

*** Elemento de entrada de contraseña: <input type = "contraseña"/>

*** Entrada de opción única: <input type = "radio"/>

-Se requiere el nombre del atributo dentro

-El valor del atributo de nombre debe ser el mismo

- Debe haber un valor de valor

**** Implementar las propiedades seleccionadas predeterminadas

*** checked = "marcado"

*** Verificar entrada: <input type = "Checkbox"/>

** El nombre del atributo se requiere dentro

** El valor del atributo de nombre debe ser el mismo

** Debe haber un valor de valor

**** Implementar las propiedades seleccionadas predeterminadas

---- checked = "revisado"

*** Elemento de entrada del archivo: <input type = "file"/>

*** Elemento de entrada desplegable (no en la etiqueta de entrada)

<opción valor = "0"> Seleccione </opción>

<opción valor = "1991"> 1991 </opción>

<opción valor = "1992"> 1992 </opción>

<opción valor = "1993"> 1993 </ppection>

</select>

**** Implementar las propiedades seleccionadas predeterminadas

---- seleccionado = "seleccionado"

*** Campo de texto (como: Complete el cuadro para el perfil de información personal al registrar una cuenta)

*** Elemento oculto (no se muestra en la página, pero existe en el código HTML)

*** Botón Enviar

--Address antes de enviar: c: /users/happydog/desktop/index.html

** Cuando el atributo de nombre se escribe en el elemento de entrada

--file: /// c: /users/happydog/desktop/index.html? phone = 123123 & pwd = 12321312 & sex = man & love = y & love = pp & birth = 1992 & tex = 1231245

**? El valor del nombre del elemento de entrada = el valor de la entrada y

** Los parámetros son similares a la forma de valor clave

*** use (haga clic) imágenes para enviar

*** Botón de reinicio: Vuelva al estado inicial del elemento de entrada

*** Botones normales (usados con JS)

Caso: use etiquetas de formulario para implementar la página de registro

Cuando el contenido de una celda de la tabla está vacío, los marcadores de posición ((espacios escapados)) generalmente se llenan.

Uso de otras etiquetas comunes en HTML

** B (Bold) s (línea de ataque) U (subrayado) I (cursiva) pre (salida como es) sub (subíndice) sup (superscript) div (line wrap) alcance (visualización en una línea) p (etiqueta de párrafo)

Uso de la etiqueta de encabezado HTML

** html dos partes inventan la cabeza y el cuerpo

** La etiqueta en la cabeza es la etiqueta de la cabeza

** Etiqueta de título: indica el contenido que se muestra en la etiqueta

** <Meta> Etiqueta: un contenido relacionado de la página de configuración

-<meta name = "Keywords" content = "" />

-<meta http-equiv = "refresh" content = "10; url = test_form.html" /> velocidad a la página especificada regularmente

** Etiqueta base: Establezca configuraciones básicas para hipervínculos

-El método de apertura de Hyperlink se puede configurar uniformemente <base Target = "_ Blank" />

** Etiqueta de enlace: introducir archivos externos

Uso de etiquetas de cuadro

** <Frameset>

** Filas: dividir por fila

<frameset filas = "80,*"> dividirse en dos partes, top 80, abajo 80

** Cols: dividir por columna

<frameset cols = "80,*"> dividirse en dos partes, izquierda y derecha en 80, cualquiera de la izquierda y derecha en cualquier momento

** <Frame> la página específica que se muestra

** <Frame name = "Lower_left" src = "b.html">

*Al usar etiquetas de cuadro, no se pueden escribir en la cabeza y el cuerpo. Si se usa la etiqueta de marco, el cuerpo debe retirarse y escribir fuera de la cabeza.

*Si el hipervínculo en la página a la izquierda y desea que se muestre el contenido en la página a la derecha, puede establecer la propiedad de destino en el hipervínculo y establecer el valor del objetivo en el nombre en el marco.

** <a href = "http://www.baidu.com" Target = "Right"> Baidu </a> <br/>

</Frameset>

Resumen de conocimiento

1) Idea de operación HTML: use etiquetas para envolver los datos que se operarán y cambian el estilo de datos en la etiqueta modificando el valor de atributo de la etiqueta.

2) Atributo de etiqueta de fuente: Rango de valor de tamaño 1-7 Color: Número hexadecimal #ffffff

3) Etiqueta de título <h1> </h1> ...... <h6> </h6>: de H1 a H6, la fuente se está volviendo cada vez más pequeña, y la línea se cambia automáticamente

4) Comentarios

Introducción a CSS

** CSS: Hoja de estilo en cascada

** Capas: capa por capa

** Hojas de estilo: muchos atributos y valores de atributos

** Haga que la página sea mejor

** CSS separa el contenido de la página web y el estilo de visualización, mejorando la función de visualización

Cómo combinar CSS y HTML (cuatro formas de combinar)

1) Hay un estilo de propiedad en cada etiqueta HTML, que combina CSS y HTML juntos

-<div style = "Color de fondo: rojo; color: verde"; id = ""> El camino del cielo reduce el exceso y compensa la deficiencia. Por lo tanto, el vacío derrota a lo real y al insuficiente supera el exceso. </div>

2) Use una etiqueta de HTML para implementar la etiqueta <style> y escribirla en la cabeza

- <style type = "text/css">

código CSS;

</style>

--- Implementación del código <fead>

div {

color de fondo: azul;

Color: rojo;

}

</style>

</ablo>

<Body>

El camino del cielo reduce el exceso y compensa la deficiencia. Por lo tanto, el vacío supera lo real, y la falta de deficiencia supera el exceso.

</div>

</body>

3) Use declaraciones en la etiqueta de estilo

@Import URL (ruta del archivo CSS);

- Paso 1: crear un archivo CSS

--- <style type = "text/css">

@Import URL (div.css);

</style>

4) Use el enlace de la etiqueta del encabezado para introducir el archivo CSS externo y colóquelo en <SEAD> </head>

- Paso 1: crear un archivo CSS

- <link rel = "stylesheet" type = "text/css" href = "ruta del archivo css"/>

**** La desventaja del tercer método de combinación: no funciona en algunos navegadores, y el cuarto método generalmente se usa

**** Prioridad (general)

De arriba a abajo, de adentro hacia afuera, prioridad de baja a alta.

La prioridad de la carga posterior es alta

Formato ****: nombre selector {nombre del atributo: valor del atributo; nombre del atributo: valor del atributo; ......}

Selectores básicos para CSS (tres tipos)

** Operar los datos en esa etiqueta

1) Selector de etiquetas div {código CSS}

--Use el nombre de la etiqueta como el nombre del selector

div {

color de fondo: azul;

Color: rojo;

}

</style>

</ablo>

<Body>

<div> aaaaa </div>

</body>

2) Selector de clases. Nombre {}

** Cada etiqueta HTML tiene una clase de propiedad

** <BEAD>

Div.test {

color de fondo: azul;

Color: rojo;

}

P.Test {

color de fondo: azul;

Color: rojo;

}

Se puede abreviar como:

.prueba{

color de fondo: azul;

Color: rojo;

}

</style>

</ablo>

** <Body>

<div> aaaaa </div>

<p> bbbbbbbbbb </p>

</body>

3) Selector de identificación #name {}

** Cada etiqueta HTML tiene una ID de atributo

-<div id = "test"> ccccccccccccc </div>

-<Head>

Div#prueba {

color de fondo: azul;

Color: rojo;

}

p#prueba {

color de fondo: azul;

Color: rojo;

}

Se puede abreviar como:

#prueba {

color de fondo: azul;

Color: rojo;

}

</style>

</ablo>

-<Body>

<div id = "test"> aaaaa </div>

<p id = "test"> bbbbbbbbbb </p>

</body>

** Estilo prioritario> Selector de identificación> Selector de clases> Selector de etiquetas

Selector de extensión CSS (Learn)

1) Configuración de estilos para etiquetas anidadas para selectores de asociación

** <Viv> <p> wwwwwwwwww </p> </div>

** Establezca el estilo de la etiqueta P en la etiqueta Div y el estilo de la etiqueta anidada

-<Head>

div P {

color de fondo: azul;

Color: rojo;

}

</style>

</ablo>

-<Body>

<Viv> <p> wwwwwwwwww </p> </div>

<p> aaaaa </p>

</body>

2) Combinar selectores diferentes etiquetas establece el mismo estilo

** <Div> 1111 </div>

** Establezca etiquetas Div y P al mismo estilo, y establezca diferentes etiquetas al mismo estilo

-<Head>

div, p {

color de fondo: azul;

Color: rojo;

}

</style>

</ablo>

-<Body>

</body>

3) Selector de elementos pseudo (clase)

** CSS proporciona algunos estilos bien definidos, que se pueden usar

** Por ejemplo, hipervínculo

** Estado de hipervínculos

-Después de hacer clic y hacer clic en el estado original

: enlace: desplazamiento: activo: visitado

Implementación del código:

/*Estado original*/

A: enlace {

Color de fondo: rojo;

}

/*Estado de hoom*/

A: Hover {

Color de fondo: verde;

}

/*Haga clic en estado*/

A: Activo {

color de fondo: azul;

}

/*Estado después de hacer clic*/

A: Visitado {

Color de fondo: gris;

}

</style>

</ablo>

<Body>

<a href = "http://www.baidu.com"> Haga clic en el enlace a la página web de Baidu </a>

</body>

Modelo de caja de CSS (Comprender) Para operar los datos, debe poner los datos en un área (DIV)

1) Border borde: Configuración unificada

También puede configurarlo por separado: Tapa superior del borde Inferior: Border-Bottom izquierdo: Border-izquierda derecha: Border-Right

-<Head>

div {

Ancho: 200px;

Altura: 100px;

borde: 2px azul sólido;

}

#Div12 {

Border-Right: 2px Dable amarillo;

}

</style>

</ablo>

-<Body>

<div id = "div11"> aaaaaaaaaa </div>

<div id = "div12"> bbbbbbbbb </div>

</body>

2) ROLDO DE MARGEN INTERNO: establezca la distancia entre el contenido desde los lados superiores, inferiores, izquierdo y derecho

También puede configurarlo por separado: hacia arriba, hacia abajo, hacia la izquierda y la derecha

div {

Ancho: 200px;

Altura: 100px;

borde: 2px azul sólido;

}

#Div21 {

relleno: 20px;

}

#Div22 {

ROLED-LAFUERA: 30px;

}

</style>

</ablo>

<Body>

<div id = "div21"> aaaaaaaaaa </div>

<div id = "div22"> bbbbbbbbb </div>

</body>

3) Margen: establezca la distancia entre el div de los cuatro lados más externos

También puede configurarlo por separado: arriba, hacia abajo, hacia la izquierda y la derecha. . .

El diseño de CSS flota (comprensión) flotante: izquierda a la derecha

Posicionamiento del diseño de CSS (comprender)

*posición

** Valor de atributo:

--s-static: valor predeterminado, sin posicionamiento especial

--absoluto:

Arrastre el objeto desde la transmisión del documento y use propiedades izquierda, derecha, superior, inferior y otras para localizarlo absolutamente

--Relativo: el objeto no se arrastrará desde la transmisión del documento. El objeto no se puede apilar, pero se compensará en la secuencia de documento normal en función de las propiedades como la izquierda, la derecha, la parte superior, la parte inferior, etc.

Caso: imagen y texto mixto

** Las imágenes y los textos se muestran juntos

Caso: firma de imagen

Introducción a JavaScript: es un lenguaje de secuencias de comandos basado en objetos, utilizado principalmente en el cliente

*Basado en objetos: se proporcionan muchos objetos, puede usarlos directamente

* Impulsado de eventos: HTML hace que los efectos estáticos del sitio web, JavaScript Dynamic Effects

*Cliente: se refiere específicamente al navegador

* Características de JS:

1) Interacción dinámica de información interactiva

2) La seguridad JS no puede acceder a archivos en el disco local

3) Java multiplataforma, máquinas virtuales; Mientras los navegadores que puedan soportar JS, pueden ejecutar

*Diferencia entre JavaScript y Java: no hay relación entre los dos

1) Java es Sun Company, ahora Oracle; JS es Netscape Company

2) Java está orientado a objetos y JS está basado en objetos

3) Java es un lenguaje fuertemente escrito, y JS es un lenguaje débilmente escrito

-para ejemplo: int i = "10" en Java; informará un error

--js: var i = 10; var i = "10"; No se informan errores

4) JS solo necesita ser analizado para ejecutar, mientras que Java necesita ser compilado en un archivo de Bytecode primero, y luego ejecutarlo

*Composición JS (tres partes):

1) ECMAScript

- ECMA: Asociación Europea de Computaciones

Sintaxis y declaraciones de JS organizadas por ECMA ...

2) Bom

-Modelo de objetos de Broswer: modelo de objeto del navegador

3) DOM

-Modelo de objeto de documento: modelo de objeto de documento

Cómo combinar JS y HTML (dos tipos)

1) Use una etiqueta <script type = "text/javaScript"> JS Code; </script>

2) Use etiquetas de script para introducir un archivo JS externo

- Crear un archivo JS y escribir código JS

- <script type = "text/javaScript" src = "js ruta"> </script>

Nota: Cuando se use el segundo método, no escriba el código JS en la etiqueta de script, no se ejecutará.

Tipos primitivos de JS y declarar variables

*Tipo de datos básicos de Java: byte short int long float doble char bolean

*JS define variables con la palabra clave var

*El tipo original de JS (cinco)

--string string var str = "ABC";

-Number numérico Var M = 123;

--Boolean Verdadero y falso var flager = true;

-null var date = new Date ();

** Obtenga la referencia al objeto. NULL significa que la referencia del objeto está vacía, y todas las referencias al objeto también son objeto.

--undifined define una variable, pero no asigna var aa;

* typeOf (nombre de variable) Vea el tipo de datos de la variable actual

Declaración JS

** La declaración si el juicio en java ("=" significa asignación; "==" igual a, significa juicio) Declaración de la declaración de instrucción (para mientras do-while)

** Las declaraciones de JS

--Is Declaración de juicio

--switch (a) {

Caso 5: ...

romper;

Caso 6: ...

romper;

por defecto:...

...........

}

** Declaración de bucle para while do-while

--var i = 5;

while (i> 0) {

alerta (i);

i--;

}

--For (var i = 0; i <= 5; i ++) {

alerta (i);

}

operador de JS

** JS no distingue entre enteros y decimales

--var j = 123;

alerta (j/1000*1000);

** j/1000*1000 El resultado en Java es 0

** En JS, no hay distinción entre enteros y decimales, 123/1000*1000 = 0.123*1000 = 123

** Agregar y restar operaciones de cadena

--var str = "123";

alerta (str + 1); El resultado en Java y JS es 1231, que es una conexión de cadena

alerta (str - 1); Al restar, realice la operación de sustracción. Si STR no es un número, indicará nan: significa que no es un número

** El tipo de Boleano también se puede operar

*** Si se establece en True, es equivalente a 1; Si se establece en False, es equivalente a 0;

** == y === Diferencia

** Se trata de hacer juicios

** == La comparación es solo el valor; === La comparación es el valor y el tipo

** Las oraciones que se emiten directamente a la página (el contenido se puede mostrar en la página) pueden producir variables, valores fijos y código HTML a la página. Document.write ("") contiene cotizaciones dobles, y si establece los atributos de la etiqueta, debe usar cotizaciones individuales.

- document.write ("aaaa");

- document.write ("<hr/>");

*** document.write ("<table border = '1' borderColor = 'Red'>");

*** document.write ("</table>");

Ejercicio: implementando la tabla de multiplicación 99

matriz de js

*La definición de matriz en java int [] arr = {1,2,3};

*Método de definición de matriz JS (tres tipos)

1) var arr = [1,2,3]; var arr = [1, "2", 3]; var arr = [1,2, true];

2) Use objeto de matriz de objetos incorporado

var arr1 = nueva matriz (5); // Defina una matriz, la longitud de la matriz es 5

arr1 [0] = "1";

......

3) Use objeto de matriz de objetos incorporado

var arr2 = nueva matriz (3,4,5); // Defina una matriz, los elementos en la matriz son de 3,4,5

* Hay una longitud de propiedad en la matriz: obtenga la longitud de la matriz

* La longitud de la matriz es variable, y la matriz puede almacenar datos de diferentes tipos de datos.

función js (método)

** Definir funciones (métodos) en JS. Hay tres formas de definir funciones. En la lista de parámetros de funciones, no necesita escribir VAR, simplemente escriba el nombre del parámetro.

1) Use una función de palabra clave

*** Nombre del método de función (Lista de parámetros) {

Método Cuerpo;

El valor de retorno es opcional (dependiendo de las necesidades reales);

}

Implementación de código: // Crear función utilizando el primer método

función test () {

alerta ("qqqqqq");

}

// Método de llamada

prueba();

// Definir un método con parámetros para implementar la adición de dos números

función add1 (a, b) {

var sum = a+b;

alerta (suma);

}

add1 (3,5);

función add2 (a, b, c) {

var sum1 = a+b+c;

return Sum1;

}

alerta (add2 (7,8,9));

2) Funciones anónimas

var add = function (lista de parámetros) {

Método Cuerpo y valor de retorno;

}

Implementación del código: var add3 = function (m, n) {

alerta (m+n);

}

// Método de llamada

add3 (8,9);

3) También se llama generalmente una función dinámica. Si lo usa menos, solo compruébalo.

*Use una función de objeto incorporada en JS

var add = nueva función ("Lista de parámetros", "Cuerpo de método y valor de retorno");

var add4 = nueva función ("x, y", "var suma; sum = x+y; devuelve suma;");

alerta (add4 (9,10));

// o el siguiente código

var canshu = "x, y";

var fangfati = "var suma; sum = x+y; return suma;";

var add4 = nueva función (canshu, fangfati);

alerta (add4 (5,3));

Variables globales y locales de JS

** Variable global: Defina una variable en la etiqueta de script, que se puede usar en la parte JS de la página

-uso fuera del método, dentro del método, use en otra etiqueta de script

** Variable local: defina una variable dentro de un método y solo se puede usar dentro del método.

-Solo se puede usar dentro del método. Si esta variable se llama fuera del método, se mostrará un error

--ie viene con una herramienta de depuración. En la versión de IE8 o superior, F12 en el teclado, y aparece una barra en la parte inferior de la página para ver el error cuando mira la consola.

¿Dónde se deben colocar las etiquetas de script?

** Se recomienda poner etiquetas de script detrás de </body>

** Si ahora hay un requisito:

-En JS, debe obtener el valor en la entrada. Si pone la etiqueta de script en la cabeza, habrá problemas

--html El análisis se analiza de arriba a abajo. La etiqueta de script se coloca en la cabeza y toma directamente el valor de entrada. Debido a que la página aún no ha analizado la línea de entrada, definitivamente no podrá obtenerla.

JS sobrecarga de JS no tiene sobrecarga, pero se puede simular e implementarse.

Ejemplo: función add11 (a, b) {

devolver a+b;

}

función add11 (a, b, c) {

devolver a+b+c;

}

función add11 (a, b, c, d) {

devolver a+b+c+d;

}

alerta (add11 (2,2)); // nan

alerta (add11 (2,2,3)); // nan

alerta (add11 (2,2,4,5)); // 13

Objeto de cadena de JS

** Crear objeto de cadena var str = "ABC ';

** Métodos y propiedades (documento)

-Attribido Longitud: longitud de la cadena

--método

1) Métodos relacionados con HTML

- Bold (): Bold FontColor (): Establezca el color de la cadena FontSize (): Establezca el tamaño del enlace de fuente (): Muestre la cadena como un hipervínculo

2) Métodos similares a Java

--concat (): conecte la cadena charat (): return la cadena indexOf (): return la posición de la cadena de la cadena dividida (): corte la cadena en una matriz reemplazar ("", ""): reemplace los dos parámetros de la cadena: el primer parámetro es el carácter original, y el segundo parámetro es el carácter que se reemplazará con el substr (5,3). Comience desde el quinto bit e intercepta tres caracteres de la subcadena hacia atrás (3,5) comienza desde el tercer bit, incluido el tercer bit hasta el extremo del quinto bit, excluyendo el quinto bit [3,5)

Objeto de matriz para JS

** Tres formas de crear una matriz

1) var arr1 = [1,2,3];

2) var arr1 = nueva matriz (3); // La longitud es tres

3) var arr1 = nueva matriz (1,2,3); // El elemento es 1,2,3

var arr = []; // crear una matriz vacía

** Longitud del atributo: Ver la longitud de la matriz

**método

concat (); unirse(); dividir la matriz según los caracteres especificados push (); Agregue elementos al final de la matriz, devuelva la nueva longitud de la matriz ** Si la matriz agregada es una matriz, agregue la matriz como una cadena completa pop (); eliminar y devolver el último elemento de la matriz reversa (); Invertir el orden de los elementos en la matriz

Objeto de fecha de JS

** Obtenga la hora actual en Java

Fecha fecha = nueva fecha ();

// Formato // tolocaleString ()

** Obtenga la hora actual en JS

var fecha = nueva fecha ();

// Convertir al formato habitual date.tolocaleString ();

Objeto matemático Operación matemática de JS

** Todo el interior son métodos estáticos, puede usar matemáticas. método () directamente al usarlo;

Funciones globales de JS

** Debido a que no pertenece a ningún objeto, escriba el nombre directamente para usarlo

** eval (); Ejecutar el código JS (si la cadena es un código JS, use el método para ejecutarlo directamente)

- var str = "alert ('1234');";

// alerta (str); // alerta ('1234');

eval (str); // 1234

** .....

Sobrecarga de funciones JS ¿Qué está sobrecargando? El nombre del método es el mismo, los parámetros son diferentes

*JS no tiene una sobrecarga de funciones, y solo se llamará al último método, pero la sobrecarga se puede simular de otras maneras. La función JS guarda los parámetros pasados en la matriz de argumentos. Puede usar el juicio de la longitud de la matriz de argumentos para devolver diferentes resultados de procesamiento en consecuencia.

Simular la implementación del código de efecto de recarga:

función add1 () {

if (arguments.length == 2) {

devolver argumentos [0] + argumentos [1];

} else if (arguments.length == 3) {

devolver argumentos [0] + argumentos [1] + argumentos [2];

} else if (arguments.length == 4) {

Devuelve los argumentos [0] + argumentos [1] + argumentos [2] + argumentos [3];

} demás {

regresar 0;

}

// Llamar

alerta (add1 (1,2)); // 3

alerta (add1 (1,2,3)); // 6

alerta (add1 (1,2,3,4)); // 10

alerta (add1 (1,2,3,4,5)); // 0

objeto JS BOM

** Bom: Modelo de objeto Broswer: modelo de objeto del navegador

** ¿Cuáles son los objetos?

- Navigator: obtener información del cliente (información del navegador)

- Pantalla: obtener información de pantalla

- Ubicación: la dirección de URL solicitada

*** atributo href

1) Obtenga la dirección de URL solicitada

--Document.Write (Ubicación.href);

2) Establezca la dirección de URL

-Se coloca un botón en la página y un evento está vinculado al botón. Al hacer clic en este botón, la página puede saltar a otra página

<Body>

función href1 () {

// alerta ("aaaa");

ubicación.href = "http://www.baidu.com";

}

</script>

</body>

- Historia: la historia de la URL solicitada

- Cree tres páginas (simule el efecto de la historia ascendente y descendente)

1) Cree una página A.HTML y escriba un hipervínculo a B.HTML

2) Cree un hipervínculo B.HTML a C.HTML

3) Crear C.HTML

- a la página anterior visitada

History.back ();

historia, ir (-1);

- Vaya a la página siguiente que visitó

historia.forward ();

Historia.go (1);

-Ventana (Key Mastery) Objeto de nivel superior del objeto de la ventana (todos los objetos de BOM se operan en la ventana)

**método

- window.alert (); La abreviatura es: alerta (); Una ventana aparece en la página para mostrar el contenido

- confirmar ("Mostrar contenido de mensaje"); El cuadro de solicitud de confirmación tiene el valor de retorno verdadero y falso

-- inmediato(); El cuadro de diálogo de entrada (no se usan muchos ahora), tiene dos parámetros: Mostrar contenido y valor predeterminado

- Abrir ("Dirección de URL", "", "Características de la ventana, como el ancho y la altura de la ventana"); Abrir una nueva ventana

-- cerca(); Cerrar ventana (la compatibilidad del navegador es relativamente pobre)

- Haz algunos temporizadores

*** setInterval ("código JS", milisegundos); Window.SetInterval ("Alert ('123');", 3000); Indica que el método de alerta se ejecuta cada tres segundos

*** SetTimeOut ("Código JS", milisegundos); significa que se ejecuta después de milisegundos, pero solo se ejecutará una vez.

*** ClearInterval (); Borrar el temporizador establecido por SetInterval

- var id1 = setInterval ("alerta ('123');", 3000);

ClearInterval (ID1);

*** ClearTimeOut (); Borrar el temporizador settimeut

Objeto JS DOM

** DOM: Modelo de objeto de documento: Tipo de objeto de documento

** Documento: Documento de hipertexto (documento etiquetado por hipertexto) html, xml

** Objeto: Propiedades y métodos proporcionados

** Modelo: use propiedades y métodos para manipular documentos etiquetados por hipertexto

*** Puede usar los objetos proporcionados en el DOM en JS, usar las propiedades y métodos de estos objetos para operar en documentos de marcado.

*** Para operar en un documento etiquetado, primero debe encapsular todos los contenidos en el documento etiquetado en objetos

- Necesita encapsular las etiquetas, atributos y contenido de texto en el HTML en objetos

*** Para operar en documentos marcadores, documentos de marcador de análisis

*** Proceso de análisis: de acuerdo con la estructura jerárquica del HTML, se asignará una estructura de árbol en la memoria, y cada parte del HTML debe encapsularse en un objeto

*Solo un nodo raíz

Puede haber varios nodos infantiles debajo del nodo raíz. Los nodos sin nodos infantiles se llaman nodos de hoja

- Objeto de documento: todo el documento HTML

- Objeto de elemento: objeto de etiqueta

- Objeto de atributo

- Objeto de texto

** Objeto de nodo de nodo: es el objeto principal de estos objetos

DHTML: Es la abreviatura de muchas tecnologías

** HTML: datos encapsulados

** CSS: use atributos y valores de atributos al estilo

** DOM: Operar documentos HTML (documentos marcados)

** JavaScript: se refiere específicamente a la declaración de sintaxis de JS (ECMAScript)

El objeto del documento representa el documento completo

** Métodos comunes

- Write () Método: 1) Variables de salida a la página 2) Salida Código HTML a la página

- getElementById (); significa obtener elemento (etiqueta) a través de ID

<Body>

// usa getElementByid para obtener el objeto de etiqueta de entrada

var input1 = document.getElementById ("nameId");

// Obtener el valor del valor en la entrada

alerta (entrada1.Value);

// Establecer un valor en la entrada

input1.value = "bbbbbbbb";

</script>

</body>

- GetElementsByName (); El atributo de nombre de la etiqueta es digno de la etiqueta, y el retorno es una colección (matriz)

<Body>

var input1 = document.getElementsByName ("name1"); // El parámetro aprobado es el valor del nombre en la etiqueta

para (var i = 0; i <input1.length; i ++) {// a través de Traversal, obtenga el valor específico en cada etiqueta

entradas var = input1 [i]; // Cada bucle obtiene el objeto de entrada y asigna el valor a las entradas

alerta (entrada. Valor); // Obtener el valor del valor en cada etiqueta de entrada

}

</script>

</body>

- getElementsBytagName ("Nombre de la etiqueta"); Devuelve una colección (matriz)

<Body>

var inputs1 = document.getElementsBytagName ("entrada"); // El parámetro aprobado es el nombre de la etiqueta

para (var i = 0; i <inputs1.length; i ++) {

var input1 = inputs1 [i];

alerta (entrada1.Value);

}

</script>

</body>

**** Nota: Solo hay una etiqueta, y esta etiqueta solo se puede obtener usando el nombre. En este momento, el uso de GetElementsByName devuelve una matriz, pero ahora solo hay un elemento. En este momento, no hay necesidad de atravesar, pero puede obtener directamente el valor a través del subíndice de la matriz.

var input1 = document.getElementsByName ("name1") [0];

alerta (entrada1.Value);

Caso: Caso emergente de ventana

** Proceso de implementación: 1) Debe crear una página: dos elementos de entrada y un botón, y hay un evento en el botón, que es una nueva ventana emergente

2) Crear una página emergente: cada fila de la tabla tiene un botón, número y nombre; Hay un evento en el botón: asigne el número y el nombre actuales a la posición correspondiente de la primera página.

** Operación de operación de página cruzada: puede obtener la ventana que crea esta ventana, es decir, puede obtener la ventana principal

Caso: Agregue el nodo al final

1) Crear una etiqueta Li

2) Crear texto

3) Agregue el texto a Li

4) Agregue Li a UL

<Body>

</ul> <br/>

función add1 () {

// consigue la etiqueta UL

var ul1 = document.getElementById ("ulid");

// Crear etiquetas

var li1 = document.createElement ("li");

// Crear texto

var tex1 = document.createTextNode ("4444");

// Agregar texto a Li

li1.appendChild (Tex1);

// Agregar Li a UL

UL1.AppendChild (Li1);

}

</script>

</body>

Objeto del elemento (objeto de elemento): para operar el elemento, primero debe obtener el elemento utilizando el método correspondiente en el documento para obtenerlo.

**método

**** Obtenga el valor en el atributo getAttribute ("Nombre del atributo");

**** establecer el valor del atributo setAttribute (nombre, valor);

**** Eliminar el atributo RemoveAttribute ("Nombre del atributo"); el valor no se puede eliminar

// Obtener la etiqueta de entrada primero

var input1 = document.getElementById ("inputID");

// alerta (input1.Value);

alerta (input1.getAttribute ("valor")); // Obtener el valor en el atributo

alerta (input1.getAttribute ("clase"));

input1.SetAttribute ("clase", "jaja"); // Establecer el valor del atributo

alerta (input1.getAttribute ("clase"));

input1.removeattribute ("nombre");

</script>

** quiero obtener el subtítulo debajo de la etiqueta

** Use el atributo Nodos de niños, pero este atributo tiene mala compatibilidad

** La única forma efectiva de obtener las etiquetas debajo de la etiqueta, use el método GetElementsByTagName

<Body>

<li> aaaaaa </li>

<li> bbbbbb </li>

<li> cccccccc </li>

</ul>

// consigue la etiqueta UL

var ul1 = document.getElementById ("ulid1");

// Obtén el subtítulo debajo de UL

// var lis = ul1.childnodes; // pobre compatibilidad

// alerta (lis.length); // algunos visualización 3 algunos visualización 7

var lis = ul1.getElementsBytagName ("li");

alerta (lis.length);

</script>

</body>

Propiedades del objeto de nodo

** Nodename

** Tipo de nodeta

** Nodevalue

** Al analizar HTML usando DOM, las etiquetas, los atributos y el texto en el HTML deben encapsularse en objetos

** El valor correspondiente al nodo de etiqueta

NodeType: 1

NodeName: Nombre de la etiqueta Caps, como SPAN

Nodevalue: NULL

** El valor correspondiente al nodo de atributo

NodeType: 2

NodeName: Nombre del atributo

NodeValue: el valor de la propiedad

** El valor correspondiente al nodo de texto

NodeType: 3

NodeName: #Text

NodeValue: contenido de texto

** <Body>

<span id = "spanid"> contenido de texto </span>

// consigue el objeto de etiqueta

var span1 = document.getElementById ("spanId");

// alerta (span1.nodeType); // 1

// alerta (span1.nodeName); // sapn

// alerta (span1.nodeValue); // nulo

// atributos

var id1 = span1.getAttributeNode ("id");

// alerta (id1.nodeType); // 2

// alert(id1.nodeName); //identificación

// alert(id1.nodeValue); // spanid

//获取文本

var text1 = span1.getfirstChild;

// alert(text1.nodeType); // 3

// alert(text1.nodeName); //#texto

// alert(text1.nodeValue); // 文本内容

</script>

</body>

Node对象的属性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父节点ul是li的父节点

*** parentNode ：父节点

**子节点li是ul的子节点

*** childNodes : 得到所有子节点，但是兼容性很差

*** firstChild : 获取第一个子节点

*** lastChild : 获取最后一个子节点

**同辈节点li与li之间是同辈节点

**nextSibling : 返回一个给定节点的下一个兄弟节点

**previousSibling : 返回一个给定节点的上一个兄弟节点

<Body>

<li id="li1">aaaaa</li>

<li id="li2">bbbbb</li>

<li id="li3">ccccc</li>

<li id="li4">ddddd</li>

</ul>

/* // 得到li1

var li1 = document.getElementById("li1");

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); */

/* // 获取ul的第一个子节点

// 得到ul

var ul1 = document.getElementById("ulid");

// 第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

//获取li的id是li3的上一个和下一个兄弟节点

var li3 = document.getElementById("li3");

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</script>

</body>

操作dom树

** appendChild方法：

*** 添加子节点到末尾

*** 特点：类似于剪切粘贴的效果

** insertBefore(newNode,oldNode);

*** 在某个节点之前插入一个新的节点通过父节点添加

*** 两个参数1）要插入的节点2)在谁之前插入

*** 插入一个节点，节点不存在，创建

1）创建标签

2）创建文本

3）把文本添加到标签下面

**代码实现：（在<li>貂蝉</li>之前添加<li>董小宛</li>）

<Body>

</ul>

// 在<li>貂蝉</li>之前添加<li>董小宛</li>

function insert1() {

// 1、获取到li13标签

var li13 = document.getElementById("li13");

// 2、创建li

var li15 = document.createElement("li");

// 3、创建文本

var text15 = document.createTextNode("董小宛");

// 4、把文本添加到li下面

li15.appendChild(text15);

// 5、获取ul

var ul21 = document.getElementById("ulid21");

// 6、把li添加到ul下面（在<li>貂蝉</li>之前添加<li>董小宛</li>）

ul21.insertBefore(li15,li13);

}

</script>

</body>

**removeChild方法：删除节点

***通过父节点删除，不能自己删除自己

**代码实现: 删除<li id="li24">杨玉环</li>

<Body>

</ul>

// 删除<li id="li24">杨玉环</li>

function remove1() {

// 1、获取到li24标签

var li24 = document.getElementById("li24");

// 2、获取父节点ul标签

// 有两种方式1）通过id获取2）通过属性parentNode获取

var ul31 = document.getElementById("ulid31");

// 3、执行删除（通过父节点删除）

ul31.removeChild(li24);

}

</script>

</body>

** replaceChild(newNode,oldNode); 替换节点

***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）

***不能自己替换自己，通过父节点替换

** cloneNode(boolean) : 复制节点

**代码实现：把ul列表复制到另外一个div里面

<Body>

</ul>

</div>

// 把ul列表复制到另外一个div里面

1、获取到ul

2、执行复制方法cloneNode方法复制参数true

3、把复制之后的内容放到div里面去

** 获取到div

** appendChild方法

function clone1() {

// 1、获取ul

var ul41 = document.getElementById("ulid41");

// 2、复制ul，放到类似剪切板里面

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

var divv = document.getElementById("divv");

// 4、把副本放到div里面去

divv.appendChild(ulcopy);

}

</script>

</body>

**操作dom总结：

**获取节点使用方法

getElementById() : 通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

**插入节点的方法

insertBefore方法: 在某个节点之前插入

appendChild方法: 在末尾添加，类似于剪贴粘贴

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

** 第一个作用：获取文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

** 第二个作用：向标签里面设置内容（可以是html代码）

<Body>

</div>

// 获取span标签

var span1 = document.getElementById("sid");

//alert(span1.innerHTML); // 测试文本

// 向div里面设置内容<h1>AAAAA</h1>

// 获取div

var div11 = document.getElementById("div11");

div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

</script>

</body>

** 练习：向div里面添加一个表格

var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

** 需要让页面每一秒获取时间

setInterval方法定时器

** 显示到页面上

每一秒向div里面写一次时间使用innerHTML属性

** 代码实现动态显示时间

<Body>

</div>

function getD1() {

// 当前时间

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 获取div

var div1 = document.getElementById("times");

div1.innerHTML = d1;

}

// 使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

</script>

</body>

案例：全选练习

** 使用复选框上面一个属性判断是否选中

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

***四个复选框表示爱好

***还有一个复选框操作全选和全不选有一个事件

***三个按钮全选全不选反选每个按键都分别有事件

**代码实现

<Body>

<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

<br/>

<input type="checkbox" name="love"/>篮球

<input type="checkbox" name="love"/>排球

<input type="checkbox" name="love"/>羽毛球

<input type="checkbox" name="love"/>乒乓球

<br/>

// 实现全选操作

function selAll() {

1、获取要操作的复选框使用getElementsByName();

2、返回的是数组

**属性checked 判断复选框是否选中

** checked = true; // 表示选中

** checked = false; // 表示未选中

**遍历数组，得到的是每一个checkbox

** 把每一个checkbox属性设置为true 即checked = true;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = true; // 设置属性为true

}

// 实现全不选操作

function selNo() {

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性checked = false;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = false; // 设置属性为true

}

function selOther() { // 实现反选

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

if(love1.checked == true) {

love1.checked = false;

}

demás {

love1.checked = true;

}

function selAllNo() { // 一个多选框实现全选全不选切换

1、得到上边的复选框通过id来获取

2、判断该复选框是否选中if条件checked == true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

var box1 = document.getElementById("boxid");

if(box1.checked == true) {

selAll();

}

demás {

selNo();

}

</script>

</body>

案例：下拉列表左右选择

** 下拉选择框

</select>

** 创建一个页面

** 两个下拉框设置属性multiple

** 四个按钮，都有事件

** 代码实现：

<Body>

<div>

</select>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</select>

</div>

<div>

</div>

// 实现选中添加到右边

function selToRight() {

1、获取select1 里面的option

* 使用getElementsByTagName(); 返回的是数组

* 遍历数组，得到每一个option

2、判断option是否被选中

* 属性selected ，判断是否被选中

** selected = true; 选中

** selected = false;未选中

3、如果选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分

* appendChild 方法

// 获取到select1 里面的option

// 得到select1

var select1 = document.getElementById("select1");

// 得到select2

var select2 = document.getElementById("select2");

// 得到option

var options1 = select1.getElementsByTagName("option");

// 遍历数组

for(var i=0;i<options1.length;i++) {

// 第一次循环i=0 length:5

// 第二次循环i=1 length:4

// 第三次循环i=2 length:3

// 再往后就不满足条件了后边的都循环不到了

var option1 = options1[i]; // 得到每一个option对象

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

i--; // Pay attention to this point, if you don’t write it, you will have problems

}

// 全部添加到右边

function allToRight() {

var select2 = document.getElementById("select2");

var select1 = document.getElementById("select1");

var options1 = select1.getElementsByTagName("option");

for(var i=0;i<options1.length;i++) {

var option1 = options1[i];

select2.appendChild(option1);

i--;

}

// 右边的添加到左边的操作类似

</script>

</body>

案例：下拉框联动效果(省市联动)

** 创建一个页面，有两个下拉选择框

** 在第一个下拉框里面有一个事件：改变事件onchange事件

** 方法add1(this.value); 表示当前改变的option 里面的value值

** 创建一个二维数组，存储数据

** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

<Body>

</select>

</select>

// 创建一个数组存储数据

// 使用二维数组

var arr = new Array(4);

arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

function add1(val) {

/* 实现步骤：

1、遍历二维数组

2、得到的也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来开的值作比较

4、如果相同，获取到第一个值后面的元素

5、得到city 的select

6、添加过去使用appendChild 方法

** 需要创建option （三步操作）

// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加

// 所以每次添加之前，判断一下city里面是否有option，如果有，删除

// 获取city 的select

var city1 = document.getElementById("cityid");

// 得到city 里面的option

var options1 = city1.getElementsByTagName("option");

// 遍历数组

for(var k=0;k<options1.length;k++) {

// 得到每一个option

var op = options1[k];

// 删除这个option 通过父节点删除

city1.removeChild(op);

k--;// 每次删除长度都会减一k都会增加一不执行此操作会出错

}

// 遍历二维数组

for(var i=0;i<arr.length;i++) {

// 得到二维数组里面的每一个数组

var arr1 = arr[i];

// 得到遍历之后的数组的第一个值

var firstvalue = arr1[0];

// 判断传递过来的值和第一个值是否相同

if(firstvalue == val) { // 相同

// 得到第一个值后面的元素

// 遍历数组arr1

for(var j=1;j<arr1.length;j++) {

var value1 = arr1[j]; // 得到国家之后城市的名称

// alert(value1);

// 创建option

var option1 = document.createElement("option");

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</script>

</body>

以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。