Tabla de contenido
objeto de ubicación
La información general de la dirección de una página es:
por ejemplo:
https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1
protocolo de transmisión http https
www.baidu.com nombre de dominio
? fr = carácter de consulta de aladdin
# 2_1 hash (ubicación de anclaje)
-Objeto de ubicación:
Almacena información relacionada con todo el contenido de la dirección de la página web.
Atributos:
href : información de la dirección.
Página de salto: location.href = "XXX";
<script>
window.onload = function() {
location.href = "https://www.baidu.com";
}
</script>
Es necesario llamar a [Nota] location.href después de que se cargue la página.
búsqueda : la cadena de consulta se utiliza generalmente para transmitir datos y debe analizarse.
- dividir (cadena dividida)
Valor de retorno: matriz compuesta por cadenas divididas: Su Shi | Xin Qiji | Li Shangyin = "[Su Shi, Xin Qiji, Li Shangyin]
Analizar el carácter de consulta
1. ""
2.?name=zhangsan&age=18
paso:
1. Necesita preparar una función para el análisis, esta función también necesita un parámetro.
Parámetros: la cadena a analizar
2. Empiece a analizar
1. Juzgue si es una cadena vacía, devuelva un objeto vacío directamente.
2. Si no es una cadena vacía, analice la cadena y coloque el resultado en el objeto.
(1) Corta el primer carácter.
(2) Los caracteres restantes se dividen de acuerdo con & para obtener una matriz.
(3) Recorra la matriz para obtener una cadena con el formato "nombre de atributo = valor de atributo".
(4) Para cada cadena, divídala según = para obtener una matriz de atributos y valores de atributo.
(5) Asigne el nombre del atributo y el valor del atributo al objeto // obj [t [0]] = t [1];
(6) Devuelva el objeto.
método:
asignar (): cambie la dirección en la barra de direcciones del navegador y regístrela en el historial.
[Nota] La configuración de location.href llamará al método de asignación.
replace () Reemplaza la dirección en la barra de direcciones del navegador.
recargar () recargar F5
reload (true) Fuerza la carga, el almacenamiento en caché no es aplicable.
navegador:
- Obtenga información sobre el cliente del navegador.
historia
-
historial: guarda el historial de la ventana actual, que contiene algunas propiedades y métodos del historial operativo
-
[Nota] No es el registro del historial en el navegador.
1. Atributos
length: Devuelve el número de registros históricos.
<script>
window.onload = function() {
btn.onclick = function() {
// 跳转地址
location.href = "https://www.baidu.com";
// 浏览器历史记录，记录打开了多少
alert(history.length);
}
}
</script>
2. Método:
- espalda():
Sintaxis: history.back ();
Función: similar al botón Atrás del navegador, vuelve al registro del historial anterior.
- hacia adelante():
Sintaxis: history.forward ();
Función: es similar al botón de avance del navegador, que avanza al siguiente registro histórico.
- ir (n):
Sintaxis: history.go (n); n representa un número entero
Entero positivo: significa adelante
0: actualiza la página actual
Entero negativo: significa espalda
Rol: salta a n registros.
<script>
window.onload = function() {
btn.onclick = function() {
// 类似浏览器上面的前进键，前进到下一条历史记录中。
history.forward();
}
btn2.onclick = function() {
// 类似浏览器上面的后退键，回退到上一条历史记录中。
history.back();
}
but3.onclick = function() {
//浏览器打开历史记录的数
alert(history.length);
}
god.onclick = function() {
//直接跳转到历史记录的第几个页面
history.go(2);
}
}
</script>
El ancho y el alto del rollo del navegador.
Cuando el ancho y el alto de la página son relativamente grandes, aparecerán barras de desplazamiento y parte del contenido se ocultará a medida que se desplaza la página.
Llamamos a la altura oculta por encima de ella.
El ancho oculto a la izquierda se llama ancho enrollado.
Desplazamiento del navegador
El código js se puede utilizar para especificar dónde se desplaza el navegador.
La primera forma:
Formato: window.scroll (abscisas, ordenadas);
[Nota] No es necesario escribir unidades, posicionamiento instantáneo.
window.onload = function() {
btn.onclick = function() {
// 横向移动400，纵向移动600
window.scroll(400, 600);
}
}
La segunda forma:
por ejemplo:
window.scroll ({ left: 200, top: 600, behavior: 'smooth' });
Comportamiento: puede determinar la forma de desplazamiento. El valor predeterminado es automático para el posicionamiento instantáneo y se puede configurar en suave para una transición suave.
window.onload = function() {
btn.onclick = function() {
window.scroll({
left: 400,
top: 600,
// 平滑滚动页面
behavior: 'smooth'
})
}
}
Velocidad de desplazamiento personalizada
- Este es un caso de velocidad de desplazamiento personalizado completo
body {
width: 3000px;
height: 2000px;
}
<script>
var timer = null; //先设置滚动距离为空
window.onload = function() {
btn.onclick = function() {
//设置一个点击时间，当点击“btn”这个按钮时，执行下面的代码
timer = setInterval(function() {
//设定滚动时间的 函数
document.documentElement.scrollTop -= 20; //每一次滚动的距离
if (document.documentElement.scrollTop <= 0) {
// 如果滚动的距离小于或者等于0的时候，停止滚动
clearInterval(timer); // 清除滚动距离
}
}, 50);
}
}
var str = 0; //定义一个本次滚动的距离
window.onscroll = function() {
if (str < document.documentElement.scrollTop) {
//当本次滚动距离小于上一次的滚动距离时，停止滚动
clearInterval(timer);
}
str = document.documentElement.scrollTop; //本次滚动的距离
}
</script>
<body>
<p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
<br>
<br>
<br>
<br>
<p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<!-- ........ 下面还有很多行代码 -->
<button id="btn">滚动</button>
</body>
JUICIO
dom: modelo de objeto de documento
El DOM está compuesto por nodos.
Los nodos se pueden dividir en tres categorías:
1. Etiqueta html de nodo de elemento
2. El texto en la etiqueta del nodo de texto
3. Los atributos de la etiqueta del nodo de atributo
Aprender dom significa aprender a operar en nodos
Modificar: modifica el contenido del nodo DOM.
Traverse: atraviesa los nodos secundarios debajo del nodo DOM para facilitar la siguiente operación.
Agregar: agregue un nodo secundario debajo del nodo DOM.
Eliminar: elimina el nodo de HTML. Equivale a eliminar todo el contenido y todos los nodos secundarios que contiene.
Qué puede hacer DOM:
1. Encuentra el objeto (nodo de elemento)
2. Establezca el valor del atributo del nodo del elemento,
3. Elimina y crea nodos dinámicamente.
4. Evento desencadenado en respuesta
Cómo conseguir el nodo
1.getElementById
Formato: node.getElementById ("ID")
Función: A partir del nodo, busque el nodo por ID.
2.getElementsByTagName
Buscar nodo por nombre de etiqueta
Formato: node.getElementsByTagName ("nombre de etiqueta");
3.getElementsByClassName
Buscar nodos por nombre de clase
Formato: node.getElementsByClassName ("nombre de clase");
4.getElementsByName ()
Obtener el nodo a través del valor del atributo de nombre
Más comúnmente utilizado en elementos de formulario.
--------------------------------------------------
No se admite la versión inferior de IE.
5.querySelector ()
Formato: node.querySelector (selector css)
valor de retorno:
Si se encuentra un elemento que coincide con el selector, se devuelve el primer elemento.
Si no se encuentra, devuelve nulo.
6.querySelectorAll ()
Formato: node.querySelector (selector css)
valor de retorno:
Si se encuentra un elemento que coincide con el selector, se devuelven todos.
Si no se encuentra, devuelve nulo.
El método de matriz normal de pseudo-matriz de lista de nodos no es válido para la longitud de la pseudo-matriz [subíndice]
[Nota] No utilice getElementById cuando anida los nodos.
<script>
window.onload = function() {
// 通过ID获取页面信息
var hh = document.getElementById("h3")
// 通过标签获取信息
var hh = document.getElementsByTagName("p")[0];
// 通过class类名获取标签信息
var hh = document.getElementsByClassName("pp")[0];
// 通过css3的类选择器获取信息，获取的是第一个p标签信息
var hh = document.querySelector(".ppp");
// 通过css3的类选择器获取信息，获取的是同一个类名全部p标签信息
var hh = document.querySelectorAll(".ppp");
var box = document.getElementsByClassName("p1")[0];
var p1 = box.getElementById(p1);
console.log(p1);
}
</script>
<body>
<div id="box">
<h1 id="h3">我是h1标签 </h1>
<div>
<p id="p1">我是p标签</p>
</div>
<p class="pp">我是p2标签</p>
<p class="ppp">我是p3标签</p>
<p class="ppp">我是p3标签</p>
<p class="ppp">我是p3标签</p>
</div>
</body>