Fall 1: Wählen Sie alle aus
Anwendungswissenspunkte: ONDBLCLICK = () | ONCLICK | Finden Sie Tag -Attribute, Urteile und Funktionen Anwendungen
<! DocType%20html> <html>%20%20 <Kopf>%20%20%20 <meta%20Charset = "UTF-8">%20%20%20 <titels> </title>%20 %20 </head>%20%20 <Körper>%20%20%20%20 <div>%20%20%20%20%20%20%20 <Input%20Type = "Taste"%20Value = "select alle "%20onDblclick =" checkAll () "%20/ >%20%20%20%20%20%20%20 <Input%20Type = "Button"%20Value = "Abbrechen"%20onDblclick = "cancleall ()"%20/>%20%20%20% 20%20%20%20%20 <Input%20Type = "Taste"%20 -Value = "Unect"%20onDBlClick = "ReverAll ()"%20/>%20%20%20%20%20 %20 <thead>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%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% 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 </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 </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% 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% 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 Funktion%20Checkall () {%20%20%20%20%20%20%20%20Var%20TB%20 =%20Document Body%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%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 <prüfungen.Length;%20i ++) {%20%2 0%20%20%20%20%20%20%20%20%20%20Var%20Current_Check%20 =%20checks [i]; // den Wert jedes Eingangs erhalten und einen variablen Namen zuweisen%20%20%20%20%20%20%20%20%20%20%%20Canc 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%20%20%20%20 für%20 (var%20i = 0; i <schecks %20%20%20%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 =%20document Körper%20%20%20%20%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 =%20 TB.GE telementsByClassName ('c1');%20%20%20%20%20%20%20%20%20%20 // [Erstens 2, 3, 4, 5] Überprüfte%20 =%20True%20%20%20%20%20%20%20%20checks %20%20%20%20%20%20%20%20%20%20%20%20%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%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 </body> </html> Fall 2: Einzelauswahl
Sie können nur eine auswählen und JS verwenden, um seine Optionen zu ändern
Anwendungswissenspunkte: GetElementsByTagName%20 |%20Checked%20 |%20Mutex
<! DocType%20html> <html>%20%20 <Kopf>%20%20%20 <meta%20CharSet = "UTF-8">%20%20%20%20 <Titel> </title>%20%20 </head>%20%20%20%20 %20%20 <ul>%20%20%20%20%20%20%20%20%20 <li> <Input%20Type = "Radio"%20Name = "g"%20Value = "11"%20/> männlich </li>%20%20%20%20%20%20%20 <l i> <Eingabe%20Type = "Radio"%20Name = "g"%20Value = "22"%20/> weiblich </li>%20%20%20%20%20%20%20 <!-Radio%20 =%20Document.GetElementsByTagname ('Input')%20%20%20%20%20%20 [inp Ut%20Type = "Radio"%20Name = "G"%20Value = "11">,%20 <Eingabe%20Type = "Radio"%20Name = "G"%20Value = "11">,%20 <Eingabe%20Type = "rad IO "%20Name =" g "%20Value =" 11 ">]%20%20%20%20%20Radio [1]%20%20%20%20%20%20 <Eingabe%20Type =" Radio "%20Name =" G "%20Value =" 11 "> %20%20%20%20xo%20 =%20radio [1]%20%20%20%20%20 <Eingabe%20Typ = "Radio"%20Name = "g"%20Value = "11">%20%20%20%20%20%20xo .Value%20%20%20%20%20%20xo Fall 3: Klonen
<! DocType%20html> <html>%20%20 <Kopf>%20%20%20 <meta%20CharSet = "UTF-8">%20%20%20%20 <Titl e> </title>%20%20 </head>%20%20 <Körper>%20%20%20%20 <H2%20id = "H1"> 333%20%20%20%20%20 <spannweite> 1 23 </span>%20%20%20%20%20%20%20%20%20 <Span> 123 </span>%20%20%20%20%20%20%20%20%20 <spal 0%20%20%20 <a> 123 </a>%20%20%20%20 </h 2>%20%20%20%20 <div%20ID = "Container">%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%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<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%20%20%20%20%20%20%20%20%20%20%20%20%20%20 //c.appendChild(h);//It is direkt zu 2 //%20%20%20%20%20%20Var%20Newh%20 =%20h.Clonenode (true); // NEIN TRUE, nur Klonformat //%20%20%20%20C.Appendchild (NewH); Nach dem Hinzufügen von True ist es vollständig auf 2%20%20%20%20 </script>%20%20 </body> </html> kloniert Fall 4: Benutzerdefinierte Attribute, enden Sie benutzerdefinierte Attribute und ändern Sie den Tag -Inhalt
<! DocType%20html> <html>%20%20 <head>%20%20%20 <meta%20CharSet = "utf-8">%20%20%20%20 <Titel> </Titel>%20%20%20 </head> %20%20%20%20%20 //%20%20%20%20%20 <Input%20Type = "Taste"%20onclick = "Func ()"%20Value = "klicken 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 <div%20class = "C1"%20Aalex = 'sb'> 123 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <Div%%20c 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 <div%20Class = "C1"%20Aalex = 'SB'> 123 </div>%20 %20%20%20%20%20 <div%20class = "c1"> 123 </div>%20%20%20%20 </div>%20%20%20%20 <script>%20%20%20%20 Funktion%20func () {%20%20%20%20%20%20%20%20V. 0i1%20 =%20Document.GetElementById ('i1')%20%20%20%20%20%20%20%20%20%20%20%20%20%20 für%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%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 CUR RET_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 if%20 (r 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> Fall 5: Drei Möglichkeiten, um die Werte in das Eingabefeld zu erhalten
<! DocType%20html> <html> <kopf>%20%20 <Titel> </title>%20%20 <meta%20Charset = "utf-8"%20/> </head> <body>%20%20 <div%20ID = "Inp">%20%20%20%20 </div>%20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div> 20 </div>%20 </div> %20 <Eingabe%20Type = "Text"%20CLASS = "AA"/>%20%20 <Eingabe%20Type = "Taste"%20Value = "%"%20onclick = "func (); %20<ul>%20%20%20%20%20%20%20<li>Braised pork</li>%20%20%20%20%20%20<li>Braised elbow</li>%20%20%20%20%20<li>Braised fish</li>%20%20%20</ul>%20%20</div>%20%20<script>%20%2 0%20%20Var%20inp_aa%20 =%20Document <!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 <Eingabe%20Type = "Button"%20Value = "%"%20onclick = "func ();"%20/>%20%20 </div>%20%20 <div%20id = "lis"> %20%20 <ul>%20%20%20%20%20%20%20%20 <li> geschaertes Schweinefleisch </li>%20%20%20%20%20%20 <li> Blarmed Elbow </li>%20%20%20 </div>%20%20%>%>% 20%20%20%20Var%20c%20 =%20Document ist die Unterscheidungs -ID, die Syntax des Tag%20%20%20c.Value%20 =%20'Brayed Auberplantin ';%20%20%20%20 </script> </body> </html Methode 2: Abfrage
<! DocType%20html> <html> <kopf>%20%20 <Titel> </title>%20%20 <meta%20Charset = "utf-8"%20/> </head> <Körper>%20%20 <div%20id = "Inp">%20%20%20 </div >%20%20 <Input%20Type = "Text"%20ID = "AA"/>%20%20 <Eingabe%20Type = "Taste"%20Value = "%"%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> geschmorenes Schweinefleisch </li>%20%20%20%20%20 <li> geschaert Elbow </li>%20%20%20%20%20 </ul>%20%20 </div>%20%20%20 <Skript>%20%20%20Var%20c%20 =%20Document Aubergine ';%20%20%20%20%20 </script> </body> </html> Methode 3: ID
Fall 6:
%20 // 'vorabgin', 'Afterbehegin'/%20'beforeend '/' Afterend ' <! DocType%20html> <html>%20%20 <Kopf>%20%20%20 <Titel> </titel>%20%20%20%20 <meta%20CharSet = "UTF-8"%20/>%20%20 </head> 20%20%20%20%20%20 <DI V%20ID = "Inp">%20%20%20%20 </div>%20%20%20%20 <Eingabe%20Type = "Text"%20/>%20%20%20%20 <Eingabe%20Typ = "Taste"%20Value = "add"%20onclick = "Addelen (this)" %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> geschmorenes Fisch </li>%20%20%20%20%20 </ul>%20%20%20%20%20 </div>%20%20%20%20%20%20%20 Funktion%20 Addelen (THS)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20Var%20aaa%20 =%20th.PreviousElementSibling.Value;%20%20%20%20%20% 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%(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%20List_li <! DocType%20html> <html>%20%20 <Kopf>%20%20%20 <Titel> </Titel>%20%20%20%20 <meta%20CharSet = "UTF-8"%20/>%20%20 </head>%20%20%20%20%20 %20%20 <div%20id = "inp">%20%20%20%20 </div>%20%20%20%20 <Eingabe%20Typ = "Text"%20/>%20%20%20%20 <Eingabe%20Type = "Taste"%20Value = "add 20on klicken = "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%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% t>%20%20%20%20%20%20%20%20 Funktion%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%20Document_li%20 =%20Document 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 Tag%20 =%20Document T.Createelement ('li'); // Erstellen 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%20List_li. %20%20%20%20}%20%20%20 </script>%20%20 </body> </html> <! DocType%20html> <html>%20%20 <Kopf>%20%20%20%20 <meta%20CharSet = "UTF-8">%20%20%20 <Titel> </title>%20%20 </head>%20% 20 <Körper>%20%20%20%20 <div>%20%20%20%20%20%20%20 <Eingabe%20Typ = "Text"%20/>%20%20%20%20%20%20 <Eingabe%20Type = ", aber ton "%20Value =" add "%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%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% </ul>%20%20%20%20 </div>%20%20%20%20%20%20 <Skript>%20%20%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% 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/ 'vorb 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 eng anliegende%20%20%20%20%20%20%20%20%20 // Afterend%20 externe Nahtellnutzung //%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%20TAG.Innertext%20 =%20Document 20val;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%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.App Endchild (Temperatur);%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 Konsole Fall 7:
<! DocType%20html> <html>%20%20 <Kopf>%20%20%20 <meta%20CharSet = "UTF-8">%20%20%20%20%2%2 0Height:%2040px;%2040px;%2040px;%2040px;%2040px;%2040px;%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 </style>%20%20 </head>%20%20 <Körper>%20%20%20%20%20%20 <p> Wenn die Maus eingibt, entfernen Inhalt "%20onfocu S =" Focus (this) "%20onblur =" Blur (this) "%20/>%20%20%20%20%20%20%20%20%20%20%20%20%20%20 // Der erste Weg, um%20%20%20%20%20%20%20 // Dokument. . %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%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 "Bitte geben Sie ein 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%20if%20 (aktuell %20%20%20%20%20%20%20%20%20%20%20%20ths.value%20=%20'Please enter the 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</script>%20%20</body></html> Fall 8: Kopfmenü
<! DocType%20html> <html>%20%20 <Kopf>%20%20%20 <Titel> </Titel>%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%20Background-Colo 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% 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% 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%20fonte Größe:% 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%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% 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%20%20%20%20%20%20%20%20%20%20%20%20%20%20% </head>%20%20<body>%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 <div%20Class = "Artikel"%20con = "H2"%20onclick = "Show (this)"> Guijie </div>%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% 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 <Skript>%20%20%20%20%20 Funktion%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%2%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%2%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% 0baba%20 =%20ths.Parentelement.Children;%20 // jedes Kinderelement%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 {%20i%2%20baba; 0%20%20%20%20%20%20%20%20%20%20%20 Wenn%20 (THS%20 ==%20baba [i])%20 {%20 // ein Urteil fällen, %20%20%20%20%20%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%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%20baba [i] .ClassList.Remove ('Bk')%20 // entfernen Zuordnungen%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%20Var%20Corrent 20%20%20%20%20%20Var 20Var%20crent ElementById ('Inhalt'). Kinder;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 for%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%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20s_att%20=%20cur 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 <Kopf>%20%20%20 <meta%20CharSet = "UTF-8">%20%20%20%20%20%20 <Titel> </Titel>%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%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% 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 Farbe:%20 White;%20%20%20%20%20%20%20%20%20%20 Padding:%208px%2010px;%20%20%20%20%20}%20%20%20%20,clearfix: nach {%2 0%20%20%20%20%20Display:%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% 0%20%20%20. HIDE {%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20% %20.Tab-Menu%20.title {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.Tab-Menu%20.title%20.aktiv {%20%20%20%20%20%2%2 0%20%20Background-Farbe:%20 White;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20 Border:%201px%20Solid%20#DDDDDD;%20%20%20%20%20 min hohe Steigung:%20150px;%20%20%20%20%20}%20 %20 </style>%20%20 </head>%20%20 <Körper>%20%20%20%20 <div%20Style = "Breite: 400px;%20Margin:%200%20au zu; ">%20%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%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% 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% 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 <div%20con = "H1"> basiert Lammbeine </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 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <Skript>%20%20%20%20%20%20 Funktion%20Show (THS) {%20%20%20%20%20%20%20%20%20%20//// Ths zeigen die Stromstrahl tag%20%20%20%20%20%20%20%20Var%20Target%20 =%20Th.GetAttribute ('Ziel') // H3%20%20%20%20%20%20%20%20 // add Yourself -Stil add Yourself Style Active%20%20%20%20%20%20%20%20%20%20%20%20 .. ClassName%20 =%20'aktive ';%20%20%20%20%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 =%20 .. für (var%20i = 0; i <br andere.länge; 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%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% 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% 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%20brothers [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%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%20Console.log (CO Zelte)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%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%20%20%20%20%20%20%20%20%20%20%20</script>%20%20</body></html> Fall 9: Kehren Sie nach oben zurück
Hauptkenntnisse: OnScroll%20 und Dokument.body.Scrolltop;
<!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20%20%20<title></title>%20%20%20%20%20%20%20%20%20.go-top{%20%20% 20%20%20%20position:%20fixed;%20%20%20%20%20%20%20position:%20fixte; %20%20%20%20%20%20%20%20position:%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%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%2 0%20%20%20%20%20%20right:%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 background-color:%20dar kgoldenrod;%20%20%20%20%20%20%20%20%20 Farbe:%20 White;%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 = "Höhe:%202000px;%20Background-Color:%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 </div>%20%2%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%20Var%20Scrolltop%20 =%20Document %20if (scrolltop> 100) {%20%20%20%20%20%20%20%20%20%20ii %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20}%20%20%20%20%20%20%20}%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> Fall 10:
Hauptwissen Punkte:
// scrollen%20 scrollen; die Bedeutung der Schriftrolle
//%20Scrolltop:%20 Scrollbarhöhe von oben
//%20ScrollHeight:%20 Dokumenthöhe: selbst + Polsterung
//%20clienttop:%20 Grenzhöhe
//%20ClientHeight:%20 Der aktuelle Bereich sichtbare Höhe: selbst%20+%20Padding
//%%20 Druckbedeutung
//%20offsettop:%20 Die Höhe des aktuellen Etiketts von "Top" (Körper)
//%20 Wenn es in seiner vorherigen Ebene keinen Beitrag gibt, basiert das Positions -Tag hauptsächlich auf dem Positions -Tag.
//%20Offsettheight:%20 Die Höhe seines eigenen Bereichs: sich selbst + Polsterung + Rand
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div style = "Höhe: 20px; Hintergrundfarbe: grün; style = "Höhe: 200px; Überlauf: Auto; Breite: 400px; Rand: 0 Auto; Grenze: 15px Festes Rot; Polster: 3px;" > <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <Viv> sdf </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <Viv> sdf </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <Viv> sdf </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <Viv> sdf </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </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> 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> 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>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了，大家也多注意。
