ケース1：すべてを選択します
アプリケーションの知識ポイント：ondblclick =（）|オンクリック|タグ属性、判断、機能アプリケーションを見つけます
<！doctype％20html> <html>％20％20 <head>％20％20％20％20 <meta％20charset = "utf-8">％20％20％20％20 <title> </title>％20 ％20 </head>％20％20 <body>％20％20％20％20 <div>％20％20％20％20％20％20％20％20 <input％20type = "button"％20value = "selectすべて "％20ondblclick =" checkall（） "％20/ >％20％20％20％20％20％20％20 <input％20type = "button"％20value = "cancel"％20ondblclick = "cancleall（）"％20/>％20％20％20％20％ 20％20％20％20％20 <入力％20Type = "ボタン"％20Value = "UndElect"％20ondblclick = "Reverseall（）"％20/>％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 <TODY％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 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％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 </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％22 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％22 0％20 </tr>％20％20％20％20％20％20％20 </tbody>％20％20％20％20％20 </table>％20％20％20％20％20 <script>％20％20％20％20％20％20 // function％20Checkall（）{％20％20％20％20％20％20％20％20var％20tb％20 =％20document.getElementby id（ 'tb'）; // get 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（var％20i = 0; i <checks.length;％20i ++）{％20％2 0％20％20％20％20％20％20％20％20％20％20var％20current_check％20 =％20checks [i]; //変数名を取得し、変数名20％20％20％20％20％20％20％20％20％20％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％20％20％20％20％20％20％20 ％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％20tb％20 =％20 document.getelementbyid（ '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 =％20tb.ge TelementsByClassName（ 'C1'）; ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％22 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％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>ケース2：単一の選択
1つしか選択できず、JSを使用してオプションを変更できます
アプリケーションの知識ポイント：GetElementsByTagname％20 |％20チェック％20 |％20Mutex
<！Doctype％20HTML> <HTML>％20％20 <HEAD>％20％20％20％20％20 <Meta％20Charset = "utf-8">％20％20％20％20 <title> </title>％20％20 </head>％20％20 <body>％20％20 ％20％20 <ul>％20％20％20％20％20％20％20％20％20 <li> <入力％20type = "Radio"％20Name = "g"％20Value = "11"％20/>男性％20％20％20％20％20％20％20％20％20 <L I> <入力％20Type = "Radio"％20Name = "g"％20Value = "22"％20/>女性</li>％20％20％20％20％20％20％20％20 <！ - 無線20 =％20document.getelementsBytagname（ 'input'）％20％20％20％20％20％20％20％20％20％20％20％20％20％20％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％20％20％20％20％20％20％20％20 <入力％20Type =" Radio "％20Name =" G "％20Value =" 11 "> ％20％20％20％20xo％20 =％20radio [1]％20％20％20％20％20 <input％20type = "Radio"％20Name = "g"％20Value = "11">％20％20％20％20％20％20％20％20xo .Value％20％20％20％20％20％20xo.チェック％20％20％20％20％20％20％20xo.チェック％20 =％20％20％20％20true->％20％20 </body> </html>ケース3：クローニング
<！doctype％20html> <html>％20％20 <head>％20％20％20％20 <meta％20charset = "utf-8">％20％20％20％20 <<titl e> </title>％20％20 </head>％20％20 <body>％20％20％20％20 <h2％20ID = "H1"> 333％20％20％20％20％20％20 <Span> 1 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％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 = "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％20％20％20％20％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％20％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 //％20％20％20％20％20％20var％20newh％20 =％20h.cloneNode（true）; // true、noのみクローニング形式//％20％20％20％20c.appendchild（newh）; Trueを追加すると、2％20％20％20％20 </script>％20％20 </body> </html>に完全にクローニングされますケース4：カスタム属性、カスタム属性を取得し、タグコンテンツを変更する
<！Doctype％20HTML> <HTML>％20％20 <head>％20％20％20％20％20％20％20％20％20％20％20 <タイトル> ％20％20％20％20％20 <入力％20Type = "ボタン"％20onclick = "func（）"％20value = "クリック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％20％20％20％20％20％20％20％ 20 <div％20class = "c1"％20alex = '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％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％20％20 <div％20class = "c1"％20alex = 'sb'> 123 </div>％20 ％20％20％20％20％20 <div％20class = "c1"> 123 </div>％20％20％20％20％20％20％20％20％20 <スクリプト>％20％20％20％20 func（）{％20％20％20％20％20％20 // i1all 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 ％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％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 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％20if％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％ケース5：入力ボックスで値を取得する3つの方法
<！Doctype％20HTML> <HTML> <HEAD>％20％20 <Title> </title>％20％20 <Meta％20charset = "utf-8"％20/> </head> <body>％20％20 <div％20％20％20％20％20％20％20％20％20％20 ％20 <input％20Type = "text"％20class = "aa"/>％20％20 <input％20type = "button"％20value = "％"％20onclick = "func（）;"％20/>％20％20 </div>％20％20 <div％20id = "lis">％20％20％20 ％20 <ul>％20％20％20％20％20％20％20 <li>蒸し豚</li> 0％20％20VAR％20INP_AA％20 =％20Document.getElementsByClassName（ 'aa'）;％20％20％20％20％20％20Inp_aa [0]。 <！Doctype％20HTML> <HTML> <HEAD>％20％20 <Title> </title>％20％20 <Meta％20charset = "utf-8"％20/> </head> <body>％20％20 <div div = "inp">％20％20％20％20 </div> div 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％20％20 ％20％20 <ul>％20％20％20％20％20％20％20％20 <li>蒸し豚</li>セレクター％20。区別ID、タグの構文方法2：クエリ
<！Doctype％20HTML> <HTML> <HEAD>％20％20 <Title> </title>％20％20 <Meta％20charset = "utf-8"％20/> </head> <body>％20％20 <div％20％20％20％20％20％20％20 </div >％20％20 <input％20type = "text"％20id = "aa"/>％20％20 <input％20type = "button"％20value = "add" s ">％20％20％20％20 <ul>％20％20％20％20％20％20％20％20％20 <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％肘</li>％20％20％20％20％20 </ul>％20％20 </div>％20％20％20％20％20％20％20var％20c％20 =％20document.getelementbyid（ 'aa'）;ナス ';％20％20％20％20％20 </script> </body> </html>方法3：ID
ケース6：
％20 // 'beforebegin'、 'afterbegin'/％20'beforeend '/' afterend ' <！Doctype％20HTML> <HTML>％20％20 <head>％20％20％20％20％20 <Title> </title>％20％20％20％20 <Meta％20Charset = "UTF-8"％20/> V％20ID = "inp">％20％20％20％20 </div>％20％20％20％20％20 <input％20type = "text"％20/>％20％20％20％20％20 <input％20type = "ボタン" ％20/>％20％20％20％20 </div>％20％20％20％20％20％20％20 <<div> /li>％20％20％20％20％20％20％20％20％20％20 <li>蒸し魚</li>％20％20％20％20％20 </ul>％20％20％20％20％20 </div>％20％20％20％20％20％20％20％20％20機能addelen（ths）％20 {％20％20％20％20％20％20％20％20％20％20％20％20％20％20aaa％20 =％20ths.previouseletionsibling.value;％20％20％20％20％20％20％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％20％20％20％20％20％20％20％20％20％ 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％20％20％20％20％20％20％20％20list_li.insertadjacenthtml（ "beforend"、％20bbb） < ％20％20 <div％20ID = "inp">％20％20％20％20 </div>％20％20％20％20％20 <入力％20type = "テキスト"％20/>％20％20％20％20％20 <入力％20type = " click = "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％22 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 t>％20％20％20％20％20％20％20％20関数％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％ 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 =％20document t.createelement（ 'li'）; // create 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％20List_li.insertbebeffe（タグ、％20list_li.children [-1]） ％20％20％20％20}％20％20％20 </scrip>％20％20 </body> </html> <！Doctype％20HTML> <HTML>％20％20 <Head>％20％20％20％20％20 <Meta％20Charset = "UTF-8">％ 20 <body>％20％20％20％20 <div>％20％20％20％20％20％20％20％20 <input％20type = "text"％20/>％20％20％20％20％20％20％20％20 <input％20type = "but ton "％20value =" add "％20onclick =" addelement（this） "％20/>％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ 20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％22 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％ </ul>％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％22 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％22 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％ eggin '、' afterbegin '/％20'beforeend'/'foreend'/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％20％20％20％20％20％20％20 // AfterEnd％20外部密集//％20 ％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％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％20tag.innertext 20 =％20 =％ 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％20％20％20％20％20％20％20％20％20％20％20％20％20％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（temp）;％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 </script 20％ケース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 </style>％20％20 </head>％20％20 <body>％20％20％20％20％20％20％20％20 <p>マウスがYESに入ると、入力テーブルが終了すると、コンテンツを削除すると、コンテンツを排除すると、コンテンツを追加したとき、</p>％20％20％20％20％20コンテンツ "％20onfocu s =" focus（this） "％20onblur =" Blur（this） "％20/>％20％20％20％20％20％20％20％20％20％20％20％20％20％20 // 。 ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ 20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ 20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％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 "入力してくださいコンテンツ "））{％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ 20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ ％20％20％20機能％20BLUR（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（current_val％20 ==％20 "コンテンツの入力"％20 || 20current_val.trim） ％20％20％20％20％20％20％20％20％20％20％20％20 =％20 = 20 'コンテンツを入力してください';％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20}％20％20％20％20％20％20％20ケース8：ヘッドメニュー
<！doctype％20html> <html>％20％20 <head>％20％20％20％20 <title> </title>％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％20％20％20％20％20％20％20％ 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％22 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％22 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％ 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％ 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％ 0％20％20％20％20％20％20％20Background-Color：％20burlywood;％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％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％ </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％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 <d IV％20ID = "コンテンツ"％20class = "コンテンツ">％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ bar </div>％20％20％20％20％20％20 </div>％20％20％20％20 </div>％20％20％20％20％20 <script>％20％20％20％20％20％20関数％20ショー（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％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％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％ 0baba％20 =％20ths.parentelement.children;％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（ths％20 ==％20baba [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％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％20baba [i] .classlist.remove（ 'bk'）％20 // remove属性％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 //コンテンツ％20％20％20％20％20％20％20％20％20％20％20％20％20 elementbyid（ 'content'）。子供;％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％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 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％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％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％20％20％20％20％20％20％20％20％20％20％20％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％ 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ホワイト;％20％20％20％20％20％20％20％20％20％20％20パッジング：％208px％2010px;％20％20％20％20％20}％20％20％20％20％ 0％20％20％20％20％20display：％20ブロック;％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ 20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ 20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％22 0％20％20％20.hide {％20％20％20％20％20％20％20}％20％20％20％20％20％20％20％20％20％20.title {％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％20.tab-menu％20.title％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％2 0％20％20％20border：％201px％20solid％20＃dddddd;％20％20％20％20min-height：％20150px;％20％20％20％20％20％20}％20 ％20 </style>％20％20 </head>％20％20 <body>％20％20％20％20 <div％20style = "width：400px;％20margin：％200％20au to; ">％20％20％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％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％22 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 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 <Div％20Con = "H1">焼き子羊の脚</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 </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機能（THS）{％20％20％20％20％20％20％20％20％20％20％20/THSタグ％20％20％20％20％20％20％20％20var％20target％20 =％20ths.getattribute（ 'target'）// h3％20％20％20％20％20％20％20％20 //スタイルを追加しますアクティブ％20％20％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％20 brothers％20 =％20 = 20ths.parentelement.children;％20％20％20％20％20％20％20％20 for（var％20i = 0; i <brその他。長さ; 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％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％22 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％22 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ブラザー[i] .removeattribute（ 'class'）％20 ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％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％20console.log（coテント）％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％20％20％20％20％20％20％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％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％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％ケース9：上部に戻ります
主な知識ポイント：onscroll％20およびdocument.body.scrolltop;
< 20％20％20％20ポジション：％20fixed;％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20ポジション：％20％20％20％20％20％20％20ポジション：％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％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％2 0％20％20％20％20％20％20ライト：％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％ kgoldenrod;％20％20％20％20％20％20％20％20％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 = "height：％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％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％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のスクロール高さ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％20ii.classlist.remove（ 'hide'）; //表示して削除します％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20 ％20}％20％20％20％20％20％20％20}％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20}ケース10：
主な知識ポイント：
//スクロール％20スクロール;スクロールの意味
//％20scrolltop：％20スクロールバーの高さから
//％20sCrollheight：％20ドキュメントの高さ：それ自体 +パディング
//％20ClientTop：％20ボーダーの高さ
//％20ClientHeight：％20現在の範囲の可視高さ：それ自体％20+％20パディング
//オフセット％20印刷の意味
//％20OFFSETTOP：％20「トップ」（ボディ）からの現在のラベルの高さ
//％20以前のレベルに投稿がない場合、ある場合、位置タグは主にポジションタグに基づいています。
//％20Offsettheight：％20独自の範囲の高さ：それ自体 +パディング +ボーダー
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> </head> <body> <div style = "height：20px; background-color：green;"> div> < style = "height：200px; overflow：auto; width：400px; margin：0 auto; border：15px solid red; padding：3px;" > <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> sdf </div> 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> sdf </div> 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> sdf </div> 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> sdf </div> div> <div> sdf </div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </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> <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>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了，大家也多注意。
