APIs da Web
Compreensão básica da API da Web
Função e classificação
- Função: Use JS para operar HTML e navegador
- Categoria: DOM (Modelo de Objeto de Documento), BOM (Modelo de Objeto de Navegador)
DOM (modelo de objeto de documento)
DOM (Document Object Model) é uma API usada para renderizar e interagir com qualquer documento HTML ou XML
Vernáculo: DOM é um conjunto de funções fornecidas pelo navegador especificamente para manipular conteúdo da web.
Árvore DOM
O que é uma árvore DOM
- Representar visualmente documentos HTML em uma estrutura de árvore, que chamamos de árvore de documentos ou árvore DOM.
- Substantivos que descrevem a relação entre o conteúdo da página da web
- Função: A árvore do documento reflete intuitivamente o relacionamento entre tags
Objeto DOM
Objeto DOM: objeto JS gerado pelo navegador com base em tags html
- Todas as propriedades do rótulo podem ser encontradas neste objeto
- A modificação das propriedades deste objeto será automaticamente mapeada para o rótulo.
A ideia central do DOM
- Trate o conteúdo da web como objetos
objeto de documento
- É um objeto fornecido no DOM
- Portanto, as propriedades e métodos que ele fornece são usados para acessar e operar conteúdo da web.
- Exemplo: document.write()
- Todo o conteúdo da página da web está no documento
Obtenha o objeto DOM
Obtenha elementos DOM com base no seletor css (ênfase)
Selecione o primeiro elemento que corresponde
gramática:
document.querySelector('css选择器')
parâmetro:
Contém uma ou mais strings de seletor CSS válidas
valor de retorno:
O primeiro elemento correspondido pelo seletor css é um objeto HTMLElement.
Se nenhuma correspondência for encontrada, null será retornado.
Selecione vários elementos correspondentes
gramática
document.querySelector('css选择器')
parâmetro:
Contém uma ou mais strings de seletor CSS válidas
valor de retorno:
Coleção de objetos NodeList correspondentes ao seletor css
document.querySelectorAll('ul li')
O método querySelector() pode operar e modificar diretamente
O método querySelectorAll() não pode ser modificado diretamente, ele só pode modificar os elementos internos por meio de travessia.
document.querySelectorAll('css选择器')
O que você obtém é um pseudo array:
- Matriz com comprimento e número de índice
- Mas não existem métodos de array como pop() push()
- Se você quiser colocar cada objeto dentro, você precisa percorrer (para) para obtê-lo.
Perceber:
- Mesmo que haja apenas um elemento, o que é obtido através de querySelectAll() é um pseudo array com apenas um elemento.
Outras maneiras de obter elementos DOM
// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一个元素 获取页面 所有div
document.getElementsByTagName('div')
// 根据类获取一个元素 获取页面 所有类为w的元素
document.getElementsByClassName('w')
Definir/modificar o conteúdo do elemento DOM
-
documento.write()
-
O conteúdo do texto só pode ser anexado à posição anterior
-
document.write('<h3> 你好，世界！ </h3>') -
Tags contidas no texto serão analisadas
-
-
Propriedade Element.innerText
- Adicionar/atualizar conteúdo de texto para qualquer texto de posição de etiqueta
- Contendo tags não serão analisadas
-
Atributo do elemento .innerHTML
- Recomendar/atualizar conteúdo de texto para qualquer posição de rótulo
- Tags contidas no texto serão analisadas
// innerHTML 属性
box.innerHTML = '<h3>前端程序员<br>的头发都很多</h3>'
A diferença entre os três
- O método document.write() só pode ser anexado ao corpo
- O atributo .innerText do elemento identifica apenas o conteúdo e não pode analisar tags
- Atributo do elemento .innerHTML - Capacidade de analisar tags
- Se você ainda está se perguntando qual usar, você pode escolher innerHTML
Os nomes dos casos selecionados aleatoriamente são exibidos dentro do rótulo especificado.
Requisito: Coloque o nome dentro da caixa span
analisar:
- Obtenha o elemento span
- obter nomes aleatórios
- Escreva o nome dentro do elemento através de innerText ou innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
display: inline-block;
width: 150px;
height: 30px;
border: 1px solid pink;
vertical-align: middle;
line-height: 30px;
}
</style>
</head>
<body>
抽中的选手：<div></div>
<script>
// 1.获取元素
let box = document.querySelector('div')
// 2.得到随机名字
// 随机数
function getRandom(min,max) {
return Math.floor(Math.random() * ( max - min +1 )) +min
}
// 声明一个数组
let arr = ['小米','小吗','小是','小的','小发',
'小人','小他','小哦','小明']
// 生成一个随机数 作为数组的索引号
let random = getRandom(0,arr.length - 1)
// document.write(arr[random])
//3. 写入标签内部
box.innerHTML = arr[random]
// 之后删除这个名字
arr.splice(random,1 )
console.log(arr);
</script>
</body>
</html>
Ocorreu um erro no meio e o js foi gravado na div, fazendo com que o nome aleatório não fosse exibido.
Definir/modificar atributos do elemento DOM
Propriedades comuns
Você também pode definir/modificar os atributos de estilo dos elementos da tag por meio de JS, como alterar imagens por meio de src.
Os atributos mais comuns são: href, title.src, etc.
gramática:
对象.属性 = 值
//1.获取元素
let pic = document.querySelector('img')
//2.操作元素
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'
Caso
Requisito: Quando atualizamos a página, as imagens na página exibem imagens diferentes aleatoriamente
analisar:
- Para exibir aleatoriamente, você precisa usar a função aleatória
- Para alterar a imagem, você precisa usar o atributo src da imagem para modificá-la.
Ideia central:
- Obtenha elementos de imagem
- Obtenha aleatoriamente o número de série da imagem
- Picture.src = caminho aleatório da imagem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<img src="../10327.gif" alt="#">
<!-- <img src="../案例/小学期/images/book1.png" alt=""> -->
<script>
//1. 获取图片元素
let pic =document.querySelector('img')
//2. 随机得到图片序号
function getRandom(min,max) {
return Math.floor(Math.random() * ( max - min +1 )) +min
}
let num = getRandom(1,6)
//3. 完成src 属性赋值
pic.src = `../案例/小学期/images/book${
num}.png`
</script>
</body>
</html>
propriedades de estilo
Você também pode definir/modificar os atributos de estilo dos elementos do rótulo por meio de JS.
- Por exemplo, o estilo de cor pode ser alterado automaticamente através de pontos do carrossel.
- Clique no botão para rolar a imagem. Esta é a posição da imagem movida para a esquerda e assim por diante.
Caminho de aprendizagem:
- Manipule CSS através do atributo style
- Nome da classe de operação (className) operação cSs3．Controle CSS por meio de classes de manipulação classList
- Controle CSS por meio de classes de manipulação classList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
//1.获取元素
let box = document.querySelector('div')
//2.改变1背景颜色 样式 style
box.style.background = 'hotpink'
box.style.width = '400px'
box.style.marginTop = '100px'
</script>
</body>
</html>
Perceber:
- Modifique o estilo através do atributo style
- Se o atributo tiver um conector -, ele precisa ser convertido para camel case (marginTop)
- Ao atribuir valores, não se esqueça de adicionar unidades CSS quando necessário.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: url(../案例/xtx/images/sprites.png);
}
</style>
</head>
<body>
<script>
function getRandom(min,max) {
return Math.floor(Math.random() * ( max - min +1 )) +min
}
// 随机的值1-10
let num = getRandom(1,10)
// 修改背景图片
document.body.style.backgroundImage = `url(../aadada/ada${
num}.jpg )`
// 图片路径
</script>
</body>
</html>
2. Manipule o nome da classe (className) e manipule CSS
Se houver muitos estilos a serem modificados, seria complicado modificá-los diretamente através do atributo style.Podemos usar o nome da classe CSS.
gramática:
//active是一个css类名
元素.className = 'active'
Perceber:
- Como class é uma palavra-chave, use className.
- className substitui o valor antigo pelo novo valor. Se precisar adicionar uma classe, você precisa manter o nome da classe anterior.
3. Controle CSS por meio da classe de operação classList
Para resolver o problema de que className substitui facilmente o nome da classe anterior, podemos anexar e excluir nomes de classes por meio de classList.
gramática:
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')
atributos do elemento de formulário
Em muitos casos, as propriedades de um formulário também precisam ser modificadas. Por exemplo, se você clicar no olho, poderá ver a senha. A essência é converter o tipo de formulário em uma caixa de texto. Possui atributos e valores normais e não é diferente de outros atributos de rótulo.
Obter: objeto DOM.Nome do atributo
configurar senha
Configurações: DOM object.property name = novo valor
表单.value = '用户名'
表单.type = 'password'
Adicionar um atributo de formulário tem efeito, removê-lo não tem efeito. Sempre use um valor booleano para indicar que se for verdadeiro, significa que o atributo foi adicionado; se for falso, significa que o atributo foi removido.
Por exemplo: desabilitado, marcado, selecionado
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="请输入">
<button disabled>按钮</button>
<input type="checkbox" id="check">
<script>
//1.获取元素
let input = document.querySelector('input')
//2.取值或者设置值 得到input里面的值可以用value
console.log(input.value)
input.value = '小米手机'
input.type = 'password'
//2.启用按钮
let button = document.querySelector('button')
button.disabled = false
// false启用按钮，ture关闭按钮
//勾选复选框
let checkbox = document.querySelector('.check')
checkbox.checked = false
</script>
</body>
</html>
Função temporizador intermitente
Iniciar cronômetro
setInterval(函数,间歇时间)
Função: Chame esta função de vez em quando
A unidade de intervalo é milissegundos
function repeat() {
console.log('ajdahdajdpajpo')
}
//每间隔一秒调用repeat函数
srtInterval(repeat,1000)
Perceber:
-
Nomes de funções não precisam de parênteses
-
O cronômetro retorna um número de identificação
desligar o cronômetro
let 变量名 = setInterval(函数，间歇时间)
clearINterval(变量名)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
setInterval(function() {
console.log('高新就业');
},1000)
function show() {
console.log('月薪过万');
}
setInterval(show,1000)
// 清除定时器
clearInterval(cheakbox)
</script>
</body>
</html>
Caso
Efeito de contagem regressiva
Requisito: O botão pode ser usado após 60 segundos
analisar:
- Comece desabilitando o botão (atributo desativado)
- Deve obter o elemento
- Lógica de processamento dentro de funções
- Segundos começam a diminuir
- O texto dentro do botão muda de acordo
- Se os segundos forem iguais a 0, o texto dentro do cronômetro muda para Concordo e o último botão pode ser clicado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.btn{
margin-left: 30px;
}
</style>
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户!在您注册过程中，您需要完成我们的注册流程【请您注意】
如果您不同意以下协议全部或任何条款约定，请您停止注;
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议（3）</button>
<script>
//1.获取元素
let btn = document.querySelector('.btn')
//2.计算逻辑
//2.1需要一个变量，用来计数
let i = 3
//2.2 开启定时器 简歇一秒
let timer = setInterval(function() {
i--
// console.log(i);
btn.innerHTML = `我已经阅读用户协议(${
i})`
if (i === 0) {
// 不走了，清除定时器
clearInterval(timer)
//开启按钮
btn.disabled = false
//更换文字
btn.innerHTML = '我已经阅读用户协议'
}
},1000)
</script>
</body>
</html>
Carrossel de páginas da web
Requisito: Troque uma imagem a cada segundo
analisar:
- Obtenha elementos (imagens e texto)
- Definir função de temporizador
- Defina uma variável++
- Alterar o número de fotos
- Alterar mensagem de texto
- Processe imagens e restaure-as automaticamente para reprodução desde o início
- Se a imagem for reproduzida até a última, será a 9ª imagem
- então redefina a variável para 0
- Observe que o código lógico é escrito na frente da imagem e o texto muda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="img-box">
<img src="../素材/images/b01.jpg" alt="">
<div class="tip">
<h3 class="text">挑战云歌单，欢迎你来</h3>
</div>
</div>
<script>
// 数据
let data = [
{
imgSrc: '../素材/images/b01.jpg',
title: '挑战云歌单，欢迎你来'
},
{
imgSrc: '../素材/images/b02.jpg',
title: '田园日记，上演上京记'
},
{
imgSrc: '../素材/images/b03.jpg',
title: '甜蜜攻势再次回归'
},
{
imgSrc: '../素材/images/b04.jpg',
title: '我为歌狂，生为歌王'
},
{
imgSrc: '../素材/images/b05.jpg',
title: '年度校园主题活动'
},
{
imgSrc: '../素材/images/b06.jpg',
title: 'pink老师新歌发布，5月10号正式推出'
},
{
imgSrc: '../素材/images/b07.jpg',
title: '动力火车来到西安'
},
{
imgSrc: '../素材/images/b08.jpg',
title: '钢铁侠3，英雄镇东风'
},
{
imgSrc: '../素材/images/b09.jpg',
title: '我用整颗心来等你'
},
]
//1.获取元素（图片和文字)
let pic = document.querySelector('.pic')
let text = document.querySelector('.text')
let i = 0
// 开定时器
setInterval(function(){
i++
//修改src属性
pic.src = data[i].imgSrc
text.innerHTML = data[i].title
//衔接
if(i === data.length - 1){
i= -1
//用-1是因为代码运行到上面就1要++，
// 使用用-1.然后++之后刚好为0
// i === 8? i = -1 : i
}
},1000)
</script>
</body>
</html>
evento
escuta de evento
-
Eventos são ações ou coisas que acontecem dentro do sistema durante a programação
- Por exemplo, um usuário clica em um botão em uma página da web
-
escuta de evento
- É para permitir que o programa detecte se um evento ocorre. Uma vez acionado um evento, ele imediatamente chama uma função para responder, também conhecida como registrar um evento.
-
gramática
元素.addEVentListener('事件',要执行的函数)
//事件必须是字符串
- Três elementos de monitoramento de eventos:
- Fonte do evento: O elemento DOM foi acionado pelo evento. Para obter o elemento DOM
- Evento: como acioná-lo, como clique do mouse, passagem do mouse, etc.
- Função chamada por evento: o que fazer
//获取元素
let btn = document.querySelector('button')
//事件监听（注册事件）
btn.addEventListener('click',function() {
alert('被点击了')
})
Perceber:
- O tipo de evento deve ser colocado entre aspas
- A função é executada após clicar. Será executada uma vez cada vez que você clicar.
tipo de evento
| evento | contente | Atributos |
|---|---|---|
| eventos de mouse | Gatilho do mouse | clique mouse clique mouseenter mouse passa mousedeixa mouse sai |
| evento foco | Formulário recebe cursor | foco ganha foco desfoque perde foco |
| Eventos de teclado | gatilho de teclado | keydown é acionado quando o teclado é pressionado keyup é acionado quando o teclado é levantado |
| evento de texto | Gatilho de entrada de formulário | gatilho de entrada do usuário de entrada |
Caso
função de ordem superior
Funções de alta ordem podem ser simplesmente entendidas como aplicações avançadas de funções. Funções em JavaScript podem ser tratadas como [valores]. Com base nesse recurso, aplicações avançadas de funções podem ser realizadas.
[Valor] são dados em JavaScript, como valores numéricos, strings, booleanos, objetos, etc.
Ligar de volta
Se a função A for passada como parâmetro para a função B, chamamos a função A de função de retorno de chamada.
Entendimento simples: quando uma função é passada como parâmetro para outra função, esta função é uma função de retorno de chamada.
Cenários de uso comuns
function fn() {
cinsole.log('我是回调函数。。。')
}
setInterval(fn,1000)
objeto de ambiente
O objeto de ambiente refere-se à variável especial this dentro da função, que representa o ambiente no qual a função atual está sendo executada.
Função: esclarecer o ponto disso pode tornar nosso código mais conciso
- O método de chamada da função é diferente e o objeto ao qual ela se refere também é diferente.
- [Quem liga, é esse] é uma regra aproximada para julgar onde isso aponta.
- Chamar a função diretamente é, na verdade, equivalente à função window., portanto, isso se refere a window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
// 环境对象 this 他就是个对象
function fn() {
console.log(this);
}
fn()
let btn = document.querySelector('button')
btn.addEventListener('click',function() {
console.log(typeof this);
})
//因为btn调用了这个函数，所以this指向谁
</script>
</body>
</html>
Pensamento excludente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pink{
background-color: pink;
}
</style>
</head>
<body>
<button class="pink">1</button><button>2</button>
<button>3</button><button>4</button>
<script>
let btns = document.querySelectorAll('button')
for(let i = 0; i< btns.length; i++) {
btns[i].addEventListener('click',function(){
// this.classList.add('pink')
// 干掉所有人
// for(let j = 0; j < btns.length; j++) {
// btns[j].classList.remove('pink')
// }
// 我只需要找出那个唯一的pink类，删除
document.querySelector('.pink').classList.remove('pink')
// 复活我自己
this.classList.add('pink')
})
}
</script>
</body>
</html>
Operações de nó
Nó DOM
- Nó DOM
- Cada conteúdo da árvore DOM é chamado de tipo de nó.
- nó de elemento
- Todas as tags como body.div
- html é o nó raiz
- nó de atributo
- Todos os atributos como href
- nó de texto
- Todo o texto outro
- outro
Encontrar nó
Relacionamento de nó:
nó pai
nó filho
Nó irmão
Pesquisa de nó pai
- atributo parentNode
- Retorna o nó pai mais próximo.Se não for encontrado,é retornado nulo.
子元素.parentNode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">
<div class="son">儿子</div>
</div>
<script>
let son = document.querySelector('.son')
// 找爸爸 属性
// console.log(son.parentNode)
son.parentNode.style.dispaly = 'none'
</script>
</body>
</html>
Pesquisa de nó filho
filhosNodes
- Obtenha todos os nós filhos, incluindo nós de texto (espaços, novas linhas), nós de comentários, etc.
crianças (ênfase)
- Obtenha apenas todos os nós dos elementos
- O que é retornado ainda é um pseudo array
父元素.children
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<ul>
<li>我是孩子</li>
<li>我是孩子</li>
<li>我是孩子</li>
<li>我是孩子</li>
<li>我是孩子</li>
<li>我是孩子</li>
</ul>
<script>
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.addEventListener('click',function() {
// console.log(ul.children)
for (let i = 0;i < ul.children.length; i++){
ul.children[i].style.color = 'red'
}
})
ul.children[0].style.color = 'green'
</script>
</body>
</html>
Pesquisa de nó irmão
- próximo nó irmão
- nextElementSiblingProperty
- Nó irmão anterior
- Propriedade previousElementSibling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<ul>
<li>第1个</li>
<li class="two">第2个</li>
<li>第3个</li>
<li>第4个</li>
</ul>
<script>
let btn = document.querySelector('button')
let two = document.querySelector('.two')
btn.addEventListener('click',function(){
two.nextElementSibling.style.color = 'red'
two.previousElementSibling.style.color = 'green'
})
</script>
</body>
</html>
Operações de nó
Em muitos casos, precisamos adicionar elementos à página
- Por exemplo, clique no botão publicar para adicionar uma nova mensagem
Geralmente, quando adicionamos um novo nó, fazemos o seguinte:
- Crie um novo nó
- Coloque o novo nó criado dentro do elemento especificado
Criar nó
gramática:
document.createElement('标签名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
</ul>
<script>
let div = document.createElement('div')
// 追加属性
div.className = 'current'
let li = document.createElement('li')
</script>
</body>
</html>
Anexar nó
- Se quiser vê-lo na interface, você deve inseri-lo em um elemento pai.
- Inserir no último elemento filho do elemento pai
//插入到父元素的最后一个子元素
父元素.appendChild(子元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
</ul>
<script>
// let div = document.createElement('div')
// 追加属性
// div.className = 'current'
let ul = document.querySelector('ul')
let li = document.createElement('li')
li.innerHTML = '我是li'
ul.appendChild(li)
</script>
</body>
</html>
- Inserir no elemento pai antes de um elemento filho
//插入到父元素中某个子元素前面
父元素.insertBefore(要出入的元素，在哪个元素前面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我是孩子</li>
<li class="two">two</li>
</ul>
<script>
// let div = document.createElement('div')
// 追加属性
// div.className = 'current'
let ul = document.querySelector('ul')
let li = document.createElement('li')
li.innerHTML = '我是li'
// 2.追加节点 父元素.appendChild(子元素) 插入到父元素的最后一个子元素
// ul.appendChild(li)
// 3、追加节点 父元素.insertBefore(要出入的元素，在哪个元素前面)
// ul.children[1]获取ul中第二个li
ul.insertBefore(li,ul.children[1])
</script>
</body>
</html>
Caso
Requisitos: Renderizar análise de página com base em dados:
①: Prepare a estrutura ul vazia
②: Crie um novo li vazio com base no número de dados
③: Adicione o título da imagem do conteúdo, etc.
④:Adicionar a ul
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学成在线首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 4. box核心内容区域开始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<!-- <li>
<img src="./images/course01.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • <span> 1125</span>人在学习
</div>
</li> -->
</ul>
</div>
</div>
<script>
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: '我会变，你呢？',
num: 590
},
{
src: 'images/course08.png',
title: '我会变，你呢？',
num: 590
}
]
let ul = document.querySelector('ul')
// 1. 根据数据的个数，决定这小li的个数
for (let i = 0; i < data.length; i++) {
// 2. 创建小li
let li = document.createElement('li')
// console.log(li)
// 4. 先准备好内容，再追加
li.innerHTML = `
<img src=${
data[i].src} alt="">
<h4>
${
data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span> ${
data[i].num}</span>人在学习
</div>
`
// 3. 追加给ul 父元素.appendChild(子元素)
ul.appendChild(li)
}
</script>
</body>
</html>
Clonar nó
Em circunstâncias especiais, adicionamos um novo nó e realizamos as seguintes operações:
Copie um nó original
Coloque o nó copiado dentro do elemento especificado
//克隆一个已有的元素节点
元素.cloneNode(布尔值)
cloneNode clonará um elemento igual à tag original e passará um valor booleano entre parênteses
- Se for verdade, significa que os nós descendentes serão clonados juntos durante a clonagem.
- Se for falso, significa que os nós descendentes não estão incluídos no clone.
- O padrão é falso
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我是内容</li>
</ul>
<script>
let ul = document.querySelector('ul')
// 括号为空则，默认为false 若为false，则代表克隆时不包含后代节点
let newul = ul.cloneNode(true)
document.body.appendChild(newul)
</script>
</body>
</html>
Excluir nó
Se um nó não for mais necessário na página, você poderá excluí-lo
Em operações DOM nativas de JavaScript, para excluir um elemento você deve excluí-lo através do elemento pai
gramática
父元素.removeChild(要删除的元素)
Nota:
Se não houver relacionamento pai-filho, a exclusão não será bem-sucedida.
Há uma diferença entre excluir um nó e ocultar um nó (display.none): o nó oculto ainda existe, mas se você excluí-lo, o nó será excluído do html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<ul>
<li>我是内容</li>
</ul>
<script>
let btn = document.querySelector('button')
let ul =document.querySelector('ul')
btn.addEventListener('click',function(){
// 删除语法
ul.removeChild(ul.children[0])
})
</script>
</body>
</html>
objeto de tempo
Objeto de tempo: um objeto usado para representar o tempo
Função: Você pode obter a hora atual do sistema
Instanciar
Quando a nova palavra-chave é encontrada no código, esta operação é geralmente chamada de instanciação.
Crie um objeto de tempo e obtenha a hora
Obter hora atual
//获取当前时间
let date = new Date()
// 获取指定时间
let date = new Date('1949-10-09')
métodos de objeto de tempo
Como os dados retornados pelo objeto de tempo não podem ser usados diretamente, eles precisam ser convertidos em um formato comumente usado no desenvolvimento real.
| método | efeito | ilustrar |
|---|---|---|
| getAnoFull() | Obter ano | Obtenha o ano de quatro dígitos |
| getMês() | Obter mês | O valor é 0~11 |
| getData() | Receba todos os dias do mês | Os valores são diferentes em meses diferentes |
| getDia() | Obtenha o dia da semana | O valor é 0~6 |
| getHoras() | Obter horas | O valor é 0~23 |
| getMinutos() | Obtenha minutos | O valor é 0~59 |
| getSegundos() | Obtenha segundos | O valor é 0~59 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
let arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
getTime()
setInterval(getTime,1000)
function getTime() {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() +1
let date1 = date.getDate()
let day = date.getDay()
let hour = date.getHours()
let min = date.getMinutes()
let sec = date.getSeconds()
let div = document.querySelector('div')
div.innerHTML = `今天是：${
year}年${
month}月${
date1}日
${
hour}:${
min}:${
sec} ${
arr[day]}`
}
</script>
</body>
</html>
Carimbo de data e hora
o que é carimbo de data/hora
Refere-se ao número de milissegundos desde 00:00:00 de 1º de janeiro de 1970 até o presente. É uma forma especial de medir o tempo.
Três maneiras de obter carimbo de data/hora
// 1.getTime()
let date = new Date()
console.log(date.getTime())
// 2.简写 + new Date() （推荐）
console.log(+new Date());
// 3.使用Date.now() 只能得到当前的
console.log(Date.now());
Repintar e refluir (entrevista)
Como o navegador renderiza a interface
- Analisar (Analisador) HTML e gerar Árvore DOM (Árvore DOM)
- Analisar (Parser) css ao mesmo tempo e gerar regras de estilo (Style Rules)
- Gere uma árvore de renderização (Render Tree) com base na árvore DOM e nas regras de estilo
- Realizar layout (reflow/reorganização): De acordo com a árvore de renderização gerada, obter as informações geométricas (posição, tamanho) do nó, e utilizá-las no layout (big box)
- Pintura (redesenho): Desenhar a página inteira com base em cálculos e informações adquiridas
- Exibição: exibido na página
Redesenhar e refluir (refluir)
Refluxo (rearranjo)
- Quando o tamanho, estrutura, layout, etc. de alguns ou todos os elementos na árvore de renderização mudam, o navegador renderiza novamente parte ou todo o documento, um processo chamado refluxo.
Redesenhar
- Como a alteração do estilo de um nó (elemento) não afeta sua posição no fluxo e no layout do documento (como cor, cor de fundo, contorno, etc.), isso é chamado de redesenho.
O redesenho não causa necessariamente o refluxo, mas o refluxo sempre causa o redesenho. (Foco da entrevista)
- Operações que causarão refluxo (refluxo):
- A primeira atualização da página
- O tamanho da janela do navegador muda
- O tamanho ou posição do elemento muda
- Altere o tamanho da fonte
e o conteúdo (como: entrada da caixa de entrada, tamanho da imagem) - Ative pseudoclasses CSS (por exemplo: :hover)
- Script para manipular DOM (adicionar ou remover elementos DOM visíveis)
- Basta entender que se isso afetar o layout, haverá refluxo.
objeto de evento
Obter objeto de evento
Qual é o objeto do evento
- Também é um objeto, que contém informações relevantes quando o evento é acionado.
- Por exemplo: em um evento de clique do mouse, o objeto evento armazena informações como onde está o ponto do mouse.
Como conseguir
- O primeiro parâmetro da função de retorno de chamada vinculada a eventos é o objeto de evento.
- Evento geralmente denominado, ev.e
元素.addEventListener('click',function(e) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('mouseenter',function(e) {
console.log(e);
})
</script>
</body>
</html>
cursor
Alguns atributos comuns
- tipo
- Obtenha o tipo de evento atual
- clienteX/clienteY
- Obtém a posição do cursor em relação ao canto superior esquerdo da janela visível do navegador
- deslocamentoX/deslocamentoY
- Obtém a posição do cursor em relação ao canto superior esquerdo do elemento DOM atual
- chave
- O valor da tecla do teclado pressionada pelo usuário
- O uso de código-chave agora é desencorajado
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.addEventListener('mousemove',function(e){
// console.log(11);
// pageX 和 pageY 跟文档坐标有关系
// console.log(e);
console.log('clinetx:' + e.clientX,'clientY:' + e.clientY)
console.log('pageX:' + e.pageX,'pageY:' + e.pageY)
console.log('offsetx:' + e.offsetX,'offsetY:' + e.offsetY)
})
</script>
</body>
</html>
Caso
A imagem segue o mouse
Análise:
①: O mouse se move na página, usando o evento mousemove
②: Atribui constantemente a posição coordenada do mouse na página aos valores esquerdo e superior da imagem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
position: absolute ; /*定位 */
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="./tianshi.gif" alt="">
<script>
let pic = document.querySelector('img')
document.addEventListener('mousemove',function(e) {
// 不断获取当前鼠标坐标
console.log(e.pageX)
console.log(e.pageY)
//把坐标给图片
pic.style.left = e.pageX -40 + 'px'
pic.style.top = e.pageY - 40 + 'px'
})
</script>
</body>
</html>
Pressione Enter para postar no Weibo
Requisito: pressione o teclado Enter para publicar informações
Requisito 1: Detecte o número de palavras inseridas pelo usuário
-
Registrar evento de entrada
-
Atribua o comprimento do conteúdo do texto ao valor correspondente
-
O atributo maxlength do formulário pode ser limitado diretamente a 200 números.
Requisito 2: A entrada não pode estar vazia
- Determine se o conteúdo está vazio, o prompt não pode estar vazio e o retorno direto não pode estar vazio
- Para evitar a inserção de espaços sem sentido, use string.trim() para remover espaços iniciais e finais.
- e defina o valor do formulário como uma string vazia
- Ao mesmo tempo, a cor vermelha abaixo é definida como 0
Requisito 3: Adicione uma nova mensagem
- Crie um pequeno li e anexe dados por meio de innerHTML
- Obtenha aleatoriamente o conteúdo da matriz de dados, substitua a imagem e o nome de newNode e o conteúdo da mensagem
- Use objetos de tempo para dinamizar o tempo new Date().toLocaleString()
- anexar a ul
fluxo de eventos
O fluxo de eventos refere-se ao caminho do fluxo durante a execução completa de um evento
- Nota: Supondo que haja uma div na página, quando um evento é acionado, ele passará por dois estágios, ou seja, o estágio de captura e o estágio de bolha.
- Simplificando: a fase de captura é de pai para filho e a fase de borbulhamento é de filho para pai
Borbulhamento de eventos
Conceito de borbulhamento de evento:
Quando um evento é acionado em um elemento, o mesmo evento será acionado em todos os elementos ancestrais do elemento. Este processo é chamado de bolha de evento
Entendimento simples: quando um elemento aciona um evento, os eventos com o mesmo nome de todos os elementos pai serão chamados em sequência.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
margin: 100px auto;
width: 400px;
height: 400px;
background-color: pink;
}
.son {
margin: 100px auto;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let fa = document.querySelector('.father')
let son = document.querySelector('.son')
fa.addEventListener('click', function() {
alert('我是爸爸')
})
son.addEventListener('click', function() {
alert('我是儿子')
})
</script>
</body>
</html>
captura de eventos
Conceito de captura de eventos:
Comece no elemento raiz do DOM para executar o evento correspondente (de fora para dentro)
A captura de eventos requer a escrita do código correspondente para ver o efeito.
código
son.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
ilustrar:
- O terceiro parâmetro de addEventListener é passado em true para indicar que a fase de captura é acionada (raramente usado)
- Se falso for passado, significa que a fase de bolha foi acionada. O padrão é falso.
- Se você usar o monitoramento de eventos LO, haverá apenas a fase de borbulhamento e nenhuma captura.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
margin: 100px auto;
width: 400px;
height: 400px;
background-color: pink;
}
.son {
margin: 100px auto;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let fa = document.querySelector('.father')
let son = document.querySelector('.son')
fa.addEventListener('click', function() {
alert('我是爸爸')
},true)
son.addEventListener('click', function() {
alert('我是儿子')
},ture)
</script>
</body>
</html>
Bloqueie o fluxo de eventos
Como o modo bolha existe por padrão, é fácil que os eventos afetem os elementos pais.
Se quiser limitar o evento ao elemento atual, você precisa impedir o fluxo de eventos
Para evitar o fluxo de eventos, você precisa obter o objeto de evento
gramática:
事件对象.stopPropagation()
Este método pode bloquear o fluxo e a propagação de eventos, sendo eficaz não apenas na fase de borbulhamento, mas também na fase de captura.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
margin: 100px auto;
width: 400px;
height: 400px;
background-color: pink;
}
.son {
margin: 100px auto;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let fa = document.querySelector('.father')
let son = document.querySelector('.son')
fa.addEventListener('click', function() {
alert('我是爸爸')
})
son.addEventListener('click', function(e) {
alert('我是儿子')
// 阻止事件流动
e.stopPropagation()
})
</script>
</body>
</html>
Passe o mouse sobre o evento:
mouseover e mouseout terão um efeito borbulhante
mouseenter e mouseleave não têm efeito borbulhante (recomendado)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
margin: 100px auto;
width: 400px;
height: 400px;
background-color: pink;
}
.son {
margin: 100px auto;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let fa = document.querySelector('.father')
let son = document.querySelector('.son')
fa.addEventListener('mouseenter',function() {
console.log(111);
})
fa.addEventListener('click', function() {
alert('我是爸爸')
})
son.addEventListener('click', function(e) {
alert('我是儿子')
// 阻止事件流动
e.stopPropagation()
})
</script>
</body>
</html>
Impedir comportamentos padrão, como cliques em links que não saltam e saltos em campos de formulário
gramática:
e.preventDefault()
- A diferença entre os dois eventos de registro:
- Registro gn tradicional (LO)
- Para o mesmo objeto, os eventos registrados posteriormente substituirão os eventos registrados anteriormente (o mesmo evento).
- Você pode desvincular o evento substituindo-o diretamente por nulo.
- Todos são executados na fase de borbulhamento.
- Registro de escuta de evento (L2)
- Sintaxe: addEventListener(tipo de evento, função de manipulação de evento, se deve usar captura)
- Os eventos registrados posteriormente não substituirão os eventos registrados anteriormente (o mesmo evento)
- Você pode usar o terceiro parâmetro para determinar se ele é executado na fase de borbulhamento ou de captura.
- Você deve usar removeEventListener (tipo de evento, função de manipulação de eventos, captura ou fase de bolha)
- Funções anônimas não podem ser desvinculadas
delegação do evento
A delegação de eventos é um conhecimento e habilidade que utiliza as características dos fluxos de eventos para resolver algumas necessidades de desenvolvimento.
Resumir:
- Vantagens: Adicionar eventos aos elementos pais (pode melhorar o desempenho)
- Princípio: a delegação de eventos, na verdade, usa as características do evento bolha para adicionar eventos aos elementos pais, e os elementos filhos podem acioná-los.
- Implementação: event object.target pode obter o elemento que realmente acionou o evento
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我是第一个小li</li>
<li>我是第二个小li</li>
<li>我是第三个小li</li>
<li>我是第四个小li</li>
<li>我是第五个小li</li>
</ul>
<script>
//不要每个小Li注册事件了而是把事件委托给他的爸爸
// 事件委托是给父级添加事件而不是孩子添加事件
let ul = document.querySelector('ul')
ul.addEventListener('click',function(e) {
// alert('我点击了')
// 得到当前元素
// console.log(e.target)
e.target.style.color = 'red'
})
</script>
</body>
</html>
efeito acordeão
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
width: 1200px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
/* 过渡 */
transition: all 500ms;
}
div ul {
width: 1200px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a href="#">
<img src='../手风琴images/1.jpg' alt="">
</a>
</li>
<li>
<a href="#">
<img src='../手风琴images/2.jpg' alt="">
</a>
</li>
<li>
<a href="#">
<img src='../手风琴images/3.jpg' alt="">
</a>
</li>
<li>
<a href="#">
<img src='../手风琴images/4.jpg' alt="">
</a>
</li>
<li>
<a href="#">
<img src="../手风琴images/5.jpg" alt="">
</a>
</li>
</ul>
</div>
<script>
// 1.li默认有个宽度是240像素
// 2．当我们鼠标经过，当前的小i 宽度变大 800px其余的小Li 变为100px
// 3.·鼠标离开事件，所有的小Li都要复原宽度为240px
// （1）获取元素
let lis = document.querySelectorAll('li')
// (2)绑定鼠标经过和离开事件
for (let i = 0; i < lis.length; i++) {
// 鼠标经过事件
lis[i].addEventListener('mouseenter',function() {
// 排他思想干掉所有人108px，复活我自己800px
for ( j = 0; j < lis.length; j++) {
lis[j].style.width = '100px'
}
this.style.width = "800px"
})
// 鼠标离开
lis[i].addEventListener('mouseleave',function() {
// 排他思想干掉所有人108px，复活我自己800px
for ( j = 0; j < lis.length; j++) {
lis[j].style.width = '240px'
}
})
}
</script>
</body>
</html>
list não está definida em HTMLLIElement.
Este erro ocorreu durante este período porque escrevi lis.length no loop para alterar todas as larguras para 100px como list.length.
rolar e carregar eventos
evento de rolagem
- Evento acionado quando a página é rolada
- Por que estudar?
- Muitas páginas da web precisam detectar quando o usuário rola a página para uma determinada área e fazer algum processamento, como consertar a barra de navegação, como retornar ao topo.
- Nome do evento: rolagem
- Ouça a rolagem da página inteira:
window.addEventListener('scroll',function(){
})
Adicionar evento de rolagem à janela ou documento
- Para monitorar a rolagem interna de um elemento, basta adicioná-lo diretamente a um elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 3000px;
}
div{
overflow:auto ;
width: 200px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div>
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
</div>
<script>
let div = document.querySelector('div')
// window.addEventListener('scroll',function(){
// console.log(111);
// })
div.addEventListener('scroll',function(){
console.log(111)
})
</script>
</body>
</html>
evento de carregamento
Evento acionado quando recursos externos (como imagens, CSS e JavaScript externos, etc.) são carregados.
Por que estudar?
- Às vezes você precisa esperar que todos os recursos da página sejam processados para fazer algo
- Códigos antigos gostam de escrever scripts na cabeça. Neste momento, se você procurar diretamente o elemento DOM, não conseguirá encontrá-lo.
Nome do evento: carregar
Todos os recursos na página de monitoramento foram carregados:
- Adicionar evento de carregamento à janela
window.addEventListener('load',function(){
}
- Observação: você não apenas pode monitorar quando todo o recurso da página é carregado, mas também pode vincular um evento de carregamento a um determinado recurso.
Quando o documento HTML inicial é totalmente carregado e analisado, o evento DOMContentLoaded é acionado sem esperar que folhas de estilo, imagens, etc. sejam totalmente carregadas.
Nome do evento:DOMcontentLoaded
A página de escuta DOM é carregada:
- Adicionar evento DOMContentLoaded ao documento
document.addEventListener('DOMcontentLoaded',function(){
}
Tamanho e posição do elemento
família de rolagem
cenas a serem usadas:
Queremos que a página role uma certa distância, como 100px, para mostrar e ocultar certos elementos. Então, como sabemos que a página rolou 100 pixels?
Você pode usar a rolagem para detectar a distância de rolagem da página
- Obtenha largura e altura
- Obtenha a largura e altura total do conteúdo do elemento (excluindo barras de rolagem) e retorne o valor sem unidades.
- largura de rolagem e altura de rolagem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div>
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
</div>
<script>
// scrollwidth和scrollHeight 内容的大小(了解)
let div = document.querySelector('div')
console.log(div.scrollWidth)
console.log(div.scrollHeight)
</script>
</body>
</html>
- Obter localização
- Obtenha o conteúdo do elemento e role-o para a esquerda ou para cima até uma distância invisível
- scrollLeft e scrollTop
- Estas duas propriedades podem ser modificadas
div.addEventListener('scroll',function() {
console.log(this.scrollLeft)
Durante o desenvolvimento, muitas vezes detectamos a distância de rolagem da página. Por exemplo, se a página rolar 100 pixels, um elemento pode ser exibido ou um elemento pode ser corrigido.
Caso
A rolagem da página mostra o botão voltar ao topo
Requisito: Quando a página rola 500 pixels, o botão retornar ao topo é exibido, caso contrário fica oculto. Clique no botão ao mesmo tempo para retornar ao topo.
Análise:
①: Use o evento de rolagem da página
②: Detecte que a rolagem da página é maior ou igual a 100 pixels e exiba o botão
③: Clique no botão para redefinir o scrollTop da página para 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 3000px;
width: 1000px;
background-color: pink;
margin: auto;
}
.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}
.backtop a {
height: 50px;
width: 50px;
background: url(../素材/images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="backtop">
<img src="../素材/images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
var i = 500
let backtop = document.querySelector('.backtop')
// 页面滚动事件
window.addEventListener('scroll', function() {
// 检测滚动距离
let num = document.documentElement.scrollTop
// 进行判断和隐藏
if (num >= i) {
// 显示返回顶部
backtop.style.display = 'block'
} else {
// 或者隐藏元素
backtop.style.display = 'none'
}
})
// 点击返回顶部
backtop.children[1].addEventListener('click',function() {
document.documentElement.scrollTop = 0
})
let img = document.querySelector('img')
img.addEventListener('click',function() {
backtop.style.display = 'none'
// function addi () {
// i += 500
// }
// // console.log(i)
})
</script>
</body>
</html>
Há uma melhoria. A ideia é aumentar 500 após clicar em × sem retornar ao padrão superior. A ideia é usar a variável local i para alterar a variável global i
família de deslocamento
Cenários de uso:
Calculamos sozinhos a distância de rolagem no caso anterior. É melhor fazer algo quando a página rola para um determinado elemento.
Simplificando, usamos js para obter a posição do elemento na página para que, quando a página rolar para essa posição, possamos retornar à pequena caixa exibida na parte superior...
Obtenha largura e altura
- Obtenha a largura e a altura do próprio elemento, incluindo a largura e a altura definidas pelo próprio elemento e padding.border.
- offsetHeight e offsetWidth
Obter localização
- Obtenha a distância esquerda e superior do elemento do elemento pai que você está posicionando
- Observe que offsetLeft e offsetTop são propriedades somente leitura.
Caso
Caso
família do cliente
Obtenha largura e altura
- Obtenha a largura e a altura da parte visível do elemento (excluindo bordas, barras de rolagem, etc.)
- clientwidth e clientHeight
Obter localização
- Obtenha as larguras das bordas esquerda e superior
- Observe que clientLeft e clientTop são propriedades somente leitura.
Os eventos serão acionados quando o tamanho da janela mudar
- redimensionar
window.addEventListener('resize',function() {
//执行代码
})
Detectar largura da tela
window.addEventListener('resize',function() {
let w = document.documentElement.clientWidth
console.log(w)
})
objeto janela
BOM (modelo de objeto do navegador)
BOM
- BOM (Browser Object Model) é o modelo de objeto do navegador
- Janela é um objeto global integrado ao navegador. Todo o conteúdo de conhecimento do WebAPls que aprendemos é baseado no objeto janela.
- O objeto janela contém cinco atributos: navegador, localização, documento, histórico e tela, que é o chamado BOM (Browser Object Model)
- Documento é a base para a implementação do DOM. Na verdade, ele está anexado às propriedades da janela.
Temporizador - Função de atraso
Existe uma função embutida no JavaScript para atrasar a execução do código, chamada setTimeout.
gramática:
setTimeout(回调函数,等待的毫秒数)
setTimeout é executado apenas uma vez, portanto pode ser entendido como um atraso na execução de um trecho de código, geralmente omitindo a janela
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>解除</button>
<script>
// 只能使用一次
let timer = setTimeout(function(){
console.log(111)
},3000)
let btn = document.querySelector('button')
btn.addEventListener('click',function(){
clearTimeout(timer)
})
</script>
</body>
</html>
função recursiva
Chamar a si mesmo é uma função recursiva
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 所以要加一个退出条件，使得递归不死
let num = 0
// 死递归
function fn() {
num++
console.log(111)
if (num>= 100){
return
}
fn()
}
fn()
</script>
</body>
</html>
Caso: Implementando setInterval usando recursão
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div')
function fn() {
div.innerHTML = new Date().toLocaleDateString()
setTimeout(fn,1000)
}
fn()
</script>
</body>
</html>
Comparação de dois temporizadores
- A característica do setInterval é que ele é executado repetidamente e a primeira execução será atrasada.
- setTimeout é caracterizado por execução a quente atrasada e é executado apenas uma vez
- setTimeout combinado com funções recursivas pode simular a execução repetida de setlnterval
- clearTimeout limpa as tarefas agendadas criadas por setTimeout
Mecanismo de execução JS
Perguntas clássicas de entrevista
console.log(111)
setTimeout(function() {
console.log(222)
},1000)
console.log(333)
//结果111 333 222
console.log(111)
setTimeout(function() {
console.log(222)
},0)
console.log(333)
//结果还是111 333 222
JS é de thread único
Uma característica importante da linguagem JavaScript é que ela é de thread único, o que significa que só pode fazer uma coisa por vez. Isso se deve à missão da linguagem de script Javascript – o JavaScript nasceu para lidar com a interação do usuário na página e operar o DOM. Por exemplo, se adicionarmos e excluirmos um determinado elemento DOM, não poderemos fazer isso ao mesmo tempo. Deve ser adicionado primeiro e depois excluído.
Thread único significa que todas as tarefas precisam ser enfileiradas e a próxima tarefa não será executada até que a tarefa anterior seja concluída. O problema causado por isso é: se o tempo de execução do JS for muito longo, a renderização da página ficará inconsistente, resultando na sensação de que a renderização e o carregamento da página estão bloqueados.
Síncrono e assíncrono
Para resolver este problema e aproveitar o poder computacional das CPUs multi-core, o HTML5 propõe o padrão web trabalhador, que permite que scripts JavaScript criem múltiplos threads. Como resultado, sincronização e assíncrona apareceram em JS.
Sincronizar
Quando a próxima tarefa é executada após a conclusão da tarefa anterior, a ordem de execução do programa é consistente e sincronizada com a ordem de organização das tarefas. Por exemplo, o método síncrono de cozimento: precisamos ferver a água para cozinhar o arroz, esperar que a água ferva (após 10 minutos) e depois cortar e fritar os vegetais.
assíncrono
Quando você está fazendo algo, porque vai demorar muito, você também pode lidar com outras coisas enquanto faz isso. Por exemplo, no método de cozimento assíncrono, usamos esses 10 minutos para picar e refogar legumes enquanto fervemos água.
A diferença essencial: a ordem de execução de cada processo nesta linha de montagem é diferente.
Sincronizar tarefas
Tarefas síncronas são executadas no thread principal, formando uma pilha de execução.
Tarefas assíncronas
JS assíncrono é implementado por meio de funções de retorno de chamada.
De modo geral, existem três tipos de tarefas assíncronas:
-
Eventos comuns, como clicar, redimensionar, etc.
-
Carregamento de recursos, como carga, erro, etc.
-
Temporizadores, incluindo setlnterval, setTimeout, etc.
Mecanismo de execução JS
As tarefas assíncronas são adicionadas à fila de tarefas (a fila de tarefas também é chamada de fila de mensagens).
-
Primeiro execute as tarefas de sincronização na pilha de execução.
-
As tarefas assíncronas são colocadas na fila de tarefas.
-
Depois que todas as tarefas síncronas na pilha de execução forem executadas, o sistema lerá as tarefas assíncronas na fila de tarefas em ordem, de modo que as tarefas assíncronas lidas terminem o estado de espera, entrem na pilha de execução e iniciem a execução.
Como o thread principal obtém tarefas repetidamente, executa tarefas, obtém tarefas e executa novamente, esse mecanismo é chamado de loop de eventos.
objeto de localização
objeto de localização
O tipo de dados de localização é um objeto que divide e salva os vários componentes do endereço URL.
Propriedades e métodos comuns:
-
O atributo href obtém o endereço URL completo e é usado para ir para o endereço ao atribuir um valor a ele.
// 可以得到当前文件url地址 console.log(location.href) // 可以通过js方式跳转到目标地址 location.href = 'http://www.baidu.com'Caso
Página que salta após 5 segundos.
Requisitos: O usuário pode clicar para pular. Caso contrário, ela saltará automaticamente após 5 segundos. Requer uma análise de contagem regressiva de segundos:
①: O elemento alvo é um link
②: Use um cronômetro para definir uma contagem regressiva digital③: Quando o tempo acabar, ele irá automaticamente para uma nova página.
Após o pagamento bem-sucedido, ele retornará à página original 1 segundo depois.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span{ color: red; } </style> </head> <body> <a href="http://www.baidu.com">支付成功，<span>5</span>秒之后跳转首页</a> <script> let a = document.querySelector('a') let num = 5 let timer = setInterval(function() { num-- a.innerHTML = `支付成功，<span>${ num}</span>秒之后跳转首页` if(num === 0) { clearTimeout(timer) location.href = 'https://www.bilibili.com/' } },1000) </script> </body> </html> -
O atributo search obtém os parâmetros transportados no endereço, a parte após o símbolo?
console.log(loaction.search)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="target.html"> <input type="text" name="username"> <button>提交</button> </form> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> console.log(location.search) </script> </body> </html> -
O atributo hash obtém o valor hash no endereço, a parte após o símbolo #
console.log(location.hash)A base para o roteamento vue posterior é frequentemente usada para exibir páginas diferentes sem atualizar a página, como NetEase Cloud Music
-
O método reload é usado para atualizar a página atual. Quando o parâmetro true é passado, significa uma atualização forçada.
<button>点击刷新</button> <script> let btn = document.querySelector('button') btn.addEventListener('click', function() { //刷新方法 有本地缓存 强制刷新ctrl + f5 直接更新最新内容从网上拉去，不走本地缓存 location.reload(true) //强制刷新 CTRL+f5 }) </script>
objeto navegador
Detecte a versão e a plataforma do navegador por meio do userAgent
objeto histórico
O tipo de dados do histórico é um objeto que corresponde às operações da barra de endereço do navegador, como avançar, retroceder, histórico, etc.
Propriedades e métodos comuns
| métodos de objeto de histórico | efeito |
|---|---|
| voltar() | Pode voltar à função |
| avançar() | Função de encaminhamento |
| vá (parâmetro) | Se o parâmetro da função de avanço e retrocesso for 1, o primeiro plano terá 1 página e, se for -1, os parâmetros da função de avanço e retrocesso serão uma página. |
O objeto histórico é geralmente menos usado no desenvolvimento real, mas pode ser visto em alguns sistemas de escritório OA.
plugin de deslizamento
Plug-in: É um código escrito por terceiros, só precisamos copiar o código correspondente para implementá-lo diretamente.
O processo básico do plug-in de aprendizagem de efeito correspondente
Familiarize-se com o site oficial e entenda quais requisitos este plug-in pode atender https://www.swiper.com.cn/
Assista a demonstrações online e encontre a demonstração que atenda às suas necessidades https: //www.swiper.com.cn/demo/index.html
Veja o processo básico de uso https: // www.swiper.com.cn/usage/index.html
Veja a documentação da API para configurar seu próprio plug-in https://www.swiper.com.cn/api/index.html
Nota: Quando vários deslizadores são usados ao mesmo tempo, os nomes das classes precisam ser diferenciados.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<style>
.box {
width: 600px;
height: 350px;
background-color: pink;
margin: 100px auto;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
width: 100%;
height: 350px;
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
}
.swiper-pagination-bullet-active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<!-- Swiper -->
<div class="swiper-container one">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="./images/b_01.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_02.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_03.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_04.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_05.jpg" alt="">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div class="box">
<!-- Swiper -->
<div class="swiper-container two">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="./images/b_01.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_02.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_03.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_04.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./images/b_05.jpg" alt="">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<script src="./js/swiper-bundle.min.js"></script>
<!-- 要放到插件的下面 -->
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.one', {
slidesPerView: 1,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
spaceBetween: 0,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
keyboard: true,
});
var swiper = new Swiper('.two', {
slidesPerView: 1,
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
spaceBetween: 0,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
keyboard: true,
});
</script>
</body>
</html>
armazenamento local
Com o rápido desenvolvimento da Internet, as aplicações baseadas na Web estão se tornando cada vez mais comuns e cada vez mais complexas. Para atender a diversas necessidades, muitas vezes grandes quantidades de dados são armazenadas localmente. A especificação HTML5 propõe soluções relevantes.
1. Os dados são armazenados no navegador do usuário.
2. É fácil de configurar e ler, e os dados não serão perdidos mesmo quando a página for atualizada.
3. A capacidade é grande, sessionStorage e localStorage são cerca de 5M.
armazenamento local
1. O ciclo de vida entra em vigor permanentemente. A menos que você o exclua manualmente, a página fechada ainda existirá.
2. Várias janelas (páginas) podem ser compartilhadas (o mesmo navegador pode ser compartilhado)
3. Armazene e use na forma de pares de valores-chave
- Armazenando dados
- localStorage.setItem(chave,valor)
- recuperar dados
- localStorage.getItem(chave)
- excluir dados
- localStorage.removeItem(chave)
Armazene tipos de dados complexos
- Somente strings podem ser armazenadas localmente, e tipos de dados complexos não podem ser armazenados. Tipos de dados complexos precisam ser convertidos em strings JSON antes de armazená-los localmente.
JSON.stringify (tipo de dados complexo)
- Converta dados complexos em strings JSON e armazene-os em armazenamento local
JSON.parse (string JSON)
- Usado ao converter strings JSON em objetos e retirá-los
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 存储数据 localStorage.setItem(键,值)
// localStorage.setItem('uname','孙悟空')
// localStorage.setItem('age',18)
// 获取数据 localStorage.getItem(key)
// localStorage.getItem('uname')
// 删除数据
// localStorage.removeItem('uname')
// 调用复杂类型
let obj = {
uname : '老八' ,
age : 18 ,
address : '试吃员'
}
// 复杂数据类型一定要转换为json字符串在进行存储
localStorage.setItem('obj' ,JSON.stringify(obj))
// 取数据可以使用JSON.parseo将json字符串转换为对系
JSON.parse(localStorage.getItem('obj'))
// // json字符串 属性和值都是双引号进行包含
// let ob = {
// "uname" : "老八" ,
// "age" : "18 ",
// "address" : "试吃员"
// }
let object = {
age : 18
}
//本地存储只能存储字符串所以我要转换转换为JSON格式的字符串
localStorage.setItem('key',JSON.stringify(object))
// //获取的过来的值是字符串，不是对象了没有办法直接使用，因此我们首先吧字符串转换为对象
// JSON.parse()
console.log(JSON.parse(localStorage.getItem('key')));
</script>
</body>
</html>
expressão regular
- Expressão regular (Expressão Regular) é um padrão usado para combinar combinações de caracteres em strings. Em JavaScript, expressões regulares também são objetos
- Geralmente é usado para localizar e substituir texto que corresponde a expressões regulares. Muitas linguagens suportam expressões regulares.
Função de expressão regular:
- Validação de formulário (correspondência)
- Filtrar palavras sensíveis (substituir)
- Extraia a parte que queremos da string (extração)
Etapas de sintaxe:
-
Definir regras
-
gramática:
let 变量名 = /表达式/ -
onde // é uma expressão regular literal
-
Por exemplo
let reg = /前端/
-
-
Determine se existe uma string que corresponda às regras:
O método test() é usado para verificar se a expressão regular corresponde à string especificada.-
Gramática (ênfase)
regObj.test(被检测的字符串) -
Retorna verdadeiro se a expressão regular corresponder à string especificada, caso contrário, retorna falso
-
-
Recuperar (encontrar) strings que correspondam às regras:
O método exec() executa uma correspondência de pesquisa em uma string especificada-
gramática
regObj.exec(被检测的字符串)Se a correspondência for bem-sucedida, o método exec() retornará um array, caso contrário, retornará nulo
-
Metacaracteres
● Personagens comuns:
A maioria dos caracteres só pode descrever a si mesmos. Esses caracteres são chamados de caracteres comuns, como todas as letras e números. Ou seja, caracteres comuns só podem corresponder aos mesmos caracteres da string.
● Metacaracteres (caracteres especiais)
são caracteres com significados especiais, que podem melhorar significativamente a flexibilidade e funções de correspondência poderosas.
- Por exemplo, está estipulado que os usuários só podem inserir 26 letras em inglês. Para caracteres comuns, abcdefghijklm...
- Mas mude para escrita de metacaracteres: [az]
Documentos de referência:
- MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- Ferramenta de teste regular http://tool.oschina.net/regex
personagem limite
Os caracteres de limite (caracteres de posição) em expressões regulares são usados para indicar a localização dos caracteres. Existem principalmente dois caracteres.
| personagem limite | ilustrar |
|---|---|
| ^ | Indica a correspondência do texto no início da linha (começando com sleep) |
| $ | Indica o texto que corresponde ao final da linha (quem termina com ele) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(/哈/.test('哈哈哈'))
//^开头
console.log(/^哈/.test('二哈哈'))
console.log(/^哈$/.test('二哈哈'))
console.log(/^哈$/.test('哈'))
</script>
</body>
</html>
quantificador
Quantificadores são usados para definir o número de ocorrências de um determinado padrão
| quantificador | ilustrar |
|---|---|
| * | Repita zero ou mais vezes |
| + | Repita uma ou mais vezes |
| ? | Repita zero ou uma vez |
| {n} | Repita n vezes |
| {n,} | Repita n ou mais vezes |
| {n,m} | Repita n a m vezes |
Observação: não deve haver espaços em nenhum dos lados da vírgula.
Classe de personagem
(1) [] corresponde à coleção de strings
Use um hífen – para indicar um intervalo
// 只要中括号里面的任意字符出现都返回为true
console.log(/[abc]/.test('andy')) //true
console.log(/[abc]/.test('bady')) //true
console.log(/[abc]/.test('cry')) //true
console.log(/[abc]/.test('die')) //false
por exemplo:
- [az] significa que quaisquer 26 letras inglesas de a a z são aceitáveis
- [a-zA-Z] significa que letras maiúsculas e minúsculas podem ser usadas
- [0-9] significa que qualquer número de 0 a 9 é aceitável
(2) Adicione o símbolo de negação ^ dentro de []
por exemplo:
- [^az] corresponde a caracteres, exceto letras minúsculas
- Preste atenção para escrevê-lo entre colchetes
(3) Predefinição: refere-se à abreviatura de alguns padrões comuns.
| Categoria de reserva | ilustrar |
|---|---|
| \d | Corresponde a qualquer número entre 0-9, equivalente a [0-9] |
| \D | Corresponde a todos os caracteres diferentes de 0-9, equivalente a [^0-9] |
| \c | Corresponde a quaisquer letras, números e sublinhados, equivalente a [A-Za-z0-9_] |
| \C | Todos os caracteres, exceto letras, números e sublinhados, equivalentes a [^A-Za-z0-9_] |
| \s | Corresponde a espaços (incluindo novas linhas, tabulações, espaços, etc.), equivalente a [\t\r\n\v\f] |
| \S | Corresponde a caracteres sem espaço, equivalente a [^\t\r\n\v\f] |
Formato da data: ^\d{4} - \d{1,2} - \d{1,2}
\d{4}0-9 aparece 4 vezes, que é o ano, seguido por uma ou duas ocorrências, que é 11/09 ou 11/09