案例一：全选等
运用知识点：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了，大家也多注意。
