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
<a nome = "top"> top </a>
-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)
<td rowspan = "3" align = "Center"> 13 </td>
** 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)
<select name = "nascimento">
<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)
<textarea cols = "5" linhas = "20"> </sexttarea>
*** Item oculto (não exibido na página, mas existe no código HTML)
<input type = "Hidden"/>
*** Enviar botão
<input type = "envie"/>
<input type = "submite" value = "título do 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
<input type = "image" src = "image"/>
*** Botão de redefinição: retorne ao estado inicial do item de entrada
<input type = "Reset"/>
<input type = "reset" value = "título do botão"/>
*** botões normais (usados com JS)
<input type = "button" value = ""/>
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 linhas = "80,*">
<nome do quadro = "top" src = "a.html">
<FrameSet cols = "120,*">
<nome do quadro = "Left" src = "b.html">
<nome do quadro = "Right" src = "http://www.baidu.com">
</frameSet>
</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>
<style type = "text/css">
div {
Background-Color: Blue;
Cor: vermelho;
}
</style>
</head>
<Body>
<div id = "">
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>
<style type = "text/css">
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>
<style type = "text/css">
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>
<style type = "text/css">
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>
<style type = "text/css">
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>
<p> 2222 </p>
** Defina as tags div e P como o mesmo estilo e defina tags diferentes para o mesmo estilo
-<Head>
<style type = "text/css">
div, p {
Background-Color: Blue;
Cor: vermelho;
}
</style>
</head>
-<Body>
<div> 1111 </div>
<p> 2222 </p>
</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>
<style type = "text/css">
/*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>
<style type = "text/css">
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>
<style type = "text/css">
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>
<input type = "button" value = "jumpBaidu" onclick = "href1 ();"/>
<script type = "text/javascript">
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>
<input type = "text" id = "nameid" value = "aaaaa"/> <br/>
<script type = "text/javascript">
// 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>
<input type = "text" name = "name1" value = "aaaaa"/> <br/>
<input type = "text" name = "name1" value = "bbbb"/> <br/>
<input type = "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
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>
<input type = "text" name = "name1" value = "aaaaa"/> <br/>
<input type = "text" name = "name1" value = "bbbb"/> <br/>
<input type = "text" name = "name1" value = "cccccc"/> <br/>
<script type = "text/javascript">
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.
<input type = "text" name = "name1" value = "aaaaa"/>
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 id = "ulid">
<li> 1111 </li>
<li> 2222 </li>
<li> 3333 </li>
</ul> <br/>
<input type = "button" value = "add" onclick = "add1 ();"/>
<script type = "text/javascript">
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
<input type = "text" name = "name1" id = "inputId" value = "aaaa"/>
<script type = "text/javascript">
// 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>
<ul id = "ulid1">
<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>
<script type = "text/javascript">
// 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>
<ul id="ulid">
<li id="li1">aaaaa</li>
<li id="li2">bbbbb</li>
<li id="li3">ccccc</li>
<li id="li4">ddddd</li>
</ul>
<script type = "text/javascript">
/* // 得到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 id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蝉</li>
<li id="li14">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type = "text/javascript">
// 在<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 id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蝉</li>
<li id="li24">杨玉环</li>
</ul>
<input type="button" value="remove" onclick="remove1();"/>
<script type = "text/javascript">
// 删除<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 id="ulid41">
<li id="li31">西施</li>
<li id="li32">王昭君</li>
<li id="li33">貂蝉</li>
<li id="li34">杨玉环</li>
</ul>
<div id="divv">
</div>
<input type="button" value="clone" onclick="clone1();"/>
<script type = "text/javascript">
// 把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>
<span id="sid">测试文本</span>
<div id="div11">
</div>
<script type = "text/javascript">
// 获取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 id="times">
</div>
<script type = "text/javascript">
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/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type = "text/javascript">
// 实现全选操作
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>
案例:下拉列表左右选择
** 下拉选择框
<select>
<option>111</option>
<option>111</option>
</leclect>
** 创建一个页面
** 两个下拉框设置属性multiple
** 四个按钮, 都有事件
** 代码实现:
<Body>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple">
<option>1111111</option>
<option>22222222</option>
<option>33333333</option>
<option>444444444</option>
</leclect>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
</leclect>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>
<script type = "text/javascript">
// 实现选中添加到右边
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>
<select id="countryid" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</leclect>
<select id="cityid">
<option value="" selected>
<option value="">
</leclect>
<script type = "text/javascript">
// 创建一个数组存储数据
// 使用二维数组
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.