janela
O objeto da janela não apenas atua como um escopo global, mas também representa uma janela do navegador.
O objeto da janela possui propriedades internas e integradas, que podem obter a largura e a altura interna da janela do navegador. Largura e altura internas consulte a largura e a altura líquidas usadas para exibir a página da web após a remoção dos elementos de espaço reservado, como barra de menus, barra de ferramentas, borda etc. Há também uma largura externa e atributos externos, que podem obter toda a largura e altura da janela do navegador.
Reabastecer:
A área visível Largura da página da web: document.body.clientwidth A área visível altura da página da web: document.body.clientHeight a área visível Largura da página da web: document.body.offsetWidth (incluindo a largura da beira e a largura da web da largura da Web Worth of the Weight Web Page: Página da web: A altura completa do texto da página da web: document.body.ScrolHeight a altura da página da web sendo lançada: document.body.Scrolltop ou jQuery (documento) .Scrolltop () O lado esquerdo da página da web da web. Window.Screen.Width A tela disponível na área de trabalho: Window.Screen.AvailEighte a tela disponível na área de trabalho: Window.Screen.AvailWidth os dígitos de cores da tela: Window.Screen.Colordepth O pixel de tela/Inch). $ (janela) .Width ()
Especial 1: Solução para documentar.Body.Scrolltop é sempre 0 var scrollpos; if (typeof window.pageyoffset! = 'indefinido') {scrollPos = window.pageyoffset; } else if (typeof docum.compatmode! = 'indefinido' && document.compatmode! = 'backcompat') {scrollpos = document.documentElement.scrolltop; } else if (typeof document.body! = 'indefinido') {scrollpos = document.body.scrolltop; } alerta (scrollpos); Especial 2: a largura completa do texto da página da web: "+ document.body.scrollwidth; a altura completa do texto da página da web:"+ document.body.scrolHeight; As funções acima não podem ser obtidas às vezes, portanto, use o método a seguir. var xscroll, yscroll; if (window.innerHeight && window.scrollmaxy) {xscroll = document.body.scrollwidth; yScroll = window.innerHeight + window.scrollmaxy; } else if (document.body.scrolHeight> document.body.offsetHeight) {// todos, exceto o explorador mac xscroll = document.body.scrollwidth; yScroll = document.body.scrolHeight; } else {// Explorer Mac ... também funcionaria no Explorer 6 rigoroso, Mozilla e Safari xscroll = document.body.offsetWidth; yScroll = document.body.offSethEight; }navegador
O objeto Navigator representa as informações do navegador. As propriedades mais usadas incluem:
• Navigator.AppName: Nome do navegador;
• Navigator.AppVersion: versão do navegador;
• Navigator.Language: o idioma definido pelo navegador;
• Navigator.platform: Tipo de sistema operacional;
• Navigator.UserAgent: a string de agente de usuário definida pelo navegador.
Para escrever um código diferente para diferentes navegadores, iniciantes gostam de usar se julgar a versão do navegador, por exemplo:
var largura; if (getieversion (navegator.useragent) <9) {width = document.body.clientWidth;} else {width = window.innerwidth;} Mas isso pode ser impreciso no julgamento e também é difícil manter o código. A maneira correta é fazer uso total do recurso de JavaScript de retornar undefined para propriedades inexistentes e usar diretamente o operador de curto-circuito || Para calcular:
var width = window.innerWidth || document.body.clientWidth;
tela
O objeto de tela representa as informações da tela. As propriedades comuns incluem:
• screen.width: largura da tela, em pixels;
• Screen.Height: Altura da tela, em pixels;
• Screen.ColordEpth: Retorna o número de dígitos coloridos, como 8, 16, 24.
localização
O objeto de localização representa as informações da URL da página atual. Por exemplo, um URL completo:
http://www.example.com:8080/path/index.html?a=1&b=2#top
Pode ser obtido usando location.href . Para obter os valores de cada parte do URL, você pode escrever assim:
location.protocol; // 'http'location.host; // 'www.example.com' location.port; // '8080'Location.Pathname; // '/path/index.html'location.search; // '? A = 1 & b = 2'location.hash; // 'PRINCIPAL'
Para carregar uma nova página, você pode ligar para o local.assign (). Se você deseja recarregar a página atual, é muito conveniente ligar para o método Location.Reload ().
documento
O objeto de documento representa a página atual. Como o HTML é representado como uma estrutura de árvore no navegador na forma de DOM, o objeto de documento é o nó raiz de toda a árvore DOM.
O atributo de título do documento é lido do <title> xxx </title> no documento HTML, mas pode ser alterado dinamicamente:
O objeto Document também possui um atributo de cookie, que pode obter os cookies da página atual.
Um cookie é um identificador de valor-chave enviado pelo servidor. Como o protocolo HTTP é sem estado, o servidor pode distinguir entre qual solicitação do usuário enviada por ele e pode ser distinguida por cookies. Quando um usuário efetua login com sucesso, o servidor envia um cookie para o navegador, como o usuário = abc123xyz (string criptografada). Depois disso, quando o navegador visitar o site, ele anexará esse cookie ao cabeçalho da solicitação e o servidor pode distinguir o usuário com base no cookie.
Os cookies também podem armazenar algumas configurações do site, como a linguagem da página exibida, etc.
JavaScript pode ler os cookies na página atual através do document.cookie:
document.cookie; // 'v = 123; lembre -se = true; prefere = zh '
Como o JavaScript pode ler cookies na página e as informações de login do usuário geralmente também existem em cookies, isso cria um enorme risco de segurança. Isso ocorre porque a introdução de código JavaScript de terceiros nas páginas HTML é permitido:
<!-A página atual está em wwwexample.com-> <html> <head> <script src = "http://www.foo.com/jquery.js"> </script> </ading> </html>
Se houver código malicioso no JavaScript do terceiro introduzido, o site www.foo.com obterá diretamente as informações de login do usuário do site www.example.com.
Para resolver esse problema, o servidor pode usar httponly ao definir cookies. Cookies que definidos httponly não serão lidos por JavaScript. Esse comportamento é implementado pelo navegador e os navegadores convencionais suportam a opção HTTPONLY. Para garantir a segurança, o servidor deve sempre insistir em usar o HTTPONLY ao definir cookies.
document.write () apenas produz um novo conteúdo para o documento
Se Document.Write for executado após a carga do documento, toda a página HTML será substituída:
Referência: http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
Dom | Documento
// retorna o nó com id 'test': var test = document.getElementById ('teste'); // Obtenha todos os nós filhos diretos no teste do nó: var cs = test.children; var primeiro = test.FirstElementChild; O segundo método é usar querySelector() e querySelectorAll() . Você precisa entender a sintaxe do seletor e, em seguida, usar as condições para obter o nó, o que é mais conveniente:
// Obtenha o nó com ID Q1 através do QuerySelector: var Q1 = Document.QuerySelector ('#Q1'); // Obtenha todos os nós no nó Q1 que atendem às condições através do QuerySelectorAll: var PS = Q1.QuerySelectorAll ('Div.Highlighted> P');Estritamente falando, o nó DOM aqui se refere ao elemento, mas o nó DOM é na verdade o nó. No HTML, o nó inclui muitos tipos de elemento, comentário, CDATA_SECTION, etc., bem como o tipo de documento do nó raiz. No entanto, na maioria das vezes, nos preocupamos apenas com o elemento, ou seja, o nó que realmente controla a estrutura da página e ignoramos outros tipos de nós. O documento do nó raiz foi automaticamente vinculado a um documento de variável global.
Modificar DOM
A modificação do CSS também é uma operação comum. O atributo de estilo do nó DOM corresponde a todos os CSSs e pode ser recuperado ou definido diretamente. Como o CSS permite nomes como o tamanho da fonte, mas não é um nome de propriedade válido para JavaScript, ele precisa ser reescrito para um nome de estilo de camelo em JavaScript:
// get <p id = "p-id"> ... </p> var p = document.getElementById ('p-id'); // Definir CSS: p.style.color = '#ff0000'; p.style.fontsize = '20px'; p.style.pddingtop = '2em';Insira DOM
Existem duas maneiras de inserir um novo nó. Uma é usar o AppendChild para adicionar um nó filho ao último nó filho do nó pai. Por exemplo:
<!-estrutura html-> <p id = "js"> javascript </p> <div id = "list"> <p id = "esquema"> esquema </p> </div>
Adicione <p id="js">JavaScript</p> ao último item de <div id="list"> :
var js = document.getElementById ('js'), list = document.getElementById ('list'); list.appendChild (js);Agora, a estrutura HTML se torna assim:
<!-estrutura html-> <div id = "list"> <p id = "esquema"> esquema </p> <p id = "js"> javascript </p> </div>
Como o nó js que inserimos já existe na árvore de documentos atuais, este nó será excluído primeiro de seu local original e depois inserido em um novo local.
Na maioria das vezes, criaremos um novo nó a partir de zero e o inseriremos no local especificado:
haskell = document.createElement ('p'); Criar dinamicamente um nó e adicioná -lo à árvore Dom pode alcançar muitas funções. Por exemplo, o código a seguir cria dinamicamente um nó <style> e o adiciona ao final <head> , adicionando dinamicamente uma nova definição CSS ao documento:
var d = document.createElement ('style'); d.setAttribute ('type', 'text/css'); d.innerhtml = 'p {color: vermelho}'; document.getElementsByTagName ('head') [0] .appendchild (d);inserir antes
E se quisermos inserir nós filhos no local especificado? Você pode usar parentelement.insertBefore (NewElement, ReferenceElement); e o nó infantil será inserido antes do Referência.
Muitas vezes, é necessário percorrer todos os filhos de um nó dos pais, que podem ser implementados, iterando o atributo das crianças:
var i, c, list = document.getElementById ('list'); para (i = 0; i <list.children.length; i ++) {c = list.Children [i]; // Obtenha o nó I -th Child}Exclua DOM
Para excluir um nó, primeiro você precisa obter o próprio nó e seu nó pai e depois chamar o RemoveChild do nó pai para se excluir:
// Obtenha o nó a ser excluído: var self = document.getElementById ('a ser removido'); // obtenha o nó pai: var pai = self.parenteLement; // exclate: var removido = parent.RemoveChild (self); removido === self; // verdadeiroPercebi que, embora o nó excluído não esteja mais na árvore de documentos, ele ainda está na memória e pode ser adicionado a outro local a qualquer momento.
Quando você atravessa um filho do nó pai e executa uma operação de exclusão, lembre-se de que o atributo de crianças é um atributo somente leitura e será atualizado em tempo real quando o nó da criança mudar. Portanto, ao excluir vários nós, é importante observar que os atributos das crianças estão mudando o tempo todo.
Formulário de operação
O uso de JavaScript para manipular formas é semelhante à operação do DOM, porque a própria forma também é uma árvore dom.
No entanto, a caixa de entrada do formulário, a caixa suspensa, etc. pode receber entrada do usuário; portanto, o uso do JavaScript para operar o formulário pode obter o conteúdo inserido pelo usuário ou definir um novo conteúdo para uma caixa de entrada.
Existem principalmente os seguintes controles de entrada para os formulários HTML:
• Caixa de texto, a correspondente <input type = "text">, é usada para inserir o texto;
• Caixa de senha, a correspondente <input type = "senha">, é usada para inserir senhas;
• Caixa de rádio, a correspondente <input type = "Radio">, é usada para selecionar um item;
• Caixa de seleção, a correspondente <input type = "caixa de seleção"> é usada para selecionar vários itens;
• A caixa suspensa, a <select> correspondente, é usada para selecionar um item;
• Texto oculto, o correspondente <input type = "hidden"> não é visível para o usuário, mas o texto oculto será enviado ao servidor quando o formulário for enviado.
Obtenha o valor
Se recebermos uma referência a um nó <input>, podemos chamar o valor diretamente para obter o valor de entrada do usuário correspondente:
// <input type = "text" id = "email"> var input = document.getElementById ('email'); input.value; // 'valor inserido pelo usuário' Este método pode ser aplicado ao text , password , hidden e select . No entanto, para as caixas de rádio e de seleção, value retorna sempre o valor predefinido HTML e o que precisamos obter é realmente se o usuário tem a opção "verificado", portanto, checked deve ser usado para julgar:
// <bret> <input type = "radio" name = "weekday" id = "segunda -feira" value = "1"> segunda -feira </elabel> // <bret> <input type = "radio" name = "weeekday" id = "terça -feira" value = "2"> terça -feira </bely> var = document.getElementById ('segunda -feira'; // '1'TETE.VALUE; // '2'mon.Checked; // verdadeiro ou falsoDefinir valor
Definir o valor é semelhante a obter o valor. Para texto, senha, oculto e selecionado, você pode definir o valor diretamente:
// <input type = "text" id = "email"> var input = document.getElementById ('email'); input.value = '[email protected]'; // O conteúdo da caixa de texto foi atualizadoPara rádios e caixas de seleção, defina verificado como verdadeiro ou falso.
Controles HTML5
O HTML5 adicionou um grande número de controles padrão, comumente usados incluem data, dateTime, DateTime-Local, cor etc. Todos eles usam a tag <input>:
<input type = "date" value = "2015-07-01">
<input type = "DateTime-Local" value = "2015-07-01T02: 03: 04">
<input type = "color" value = "#ff0000">
Os navegadores que não suportam o HTML5 não podem reconhecer novos controles e os exibirão como tipo = "texto". Os navegadores que suportam o HTML5 receberão strings formatados. Por exemplo, o valor da entrada do tipo = "Data" será garantido como uma data válida no formato AAAA-MM-DD, ou uma string vazia.
Envie um formulário
Finalmente, o JavaScript pode lidar com o envio do formulário de duas maneiras (o método Ajax é introduzido no capítulo seguinte).
O primeiro método é enviar um formulário através do método submit () do elemento <form>. Por exemplo, em resposta a um evento <botão> clique em
<formig id = "teste de teste"> <input type = "text" name = "test"> <button type = "button" onclick = "doSubMitform ()"> submeter </butut> </morm> <cript> function doSubMitform () {var form = document.getElementById ('test-form'); // Você pode modificar a entrada do formulário aqui ... // Enviar formulário: form.submit ();} </sCript> A desvantagem desse método é que ele interrompe a submissão normal do navegador ao formulário. O navegador envia o formulário ao clicar em <button type="submit"> por padrão, ou o usuário pressiona a tecla Enter na última caixa de entrada. Portanto, a segunda maneira é responder ao evento onsubmit de <form> e fazer alterações ao enviar o formulário:
<Formulário ID = "Test-Form" onSubMit = "Return checkForm ()"> <input type = "text" name = "test"> <botão tipo = "submit"> submite </butut> </morm> <cript> function checkForm () {var form = document.getElementById ('teste-forma'); // Você pode modificar a entrada do formulário aqui ... // Continue para a próxima etapa: retornar true;} </sCript> Observe que o return true é necessário para dizer ao navegador para continuar enviando. Se return false , o navegador não continuará enviando o formulário. Essa situação geralmente corresponde ao erro de entrada do usuário e o usuário é solicitado para mensagens de erro e o formulário é encerrado.
Ao verificar e modificar <input> , faça o uso total de <input type="hidden"> para passar dados.
Por exemplo, muitos formulários de login desejam que os usuários insira nomes de usuário e senhas, mas, por razões de segurança, não transmitem senhas de texto simples ao enviar o formulário, mas o MD5 da senha. Os desenvolvedores JavaScript comuns modificarão diretamente <input> :
<formig id = "login-form" method = "post" onsubMit = "return checkForm ()"> <input type = "text" id = "username" name = "nome de usuário"> <input type = "senha" id = "senha" name "name =" senha "> <butty type =" sigin> submit </button> </script "> <script> document.getElementById ('senha'); // altera o texto simples inserido pelo usuário para md5: pwd.value = TOMD5 (pwd.value); // Continue para a próxima etapa: retornar true;} </sCript> Esse método parece estar bem, mas quando o usuário insere a senha para enviar, a caixa de senha será exibida de repente de vários * a 32 * (porque o MD5 tem 32 caracteres).
Para não alterar a entrada do usuário, você pode usar <input type="hidden"> para implementar:
<Formulário ID = "Login-form" Method = "Post" OnsubMit = "Return checkForm ()"> <input type = "text" id = "username" name = "nome de usuário"> <input type = "senha" id = "inpass-pastword"> <input Type = "hidden" id = "md5-massa" Nome = "" " TIPE = "SURNIT"> Submite </botão> </morm> <cript> function checkForm () {var input_pwd = document.getElementById ('input-sassword'); var md5_pwd = document.getElementById ('md5-assassword'); // altera o texto simples inserido pelo usuário para md5: md5_pwd.value = TOMD5 (input_pwd.value); // Continue para a próxima etapa: retornar true;} </sCript>Observe que o <input> com ID do md5-passaWord marcado name = "senha", enquanto o ID inserido pelo usuário é input-password sem o atributo de nome. Os dados sem nome atributo <input> não serão enviados.
Arquivos de operação
Nos formulários HTML, o único controle que pode fazer upload de arquivos é <input type = "file">.
NOTA: Quando um formulário contém <input type = "arquivo">, o Enctype do formulário deve ser especificado como Multipart/Form-Data, e o método deve ser especificado como POST, para que o navegador possa codificar corretamente e enviar os dados do formulário em formato multipart/formato.
Por motivos de segurança, o navegador apenas permite que os usuários cliquem em <input type = "arquivo"> para selecionar arquivos locais. Usando o JavaScript para atribuir valor a <input type = "file"> não tem efeito. Quando o usuário escolhe fazer upload de um arquivo, o JavaScript não pode obter o caminho real para o arquivo:
Arquivo a ser carregado:
Geralmente, os arquivos carregados são processados pelo servidor de back -end. O JavaScript pode verificar a extensão do arquivo ao enviar o formulário para impedir que os usuários enviem arquivos em formatos inválidos:
var f = document.getElementById ('teste-arquivo-upload'); var filename = f.Value; // 'c: /fakepath/test.png'if (! FileName ||! (FILENAME.ENDSWITH ('. retornar false;}API de arquivo
Como o JavaScript possui operações muito limitadas nos arquivos enviados pelos usuários, especialmente a incapacidade de ler o conteúdo do arquivo, muitas páginas da Web que exigem que os arquivos operacionais precisem ser implementados usando plug-ins de terceiros, como o Flash.
Com a popularidade do HTML5, a API de arquivo recém -adicionada permite que o JavaScript leia o conteúdo do arquivo e obtenha mais informações de arquivo.
A API de arquivo do HTML5 fornece dois objetos principais: Arquivo e FileReader, que podem obter informações de arquivo e ler arquivos.
O exemplo a seguir demonstra como ler um arquivo de imagem selecionado pelo usuário e visualizar a imagem em um <div>:
Visualização de imagem:
var fileInput = document.getElementById ('test-imagem-arquivo'), info = document.getElementById ('teste-arquivo-info'), visualização = document.getElementById ('teste-imagem-prevista'); // Ouça os eventos de alteração: FILEInput.adDeventListener ('Alterar', function () {// Limpar a imagem de fundo: visualize.style.backgroundImage = ''; // Verifique se o arquivo está selecionado: if (! FileInput.value) {info.innerhtml = 'no arquivo não selegido'; retorno;} // info.innerhtml = 'arquivo:' + file.name + '<br>' + 'tamanho:' + file.size + '<br>' + 'modificado:' + file.lastmodifiedDate; Arquivo de imagem! '); arquivo na forma de DATAURL: reader.readasDataurl (arquivo);});O código acima demonstra como ler o conteúdo do arquivo através da API de arquivo do HTML5. O arquivo lido na forma de dataurl é uma string, semelhante aos dados: imagem/jpeg; base64,/9j/4aaqsk ... (codificação base64). É frequentemente usado para definir imagens. Se o processamento do lado do servidor for necessário, envie os caracteres após a string base64 para o servidor e decodificá-lo com base64 para obter o conteúdo binário do arquivo original.
Ligar de volta
O código acima também demonstra um recurso importante do JavaScript, que é o modo de execução de fibra única. No JavaScript, o mecanismo de execução JavaScript do navegador sempre é executado no modo de thread único ao executar o código JavaScript, o que significa que, a qualquer momento, é impossível para o código JavaScript ter mais de um thread sendo executado ao mesmo tempo.
Você pode perguntar, como lidar com a multitarefa no modo de thread único?
No JavaScript, a multitarefa é realmente chamada de forma assíncrona, como o código acima:
leitor.readasDataurl (arquivo);
Uma operação assíncrona será iniciada para ler o conteúdo do arquivo. Por ser uma operação assíncrona, não sabemos quando a operação termina no código JavaScript, por isso precisamos definir uma função de retorno de chamada primeiro:
leitor.onload = function (e) {// Quando o arquivo é lido, essa função é chamada automaticamente:};Quando a leitura do arquivo for concluída, o mecanismo JavaScript chama automaticamente a função de retorno de chamada que definimos. Quando a função de retorno de chamada é executada, o arquivo foi lido, para que possamos obter com segurança o conteúdo do arquivo dentro da função de retorno de chamada.
O artigo acima fala brevemente sobre o objeto JavaScript Browser é todo o conteúdo que eu compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.