案例一：全选等
运用知识点：ondblclick=（）| onclick | 寻找标签属性及判断和函数的应用
<Meta charset="UTF-8">
序列号
用户名
年龄
Box"/>Box"/>Box"/>Box"/>
//全选的话先获取所有的input标签属性，然后全部为true
function checkAll(){
var tb = document.getElementById('tb');//获取tb，也就是身体
var checks = tb.getElementsByClassName('c1');
//[第一个，2，3，4，5]checked = true
for (var i=0;i获取tb，也就是身体
var checks = tb.getElementsByClassName('c1');
//[第一个，2，3，4，5]checked = true
for (var i=0;i
function reverseAll(){
var tb = document.getElementById('tb');//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>tb，也就是身体
var checks = tb.getElementsByClassName('c1');
//[第一个，2，3，4，5]checked = true
for (var i=0;i<checks.length; i++){
var current_check = checks[i];//得到每个input的值并赋一个变量名
if(current_check.checked <!--这个地方如果为true-->){
current_check.checked = false;
}else{
current_check.checked = true;
}
}
}
</script>
案例二：单选
要求只能选一个，并且用js可以改变其选项运用知识点：getElementsByTagName | checked | 互斥
>香甜鸡尾酒
</div>
</div>
</div>
<script>
function Show(ths){
//ths表示当前<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>
var target = ths.getAttribute('target')//h3
//给自己<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>样式active
//兄弟们去掉
ths.className = 'active';
var brothers = ths.parentElement.children;
for(var i=0;i<brothers.length;i++){
if ( ths == brothers[i]){
}else{
brothers[i].removeAttribute('class')
}
}
//操作<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>
var contents = document.getElementById('content').children;
console.log(contents)
for (var j=0;j<contents.length;j++){
var current_content = contents[j];
console.log(current_content)
var con = current_content.getAttribute('con')
if (con == target){
current_content.classList.remove('hide');
}else{
current_content.className="hide";
}
}
}
</script>案例九：返回顶部
主要知识点：onscroll 和document.body.scrollTop;
<Meta charset="UTF-8">
</div>
<div id="i2" class="go-top hide">
<a href="javascript:void(0)" onclick="goTop();"><a href="https://www.jb51.cc/tag/fanhuidingbu/" target="_blank" class="keywords">返回顶部</a></a>
</div>
<script>
function Func(){
var scrollTop = document.body.scrollTop;//body的滚动高度
var ii = document.getElementById('i2');
if(scrollTop>100){
ii.classList.remove('hide');//移除就是<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>
}else{
ii.classList.add('hide');
}
}
function goTop(){
document.body.scrollTop=0;
}
</script>案例十：
主要知识点：//scroll 滚动；卷轴的意思 // scrollTop: 滚动条距离顶部高度 // scrollHeight: 文档高度:自身+padding // clientTop: 边框高度 // clientHeight: 当前范围可视的高度:自身 + padding //offset 印刷的意思 // offsetTop: 当前标签距离"顶部"的高度(body) // 如果他的上一级没有postion,如果有则按照position的标签为主 // offsettHeight: 自身范围的高度:自身+padding+border
<Meta charset="UTF-8">
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
好了，暂时就介绍到这里希望大家多写多练，主要是其中的逻辑，当然现在很多人都开始使用jquery了，大家也多注意。
原文链接：https://www.f2er.com/js/47308.html