Wondershare EdrawMind
Galería de mapas mentales Mapa mental resumido de resumen de conocimientos relacionados con HTML5
- 6
Mapa mental resumido de resumen de conocimientos relacionados con HTML5
¿Qué es HTML5? ¿Como estudiar? HTML5 es un método de descripción del lenguaje para estructurar contenido web. HTML5 es el estándar de Internet de próxima generación y un método de lenguaje para construir y presentar contenido de Internet. Se considera una de las tecnologías centrales de Internet. HTML se creó en 1990 y HTML4 se convirtió en un estándar de Internet en 1997 y se utiliza ampliamente en el desarrollo de aplicaciones de Internet. El siguiente mapa resume el conocimiento relacionado con HTML5 para su referencia y estudio.
Editado a las 2018-12-19 12:05:18,
Mapa mental resumido de resumen de conocimientos relacionados con HTML5
- Recomendados
- Resumen
HTML5
<cuerpo>Contenido de la URL
propiedades del cuerpo:
bgcolor: color de fondo Fondo: imagen de fondo Texto: color de fuente onload: llamado al cargar
linea horizontal
<hora>
Operaciones de fuentes
Negrita
<b>
fuente cursiva
<i>
Subrayar
<u>
tachado
<del>
fuente
<fuente>: Color: color de fuente Tamaño: tamaño de fuente 1~7
<marca>Destacado</mark>
etiqueta de título
<h1>~<h6> Poner la fuente en negrita, más grande y en su propia línea.
etiquetas de párrafo
<p> Separar entre párrafos
nueva línea
<br>
espacio
Hipervínculo
enlace ordinario
<a href="address">nombre del enlace</a>
enlace de anclaje
Primero defina la etiqueta de ubicación: <a name="ding"></a> Luego use un hipervínculo para saltar a una ubicación predefinida: <a href="#ding">Volver al principio</a>
conexión funcional
Ventana emergente de QQ: lo que se llama es la interfaz de chat remoto de Tencent <a href="tencent://message/?uin=10001&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:10"/></a>
Etiquetas de imagen
<img src="Ruta del recurso de imagen" width="Ancho de la imagen (px píxeles o %)" title="Texto de solicitud al pasar el mouse" alt="Solicitar archivo en caso de carga fallida" border="Borde 1 Sí 0 No" />
lista
Lista ordenada:
<ol tipo="valor"> <li>Plátano</li> <li>Patata</li> <li>Yali</li> </ol>
Lista desordenada:
<ul tipo="valor"> <li>Pekín</li> <li>Shanghái</li> <li>Cantón</li> </ul>
Creación rápida
ul>li*4 tecla de tabulación
hoja
propiedades de la tabla
borde: borde de la tabla, el valor es de tipo int, cuanto mayor es el valor, más gruesa es la línea, 0 significa ninguno bordercolor: color del marco de la mesa espacio entre celdas: la distancia entre celdas ancho: ancho de la tabla, píxeles o porcentajes altura: altura de la tabla, píxeles o porcentaje bgcolor: color de fondo de la tabla o celda (aplicable a table, tr, td) fondo: imagen de fondo
Creación rápida
tabla>tr*2>td*3
<tabla> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tabla>
tr representa fila td representa la columna
Combinar células
colspan: fusionar horizontalmente con paralelo (dirección horizontal/izquierda-derecha) intervalo de filas: fusionar filas (dirección vertical/dirección arriba y abajo) fusionar verticalmente Nota: Fusionar significa que varios elementos se convierten en uno, por lo que cualquier exceso debe eliminarse.
forma
<formulario></formulario>
atributos del formulario:
- acción: el destino del envío del formulario - método: método de envío del formulario obtener texto sin formato (predeterminado)/publicar texto cifrado - enctype: método de codificación (hay elementos especiales en el formulario: solo se usa al cargar imágenes) onsubmit: envío de eventos
aporte
<tipo de entrada="x" nombre="y" marcador de posición="" discapacitado="desactivado"> tipo: tipo nombre: nombre del cuadro de entrada marcador de posición; cuadro de entrada rápida discapacitado: discapacitado
El valor del tipo: texto: cuadro de entrada de texto (valor predeterminado) contraseña: cuadro de entrada de contraseña casilla de verificación: casilla de verificación/cuadro de selección múltiple <-marcado selecciona el elemento seleccionado radio: botón de opción enviar: botón Enviar (puede usar el valor para anular el nombre del botón predeterminado) restablecer: botón de reinicio (puede usar el valor para anular el nombre del botón predeterminado) botón: botón -En forma: equivalente al botón enviar - Fuera del formulario: botón ordinario color: paleta de colores fecha: calendario mes: calendario mensual calendario semanal semana número:campo numérico -valor mínimo mínimo -max valor máximo -saltos de paso según múltiplos de entrada rango: diapositiva cuadro de búsqueda
<seleccionar> <opción>Menú desplegable</opción> ... </seleccionar>
barra de desplazamiento
<progreso></progreso>
Cuadro de entrada de Lenovo
Se consistente
Área de contenido expandible
marco
Referencias a otras páginas (con hipervínculos)
<a href="Abrir página o imagen" target="xy">Capítulo 1</a> <br /><br /> <a href="Abrir página o imagen" target="xy">Capítulo 2</a> <br /><br /> <a href="Abrir página o imagen" target="xy">Capítulo 3</a> <br /><br /> <iframe nombre="xy" ancho="400px" alto="300px"></iframe>
objetivo: el objetivo de abrir la página web es la posición xy
etiqueta de medios
<vídeo>vídeo
<audio>Música
Mostrar controles de reproducción
control S
Auto-reproducción
auto-reproducción
ciclo automático
bucle
camino
src
etiqueta de estructura div
Derive muchos elementos secundarios div basados en div, y pueden usarse como divs Cada elemento hijo tiene su propio nombre para completar la descripción "semántica" del div. Semantización: similar a "conocer el significado al ver el nombre" en la especificación de denominación de variables de Java
<sección>
área de contenido en la página web
<artículo>
artículo
<aparte>
Contenido fuera del artículo
<grupoh>
Combinación de contenido y título.
<nav>
navegación
<figura>
Imágenes y textos
<encabezado>
Encabezado de página web
<pie de página>
pie de página
flotador claro: ambos lados
Limpia los dos;
<estilo>estilo css
Utilice tres métodos:
estilos en línea
escrito dentro de la etiqueta de apertura
<p estilo="color:rojo;">HTML</p>
estilo interno
Escrito entre </head><body>
<estilo></estilo>
hoja de estilo externa
Crea un archivo .css y escribe en él.
Definición:<link href="css/01.css" rel="stylesheet"/>
prioridad css
El principio de proximidad
Selector
selector de elementos
Formato:h2{}
Utilice el nombre de la etiqueta como objetivo de modificación
clase selectora de clase
Formato: .nombre de clase{}
Filtrar aún más el selector de elementos.
ID del selector de ID
Formato: #id nombre{}
Llevando los selectores de clases un paso más allá
grupo selector
Formato:h1,h2,h3{}
selector derivado
Selector de descendientes (seleccionar todo)
Formato:divp{}
Selector descendiente(selector)
Formato:div>p{}
Selector de pseudoclase
No hecho clic
Formato: a:enlace{}
Después de hacer clic
Formato:a:visitado{}
flotar
Formato: a: pasar el cursor {}
Haga clic y mantenga presionado
Formato:a:activo{}
Las cuatro pseudoclases deben estar en un orden determinado, de lo contrario no serán válidas lvha
fondo
color de fondo
color de fondo: rojo;
Imagen de fondo
imagen de fondo:url(img/1.jpg);
mosaico de fondo
De forma predeterminada, la imagen de fondo está "en mosaico" en los ejes xey. Utilice la repetición de fondo para controlar cómo funciona el mosaico:
repetir: valor predeterminado, mosaico en las direcciones x e y
repetir-x: mosaico en la dirección x
repetir-y: mosaico en la dirección y
sin repetición: sin mosaico
panorámica de fondo
desplazamiento de fondo
adjunto de fondo: desplazamiento; desplazamiento de fondo (valor predeterminado)
adjunto de fondo: fijo; el fondo no se mueve
tamaño de fondo
contiene: Zoom al tamaño del área de fondo (la imagen de fondo se muestra completamente) portada: escale para cubrir completamente el área del fondo (no deje espacios en blanco)
posición de fondo
origen-fondo:
cuadro de borde;
cuadro de relleno: (predeterminado)
cuadro de contenido:
cultivo de fondo
clip de fondo:
cuadro de borde;
cuadro de relleno: (predeterminado)
cuadro de contenido:
Cortar por los cuatro lados
marco
Cuatro lados, configurados al mismo tiempo: borde: 3px rojo sólido;
Manejo de desbordamiento de texto
auto: Adaptativo, si excede el límite, se agregarán barras de desplazamiento; de lo contrario, no se agregarán barras de desplazamiento.
oculto: oculto si se excede
colores RGB
http://tool.oschina.net/commons?type=3
modelo de caja
margen margen
en la parte superior
relleno relleno
izquierda izquierda
estilo de texto
fuente
familia de fuentes: "Microsoft Yahei";
tamaño de fuente
tamaño de fuente: 50px;
color de fuente
color: naranja;
Alineación del texto (izquierda, centro, derecha)
alineación de texto: centro;
Negrita
peso de fuente: negrita;
Línea central (eliminar línea)
decoración de texto: línea recta;
sobrelínea
decoración de texto: sobrelínea;
color de fondo
fondo: marrón;
Altura (altura de la casa)
altura: 150 px;
Altura de línea del texto (altura humana)
altura de línea: 150 px;
sangría
sangría de texto: 30px;
estilo de mesa
Fusionar bordes de celda
colapso fronterizo: colapso;
estilo de lista
eliminar
tipo de estilo de lista: ninguno;
número
tipo de estilo de lista: decimal;
romano minúscula
tipo de estilo de lista: bajo romano;
Capital romana
tipo de estilo de lista: romano superior;
puntos negros
tipo de estilo de lista: disco;
bloquear
tipo de estilo de lista: cuadrado;
círculo
tipo de estilo de lista: círculo;
Reemplazar etiquetas de elementos de la lista con imágenes
imagen-estilo-lista: url(img/1.png);
Cambiar a orientación horizontal mediante posicionamiento flotante
Estilo de ratón
cursor:
predeterminado: puntero
dedo acusador
punto de mira: cruz
texto: enfoque
espera espera
estilo de posicionamiento
Clasificación de elementos
Todas las etiquetas de elementos tienen su propia clasificación, nivel de bloque o nivel de fila.
Elementos a nivel de bloque:
h1~h6,p,div,etc...
Orientación vertical de arriba hacia abajo (ajuste de palabras): el ancho y el alto se pueden cambiar
elementos en línea
a, b, intervalo, etc.
De izquierda a derecha, orientación horizontal (sin ajuste de línea): no se puede cambiar el ancho y el alto
Elementos de bloque en línea:
entrada, img, etc...
De izquierda a derecha, dirección horizontal (ajuste de palabras): se pueden cambiar el ancho y el alto
Orientación predeterminada
Visualización de elementos a nivel de bloque
bloqueo de pantalla;
Pantalla predeterminada
Visualización de elementos en línea
pantalla: en línea;
No se puede cambiar el ancho y el alto
Visualización de elementos de bloque en línea
pantalla: bloque en línea;
Puede cambiar el ancho y el alto
posicionamiento flotante
Un elemento flotante se puede mover hacia la izquierda o hacia la derecha hasta que su borde exterior toque el elemento principal. píxel o el borde de otro cuadro flotante Los elementos flotantes todavía se encuentran dentro del elemento principal.
flotador izquierdo
flotador izquierdo
flotar derecho
flotar derecho
posicionamiento relativo
La distancia entre este elemento y los elementos adyacentes.
posición: relativa
posicionamiento absoluto
La distancia entre este elemento y el elemento abuelo.
posición:absoluta
Posicionamiento fijo
Mantener la posición del elemento sin cambios
posición: fija;
Eje z (visualización superpuesta)
Cuanto mayor sea el valor, más cerca de la cara (más cerca de la cara)
índice z: valor numérico
Texto oculto
pantalla: ninguna;
Texto oculto
Función
Quitar subrayado del hipervínculo
decoración de texto: ninguna;
<estilo>estilo css3
esquinas redondeadas
border-radius:50%;/*borde con esquinas redondeadas 50%*/(círculo)
radio de borde: px superior izquierdo, px superior derecho, px inferior derecho, px inferior izquierdo;
radio de borde: superior izquierda (superior derecha) px superior derecha (inferior izquierda) px;
sombra
sombra de la caja
sombra de cuadro: desplazamiento horizontal px desplazamiento vertical px tamaño de desenfoque px tamaño de sombra px color de sombra;
sombra de texto
sombra de texto: color de la sombra, dirección horizontal px, dirección vertical px, tamaño de desenfoque px;
Degradado
gradiente lineal
fondo: gradiente lineal (lista de colores [hacia dirección]);
gradiente radial
fondo:gradiente radial (lista de colores);
La lista de colores puede tener N números.
animación
animación de transición
Sólo puedes controlar el principio y el final, pero no el proceso intermedio.
transición: atributo css de transición o simulación de animación, tiempo s utilizado para completar la transición, función de transición [tiempo de retraso del inicio de la transición];
No todos los atributos admiten la transición, CSS3 solo desarrolla algunos atributos
Función de transición:
facilidad
Predeterminado De rápido a lento.
lineal
Velocidad uniforme
facilidad en
acelerar
Facilitarse
desacelerar
facilidad de entrada y salida
Acelera primero y luego desacelera
animación
De un estado a otro, se puede controlar cada momento del proceso.
Definir animación:
@keyframes nombre de la animación{ empezar desde {color, forma, distancia...} hasta{color, forma, distancia...} final }
@keyframes nombre de la animación{ 0%{color, forma, distancia...} ... 100%{color, forma, distancia...} }
Animación de enlace
selector de elementos { animación: nombre de la animación, tiempo de ejecución s, función de transición, número de ejecuciones [ejecución alternativa de ida y vuelta]; }
infinito
Tiempos de ejecución inalámbrica
<JavaScript>
JS es una tecnología de programación web utilizada para agregar comportamiento interactivo
js es un lenguaje interpretado (scripting). El navegador interpreta y ejecuta el código sin preprocesamiento. Compilar.
Usa tres maneras
Dentro de la industria
<input type="button" value="Hermano, haz clic en mí" onclick="alert('嘤嘤嘤')";
al hacer clic
Eventos vinculantes
alerta()
ventanas emergentes
interno
<guión> alerta ("¡hola mundo!") </script>
externo
Crea un archivo con el sufijo ".js"
Definición:<script src="01.js"></script>
Prioridad: ¿Quién está en la cima? ¿Quién debería ser ejecutado primero?
variable
Debido a que JavaScript es un lenguaje débilmente tipado, al definir variables, todos los tipos de datos se declaran usando var;
Tipo numérico: número
Cadena: la cadena usa comillas dobles o comillas simples
Tipo booleano: verdadero=1 | falso=0 (convertido en 1 y 0 durante la operación)
conversión automática de tipos
cadena numérica = cadena
Número booleano = número
cadena booleana = cadena
booleano booleano = número
función de conversión
Convertir cualquier tipo a cadena
x.toSring();
Convertir cadena a número entero
análisisInt(x)
Convertir cadena a decimal
analizarFloat(x)
Consultar (juzgar) el tipo de valor actual
tipo de (x)
No se pueden convertir los retornos NaN
Cuadro de salida rápida
inmediato()
Cuadro de entrada rápida
alerta()
ventanas emergentes
consola.info()
salida de consola
documento.escribir()
Salida del contenido de la página.
Operador/Control de flujo
Operaciones aritmeticas
operaciones relacionales
estrictamente iguales
===Mismo tipo y valor
no estrictamente iguales
!==
operación lógica
aritmética ternaria
Estructura de bucle
Juicio condicional
Objetos comunes
Cadena
Crear objeto de cadena
var str="holamundo";
var str=new String("holamundo");
Métodos comúnmente utilizados:
matrizmatriz
No importa qué tipo de datos, es Array
Tres formas de inicializar una matriz
var arr1 = nueva matriz(); arreglo1[0] = 10; arreglo1[1] = 20; arreglo1[2] = 30; consola.info(arr1);
var arr2 = nueva matriz (10, 'a', verdadero); consola.info(arr2);
var arr3 = [5,'b',falso]; consola.info(arr3);
Matriz bidimensional
Los elementos de la matriz son una matriz.
Métodos comúnmente utilizados para matrices:
Matemáticas numéricas
http://www.w3school.com.cn/jsref/jsref_obj_math.asp
Ronda matemática (x)
Redondear a número entero
Matemáticas.piso(x)
redondeo
Matemáticas.aleatorio();
Devuelve un número aleatorio entre 0 ~ 1.
max(x,y) devuelve el valor más alto entre x e y. min(x,y) devuelve el valor más bajo entre x e y.
Clase de encapsulación numérica
datos var = 23,56789; alerta(data.toFixed(2));//23.57
Convierta un valor numérico en una cadena y conserve una cierta cantidad de dígitos después del punto decimal
FechaFecha
RegExpexpresión regular
Métodos comunes
RegExp.prueba (cadena)
Devuelve verdadero si la cadena contiene texto que coincide con RegExp , de lo contrario devuelve falso
nulo e indefinido
nudefinido
Hay un objeto, pero no vale nada.
nulo
Sin objetivo
Función (como el método java)
definición de función
Definido por función de palabra clave
Las reglas de definición de nombres de funciones son consistentes con los identificadores y distinguen entre mayúsculas y minúsculas.
Puede utilizar variables, constantes o expresiones como argumentos para llamadas a funciones.
El valor de retorno debe usar return
función nombre de la función (parámetro) { cuerpo funcional; devolver valor de retorno; }
función sin parámetros
función abc(){ para(var i = 1;i<=5;i){ consola.info(i); } }
función con parámetros
función él(a,b){ alerta(ab); }
Para funciones con parámetros, no agregue tipos de datos al definirlos.
función con valor de retorno
objeto de parámetro de argumentos
función él(a,b){ alerta(ab); console.info(argumentos.longitud); //Número de parámetros console.info(argumentos[0]);//El valor de b }
arguments.length obtiene el número de listas de parámetros argumentos[subíndice] obtiene los parámetros en una posición determinada
función anónima
Una función sin nombre solo se puede ejecutar esta vez (similar a la clase interna anónima de Java)
función global
Todos están predefinidos y js los prepara para nosotros. Simplemente haga referencia a él directamente con el nombre del método.
común
parseInt() | parseFloat()
isNaN() determina si contiene caracteres
eval(): usado para convertir operaciones en cadenas
codificarURI()
codificación
decodificarURI()
descodificación
objeto DOM
Los elementos son un mecanismo dentro de JavaScript que convierte todos los elementos de una página HTML en objetos. Este mecanismo es "DOM" Cada documento es un objeto de documento.
Cómo encontrar nodos de elementos:
Obtenga el objeto único a través del valor de id.
document.getElementById(valor de identificación)
Obtenga múltiples objetos coincidentes a través del valor del atributo de nombre
document.getElementsByName (valor de nombre)
Obtenga múltiples objetos coincidentes a través de nombres de etiquetas
document.getElementsByTagName(nombre de etiqueta)
Caso: Verificación de inicio de sesión
Caso: cambio de color entrelazado
Caso: Seleccionar todos los efectos
Modificar el estilo del nodo:
Formato: elemento object.style.css nombre del atributo="valor del atributo";
Por ejemplo: nodo.style.color = "rojo"; node.style.fontSize = "10em"; Modifique varios estilos al mismo tiempo: className = "nombre de clase";
Caso: atributos de clase
Nodo de búsqueda jerárquica
Debido a que hay un nodo en blanco entre las etiquetas div y p que se analizarán, aparecerá #text, que pertenece al nodo de texto. eliminar espacios en blanco
Tipo de nodo:
seleccionar operación de elemento
objeto elemento de tabla tabla
Crear nodo
eliminar y reemplazar
borrar
reemplazar
Objeto del navegador de lista de materiales
objeto ventana ventana
alerta (mensaje rápido)
cuadro de diálogo rápido
confirmar (mensaje rápido)
Si el cuadro de diálogo devuelve el tipo booleano.
mensaje(mensaje rápido,[contenido])
diálogo de entrada
ventana.cerrar()
Cerrar la ventana actual del navegador
window.open (dirección de la página web abierta, nombre de la ventana, [parámetros])
Abrir una nueva ventana del navegador
parámetro:
temporizador de ventana
setTnterval(1,2); 1: Acciones repetidas (funciones) 2: Intervalo de tiempo (milisegundos)
temporizador periódico
clearInterval(objeto temporizador)
Detener tareas programadas
establecer tiempo de espera (1,2) 1. Función a ejecutar 2, intervalo (milisegundos)
Temporizador único, similar al efecto de retardo
objeto de pantalla
ancho de pantalla altura.de.pantalla
Obtener resolución de pantalla
objetos de rastro historico
historia.go(núm)
Volver al anterior
Si num es positivo, significa avanzar Si num es negativo, significa retroceder.
historia.volver()
volver a la pagina anterior
objeto de ubicación
location.href=El destino del salto de página
Salto de página del caso
evento
eventos del ratón
evento de clic del mouse
al hacer clic
Evento de doble clic del mouse
hacer clic
evento de mouseover
el ratón por encima
evento de salida del mouse
en el mouse
Eventos de teclado
evento de pulsación de teclado
onkeydown
Evento de lanzamiento del teclado
encendido
evento de estado
enfocado
concentrarse
en la falta de definición
perder el enfoque
en cambio
Activado por el cambio
Caso: Efectos en cascada provinciales y municipales
El mecanismo predeterminado para eventos.
La secuencia desencadenante de eventos es desde el interior hacia el exterior, que es el mecanismo de burbujeo.
Si dos botones caen juntos, ambos clics se activarán de forma predeterminada.
Cancelar el mecanismo de burbujeo:
evento.stopPropagation();
Descarga eléctrica del ratón en coordenadas x e y.
evento.chintX
evento.chintY
evento.objetivo.nombrenodo
ocurrir objetivo
Conceptos básicos orientados a objetos
Tres formas de crear objetos.
usar objeto
Usar constructor
Utilice literales (objetos JSNO)
Objeto JSNO
Crear objeto jsno
Crear matriz jsno
objeto complejo json
Marco jQuery
Introducción
1. jquery es desarrollado por js, por lo que jquery en sí es javascript
entorno de desarrollo jquery-3.3.1.js jquery-3.3.1.min.js para entorno de producción
Cambio de color entrelazado simple
<script src="js/jquery-3.3.1.js"></script> <guión> $(función(){ $("tr:odd").css("fondo","azul"); $("tr:even").css("fondo","rojo"); }); </script>
Potente selector
selector básico
selector de etiquetas
$("p")
selector de identificación
$("#er")
selector de clase
$(".si")
Selector 1, Selector 2. . .
$("#er,.si")
selector de nivel
selector de descendientes
$("#d2 p")
p1 p2
selector de descendientes
$("#d2>p")
p1
hermanos vecinos
$("#d2 p")
siguientep
todos los hermanos detrás
$("#d2~p")
Todas las p después
Selector de filtro básico
primer elemento
$("p:primero")
último elemento
$("p:último")
No contiene elementos en no (filtrado)
$("p:no(.si)")
Elementos con subíndices impares
$("p:impar")
Elementos con subíndices pares
$("p:par")
Elementos con subíndices iguales
$("p:eq(2)")
elemento mayor que el subíndice
$("p:gt(2)")
Elementos más pequeños que el subíndice
$("p:lt(2)")
Selector de filtro de contenido
Contenido de consulta difusa El contenido del elemento contiene todos los p elementos de is
$("p:contiene(es)")
Seleccionar elementos con contenido vacío
$(":vacío")
selector de visibilidad
(Segundos) Muestra el texto oculto del elemento p
$("p:oculto").show(1000);
selector de formulario
:entrada selecciona todos los cuadros de entrada :text selecciona todos los cuadros de texto : contraseña selecciona todas las casillas de contraseña : la radio selecciona todos los botones de radio : casilla de verificación seleccione todas las casillas de verificación :submit selecciona todos los botones de enviar : restablecer selecciona todos los botones de reinicio : botón selecciona todos los botones : archivo selecciona todos los campos del archivo : oculto selecciona todos los campos ocultos
selector de atributos
Los atributos comienzan a contener xx
$("a[href^=xx]")
El final del atributo contiene xx.
$("a[href$=xx]")
El atributo contiene xx
$("a[href*=xx]")
filtro de formulario
Seleccionar todos los elementos deshabilitados
:desactivado
Seleccione todos los elementos disponibles
:activado
Seleccionar elementos seleccionados
:comprobado
Función de atributo:
Obtener
$("img").attr("título");
Obtener el valor del atributo de título de img
$("entrada").val();
Obtener el valor del cuadro de entrada.
$("div").text();
Obtenga el contenido de texto sin formato dentro del div
$("div").html();
Obtenga todo el contenido en el div (valor de texto de la etiqueta html)
configuración
$("img").attr("título","xxx");
Establecer el valor del atributo de título de img
$("entrada").val("xxxx");
Establecer el valor del cuadro de entrada
$("div").text("xxxx");
Establecer el contenido de texto sin formato dentro del div
$("div").html("xxxx");
Establezca todo el contenido dentro del div (valor de texto de la etiqueta html)
Eliminar
$("img").removeAttr("título");
Eliminar el valor del atributo de título de img
función de estilo
$("p").addClass("estilo de clase");
Agregar estilos de clase a elementos
$("p").removeClass("estilo de clase");
Eliminar estilo de clase del elemento
$("p").toggleClass("estilo de clase");
Cambiar estilo (sí->no, no->sí)
$("p").css("atributo css")
Obtener el valor del atributo css del elemento p
$("p").css("propiedad","valor")
Establecer el valor del atributo css del elemento p
$("p").css({"ancho": "150px",...});
Establecer los valores de múltiples atributos css del elemento p (jsno)
$("div").ancho()
Obtener el ancho del elemento.
$("div").altura()
Obtener la altura del elemento.
$("div").ancho(valor)
Establecer el ancho de un elemento
$("div").altura(valor)
Establecer la altura de un elemento
La diferencia entre h5 y h4
Declaración de documentación
Diseño de codificación de caracteres.
No distingue entre mayúsculas y minúsculas
atributo booleano
Citas omitidas
etiqueta final omitida