Javaweb Learning Notes Compartilhando (leitura obrigatória)

Autor：Eve Cole Data da Última Atualização：2025-04-09 04:32:01

Lista personalizada

<dl> </dl>: representa o intervalo da lista

** dentro <dt> </dt>: conteúdo superior

** Inside <dd> </dd>: conteúdo inferior

Lista ordenada

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

--Ttribute Type: Defina o método de classificação, 1 (padrão), a, i,

** Na tag OL <li> Conteúdo específico </li>

Lista não ordenada

<ul> </ul>: Gama de lista não ordenada

--Ttribute Type: Circle (Circle Hollow), disco (círculo sólido padrão), quadrado (quadrado sólido)

** Na tag UL <li> Conteúdo específico </li>

Tags de imagem

--Ttributes: SRC, largura, altura, alt (o texto exibido na imagem, mova o mouse para a imagem, fique por um tempo para exibir o conteúdo ou o texto exibido quando a imagem for exibida incorretamente, mas alguns navegadores não o exibem, e não há efeito)

** <img src = "Página da imagem"/>

Introdução aos caminhos

*Categoria: duas categorias

** Caminho absoluto, por exemplo. http://www.baidu.com/b.jpg

*** Três caminhos relativos a localização de um arquivo em relação a outro arquivo

-O arquivo HTML e a imagem estão no mesmo caminho (diretório) e o nome do arquivo pode ser escrito diretamente

-No arquivo html, use o arquivo A.JPG sob a pasta IMG no mesmo caminho que é: img/a.jpg

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

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

-A imagem está no diretório superior do arquivo html. Neste momento, o método de uso da imagem: ../c.png ../ representa o caminho superior

Tags de hiperlink

** Link Recursos

- <a href = "caminho para vincular ao recurso"> Conteúdo exibido na página </a>

** HREF: o endereço do recurso vinculado

** Target: Defina o método de abertura, o padrão deve abrir na página atual

--_ em branco: abre em uma nova janela

--_ self: abra a página padrão

-<a href = " #"> título do link </a>: Quando o hiperlink não precisa pular para a página, basta adicionar # (espaço reservado) ao href

** Recursos de localização

-Se você deseja localizar recursos: defina um local

-de volta para este local

<a href = "#top"> de volta ao topo </a>

-tags-is-output: <pre> conteúdo que precisa ser inserido como-é-é-é-é-é-é-é-é-é-is-is-is-is-is-iS-is-is-is-is-is-is-is-iS-is-is-is-is-i-i s-é-é-é-é-é-é-is is is is-is-is-is-is-is-is-iS-is-is-is-is-is-is-iS-is-is-is-is-is is -is-é-é-é-é é-é-é-é-é-é-é-é-é-é-é-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is is

Tags de tabela

* Função: pode formatar os dados para tornar os dados mais claros

*Border de atributo (espessura da linha da tabela) BorderColor (cor da linha da tabela) Capacing Cellpacing (distância da célula) Altura da largura

*<tabela> </ table>: indica o intervalo da tabela

** Na tabela, significa uma linha <tr> </tr>

-definir o alinhamento alinhado: centro esquerdo direito

*** Em TR, indica a célula em uma linha <Td> </td>

** Use TH também pode representar células: ele pode obter centralização e ousadia

*O título da tabela é colocado na tabela <Ception> </gendion>

*Habilidades de operação:

** Primeiro conte quantas linhas existem e conte quantas células existem em cada linha

*Mesclar células

** LOWSPAN: Cross-filo (fusão vertical)

** Colspan: coluna cruzada (mesclagem horizontal)

<td colspan = "3" align = "Center"> Exercícios de formulário </td>

Tags de forma

*Por exemplo, ao registrar o kaixin.com, você pode enviar dados ao servidor do KAIXIN.com. Esse processo pode ser implementado usando tags de formulário.

* <form> </mand>: Defina um escopo de formulário

*propriedade:

** Ação: o endereço enviado a, o envio padrão para a página atual

** Método: o método de envio do formulário

-Existem dois usados com comum: Get and Post, que é o padrão de obter solicitação

** A diferença entre get e post

1) A barra de endereço de solicitação GET transportará os dados enviados e a postagem não o levará (os dados estão no órgão de solicitação)

2) Obtenha o nível de segurança da solicitação é menor e a postagem é maior

3) Há um limite no tamanho dos dados da solicitação GET, mas não há limite no post

** Enctype: Esta propriedade não é necessária para solicitações e essa propriedade precisa ser configurada ao fazer o upload de arquivos.

** Item de entrada: a parte em que o conteúdo pode ser inserido ou selecionado

- A maioria dos itens de entrada pode ser usada com <type de entrada = "Tipo de item de entrada"/>

********** No item de entrada, você precisa ter um atributo de nome

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

