案例一：全選等
運用知識點：ondblclick=（）| onclick | 尋找標籤屬性及判斷和函數的應用
<!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<input%20type="button"%20value="全選"%20ondblclick="checkAll()"%20/>%20%20%20%20%20%20<input%20type="button"%20value="取消"%20ondblclick="cancleAll()"%20/>%20%20%20%20%20%20<input%20type="button"%20value="反選"%20ondblclick="reverseAll()"%20/>%20%20%20%20</div>%20%20%20%20<table>%20%20%20%20%20%20<thead>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<th>序列號</th>%20%20%20%20%20%20%20%20%20%20<th>用戶名</th>%20%20%20%20%20%20%20%20%20%20<th>年齡</th>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20</thead>%20%20%20%20%20%20<tbody%20id="tb">%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20</tbody>%20%20%20%20</table>%20%20%20%20<script>%20%20%20%20%20%20//全選的話先獲取所有的input標籤屬性，然後全部為true%20%20%20%20%20%20function%20checkAll(){%20%20%20%20%20%20%20%20var%20tb%20=%20document.getElementById('tb');//獲取tb，也就是身體%20%20%20%20%20%20%20%20var%20checks%20=%20tb.getElementsByClassName('c1');%20%20%20%20%20%20%20%20//[第一個，2，3，4，5]checked%20=%20true%20%20%20%20%20%20%20%20for%20(var%20i=0;i<checks.length;%20i++){%20%20%20%20%20%20%20%20%20%20var%20current_check%20=%20checks[i];//得到每個input的值並賦一個變量名%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20true;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20%20%20function%20cancleAll(){%20%20%20%20%20%20%20%20var%20tb%20=%20document.getElementById('tb');//獲取tb，也就是身體%20%20%20%20%20%20%20%20var%20checks%20=%20tb.getElementsByClassName('c1');%20%20%20%20%20%20%20%20//[第一個，2，3，4，5]checked%20=%20true%20%20%20%20%20%20%20%20for%20(var%20i=0;i<checks.length;%20i++){%20%20%20%20%20%20%20%20%20%20var%20current_check%20=%20checks[i];//得到每個input的值並賦一個變量名%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20false;%20%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%20reverseAll(){%20%20%20%20%20%20%20%20var%20tb%20=%20document.getElementById('tb');//獲取tb，也就是身體%20%20%20%20%20%20%20%20var%20checks%20=%20tb.getElementsByClassName('c1');%20%20%20%20%20%20%20%20//[第一個，2，3，4，5]checked%20=%20true%20%20%20%20%20%20%20%20for%20(var%20i=0;i<checks.length;%20i++){%20%20%20%20%20%20%20%20%20%20var%20current_check%20=%20checks[i];//得到每個input的值並賦一個變量名%20%20%20%20%20%20%20%20%20%20%20if(current_check.checked%20<!--這個地方如果為true-->){%20%20%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20false;%20%20%20%20%20%20%20%20%20%20%20}else{%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20true;%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%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%20%20%20%20%20%20%20%20</body></html>案例二：單選
要求只能選一個，並且用js可以改變其選項
運用知識點：getElementsByTagName%20|%20checked%20|%20互斥
<!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<ul>%20%20%20%20%20%20<li><input%20type="radio"%20name="g"%20value="11"%20/>男</li>%20%20%20%20%20%20<li><input%20type="radio"%20name="g"%20value="22"%20/>女</li>%20%20%20%20%20%20<li><input%20type="radio"%20name="g"%20value="33"%20/>女司機</li>%20%20%20%20</ul>%20%20%20%20<!--radio%20=%20document.getElementsByTagName('input')%20%20%20%20[<input%20type="radio"%20name="g"%20value="11">,%20<input%20type="radio"%20name="g"%20value="11">,%20<input%20type="radio"%20name="g"%20value="11">]%20%20%20%20radio[1]%20%20%20%20<input%20type="radio"%20name="g"%20value="11">%20%20%20%20xo%20=%20radio[1]%20%20%20%20<input%20type="radio"%20name="g"%20value="11">%20%20%20%20xo.value%20%20%20%20"11"%20%20%20%20xo.checked%20%20%20%20false%20%20%20%20xo.checked%20=%20true%20%20%20%20true-->%20%20</body></html>案例三：克隆
<!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<h2%20id="h1">333%20%20%20%20%20%20<span>123</span>%20%20%20%20%20%20<a>123</a>%20%20%20%20</h2>%20%20%20%20<div%20id="container">%20%20%20%20%20%20<div%20class="item">1%20%20</div>%20%20%20%20%20%20<div%20class="item">2</div>%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20%20%20%20%20%20%20var%20h%20=%20document.getElementById('h1');%20%20%20%20%20%20var%20c%20=%20document.getElementById('container')%20%20%20%20%20%20//c.appendChild(h);//直接添加到2下面了//%20%20%20%20%20%20var%20newH%20=%20h.cloneNode(true);//不加true,只克隆格式//%20%20%20%20%20%20c.appendChild(newH);加true後完整克隆到2下面了%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<title></title>%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<input%20type="button"%20onclick="Func()"%20value="點我啊"%20/>%20%20%20%20<div%20id='i1'>%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="c1">123</div>%20%20%20%20%20%20<div%20class="c1"%20alex='sb'>123</div>%20%20%20%20%20%20<div%20class="c1"%20alex='sb'>123</div>%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<div%20class="c1"%20alex='sb'>123</div>%20%20%20%20%20%20<div%20class="c1">123</div>%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</div>%20%20%20%20<script>%20%20%20%20function%20Func(){%20%20%20%20%20%20//i1所有孩子，循環每一個孩子，判斷如果alex='sb'%20%20%20%20%20%20var%20i1%20=%20document.getElementById('i1')%20%20%20%20%20%20var%20divs%20=%20i1.children%20%20%20%20%20%20for%20(%20var%20i%20=0;%20i<divs.length;i++){%20%20%20%20%20%20%20%20var%20current_div%20=%20divs[i];%20%20%20%20%20%20%20%20var%20result%20=%20current_div.getAttribute('alex')//得到屬性%20%20%20%20%20%20%20%20//console.log(result);%20%20%20%20%20%20%20%20if%20(result%20==%20'sb'){%20%20%20%20%20%20%20%20%20%20current_div.innerText%20=%20'456';%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><head>%20%20<title></title>%20%20<meta%20charset="utf-8"%20/></head><body>%20%20<div%20id="inp">%20%20%20%20%20%20</div>%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<li>紅燒肉</li>%20%20%20%20%20%20<li>紅燒肘子</li>%20%20%20%20%20%20<li>紅燒魚</li>%20%20%20%20</ul>%20%20</div>%20%20<script>%20%20%20%20var%20inp_aa%20=%20document.getElementsByClassName('aa');%20%20%20%20inp_aa[0].value%20=%20'紅燒帶魚';//相當於在輸入框輸入內容%20%20</script></body></html> <!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%20</div>%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<li>紅燒肉</li>%20%20%20%20%20%20<li>紅燒肘子</li>%20%20%20%20%20%20<li>紅燒魚</li>%20%20%20%20</ul>%20%20</div>%20%20<script>%20%20%20%20var%20c%20=%20document.querySelector('.aa');//查詢選擇器%20.是區別id，標籤的語法%20%20%20%20c.value%20=%20'紅燒茄子';%20%20%20%20</script></body></html>方法二：查詢
<!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%20</div>%20%20<input%20type="text"%20id="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<li>紅燒肉</li>%20%20%20%20%20%20<li>紅燒肘子</li>%20%20%20%20%20%20<li>紅燒魚</li>%20%20%20%20</ul>%20%20</div>%20%20<script>%20%20%20%20var%20c%20=%20document.getElementById('aa');%20%20%20%20c.value%20=%20'紅燒茄子';%20%20%20%20</script></body></html>方法三：id
案例六：
%20//'beforeBegin'、'afterBegin'/%20'beforeEnd'/'afterEnd' <!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<title></title>%20%20%20%20<meta%20charset="utf-8"%20/>%20%20</head>%20%20<body>%20%20%20%20<div%20id="inp">%20%20%20%20</div>%20%20%20%20<input%20type="text"%20/>%20%20%20%20<input%20type="button"%20value="添加"%20onclick="addElen(this)"%20/>%20%20%20%20</div>%20%20%20%20<div>%20%20%20%20%20%20<ul%20id="lis">%20%20%20%20%20%20%20%20<li>紅燒肉</li>%20%20%20%20%20%20%20%20<li>紅燒肘子</li>%20%20%20%20%20%20%20%20<li>紅燒魚</li>%20%20%20%20%20%20</ul>%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20%20%20%20%20function%20addElen(ths)%20{%20%20%20%20%20%20%20%20%20%20%20%20var%20aaa%20=%20ths.previousElementSibling.value;%20%20%20%20%20%20//%20%20%20%20%20%20alert(aaa)%20%20%20%20%20%20%20%20%20%20%20%20var%20list_li%20=%20document.getElementById("lis");%20%20%20%20%20%20//%20%20%20%20%20%20alert(list_li)%20%20%20%20%20%20%20%20%20%20%20%20var%20bbb%20=%20"<li>"%20+aaa+%20"</li>";%20%20%20%20%20%20//%20%20%20%20%20%20alert(bbb)%20%20%20%20%20%20%20%20%20%20%20%20list_li.insertAdjacentHTML("beforeEnd",%20bbb)%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<title></title>%20%20%20%20<meta%20charset="utf-8"%20/>%20%20</head>%20%20<body>%20%20%20%20<div%20id="inp">%20%20%20%20</div>%20%20%20%20<input%20type="text"%20/>%20%20%20%20<input%20type="button"%20value="添加"%20onclick="addElen(this)"%20/>%20%20%20%20</div>%20%20%20%20<div>%20%20%20%20%20%20<ul%20id="lis">%20%20%20%20%20%20%20%20<li>紅燒肉</li>%20%20%20%20%20%20%20%20<li>紅燒肘子</li>%20%20%20%20%20%20%20%20<li>紅燒魚</li>%20%20%20%20%20%20</ul>%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20function%20addElen(ths){%20%20%20%20%20%20%20%20var%20aaa%20=%20ths.previousElementSibling.value;%20//獲取input的值%20%20%20%20%20%20%20%20var%20list_li%20=%20document.getElementById("lis");%20//獲取ul%20%20%20%20%20%20%20%20var%20tag%20=%20document.createElement('li');//創建li%20%20%20%20%20%20%20%20tag.innerText%20=%20aaa;%20//賦予tag也就是新的li標籤裡面的值是輸入的input的值%20%20%20%20%20%20%20%20%20%20list_li.insertBefore(tag,%20list_li.children[-1])//根據索引插入需要位置的值%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<title></title>%20%20</head>%20%20<body>%20%20%20%20<div>%20%20%20%20%20%20<input%20type="text"%20/>%20%20%20%20%20%20<input%20type="button"%20value="添加"%20onclick="AddElement(this)"%20/>%20%20%20%20</div>%20%20%20%20<div>%20%20%20%20%20%20<ul%20id="commentList">%20%20%20%20%20%20%20%20<li>alex</li>%20%20%20%20%20%20%20%20<li>eric</li>%20%20%20%20%20%20</ul>%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20function%20AddElement(ths){%20%20%20%20%20%20%20%20//獲取輸入的值%20%20%20%20%20%20%20%20var%20val%20=%20ths.previousElementSibling.value;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20commentList%20=%20document.getElementById('commentList')%20%20%20%20%20%20%20%20//第一種形式%20%20%20%20%20%20%20%20var%20str%20=%20"<li>"%20+%20val%20+%20"</li>"%20%20%20%20%20%20%20%20//'beforeBegin'、'afterBegin'/%20'beforeEnd'/'afterEnd'%20%20%20%20%20%20%20%20//beforeEnd%20內部最後%20%20%20%20%20%20%20%20//beforeBegin%20外部上邊%20%20%20%20%20%20%20%20//afterBegin%20內部貼身%20%20%20%20%20%20%20%20//afterEnd%20外部貼身//%20%20%20%20%20%20%20%20commentList.insertAdjacentHTML("beforeEnd",%20str)%20%20%20%20%20%20%20%20//第二種方式，元素的方式%20%20%20%20%20%20%20%20var%20tag%20=%20document.createElement('li');%20%20%20%20%20%20%20%20tag.innerText%20=%20val;%20%20%20%20%20%20%20%20var%20temp%20=%20document.createElement('a');%20%20%20%20%20%20%20%20temp.innerText%20=%20'百度';%20%20%20%20%20%20%20%20temp.href%20=%20"http://www.baidu.com";%20%20%20%20%20%20%20%20tag.appendChild(temp);%20%20%20%20%20%20%20%20commentList.insertBefore(tag,commentList.children[1]);%20%20%20%20%20%20%20%20console.log(commentList.children[1])%20%20%20%20%20%20}%20%20%20%20</script>%20%20</body>%20%20</html>案例七：
<!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20<title></title>%20%20%20%20<style>%20%20%20%20%20%20input{%20%20%20%20%20%20%20%20height:%2040px;%20%20%20%20%20%20}%20%20%20%20%20%20.gg{%20%20%20%20%20%20%20%20color:%20gray;%20%20%20%20%20%20}%20%20%20%20%20%20.bb{%20%20%20%20%20%20%20%20color:%20black;%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>當鼠標進入是，移除內容</p>%20%20%20%20<p>當輸入表退出時，添加內容</p>%20%20%20%20<input%20type="text"%20class="gg"%20value="請輸入內容"%20onfocus="Focus(this)"%20onblur="Blur(this)"%20/>%20%20%20%20%20%20%20%20<script>%20%20%20%20%20%20function%20Focus(ths){%20%20%20%20%20%20%20%20//查找的第一種方式%20%20%20%20%20%20%20%20//document。 。 %20%20%20%20%20%20%20%20//第二種方式this%20%20%20%20%20%20%20%20//ths%20%20%20%20%20%20%20%20//ths.className%20=%20'bb'%20%20%20%20%20%20%20%20var%20current_val%20=%20ths.value;%20%20%20%20%20%20%20%20if%20(current_val%20==%20"請輸入內容"){%20%20%20%20%20%20%20%20%20%20ths.value%20=%20"";%20%20%20%20%20%20%20%20%20%20ths.className%20=%20'bb';%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%20var%20current_val%20=%20ths.value;%20%20%20%20%20%20%20%20if%20(current_val%20==%20"請輸入內容"%20||%20current_val.trim().length%20==%200%20){%20%20%20%20%20%20%20%20%20%20ths.value%20=%20'請輸入內容';%20%20%20%20%20%20%20%20%20%20ths.className%20=%20'gg';%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<title></title>%20%20%20%20<meta%20charset="utf-8"%20/>%20%20%20%20<style>%20%20%20%20%20%20.pg_top%20.menu%20{%20%20%20%20%20%20%20%20background-color:%20gold;%20%20%20%20%20%20%20%20width:%20400px;%20%20%20%20%20%20%20%20height:%20auto;%20%20%20%20%20%20%20%20position:%20absolute;%20%20%20%20%20%20%20%20left:%20200px;%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20.item%20{%20%20%20%20%20%20%20%20float:%20left;%20%20%20%20%20%20%20%20margin:%2010px%200;%20%20%20%20%20%20%20%20padding:%200%2020px;%20%20%20%20%20%20%20%20font-size:%2025px;%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%20position:%20absolute;%20%20%20%20%20%20%20%20left:%20200px;%20%20%20%20%20%20%20%20top:%2058px;%20%20%20%20%20%20%20%20background-color:%20burlywood;%20%20%20%20%20%20%20%20width:%20400px;%20%20%20%20%20%20%20%20height:%20200px;%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20.hide%20{%20%20%20%20%20%20%20%20display:%20none;%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20.bk%20{%20%20%20%20%20%20%20%20background-color:%20greenyellow;%20%20%20%20%20%20}%20%20%20%20</style>%20%20</head>%20%20<body>%20%20%20%20<div%20class="pg_top">%20%20%20%20%20%20<div%20class="menu">%20%20%20%20%20%20%20%20<div%20class="item"%20con="h1"%20onclick="Show(this)">十八里店</div>%20%20%20%20%20%20%20%20<div%20class="item"%20con="h2"%20onclick="Show(this)">簋街</div>%20%20%20%20%20%20%20%20<div%20class="item"%20con="h3"%20onclick="Show(this)">后海</div>%20%20%20%20%20%20</div>%20%20%20%20%20%20<div%20id="content"%20class="content">%20%20%20%20%20%20%20%20<div%20con="h1">烤全羊</div>%20%20%20%20%20%20%20%20<div%20class="hide"%20con="h2">麻辣龍蝦</div>%20%20%20%20%20%20%20%20<div%20class="hide"%20con="h3">相約酒吧</div>%20%20%20%20%20%20</div>%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20function%20Show(ths)%20{%20%20%20%20%20%20%20%20//當我點這個標籤的時候,其他標籤的背景色變沒%20%20%20%20%20%20%20%20var%20baba%20=%20ths.parentElement.children;%20//獲取到了每個子元素%20%20%20%20%20%20%20%20var%20target%20=%20ths.getAttribute('con');%20%20%20%20%20%20%20%20for%20(i%20=%200;%20i%20<%20baba.length;%20i++)%20{%20%20%20%20%20%20%20%20%20%20if%20(ths%20==%20baba[i])%20{%20//做判斷，%20%20%20%20%20%20%20%20%20%20%20%20ths.classList.add('bk')%20//添加屬性%20%20%20%20%20%20%20%20%20%20}%20else%20{%20%20%20%20%20%20%20%20%20%20%20%20baba[i].classList.remove('bk')%20//刪除屬性%20%20%20%20%20%20%20%20%20%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%20current_con%20=%20document.getElementById('content').children;%20%20%20%20%20%20%20%20console.log(current_con)%20%20%20%20%20%20%20%20for%20(j=0;%20j<current_con.length;j++)%20{%20%20%20%20%20%20%20%20%20%20var%20s_att%20=%20current_con[j].getAttribute('con')%20%20%20%20%20%20%20%20%20%20if%20(target%20==%20s_att%20)%20{%20%20%20%20%20%20%20%20%20%20%20%20current_con[j].classList.remove('hide');%20%20%20%20%20%20%20%20%20%20}else{%20%20%20%20%20%20%20%20%20%20%20%20current_con[j].className%20=%20'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</script>%20%20</body></html> <!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20<title></title>%20%20%20%20<style>%20%20%20%20ul{%20%20%20%20%20%20list-style:%20none;%20%20%20%20%20%20padding:%200;%20%20%20%20%20%20margin:%200;%20%20%20%20}%20%20%20%20ul%20li{%20%20%20%20%20%20float:%20left;%20%20%20%20%20%20background-color:%20#2459a2;%20%20%20%20%20%20color:%20white;%20%20%20%20%20%20padding:%208px%2010px;%20%20%20%20}%20%20%20%20.clearfix:after{%20%20%20%20%20%20display:%20block;%20%20%20%20%20%20value:'111';%20%20%20%20%20%20content:%20'.';%20%20%20%20%20%20height:%200;%20%20%20%20%20%20/*visibility:%20hidden;*/%20%20%20%20%20%20clear:%20both;%20%20%20%20}%20%20%20%20%20%20%20%20.hide{%20%20%20%20%20%20display:%20none;%20%20%20%20}%20%20%20%20%20%20%20%20.tab-menu%20.title{%20%20%20%20%20%20background-color:%20#dddddd;%20%20%20%20}%20%20%20%20%20%20%20%20.tab-menu%20.title%20.active{%20%20%20%20%20%20background-color:%20white;%20%20%20%20%20%20color:%20black;%20%20%20%20}%20%20%20%20%20%20%20%20.tab-menu%20.content{%20%20%20%20%20%20border:%201px%20solid%20#dddddd;%20%20%20%20%20%20min-height:%20150px;%20%20%20%20}%20%20</style>%20%20</head>%20%20<body>%20%20%20%20<div%20style="width:400px;%20margin:%200%20auto;">%20%20%20%20%20%20<div%20class="tab-menu">%20%20%20%20%20%20%20%20<div%20class="title%20clearfix">%20%20%20%20%20%20%20%20%20%20<ul>%20%20%20%20%20%20%20%20%20%20%20%20<li%20target='h1'%20class="active"%20onclick="Show(this)">十八里店</li>%20%20%20%20%20%20%20%20%20%20%20%20<li%20target='h2'%20onclick="Show(this)">簋街</li>%20%20%20%20%20%20%20%20%20%20%20%20<li%20target='h3'%20onclick="Show(this)">十剎海</li>%20%20%20%20%20%20%20%20%20%20</ul>%20%20%20%20%20%20%20%20</div>%20%20%20%20%20%20%20%20<div%20class="content"%20id="content">%20%20%20%20%20%20%20%20%20%20<div%20con="h1">烤羊腿</div>%20%20%20%20%20%20%20%20%20%20<div%20con="h3"%20<!--class="hide"-->>油燜小龍蝦</div>%20%20%20%20%20%20%20%20%20%20<div%20con="h2"%20<!--class="hide"-->>香甜雞尾酒</div>%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</div>%20%20%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20function%20Show(ths){%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//給自己添加樣式active%20%20%20%20%20%20%20%20//兄弟們去掉%20%20%20%20%20%20%20%20ths.className%20=%20'active';%20%20%20%20%20%20%20%20var%20brothers%20=%20ths.parentElement.children;%20%20%20%20%20%20%20%20for(var%20i=0;i<brothers.length;i++){%20%20%20%20%20%20%20%20%20%20if%20(%20ths%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}else{%20%20%20%20%20%20%20%20%20%20%20%20brothers[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%20var%20contents%20=%20document.getElementById('content').children;%20%20%20%20%20%20%20%20console.log(contents)%20%20%20%20%20%20%20%20for%20(var%20j=0;j<contents.length;j++){%20%20%20%20%20%20%20%20%20%20var%20current_content%20=%20contents[j];%20%20%20%20%20%20%20%20%20%20console.log(current_content)%20%20%20%20%20%20%20%20%20%20var%20con%20=%20current_content.getAttribute('con')%20%20%20%20%20%20%20%20%20%20if%20(con%20==%20target){%20%20%20%20%20%20%20%20%20%20%20%20current_content.classList.remove('hide');%20%20%20%20%20%20%20%20%20%20}else{%20%20%20%20%20%20%20%20%20%20%20%20current_content.className="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</script>%20%20</body></html>案例九：返回頂部
主要知識點：onscroll%20和document.body.scrollTop;
<!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20<title></title>%20%20%20%20<style>%20%20%20%20%20%20.go-top{%20%20%20%20%20%20%20%20position:%20fixed;%20%20%20%20%20%20%20%20right:%2020px;%20%20%20%20%20%20%20%20bottom:%2019px;%20%20%20%20%20%20%20%20width:%2040px;%20%20%20%20%20%20%20%20height:%2040px;%20%20%20%20%20%20%20%20background-color:%20darkgoldenrod;%20%20%20%20%20%20%20%20color:%20white;%20%20%20%20%20%20}%20%20%20%20%20%20.hide{%20%20%20%20%20%20%20%20display:%20none;%20%20%20%20%20%20}%20%20%20%20</style>%20%20</head>%20%20<body%20onscroll="Func();">%20%20%20%20<div%20id="i1"%20style="height:%202000px;%20background-color:%20greenyellow;">%20%20%20%20%20%20<h1>asdfafdasdf</h1>%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20<div%20id="i2"%20class="go-top%20hide">%20%20%20%20%20%20<a%20href="javascript:void(0)"%20onclick="goTop();">返回頂部</a>%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20function%20Func(){%20%20%20%20%20%20%20%20var%20scrollTop%20=%20document.body.scrollTop;//body的滾動高度%20%20%20%20%20%20%20%20var%20ii%20=%20document.getElementById('i2');%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}else{%20%20%20%20%20%20%20%20%20%20ii.classList.add('hide');%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20%20%20function%20goTop(){%20%20%20%20%20%20%20%20document.body.scrollTop=0;%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20</script>%20%20</body></html>案例十：
主要知識點：
//scroll%20滾動；捲軸的意思
//%20scrollTop:%20滾動條距離頂部高度
//%20scrollHeight:%20文檔高度:自身+padding
//%20clientTop:%20邊框高度
//%20clientHeight:%20當前範圍可視的高度:自身%20+%20padding
//offset%20印刷的意思
//%20offsetTop:%20當前標籤距離"頂部"的高度(body)
//%20如果他的上一級沒有postion,如果有則按照position的標籤為主
//%20offsettHeight:%20自身範圍的高度:自身+padding+border
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="height: 20px;background-color: green;"></div><!--頭部--> <div style="border: 5px solid pink;padding: 10px;"><!--body--> <div> <div id="xo" 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><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>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>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> <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 滾動；捲軸的意思// scrollTop: 滾動條距離頂部高度// scrollHeight: 文檔高度:自身+padding// clientTop: 邊框高度// clientHeight: 可見範圍的高度:自身+ padding //offset 印刷的意思// offsetTop: 當前標籤距離"頂部"的高度(body)// 如果他的上一級沒有postion,如果有則按照position的標籤為主// offsettHeight: 可見範圍的高度:自身+padding+border </script> </body></html>好了，暫時就介紹到這里希望大家多寫多練，主要是其中的邏輯，當然現在很多人都開始使用jquery了，大家也多注意。
