Caso 1: selecione todos
Pontos de conhecimento do aplicativo: OndblClick = () | ONCLICK | Encontre atributos de tags, julgamentos e aplicações de funções
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20charset = "utf-8">%20%20%20%20 <título> </title>%20 %20 </head>%20%20 <corpo>%20%20%20%20 <Div>%20%20%20%20%20%20%20%20 <input%20type = "Button"%20Value = "selecione Todos "%20ONDBLCLICK =" checkall () "%20/ >%20%20%20%20%20%20%20 <input%20Type = "Button"%20Value = "Cancelar"%20ONDBLCLICK = "CCLELLL ()"%20/>%20%20%20%20% 20%20%20%20%20 <input%20Type = "Button"%20Value = "Undelect"%20ONDBLCLICK = "Reversealll ()"%20/>%20%20%20%20%20%20 %20 <Tead>%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20%20 20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20 20 20%20%20%20%20 %20%20%20%20 <TBody%20ID = "TB">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20 20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20%20 20%20%20%20 20%20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20%20 20%20%20%20 20%20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20%20 20%20%20%20 20%20%20 20 0%20%20%20%20%20%20%20 </tr>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20%20%20%20%20%20%20%20%20 20 20 20 20%20%20%20%20 </tr>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20 </tr>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20%20 20%20 20%20 20 20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20 20%20%20 20%20 20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20 20%20%20%20%20%20%20 0%20</tr>%20%20%20%20%20%20</tbody>%20%20%20</table>%20%20%20%20%20<script>%20%20%20%20%20%20//If you select all, first get all input tag attributes, and then all are true%20%20%20%20%20%20%20 Função%20CHECKALL () {%20%20%20%20%20%20%20%20Var%20TB%20 =%20Document.getElementBy Id ('TB'); // Get TB, isto é, corpo%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 (var%20i = 0; i <verificação.Length;%20i ++) {%20%2 0%20%20%20%20%20%20%20%20%20%20Var%20Current_Check%20 =%20CHECKS [i]; // Obtenha o valor de cada entrada e atribua um nome de variável%20%20%20%20%20% leAll(){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//[First, 2, 3, 4, 5] checked%20=%20true%20 %20%20%20%20%20%20%20%20%20 for%20(var%20i=0;i<checks.length;%20i++){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20VAR%20TB%20 = 20DBUMUMENT. corpo%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CHECKS%20 = 20TB.GE TelementsByClassName ('C1');%20%20%20%20%20%20%20%20%20%20 // [primeiro, 2, 3, 4, 5] verificados%20 =%20tuados%20%20%20%20%20%20%20%20%20CHECKS [i]; %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20 20%20 20%20 20%20 20%20%20%20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20 20%20 20 20%20 20%20%20%20%20%20 20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 </body> </html>Caso 2: escolha única
Você só pode escolher um e usar JS para alterar suas opções
Pontos de conhecimento de aplicação: getElementsByTagName%20 |%20 Verificou%20 |%20Mutex
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20Charset = "utf-8">%20%20%20%20 <título> </title>%20%20 </head>%20%20 <corpo> 20%20 20 %20%20 <ul>%20%20%20%20%20%20%20%20%20 <li> <input%20Type = "Radio"%20Name = "g"%20Value = "11"%20/> masculino </li>%20%20%20%20%20%20%20%20%20%20 20 <L. i> <input%20Type = "Radio"%20Name = "g"%20Value = "22"%20/> fêmea </li>%20%20%20%20%20%20%20%20 <!-Rádio%20 = 20document.gocument.getElementsByTagname ('input') 20%20%20%20%20 [ ut%20Type = "Radio"%20Name = "G"%20Value = "11">,%20 <input%20Type = "Radio"%20Name = "G"%20Value = "11">,%20 <input%20Type = "Rad io "%20Name =" g "%20Value =" 11 ">]%20%20%20%20%20RADIO [1]%20%20%20%20%20%20 <input%20Type =" Radio "%20Name =" g "%20Value =" 11 "> %20%20%20%20xo%20 =%20Radio [1]%20%20%20%20%20 <entrada%20Type = "Radio"%20Name = "g"%20Value = "11">%20%20%20%20%20%20%20xo .Value%20%20%20%20%20%20XO.COLLHED%20%20%20%20False%20%20%20xo.Comestou%20 =%20True%20%20%20%20True->%20%20 </Body> </html>Caso 3: Clonagem
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20Charset = "UTF-8">%20%20%20%20 <titl e> </ititle>%20%20 </head>%20%20 <Body>%20%20%20%20 <H2%20ID = "H1"> 333%20%20%20%20%20%20 <Span> 1 23 23 </span>%20%20%20%20%20%20%20%20%20 <Span> 123 </span>%20%20%20%20%20%20%20%20%20%20%20 <span> 123 </span> 20%20%20%20%20 20 20 20%20 20 20 20 20 20 20 20 </span> 20%20 20%20%20 20 20 20 20 20 20 20 20 20 20 20 20 0%20%20%20 <a> 123 </a>%20%20%20%20 </h2>%20%20%20%20%20 <div%20id = "contêiner">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20 </div>%20%20%20%20%20 <Cript>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20% é adicionado diretamente a 2 //%20%20%20%20%20%20VAR%20NewH%20 =%20H.CLONODE (TRUE); // sem verdade, apenas formato de clonagem //%20%20%20%20C.AppendChild (Newh); Depois de adicionar verdadeiro, é completamente clonado a 2%20%20%20%20 </script>%20%20 </body> </html>
Caso 4: Atributos personalizados, obtenha atributos personalizados e altere o conteúdo da tag
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20charset = "utf-8">%20%20%20%20 <título> </title>%20 20 20 20 20 20 </head> 20%20 <body> 20%20%20%20%20%20%20%20 20 20 20 20 20 20 20 20 20 20%20 20%20%de 20%20%de 20%de 20%de 20%20%20%, 20%20%20%20%20%, pode ser %20%20%20%20%20 //%20%20%20%20%20 <entrada%20Type = "Button"%20OnClick = "func ()"%20Value = "Clique ME "%20/>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20%20% 20 <div%20class = "c1"%20Ex = 'sb'> 123 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20 20 20 < lass = "c1"> 123 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <div%20class = "C1"%20Ex = 'sb'> 123 </div>%20 %20%20%20%20%20<div%20class="c1">123</div>%20%20%20%20</div>%20%20%20%20%20<script>%20%20%20%20 function%20Func(){%20%20%20%20%20%20//i1All children, loop each child, judge if Alex = 'sb'%20%20%20%20%20%20var%2 0i1%20 =%20Document.getElementById ('i1')%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 Para%20 (%20Var%20i%20 = 0;%20i <divs.length; i ++) {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 CUR RENT_DIV%20 =%20divs [i];%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f esult%20==%20'sb'){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20%20}%20%20%20%20</script>%20%20</body></html>Caso 5: três maneiras de obter os valores na caixa de entrada
<! Doctype%20html> <html> <head>%20%20 <Title> </title>%20%20 <meta%20charset = "utf-8"%20/> </head> <body>%20%20 <div%20id = "inp"> 20%20%20%20%20%</div> 20%20%20 %20 <input%20type = "text"%20class = "aa"/>%20%20 <input%20type = "button"%20Value = "Add"%20OnClick = "func ();"%20/>%20%20 20 20 </div>%20 20 <div%20id = "lis">%20%20%20%20 20 20 20%20% %%20 <ul>%20%20%20%20%20%20%20 <li> carne de porco refogada </li>%20%20%20%20%20%20 <li> cotovelo refogado </li>%20%20%20%20%20%20 <li> peixe <li> 0%20%20var%20inp_aa%20 =%20document.getElementsByClassName ('aa');%20%20%20%20inp_aa [0] .Value%20 =%20'bried Hairfish '; // equivalente ao conteúdo de entrada 20%20 na caixa de entrada </script> <!DOCTYPE%20html><html><head>%20%20<title></title>%20%20<meta%20charset="utf-8"%20/></head><body>%20%20<div%20id="inp">%20%20%20%20</div>%20%20<input%20type="text"%20cla ss="aa"/>%20%20<input%20type="button"%20value="Add"%20onclick="Func();"%20/>%20%20</div>%20%20<div%20id="lis">%20%20%20<div%20id="lis">%20%20%20<div%20id="lis">%20%20%20 %20%20 <ul>%20%20%20%20%20%20%20%20 <li> carne de porco refogada </li>%20%20%20%20%20%20 <li> cotovelo refogado </li>%20%20%20%20 </div>%20%20 <Script>% 20%20%20%20var%20c%20 =%20Document.QuerySelector ('AA'); // Seletor de consulta%20. é o ID da distinção, a sintaxe da tag%20%20%20c.Value%20 =%20'Brated Berinflant ';%20%20%20%20 </script> </body> </html>Método 2: Consulta
<! Doctype%20html> <html> <head>%20%20 <Title> </title>%20%20 <meta%20charset = "utf-8"%20/> </ad Head> <body>%20%20 <div%20id = "inp">%20%20%20 20 20 </div >%20%20 <input%20type = "text"%20id = "aa"/>%20%20 <input%20type = "button"%20Value = "Add"%20OnClick = "func ();"%20/>%20%20 </div> 20%20 </div%20id = "li s ">%20%20%20%20 <ul>%20%20%20%20%20%20%20 <li> Porco refogado </li>%20%20%20%20%20%20 <li> refogado cotovelo </li>%20%20%20%20%20 </ul>%20%20 </div>%20%20%20 <Cript>%20%20%20%20var%20c%20 =%20document.getElementById ('aa'); Berinjela ';%20%20%20%20%20 </script> </body> </html>Método 3: Id
Caso 6:
%20 // 'antes deBegin', 'AfterBegin'/%20'Beender '/' Afterend '
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <Titter> </title>%20%20%20%20 <meta%20Charset = "utf-8" "20/>%20 20 20 20 </Head> 20%20%20%<Body>%20%20%20%20%<DI v%20id = "inp">%20%20%20%20 </div>%20%20%20%20 <entrada%20type = "text"%20/>%20%20%20%20%20 <input%20Type = "Button"%20Value = "Adicionar"%20OnCick = "AddElen (isto)" " %20/>%20%20%20%20</div>%20%20%20%20%20%20<div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<li>Braised Pork</li>%20%20%20%20%20%20%20<li>Braised Elbow< /li>%20%20%20%20%20%20%20%20%20%20 <li> Peixes refogados </li>%20%20%20%20%20%20 </ul>%20%20%20%20%20 </div>%20%20%20%20%20%20 FUNÇÃO 20 FUNÇÃO 20 addElen (ths)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20VAR%20AAA%20 =%20ths.PrevielementSibling.Value;%20%20%20%20%20%20al 20al ERT (AAA)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20 ARERERT (Lis t_li)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20%20 20 20%20%20%20%20 %20%20%20%20%20%20%20%20%20list_li.Insertadjacenthtml ("beforend",%20bbb)%20%20%20%20%20%20%20%20%20%20 20 </script>%20 20 </corpo> </html> <! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <Titter> </title>%20%20%20%20 <meta%20Charset = "utf-8"%20/>%20%20 </head>%20%20%20 <corpo>%20%20 %20%20 <div%20id = "inp">%20%20%20%20 </div>%20%20%20%20%20 <entrada%20type = "text"%20/>%20%20%20%20%20 <input%20Type = "Button"%20Value = "Add" 20on clique = "addElen (this)"%20/>%20%20%20%20 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20 20 20%20 20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20 20 20 20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20 20 20%20%20%20%20 T>%20%20%20%20%20%20%20%20 Função%20AdDelen (THS) {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Document_li 20 = 20%20Document.GeTeLementbyid (" UL%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 tag%20 =%20Document t.CreateElement ('Li'); // Crie li%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20list_li.InsertBefore (TAG,%20list_li.Children [-1]) // inserção %20%20%20%20}%20%20%20 </script>%20%20 </body> </html> <! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20charset = "utf-8">%20%20%20 20 <título> </title>%20%20 </head>%20% 20 <Body>%20%20%20%20 <Div>%20%20%20%20%20%20%20%20 <entrada%20type = "text"%20/>%20%20%20%20%20%20%20%20 <input%20Type = "mas ton "%20Value =" Adicione "%20OnClick =" addElement (this) "%20/>%20%20%20%20 </div>%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20 20 20 20 20 20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20 20 20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20 20%20%20 20 20 20%20%20%20 </ul>%20%20%20%20 </div>%20%20%20%20%20%20 <Script>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20 20 20 20 20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20 20 20 20 20 20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20 20 20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//'beforeB eggin', 'afterBegin'/%20'beforeEnd'/'afterEnd'%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//afterBegin%20 Internal Porcelagem fechada de 20%20%20%20%20%20%20%20%20 // Afterend%20 Externo fechado //%20 %20%20%20%20%20%20%20%20%20CommentList.Insertadjacenthtml ("beforend",%20str)%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20TAG.InnerText%20 =%20Document.CreateElement ('Li');%20%20%20%20%20%20%20%20Tag.innertext%20 =% 20val; TAG.APP ENDCHILD (TEMP);%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 Console.Log (CommentList.CHILDREN [1])%20%20%20%20%20%20} 20%20 20 20%</script> 20%20%>Caso 7:
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20Charset = "UTF-8">%20%20%20%20%20%2 0Height:%2040px;%2040px;%2040px;%2040px;%2040px;%2040px;%20%20%20%20%20Height:%2040px;%2 0%20%20%20%20%20}%20%20%20%20%20%20%.gg{%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20%20 20%20%20%20%20%20%20%20 20 20 20 20 20 20 20 20%20%20%20 20 20%20%20 20%20%20%20%20%20%20%20 20 20 20 20 20 20 20 20 20 20 20 20%20%20 20 20%20 20%20%20 20%20%20%20%20%20%20%20%20% %20%20 </estilo>%20%20 </head>%20%20 <corpo>%20%20%20%20%20%20%20 <P> Quando o mouse entrar em sim, remova o conteúdo </p>%20%20%20%20%<p> o conteúdo "%20onfocu s =" focus (this) "%20onBlur =" Blur (this) "%20/>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 // Documento. . %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20 20%20%20 20%20 20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20 20%20%20 20%20 20 20 %20IF%20 (current_val%20 ==%20 "Por favor, digite content"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20function%20Blur (THS)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fals 20falm 20 (current_val%20 = 20 ". %20%20%20%20%20%20%20%20%20%20%20%20ths.Value%20 =%20'Pleas Entre no conteúdo;Caso 8: menu principal
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <Titter> </title>%20%20%20%20%20 <meta%20Charset = "Ut F-8 "%20/>%20%20%20%20%20%20%20%20%20.pg_top%20.Menu%20 {%20%20%20%20%20%20%20%20%20 Background-Clo r:%20gold;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20 20%20%20 20%20 20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20 20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20 20 20 20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20-Size:% 2025px;%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20 20%20%20 20 20 20%20%20%20 0%20%20%20%20%20%20%20background-color:%20burlywood;%20%20%20%20%20%20%20%20%20%20%20%20%20.hide%20{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%.hide%20{%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 </head>%20%20 <corpo>%20%20%20%20%20 <div%20class = "pg_top">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20%20 20%20%20%20%20 %20%20 <div%20class = "item"%20Con = "h2"%20OnClick = "Show (this)"> Guijie </div>%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 <d iv%20id="content"%20class="content">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="hide"%20c on="h3">Meet the bar </div>%20%20%20%20%20%20 </div>%20%20%20%20 </div>%20%20%20%20%20%20 <SCRIPT>%20%20%20%20%20%20 20 Função%20show (THS)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 0BABA%20 =%20ths.parenteLement.Children;%20 // obtém cada elemento filho%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 para%20 (i%20 = 200; 0%20%20%20%20%20%20%20%20%20%20%20 Se%20 (Ths%20 ==%20baba [i])%20 {%20 // Faça um julgamento, %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20BABA [i] .classList.Remove ('BK')%20 // Remova attributes%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//Content%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20current_con%20=%20document.get ElementById ('conteúdo'). Crianças;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 Para%20 (j = 0;%20J <current_con.length; j ++)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20 20 20%20 20%20% rent_con[j].getAttribute('con')%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20}else{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20}%20%20%20</script>%20%20</body></html> <! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20Charset = "UTF-8">%20%20%20%20%20%20%</title>%20%20%20%20%20 20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20 20 20 20 20 20 20 20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20 20 20 20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20 20 20%20%20%20% 0;%20%20%20%20}%20%20%20%20ul%20li {%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20 Cor:%20white;%20%20%20%20%20%20%20%20%20%20%20 padding:%208px%2010px;%20%20%20%20%20%20}%20%20%20%20%20.Clearfix: após {%2 0%20%20%20%20%20 Display:%20Block;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20 20%20 20%20%20%20%20 20 20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20 20 20 20 20 20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20 20 20%20%20%20 0%20%20%20.Hide {%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%.TAB-Menu%20.Título {%20%20%20%20%20%20%20%20%20%20%20 20 20 20 %20.TAB-Menu%20.Título {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.TAB-Menu%20.Título%20.Active {%20%20%20%20%20%20%20%20 2 0%20%20 background-cor:%20white;%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20 2 0%20%20%20border:%201px%20solid%20#dddddd;%20%20%20%20%20min-height:%20150px;%20%20%20%20%20%20}%20 %20 </estilo>%20%20 </head>%20%20 <corpo>%20%20%20%20 <div%20style = "Largura: 400px;%20Margin:%200%20AU para; ">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 >%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20 20 20 20%20 20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20 20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20 20%20%20 20%20 20 20 0target = 'H3'%20OnClick = "Show (this)"> Tianshahai </li>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <div%20Con = "H1"> Baked Pernas de cordeiro </div>%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20 20 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <Script>%20%20%20%20%20%20%20 Função%20%20%20/THS) {INCIM 20%20%20 20%20 20%20%20%20%20%20/20/THS INCHS INGNA tag%20%20%20%20%20%20%20%20Var%20target%20 =%20ths.getAttribute ('meta') // h3%20%20%20%20%20%20%20%20%20 // Adicione o estilo de si mesmo Ativo%20%20%20%20%20%20%20%20%20%20%20%20ths.ClassName%20 =%20'Active ';%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Var%20Brothers%20 =%20ths.parentElement.Children;%20%20%20%20%20%20%20%20%20 for (var%20i = 0; i <br outros 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20 20%20 20%20%20 20%20 20 20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20 20%20 20%20%20 20%20 20 20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Brothers [i]. Removeattribute ('classe')%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20 20 20 20 20 20 20 20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CONSOLES tendas)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 var%20con%20=%20current_content.getAttribute('con')%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%[S -%[S -%20%/20%da 20%/20%da 20%20%<20%20%<20%20%20%2010 20%20%da 20%20%da 20%20%da 20%20%da 20%20%da 20%20%da 20%20%da 20%20%da 20%20 20%20%da 20%20%da 20%20%da 20%20 20%de 20%/20%20%20 anos 20/20%da 20%20%20%20%/20%20%2010 20%da 20%20%da 20%20%20%20%/20%20%/20%20%[Caso 9: retorne ao topo
Principais pontos de conhecimento: OnScroll%20 e Document.Body.Scrolltop;
<! Doctype%20html> <html>%20%20 <Head>%20%20%20%20 <meta%20charset = "utf-8">%20%20%20%20%20%20%</title>%20%20 20%20%20%20 20%20%20%20%20.Go-top { 20%20%20%20Position:%20Fixed;%20%20%20%20%20%20%20 Posição:%20Fixed;%20%20%20%20%20%20%20POSIÇÃO:%20Fixed;%20%20%20%20%20%20%20Position 20Fixed; %20%20%20%20%20%20%20%20POSIÇÃO:%20Fixed;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20 direito:%2020px;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20 20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20% kgoldenrod;%20%20%20%20%20%20%20%20%20 cor:%20white;%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20 <b ody%20onscroll = "func ();">%20%20%20%20%20 <div%20id = "i1"%20style = "altura:%202000px;%20background-cor:%20g reenyellow; ">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 </div>%20%2 0%20%20<div%20id="i2"%20class="go-top%20hide">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20function%20Func(){%20%20%20%20%20%20%20%20%20%20%20var%20scrollTop%20=%20document.body.scrollTop;//body's scroll height%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20IF (scrolltop> 100) {%20%20%20%20%20%20%20%20%20%20%20ii.classList.Remove ('hide'); // Remova para exibir %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %%20}%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20 20 </script> 20%20 </corpo>Caso 10:
Principais pontos de conhecimento:
// rolagem%20 rolagem; o significado de rolagem
//%20Scrolltop:%20 altura da barra de rolagem de cima
//%20ScrolHeight:%20 Document Hight: si mesmo + preenchimento
//%20clienttop:%20 altura da borda
//%20clientHeight:%20 A alcance atual altura visível: em si%20+%20 padding
// Offset%20 Impressão Significado
//%20OffSettop:%20 A altura do rótulo atual de "Top" (corpo)
//%20 Se não houver postagem em seu nível anterior, se houver, a tag de posição será baseada principalmente na tag de posição.
//%20offsettheight:%20 A altura de sua própria gama: ele próprio + preenchimento + borda
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </ad head> <body> <div style = "altura: 20px; cor de fundo cor de fundo:"> </div> <!-head-> <div style = "borda: 5px sólido corporal; Style = "Altura: 200px; Overflow: Auto; largura: 400px; margem: 0 automático; borda: 15px vermelho sólido; preenchimento: 3px;" > <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <s> sdf </div> <div> <div> </> </> sdf </sdf </sdf </sdf </div> <div> <// <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <s> sdf </div> <div> <div> </> </> sdf </sdf </sdf </sdf </div> <div> <// <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <s> sdf </div> <div> <div> </> </> sdf </sdf </sdf </sdf </div> <div> <// <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <s> sdf </div> <div> <div> </> </> sdf </sdf </sdf </sdf </div> <div> <// <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> <///sdf </div> </div> <df> </div> <div> sdf <//> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> <///sdf </div> </div> <df> </div> <div> sdf <//> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div> <div>sdf</div> </div> </div> </div> </div> </div> <script> var ii = document.getElementById('xo') console.log(ii.scrollTop) console.log(ii.scrollHeight) console.log(ii.clientTop) console.log(ii.clientHeight) console.log(ii.offsetTop) console.log(ii.offsetHeight) //scroll Scroll; scroll meaning // scrollTop: scrollbar height from the top // scrollHeight: Document height: itself + padding// clientTop: border height // clientHeight: visible range height: itself + padding //offset Print meaning // offsetTop: The current label distance from the "top" (body)// If there is no post on the previous level, if there is one, the position label is mainly used // offsetHeight: The visible range height: itself + padding+border </script> </body></html>好了,暂时就介绍到这里希望大家多写多练,主要是其中的逻辑,当然现在很多人都开始使用jquery了,大家也多注意。