ケース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了,大家也多注意。