*** Item de entrada de senha: <input type = "senha"/>

*** Entrada de escolha única: <input type = "Radio"/>

-O nome do atributo é necessário dentro

-nome do valor do atributo deve ser o mesmo

- deve haver um valor de valor

**** Implementar as propriedades selecionadas padrão

*** verificado = "verificado"

*** Verifique a entrada: <input type = "Caixa de seleção"/>

** O nome do atributo é necessário dentro

** O valor do atributo de nome deve ser o mesmo

** Deve haver um valor de valor

**** Implementar as propriedades selecionadas padrão

---- verificado = "verificado"

*** Item de entrada do arquivo: <input type = "arquivo"/>

*** Item de entrada pull-down (não na tag de entrada)

<opção value = "0"> Selecione </pption>

<opção value = "1991"> 1991 </pption>

<opção value = "1992"> 1992 </pption>

<opção value = "1993"> 1993 </pption>

</leclect>

**** Implementar as propriedades selecionadas padrão

---- selecionado = "Selecionado"

*** Campo de texto (como: preencha a caixa para obter o perfil de informações pessoais ao registrar uma conta)

*** Item oculto (não exibido na página, mas existe no código HTML)

*** Enviar botão

--Ddress antes do envio: c: /users/happydog/desktop/index.html

** Quando o atributo de nome é escrito no item de entrada

--File: /// c: /users/happydog/desktop/index.html? Telefone = 123123 & PWD = 12321312 & Sex = Man & Love = Y & Love = PP & Birth = 1992 & Tex = 1231245

**? O valor do nome do item de entrada = o valor da entrada &

** Os parâmetros são semelhantes à forma de valor-chave

*** Use (clique) imagens para enviar

*** Botão de redefinição: retorne ao estado inicial do item de entrada

*** botões normais (usados com JS)

Caso: Use tags de formulário para implementar a página de registro

Quando o conteúdo de uma célula de tabela está vazio, os espaços reservados ((espaços escapados) são geralmente preenchidos.

Uso de outras tags comuns em HTML

** B (negrito) S (linha de ataque) u (sublinhado) i (itálico) pré (saída como é) sub (subscrito) sup (superscript) div (wrap wrap) span (exibição em uma linha) p (rótulo de parágrafo)

Uso da etiqueta de cabeçalho HTML

** HTML Duas partes compõem a cabeça e o corpo

** A etiqueta na cabeça é a etiqueta da cabeça

** tag de título: indica o conteúdo exibido na tag

** <mEta> Tag: algum conteúdo relacionado da página de configuração

-<meta nome = "palavras-chave" content = "" />

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

** Tag base: defina configurações básicas para hiperlinks

-O método de abertura do hiperlink pode ser definido uniformemente <base target = "_ em branco" />

** Tag de link: Introduzir arquivos externos

Uso de tags de quadros

** <FrameSet>

** Linhas: Divida por linha

<FrameSet linhas = "80,*"> Divida em duas partes, o top 80, parte inferior 80

** COLS: Divida por coluna

<Frameset cols = "80,*"> Divida em duas partes, esquerda e direita aos 80, qualquer um à esquerda e à direita a qualquer momento

** <Frame> A página específica exibida

** <nome do quadro = "Lower_Left" src = "b.html">

*Ao usar tags de quadros, elas não podem ser escritas na cabeça e no corpo. Se a etiqueta do quadro for usada, o corpo precisará ser removido e escrito fora da cabeça.

*Se o hiperlink na página à esquerda e desejar que o conteúdo seja exibido na página à direita, você poderá definir a propriedade de destino no hiperlink e definir o valor do destino para o nome no quadro.

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

</frameSet>

Resumo do conhecimento

1) Ideia de operação HTML: Use tags para envolver os dados a serem operados e altere o estilo de dados na tag modificando o valor do atributo da tag.

2) Atributo da etiqueta de fonte: Tamanho Valor Faixa 1-7 Cor: Número hexadecimal #ffffffffffffffffffffffff

3) tag de título <H1> </h1> ...... <H6> </h6>: de H1 a H6, a fonte está ficando cada vez menor e a linha é alterada automaticamente

4) Comentários

Introdução ao CSS

** CSS: Folha de estilo em cascata

** em camadas: camada por camada

** Folha de estilo: muitos atributos e valores de atributo

** Torne a exibição da página melhor

** CSS separa o conteúdo da página da web e o estilo de exibição, melhorando a função de exibição

Como combinar CSS e HTML (quatro maneiras de combinar)

1) Existe um estilo de propriedade em cada tag html, combinando CSS e HTML juntos

-<div style = "cor de fundo: vermelho; cor: verde;" id = ""> O caminho do céu reduz o excesso e compensa a deficiência. Portanto, o vazio derrota o real e o insuficiente supera o excesso. </div>

