Explicação detalhada do rótulo do script e da página de acesso HTML

Autor：Eve Cole Data da Última Atualização：2025-03-15 18:00:04

Copie o código do código da seguinte forma:

<img src = "1_nder1000.jpg" id = "img2" onclick = "alert ('onclick');

var iMg2 = document.getElementById ("img2");

Alerta (img2.onmouseover);

// produz as seguintes imagens

</script>

Ou seja, saída:

Firefox:

Copie o código do código da seguinte forma:

var iMg1 = document.getElementById ("img1");

img1.onMouseOverover = girar;

Função girate () {) {

this.src = '1_yylklshmyt20090217.jpg';

}

var iMg1 = document.getElementById ("img1");

img1.onMouseOver = onMouseOver;

Função onMouseOver (evento) {

this.src = '1_yylklshmyt20090217.jpg';

}

// De fato, o documento.getElementById ("img1");

/* var iMg1 = {src: "1_nder1000.jpg" ,,

Id: "img1",

alt: "" ,,

Título: "Imagem reversa"

}*/

</script>

Copie o código do código da seguinte forma:

< %@Página de página = "c#" autoeeventwireup = "true" codeBehind = "webform1.aspx.cs" herits = "webApplication1.webform1" %>

<title> página de não título </ititle>

// Todos os atributos da imagem do ciclo img, você pode ver muitos atributos inespecíficos que não são definidos

Window.onload = repeat;

Function repeat () {) {)

var iMg1 = document.getElementById ('img1');

para (var i em img1) {

alerta (i+":"+img1 [i]);

}

</script>

</head>

<Body>

<div>

</div>

</morm>

</body>

</html>

Etiqueta de script e acesso à página HTML

Tag de script

A tag de script é usada na página HTML incorporada em alguns scripts óbvios

<Cript>

// Algum script vai aqui

O rótulo do </SCRIPT> tem três atributos especiais (é claro, também possui atributos como ID, classe e quase todos os elementos na página HTML podem ter atributos de classe, ID))

<Script Language = "JavaScript"> // Atributo da linguagem indica o idioma usado no rótulo

// tem três valores comuns javascript, jscript, vbscript

// Algum script vai aqui

</script>

// Somente o IE pode ser reconhecido pelo JScript, e outros navegadores ignorarão o conteúdo deste rótulo

// Para VBScript, apenas o IE no Windows pode ser reconhecido, executando

// No entanto, o atributo de idioma foi posteriormente substituído pelo atributo de tipo em xhtml

// Algum script vai aqui

</Script> No navegador da web, usaremos apenas JavaScript, digite a propriedade para texto/JavaScript. JavaScript

<Cript>

Alerta ("Olá!");

</script>

// O código acima será executado na maneira como o JavaScript será executado em JavaScript

// Mesmo se houver IE, o bloco de script sem declarações será realizado como JavaScript, não VBScript

<Cript>

msgbox "Olá!"

</script>

// 上面的代码在 ie 中也会报错, ou seja, JavaScript 执行以前在 html 页面中, 一些标签常会加一些诸如 OnClick, onmouseover 这样的属性, 这是一种事件绑定 (关于事件, Explicaremos em detalhes no futuro, não se preocupe). )

<img src = "../ Images/stack_heap.jpg" onclick = "alert ('Você me machuca!"/> O código exibirá uma imagem na página HTML, quando você clicar nos cliques do mouse. Nesse momento, Haverá uma janela pop -up que mostra 'Você me machuca!', O valor do atributo onclick é na verdade um código JavaScript;

OnClick, execute -o uma vez quando o mouse for clicado

OnMouseOver, execute uma vez quando o mouse for colocado

OnMouseOut, execute uma vez quando o mouse se move

OnMousetown, execute -o uma vez quando o mouse é pressionado

OnMouseUp, execute uma vez quando o mouse for liberado (salto)

OnMousedBlClick, execute uma vez quando o mouse duplo -clique

Online, execute uma vez quando o objeto é carregado

O efeito de ser popular na internet antes é realmente o efeito das rollverimações

<img src = "../ Images/ Stack_heap.jpg"

onmouseover = "this.src = '../images/over.jpg'"

onmouseout = "this.src = '../ imagens/out.jpg'"/> você pode saber, a string em atributos como o OnMouseOver será executada como script no momento do incidente, mas o código acima depende do código acima.

// Para facilitar a visualização, vamos extraí -los abaixo

this.src = '../images/over.jpg'

This.src = '../images/out.jpg' analisa o código acima Este objeto é um objeto que sempre existiu. Para a tag IMG abaixo, ela será analisada no seguinte objeto:

)

// Observe que, de fato, isso não pode ser atribuído manualmente ou declarado manualmente.

this = {

src: "../ imagens/ stack_heap.jpg" ,,

Alt: "pilha de memória",

OnClick: "Alert ('Hello!')",

Tagname: "IMG"

};

// De fato, não apenas esses atributos, as tags IMG serão analisadas como um objeto, com atributos como SRC, ALT, SRC, ALT atributos são gravados no HTML, e o nome da tagname é gerado automaticamente pelo sistema. O nome da etiqueta! Podemos usar o seguinte código para teste:

) o efeito da imagem da imagem apenas conseguiu

Há alguma atenção a essa ligação de eventos na linha.

<head>

<Cript>

Função myfn () {

alerta ("A imagem está carregada!");

}

</script>

</head>

// ................ após vários código

)

A execução do código acima está bem, mas o pedido é invertido (o script pode ser colocado em qualquer local legal)

)

// ................ após vários código

<Cript>

Função myfn () {

alerta ("A imagem está carregada!");

}