2) Use uma etiqueta de html para implementar a tag <style> e escrevê -la na cabeça

- <style type = "text/css">

código CSS;

</style>

--- Implementação de código <Head>

div {

Background-Color: Blue;

Cor: vermelho;

}

</style>

</head>

<Body>

O caminho do céu reduz o excesso e compensa a deficiência. Portanto, o vazio supera o real e a falta de deficiência supera o excesso.

</div>

</body>

3) Use declarações na tag de estilo

@Import URL (caminho do arquivo CSS);

- Etapa 1: Crie um arquivo CSS

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

@import url (div.css);

</style>

4) Use o link da tag de cabeçalho para introduzir o arquivo CSS externo e coloque -o em <head> </ad Head>

- Etapa 1: Crie um arquivo CSS

- <link rel = "Stylesheet" type = "text/css" href = "caminho do arquivo css"/>

**** A desvantagem do terceiro método de combinação: ele não funciona em alguns navegadores, e o quarto método é geralmente usado

**** Prioridade (Geral)

De cima para baixo, de dentro para fora, prioridade de baixa a alta.

A prioridade da pós-carga é alta

**** Formato: Nome do seletor {Nome do atributo: Valor do atributo; Nome do atributo: Valor do atributo; ......}

Seletores básicos para CSS (três tipos)

** Opere os dados nessa tag

1) seletor de tags div {css code}

-Use o nome da etiqueta como o nome do seletor

<head>

div {

Background-Color: Blue;

Cor: vermelho;

}

</style>

</head>

<Body>

<div> aaaaa </div>

</body>

2) Seletor de classe. Nome {}

** Cada tag html tem uma classe de propriedade

** <Head>

div.test {

Background-Color: Blue;

Cor: vermelho;

}

p.test {

Background-Color: Blue;

Cor: vermelho;

}

Pode ser abreviado como:

.teste{

Background-Color: Blue;

Cor: vermelho;

}

</style>

</head>

** <Body>

<div> aaaaa </div>

<p> bbbbbbbbbb </p>

</body>

3) seletor de identificação #name {}

** Cada tag html tem um ID de atributo

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

-<Head>

Div#teste {

Background-Color: Blue;

Cor: vermelho;

}

P#teste {

Background-Color: Blue;

Cor: vermelho;

}

Pode ser abreviado como:

#teste {

Background-Color: Blue;

Cor: vermelho;

}

</style>

</head>

-<Body>

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

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

</body>

** Estilo prioritário> Seletor de ID> Seletor de classe> Seletor de tags

Seletor de extensão CSS (Learn)

1) Configurações de estilos para rótulos aninhados para seletores de associação

** <Div> <p> wwwwwwwww </p> </div>

** Defina o estilo da tag P na tag div e o estilo da tag aninhada

-<Head>

div p {

Background-Color: Blue;

Cor: vermelho;

}

</style>

</head>

-<Body>

<div> <p> wwwwwwwww </p> </div>

<p> aaaaa </p>

</body>

2) Combinando seletor diferentes rótulos define o mesmo estilo

** <Div> 1111 </div>

** Defina as tags div e P como o mesmo estilo e defina tags diferentes para o mesmo estilo

-<Head>

div, p {

Background-Color: Blue;

Cor: vermelho;

}

</style>

</head>

-<Body>

</body>

3) Seletor de elemento pseudo (classe)

** CSS fornece alguns estilos bem definidos, que podem ser usados

** Por exemplo, hiperlink

** Status dos hiperlinks

-Depois de clicar e clicar no estado original

: Link: Passe o MurH: Active: visitado

Implementação de código:

<head>

/*Estado original*/

A: Link {

cor de fundo: vermelho;

}

/*Status hoom*/

A: Hover {

Background-Color: verde;

}

/*Clique em Status*/

A: ativo {

Background-Color: Blue;

}

/*Status após clique em*/

A: visitado {

Background-Color: cinza;

}

</style>

</head>

<Body>

<a href = "http://www.baidu.com"> Clique no link para a página da web do Baidu </a>

</body>

Modelo de caixa do CSS (compreenda) Para operar em dados, você precisa colocar os dados em uma área (div)

1) fronteira da fronteira: configurações unificadas

Você também pode defini-lo separadamente: parte superior da borda inferior: fundo da borda à esquerda: borda-esquerda direita: direita na borda-direita

-<Head>

div {

Largura: 200px;

Altura: 100px;

borda: 2px azul sólido;

}

#div12 {

Right-direita: 2px amarelo tracejado;

}

</style>

</head>

-<Body>

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

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

</body>

2) preenchimento de margem interna: defina a distância entre o conteúdo das laterais superior, inferior, esquerda e direita

Você também pode defini -lo separadamente: para cima, para baixo, para a esquerda e direita

<head>

div {

Largura: 200px;

Altura: 100px;

borda: 2px azul sólido;

}

#div21 {

preenchimento: 20px;

}

#div22 {

preenchimento-esquerda: 30px;

}

</style>

</head>

<Body>

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

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

</body>

3) Margem: defina a distância entre a div dos quatro lados mais externos

Você também pode configurá -lo separadamente: para cima, para baixo, esquerda e direita. . .

Float do layout do CSS (entenda) Float: esquerda

Posicionamento do layout CSS (compreenda)

*posição

** Valor do atributo:

-estático: valor padrão, sem posicionamento especial

--absoluto:

Arraste o objeto do fluxo de documentos e use para a esquerda, direita, superior, inferior e outras propriedades para localizá -lo absolutamente

-Relativo: o objeto não será arrastado para fora do fluxo de documentos. O objeto não pode ser empilhado, mas será compensado no fluxo normal de documentos com base nas propriedades como esquerda, direita, superior, inferior, etc.

Caso: imagem e texto misto

** Fotos e textos são exibidos juntos

Caso: assinatura da imagem

Introdução ao JavaScript: é uma linguagem de script orientada a objetos, usada principalmente no cliente

*Baseado em objetos: muitos objetos são fornecidos, você pode usá-los diretamente

* Orientado a eventos: HTML faz efeitos estáticos do site, efeitos dinâmicos de JavaScript

*Cliente: refere -se especificamente ao navegador

* Recursos de JS:

1) Interação dinâmica de informações interativas

2) JS de segurança não pode acessar arquivos no disco local

3) Java de plataforma cruzada, máquinas virtuais; Enquanto os navegadores que podem suportar JS, eles podem correr

*Diferença entre JavaScript e Java: não há relação entre os dois

1) Java é a Sun Company, agora Oracle; JS é empresa Netscape

2) Java é orientado a objetos e JS é baseado em objetos

3) Java é uma linguagem fortemente digitada e JS é uma linguagem fracamente digitada

-Por exemplo: int i = "10" em java; vai relatar um erro

--js: var i = 10; var i = "10"; Nenhum erro é relatado

4) O JS só precisa ser analisado para executar, enquanto Java precisa ser compilado em um arquivo bytecode primeiro e depois executá -lo

*Composição JS (três partes):

1) ECMAScript

- ECMA: Associação Europeia de Computadores

--JS Sintaxe e declarações organizadas pela ECMA ...

2) Bom

-Modelo de objeto BroSwer: Modelo de objeto do navegador

3) DOM

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

Como combinar JS e HTML (dois tipos)

1) Use uma tag <script type = "text/javascript"> code js; </script>

2) Use tags de script para introduzir um arquivo JS externo

- Crie um arquivo JS e escreva o código JS

- <script type = "text/javascript" src = "js path"> </sCript>

Nota: Ao usar o segundo método, não escreva o código JS na tag de script, ele não será executado.

Tipos primitivos de JS e variáveis declaram

*Tipo básico de dados de java: byte curto int long float duplo char bolean

*JS define variáveis com palavra -chave var

*Tipo original de JS (cinco)

-String string var str = "abc";

-número numérico do tipo var m = 123;

--boolean verdadeiro e falso var flag = true;

-null var date = new Date ();

** Obtenha a referência ao objeto. nulo significa que a referência do objeto está vazia e todas as referências ao objeto também são objeto.

-Oundifinado define uma variável, mas não atribui var aa;

* typeof (nome da variável) Veja o tipo de dados da variável atual

Declaração JS

** A declaração se julgamento em java ("=" significa atribuição; "==" igual a, meios julgamento) declaração de laço de chave (para o while while)

** Declarações de JS

-Se a declaração de julgamento

--switch (a) {

Caso 5: ...

quebrar;

Caso 6: ...

quebrar;

padrão:...

...........

}

** Declaração de loop para enquanto faz-while

--var i = 5;

enquanto (i> 0) {

alerta (i);

eu--;

}

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

alerta (i);

}

operador js

** JS não distingue entre números inteiros e decimais

--var j = 123;

alerta (J/1000*1000);

** J/1000*1000 O resultado em Java é 0

** Em JS, não há distinção entre números inteiros e decimais, 123/1000*1000 = 0,123*1000 = 123

** Adicionar e subtrair operações de string

--var str = "123";

alerta (str + 1); O resultado em Java e JS é 1231, que é uma conexão de string

alerta (str - 1); Ao subtrair, execute a operação de subtração. Se o STR não for um número, ele levará a Nan: significa que não é um número

** Tipo bolean também pode ser operado

*** Se definido como true, é equivalente a 1; Se definido como falso, é equivalente a 0;

** == e === diferença

** É tudo sobre fazer julgamentos

** == Comparação é apenas o valor; === Comparação é o valor e o tipo