</Script> A página HTML é carregada e executada em ordem de cima para baixo. É por isso que o rótulo do script é colocar a parte do script na parte da cabeça, porque a cabeça na frente do corpo, quando o elemento no corpo é carregado, o script na cabeça será definitivamente carregado.

Mas havia o XHTML, com "três camadas de separação", o W3C lançou o DOM2, precisamos vincular eventos de outra maneira, obter elementos de página HTML.

<head>

<Cript>

var iMg = document.getElementById ("myimg");

//document.getElementById Método possui um parâmetro, um ID da string

// então img significa que o objeto de etiqueta de imagem

img.onclight = myfn;

/*Não damos o código JavaScript à sua propriedade OnClick com o valor do caractere da string

É atribuído diretamente para dar um nome de função

Você também dirá, por que não img.onclick = myfn ();

Porque agora está na área de código JavaScript

Adicione "()" para indicar esta função e, em seguida, forneça o valor de retorno desta função para img.onclick*/

Função myfn () {

alerta ("A imagem está carregada!");

}

</script>

</head>

// .......

// Não adicionamos mais o atributo onclick, mas dê um id

No entanto, o código acima ainda cometerá um erro, porque o HTML é carregado de cima para baixo. carregado ainda, haverá erros; Um objeto vazio, por isso cometerá um erro aqui!

// .................... após vários código

<Cript>

var iMg = document.getElementById ("myimg");

// No momento, como a posição da etiqueta do script é colocada na tag IMG, a tag IMG é definitivamente carregada ao carregar no script

img.onclight = myfn;

Função myfn () {

alerta ("A imagem está carregada!");

}

</Script> Mas o padrão ainda é recomendado para colocar o script na parte da cabeça!

Window.onload = Initall;

// A janela representa o objeto da janela.

função inicial () {

var iMg = document.getElementById ("myimg");

img.onclight = myfn;

Função myfn () {

alerta ("A imagem está carregada!");

}

} Então, o código não está errado.

Visite HTML Página: HTML DOM

O HTML DOM usa a página inteira como um objeto de documento.

<p id = "p1"> usamos uma tag p para demonstrar </p> será convertida para o seguinte objeto

// Lembre -se sempre da gramática literal do objeto, certo?

{{

tagname: "p",

ClassName: "Demo",

Título: "O Primeiro Parágrafo: Dom Tree",

ID: "P1",

Innerhtml: "Usamos uma etiqueta P para demonstrar"

}

// Você pode ser estranho, por que o atributo de classe do rótulo se torna o atributo ClassName do objeto em vez de classe.

// Classe é Javascript Words Reservado !!!

// tagname representa seu nome de etiqueta e innerhtml significa que o código HTML navega nele converte a etiqueta HTML em esse objeto, e os atributos ou conteúdo dentro da tag em javascript são muito mais simples, mas a pergunta é como acessar como Acesse -o a este objeto !!

// primeiro adiciona um ID ao rótulo e depois use o método Document.getElementById para acessá -lo

Window.onload = Initall;

função inicial () {

var p = document.getElementById ("p1");

Alerta (p.className);

alerta (p.TagName);

alerta (p.tital);

alerta (p.id);

Alerta (p.innerhtml);

} Acessando a página HTML é tão simples!

Window.onload = Initall;

função inicial () {

var p = document.getElementById ("p1");

p.title = "javascript";

p.className = "Carregar";

} Use isso, já podemos fazer algo emocionante!

// Alguns CSs

.oder {

Cor: vermelho;

Antecedentes: azul;

tamanho de fonte: maior;

}

.fora {

Cor: preto;

Antecedentes: Branco;

tamanho da fonte: menor;

}

.Click {{

Cor: amarelo;

Antecedentes: amarelo;

tamanho de fonte: 12px;

}

// código html

<P ID = "P1"> Uma grande linha de texto, eles são todos textos comuns!

// Código JavaScript

Window.onload = Initall;

função inicial () {

var p = document.getElementById ("p1");

P.OnClick = clickfn;

p.onMouseOver = overfn;

p.onMouseOut = outfn;

}

Função clickfn () {

This.classname = "clique";

// Observe que é o nome da classe, não aula

}

função overfn () {

this.className = "over";

}

função outfn () {

this.className = "out";

} É claro que a obtenção de elementos da página não apenas este método. O nome do nome do ID é o único, e a maioria dos nomes dos rótulos é igual, então o método GetElementsByTagName possui apenas um parâmetro, ou seja, um nome de tagname na forma de uma string, e o valor de retorno é uma lista de html elementos semelhantes a uma matriz.

Window.onload = Initall;

função inicial () {

var plist = document.getElementsByTagName ("p");

// Por que você precisa usar um capital P?

Alerta (plist.length);

Alerta (Plist [0] .innerhtml);

} Além disso, para o método Document.GetElementsByTagName, você também pode passar um número "*" como um parâmetro para obter todos os elementos da página, semelhante ao personagem que passa no CSS

Window.onload = Initall;

função inicial () {

var allThings = document.body.getElementsByTagName ("*");

// Você pode chamar o método GetElementsByTagName em qualquer elemento DOM.

Alerta (Allthings.length);

Alerta (AllThings [3] .innerHtml);

} Other-Javascript: Pseudo Protocol

O pseudo -protocolo é diferente da existência real na Internet, como http: //, https: //, ftp: //, mas para aplicativos associados. :

Podemos entrar "JavaScript: Alert ('JS!'); e o valor do resultado é retornado à página atual

Da mesma forma, podemos usar o protocolo JavaScript Pseudo

// Clique no link deste lado.

<A href = "javascript: window.prompt ('O conteúdo de entrada substituirá a página atual!', '');"> A </a> A solução é muito simples

// Adicionar indefinido até o final, embora o protocolo Pseudo -Javascript forneça uma certa flexibilidade, mas tente não usá -lo na página!