** As frases que são emitidas diretamente para a página (o conteúdo pode ser exibido na página) podem emitir variáveis, valores fixos e código HTML para a página. Document.Write ("") contém cotações duplas e, se você definir os atributos do rótulo, precisará usar cotações únicas.

- Document.Write ("AAAA");

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

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

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

Exercício: Implementando a tabela de multiplicação 99

JS Array

*A definição da matriz em java int [] arr = {1,2,3};

*Método de definição da matriz JS (três tipos)

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

2) Use objeto de matriz de objeto embutido

var Arr1 = nova matriz (5); // define uma matriz, o comprimento da matriz é 5

arr1 [0] = "1";

......

3) Use objeto de matriz de objeto embutido

var arr2 = nova matriz (3,4,5); // define uma matriz, os elementos da matriz são 3,4,5

* Há um comprimento de propriedade na matriz: obtenha o comprimento da matriz

* O comprimento da matriz é variável e a matriz pode armazenar dados de diferentes tipos de dados.

função js (método)

** Defina funções (métodos) em JS. Existem três maneiras de definir funções. Na lista de funções de parâmetros, você não precisa escrever VAR, basta escrever o nome do parâmetro.

1) Use uma função de palavra -chave

*** Nome do método da função (lista de parâmetros) {

Corpo do método;

O valor de retorno é opcional (dependendo das necessidades reais);

}

Implementação de código: // Crie função usando o primeiro método

function test () {

alerta ("qqqqqq");

}

// Método de chamada

teste();

// define um método com parâmetros para implementar a adição de dois números

função add1 (a, b) {

var sum = a+b;

alerta (soma);

}

add1 (3,5);

função add2 (a, b, c) {

var sum1 = a+b+c;

retorno sum1;

}

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

2) Funções anônimas

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

Método corpo e valor de retorno;

}

Implementação de código: var add3 = function (m, n) {

alerta (m+n);

}

// Método de chamada

add3 (8,9);

3) Também é geralmente chamado de função dinâmica. Se você usar menos, apenas entenda.

*Use uma função de objeto embutido em JS

var add = new function ("Lista de parâmetros", "Method Body and Return Value");

var add4 = new function ("x, y", "var sum; sum = x+y; retorno soma;");

alerta (add4 (9,10));

// ou o seguinte código

var caShu = "x, y";

var fangfati = "var sum; sum = x+y; retorno soma;";

var add4 = nova função (CaShu, fangfati);

alerta (add4 (5,3));

Variáveis globais e locais de JS

** Variável Global: Defina uma variável na tag de script, que pode ser usada na parte JS da página

-Use fora do método, dentro do método, use em outra etiqueta de script

** Variável local: defina uma variável dentro de um método e só pode ser usado dentro do método.

-só pode ser usado dentro do método. Se essa variável for chamada fora do método, um erro será mostrado

-Venha com uma ferramenta de depuração. Na versão do IE8 ou acima, F12 no teclado e uma barra aparece na parte inferior da página para ver o erro ao olhar para o console.

Onde as tags de script devem ser colocadas

** É recomendável colocar as tags de script para trás </body>

** Se houver um requisito agora:

-Em JS, você precisa obter o valor na entrada. Se você colocar a etiqueta do script na cabeça, haverá problemas

-HTML A análise é analisada de cima para baixo. A tag de script é colocada na cabeça e assume diretamente o valor de entrada. Como a página ainda não analisou a linha de entrada, ela definitivamente não será capaz de obtê -la.

A sobrecarga JS JS não possui sobrecarga, mas pode ser simulada e implementada.

Exemplo: função add11 (a, b) {

retornar a+b;

}

função add11 (a, b, c) {

retornar a+b+c;

}

função add11 (a, b, c, d) {

retornar a+b+c+d;

}

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

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

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

Objeto de string de js

** Criar objeto String var str = "abc ';

** Métodos e propriedades (documento)

-Comprimento do atributo: Comprimento da corda

--método

1) Métodos relacionados ao HTML

- Bold (): Bold fontcolor (): defina a cor da string fontsize (): defina o tamanho do link da fonte (): exibir a string como um hiperlink

2) Métodos semelhantes para Java

--CONCAT (): Connect the string charat (): retornar a string indexof (): retornar a posição da string do string split (): corte a string em uma matriz substituta ("", ""): substitua o parâmetros de dois parâmetros: o primeiro parâmetro é o caractere original, e o segundo parâmetro é o caractere a ser substituído pelo subtr (5,3). Comece a partir do quinto bit e intercepte três caracteres para trás da substring (3,5) Start do terceiro bit, incluindo o terceiro bit ao quinto bit, excluindo o quinto bit [3,5)

Objeto de matriz para js

** Três maneiras de criar uma matriz

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

2) var arr1 = nova matriz (3); // O comprimento é três

3) var arr1 = nova matriz (1,2,3); // O elemento é 1,2,3

var arr = []; // Crie uma matriz vazia

** Comprimento do atributo: veja o comprimento da matriz

**método

concat (); juntar(); dividir a matriz de acordo com os caracteres especificados push (); Adicione elementos ao final da matriz, retorne o novo comprimento da matriz ** Se a matriz adicionada for uma matriz, adicione a matriz como uma string inteira pop (); excluir e devolver o último elemento da matriz reverse (); reverter a ordem dos elementos na matriz

Data Objeto de JS

** Obtenha a hora atual em Java

Data data = new Date ();

// formato // tolocalestring ()

** Obtenha a hora atual em JS

var date = new Date ();

// converter para o formato habitual date.tolocalestring ();

Matemática Operação Matemática de JS

** Todo o interior são métodos estáticos, você pode usar matemática. método () diretamente ao usá -lo;

Funções globais de JS

** Porque não pertence a nenhum objeto, escreva o nome diretamente para usá -lo

** avaliar (); Execute o código JS (se a string for um código JS, use o método para executá -lo diretamente)

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

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

Eval (STR); // 1234

** .....

Sobrecarregar as funções JS O que está sobrecarregando? O nome do método é o mesmo, os parâmetros são diferentes

*O JS não tem sobrecarga de funções e apenas o último método será chamado, mas a sobrecarga pode ser simulada de outras maneiras. A função JS salva os parâmetros passados na matriz de argumentos. Você pode usar o julgamento da duração da matriz de argumentos para retornar diferentes resultados do processamento de acordo.

Simular a implementação do código de efeito Reload:

função add1 () {

if (argumentos.Length == 2) {

retornar argumentos [0] + argumentos [1];

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

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

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

retornar argumentos [0] + argumentos [1] + argumentos [2] + argumentos [3];

} outro {

retornar 0;

}

// Chamar

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

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

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

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

Objeto JS Bom

** Bom: Broswer Object Modelo: Modelo de objeto de navegador

** Quais são os objetos?

- Navegador: Obtenha informações do cliente (informações do navegador)

- tela: obtenha informações de tela

- Localização: o endereço URL solicitado

*** atributo href

1) Obtenha o endereço de URL solicitado

---cocument.write (location.href);

2) Defina o endereço URL

-Um botão é colocado na página e um evento está vinculado ao botão. Ao clicar neste botão, a página pode pular para outra página

<Body>

função href1 () {

// alert ("aaaa");

location.href = "http://www.baidu.com";

}

</script>

</body>

- História: a história do URL solicitado

- Crie três páginas (simule o efeito da história de alta e para baixo)

1) Crie uma página a.html e escreva um hiperlink para b.html

2) Crie um hiperlink b.html para c.html

3) Crie c.html

- para a página anterior visitada

history.back ();

história, vá (-1);

- Vá para a próxima página que você visitou

history.forward ();

HISTÓRIA.GO (1);

-Objeto de nível superior da janela (TELE-METERY) do objeto de janela (todos os objetos BOM são operados na janela)

**método

- window.alert (); A abreviação é: alert (); Uma janela aparece na página para exibir o conteúdo

- Confirmar ("Mostrar conteúdo da mensagem"); A caixa prompt de confirmação tem o valor de retorno true e falso

-- incitar(); A caixa de diálogo de entrada (não muitos são usados agora), possui dois parâmetros: exibir conteúdo e valor padrão

- Open ("Endereço URL", "", "Recursos de janela, como largura da janela e altura"); Abra uma nova janela

-- fechar(); Feche a janela (a compatibilidade do navegador é relativamente ruim)

- Faça alguns temporizadores

*** setInterval ("Código JS", milissegundos); window.setInterval ("alert ('123');", 3000); Indica que o método de alerta é executado a cada três segundos

*** Settimeout ("Código JS", milissegundos); significa que é executado após milissegundos, mas só será executado uma vez.

*** ClearInterval (); Limpe o timer definido por setInterval

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

ClearInterval (ID1);

*** ClearTimeout (); Limpe o timer Settimeout

Objeto js dom

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

** Documento: Hypertext Document (Hypertext Tagged Document) HTML, XML

** Objeto: Propriedades e métodos fornecidos

** Modelo: Use propriedades e métodos para manipular documentos com marcação de hipertexto

*** Você pode usar os objetos fornecidos no DOM no JS, usar as propriedades e métodos desses objetos para operar em documentos de marcação.

*** Para operar em um documento marcado, você deve primeiro encapsular todo o conteúdo do documento marcado nos objetos

- Você precisa encapsular as tags, atributos e conteúdo de texto no HTML em objetos

*** Para operar em documentos de marcador, documentos de marcador de análise

*** Processo de análise: De acordo com a estrutura hierárquica do HTML, uma estrutura de árvore será alocada na memória, e cada parte do HTML precisa ser encapsulada em um objeto

*Apenas um nó raiz

Pode haver vários nós filhos no nó raiz. Nós sem nós filhos são chamados de nós Leaf

- Objeto do documento: todo o documento HTML

- Objeto de elemento: objeto de tag

- Objeto de atributo

- Objeto de texto

** Objeto do nó do nó: é o objeto pai desses objetos

DHTML: É a abreviação de muitas tecnologias

** HTML: encapsular dados

** CSS: use atributos e valores de atributo ao estilo

** DOM: Opere documentos HTML (documentos marcados)

** JavaScript: refere -se especificamente à declaração de sintaxe do JS (ECMAScript)

O objeto de documento representa o documento inteiro

** Métodos comuns

- Write () Método: 1) Variáveis de saída para a página 2) Sair do código HTML para a página

- getElementById (); significa obter elemento (etiqueta) através do ID

<Body>

// Use getElementById para obter o objeto de tag de entrada

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

// Obtenha o valor do valor na entrada

alerta (input1.value);

// Defina um valor na entrada

input1.value = "bbbbbbbb";

</script>

</body>

- getElementsByName (); O atributo de nome da tag é digno da tag, e o retorno é uma coleção (matriz)

<Body>

var input1 = document.getElementsByName ("name1"); // O parâmetro passado é o valor do nome no rótulo

for (var i = 0; i <input1.length; i ++) {// Através da Traversal, obtenha o valor específico em cada tag

var inputs = input1 [i]; // Cada loop recebe o objeto de entrada e atribui o valor às entradas

alerta (inputs.value); // Obtenha o valor do valor em cada tag de entrada

}

</script>

</body>

- getElementsByTagName ("nome da tag"); Retorna uma coleção (matriz)

<Body>

var inputs1 = document.getElementsByTagName ("input"); // O parâmetro passado é o nome da tag

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

var input1 = inputs1 [i];

alerta (input1.value);

}

</script>

</body>

**** Nota: Existe apenas um rótulo, e esse rótulo só pode ser obtido usando o nome. Neste momento, o uso de getSbyName retorna uma matriz, mas agora existe apenas um elemento. No momento, não há necessidade de atravessar, mas você pode obter o valor diretamente através do subscrito da matriz.

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

alerta (input1.value);

CASO: CASO POP-UP

** Processo de implementação: 1) Você precisa criar uma página: dois itens de entrada e um botão, e há um evento no botão, que é um novo pop -up de janela

2) Crie uma página pop-up: Cada linha da tabela possui um botão, número e nome; Há um evento no botão: atribua o número atual e o nome à posição correspondente da primeira página.

** Operação de página cruzada abridor: Você pode obter a janela que cria esta janela, ou seja, você pode obter a janela dos pais

Caso: Adicione o nó no final

1) Crie uma tag li

2) Crie texto

3) Adicione o texto a Li

4) Adicione Li a UL

<Body>

</ul> <br/>

função add1 () {

// Obtenha a tag UL

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

// Crie tags

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

// Crie texto

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

// Adicione texto a li

Li1.appendChild (Tex1);

// Adicionar li a ul

Ul1.AppendChild (LI1);

}

</script>

</body>

Objeto de elemento (objeto elemento): Para operar o elemento, você deve primeiro obter elemento usando o método correspondente no documento para obtê -lo.

**método

**** Obtenha o valor no atributo getAttribute ("nome do atributo");

**** Defina o valor do atributo setAttribute (nome, valor);

**** Remova o atributo removeattribute ("nome do atributo"); O valor não pode ser excluído

// Obtenha a tag de entrada primeiro

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

// alert (input1.value);

alert (input1.getAttribute ("value")); // Obtenha o valor no atributo

alert (input1.getAttribute ("classe"));

input1.setAttribute ("classe", "haha"); // Defina o valor do atributo

alert (input1.getAttribute ("classe"));

input1.removeattribute ("nome");

</script>

** quero obter a legenda abaixo da tag

** Use o atributo ChildNodes, mas esse atributo tem baixa compatibilidade

** A única maneira eficaz de colocar as tags sob a tag, use o método getElementsByTagName

<Body>

<li> aaaaaa </li>

<li> bbbbbb </li>

<li> CCCCCCCC </li>

</ul>

<Cript>

// Obtenha a tag UL

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

// Obtenha a legenda abaixo do UL

// var lis = ul1.childnodes; // baixa compatibilidade

// alerta (lis.length); // Alguns exibem 3 Algum exibição 7

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

alerta (lis.length);

</script>

</body>

Propriedades do objeto de nó

** Nodename

** NodeType

** NodEvalue

** Ao analisar HTML usando DOM, as tags, atributos e texto no HTML precisam ser encapsulados em objetos

** O valor correspondente ao nó da tag

NodeType: 1

NodeName: Nome da tag do Caps, como Span

NodEvalue: NULL

** O valor correspondente ao nó do atributo

NodeType: 2

NodeName: Nome do atributo

NodEvalue: o valor da propriedade

** O valor correspondente ao nó de texto

NodeType: 3

Nodename: #Text

NodEvalue: conteúdo de texto

** <Body>

<span id = "spanid"> conteúdo de texto </span>

// Obtenha o objeto de tag

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

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

// alert (span1.nodename); // SAPN

// alert (span1.nodEvalue); // nulo

// atributos

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

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

// alert (id1.nodename); //eu ia

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

//获取文本

var text1 = span1.getfirstChild;

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

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

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

</script>

</body>

Node对象的属性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

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

*** parentNode ：父节点

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

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

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

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

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

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

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

<Body>

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

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

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

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

</ul>

/* // 得到li1

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

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); */

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

// 得到ul

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

// 第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

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

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

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</script>

</body>

操作dom树

** appendChild方法：

*** 添加子节点到末尾

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

** insertBefore(newNode,oldNode);

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

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

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

1）创建标签

2）创建文本

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

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

<Body>

</ul>

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

function insert1() {

// 1、获取到li13标签

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

// 2、创建li

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

// 3、创建文本

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

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

li15.appendChild(text15);

// 5、获取ul

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

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

ul21.insertBefore(li15,li13);

}

</script>

</body>

**removeChild方法：删除节点

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

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

<Body>

</ul>

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

function remove1() {

// 1、获取到li24标签

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

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

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

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

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

ul31.removeChild(li24);

}

</script>

</body>

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

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

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

** cloneNode(boolean) : 复制节点

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

<Body>

</ul>

</div>

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

1、获取到ul

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

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

** 获取到div

** appendChild方法

function clone1() {

// 1、获取ul

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

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

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

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

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

divv.appendChild(ulcopy);

}

</script>

</body>

**操作dom总结：

**获取节点使用方法

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

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

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

**插入节点的方法

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

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

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

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

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

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

alert(span1.innerHTML);

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

<Body>

</div>

// 获取span标签

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

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

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

// 获取div

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

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

</script>

</body>

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

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

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

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

setInterval方法定时器

** 显示到页面上

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

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

<Body>

</div>

function getD1() {

// 当前时间

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 获取div

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

div1.innerHTML = d1;

}

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

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

</script>

</body>

案例：全选练习

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

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

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

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

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

**代码实现

<Body>

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

<br/>

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

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

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

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

<br/>

// 实现全选操作

function selAll() {

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

2、返回的是数组

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

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

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

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

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

// 获取要操作的复选框

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

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

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

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

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

}

// 实现全不选操作

function selNo() {

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

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

3、得到每一个复选框

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

// 获取要操作的复选框

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

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

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

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

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

}

function selOther() { // 实现反选

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

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

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

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

if(love1.checked == true) {

love1.checked = false;

}

outro {

love1.checked = true;

}

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

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

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

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

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

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

if(box1.checked == true) {

selAll();

}

outro {

selNo();

}

</script>

</body>

案例：下拉列表左右选择

** 下拉选择框

</leclect>

** 创建一个页面

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

** 四个按钮，都有事件

** 代码实现：

<Body>

<div>

</leclect>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</leclect>

</div>

<div>

</div>

// 实现选中添加到右边

function selToRight() {

1、获取select1 里面的option

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

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

2、判断option是否被选中

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

** selected = true; 选中

** selected = false;未选中

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

4、得到select2

5、添加选择的部分

* appendChild 方法

// 获取到select1 里面的option

// 得到select1

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

// 得到select2

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

// 得到option

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

// 遍历数组

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

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

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

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

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

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

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

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

}

// 全部添加到右边

function allToRight() {

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

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

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

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

var option1 = options1[i];

select2.appendChild(option1);

eu--;

}

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

</script>

</body>

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

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

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

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

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

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

**代码实现：

<Body>

</leclect>

</leclect>

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

// 使用二维数组

var arr = new Array(4);

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

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

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

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

function add1(val) {

/* 实现步骤：

1、遍历二维数组

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

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

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

5、得到city 的select

6、添加过去使用appendChild 方法

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

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

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

// 获取city 的select

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

// 得到city 里面的option

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

// 遍历数组

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

// 得到每一个option

var op = options1[k];

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

city1.removeChild(op);

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

}

// 遍历二维数组

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

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

var arr1 = arr[i];

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

var firstvalue = arr1[0];

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

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

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

// 遍历数组arr1

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

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

// alert(value1);

// 创建option

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

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</script>

</body>

The above JavaWeb Learning Notes Sharing (must-read) is all the content I share with you. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.