实学实战
- 浏览: 16013 次
- 性别:
- 来自: 青岛
-
文章分类
最新评论
javascript 经典案例
定时器
javascript 全选 不选 反选
javascript 经典案例 全选 不选 反选
<title>规范：全选 不选 反选</title>
<script>
window.onload=function (){
var oBtn1=document.getElementById("Btn1");
var oBtn2=document.getElementById("Btn2");
var oBtn3=document.getElementById("Btn3");
var oDiv=document.getElementById("Ben");
var oInp=oDiv.getElementsByTagName("input");
oBtn1.onclick=function(){ //全选
//oInp[0].checked=true; // checked ： 布尔值 false true;
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=true;
}
};
oBtn2.onclick=function(){ //不选
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=false;
}
};
oBtn3.onclick=function(){ //反选
for(var i=0; i<oInp.length ; i++){
if(oInp[i].checked==true){
oInp[i].checked=false;
}
else{
oInp[i].checked=true;
}
}
};
};
</script>
</head>
<body>
<input id="Btn1" type="button" value="全选" /><br />
<input id="Btn2" type="button" value="不选" /><br />
<input id="Btn3" type="button" value="反选" /><br />
<div id="Ben">
<input type="checkbox" /><br />
<input type="checkbox" /><br /> <!--复选框 checked 选中-->
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
javascript 简单的选项卡
<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#999966; display:none; color:#000000;}
</style>
<script>
window.onload=function(){
var Div=document.getElementById('div1');
var aBtn=Div.getElementsByTagName('input');
var aDiv=Div.getElementsByTagName('div');
for(var i=0; i<aBtn.length; i++){
aBtn[i].index=i; // 记录
aBtn[i].onmouseover=function (){ // 移入事件
for( var i=0; i<aBtn.length; i++){
aBtn[i].className=''; // 清空
aDiv[i].style.display="none";
};
this.className='active'; // 当前样式
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input type="button" value="选项2" />
<input type="button" value="选项3" />
<div style="display:block;" >这是容11111111</div>
<div>这是是内容22222222</div
<div>这是是内容3333333</div>
</div>
<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>
<script>
window.onload=function(){ // 构造函数：window.onload=
new TaWny('div1'); // 创建对象：TaWny('div1')传参
};
function TaWny(id){ // 构造函数：
var _this = this; //传参 找到 this
var oDiv=document.getElementById(id); //接收 TaWny('div1') 函数的参数
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
this.aBtn[i].index=i;
this.aBtn[i].onmouseover=function(){ //函数 _this.ofclick(this);
_this.getonmouse(this); //传参 找到 this
}; // 面向对象：函数不要嵌套
}
};
TaWny.prototype.getonmouse=function (aBtn){ // 用prototype原型 使函数变成方法
for( var i=0; i<this.aBtn.length; i++){
this.aBtn[i].className=''; //清空
this.aDiv[i].style.display="none";
}
aBtn.className='active'; //样式
this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input type="button" value="选项2" />
<input type="button" value="选项3" />
<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>
<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>
<script>
window.onload=function(){ // 构造函数：window.onload=
new TaWny('div1'); // 创建对象：TaWny('div1')传参
};
function TaWny(id){ // 构造函数：
var _this = this; //传参 找到 this
var oDiv=document.getElementById(id); //接收 TaWny('div1') 函数的参数
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
this.aBtn[i].index=i;
this.aBtn[i].onmouseover=function(){ //函数 _this.ofclick(this);
_this.getonmouse(this); //传参 找到 this
}; // 面向对象：函数不要嵌套
}
};
TaWny.prototype.getonmouse=function (aBtn){ // 用prototype原型 使函数变成方法
for( var i=0; i<this.aBtn.length; i++){
this.aBtn[i].className=''; //清空
this.aDiv[i].style.display="none";
}
aBtn.className='active'; //样式
this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input type="button" value="选项2" />
<input type="button" value="选项3" />
<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>
javascript 经典案例 面向对象的选项卡
<style> #div1 input{ background:white;} #div1 input.active{ background:yellow;} #div1 div{ width:200px; height:200px; background:#ccc; display:none;} </style> <script> window.onload=function(){ // 构造函数：window.onload= new TaWny('div1'); // 创建对象：TaWny('div1')传参 }; function TaWny(id){ // 构造函数： var _this = this; //传参 找到 this var oDiv=document.getElementById(id); //接收 TaWny('div1') 函数的参数 this.aBtn=oDiv.getElementsByTagName('input'); this.aDiv=oDiv.getElementsByTagName('div'); for(var i=0; i<this.aBtn.length; i++){ this.aBtn[i].index=i; this.aBtn[i].onmouseover=function(){ //函数 _this.ofclick(this); _this.getonmouse(this); //传参 找到 this }; // 面向对象：函数不要嵌套 } }; TaWny.prototype.getonmouse=function (aBtn){ // 用prototype原型 使函数变成方法 for( var i=0; i<this.aBtn.length; i++){ this.aBtn[i].className=''; //清空 this.aDiv[i].style.display="none"; } aBtn.className='active'; //样式 this.aDiv[aBtn.index].style.display='block'; }; </script> <div id="div1"> <input class="active" type="button" value="选项1" /> <input type="button" value="选项2" /> <input type="button" value="选项3" /> <div style="display:block;" >这是容11111111</div> <div>这是是内容222222</div> <div>这是是内容3333</div><style> #div1 input{ background:white;} #div1 input.active{ background:yellow;} #div1 div{ width:200px; height:200px; background:#ccc; display:none;} </style> <script> window.onload=function(){ // 构造函数：window.onload= new TaWny('div1'); // 创建对象：TaWny('div1')传参 }; function TaWny(id){ // 构造函数： var _this = this; //传参 找到 this var oDiv=document.getElementById(id); //接收 TaWny('div1') 函数的参数 this.aBtn=oDiv.getElementsByTagName('input'); this.aDiv=oDiv.getElementsByTagName('div'); for(var i=0; i<this.aBtn.length; i++){ this.aBtn[i].index=i; this.aBtn[i].onmouseover=function(){ //函数 _this.ofclick(this); _this.getonmouse(this); //传参 找到 this }; // 面向对象：函数不要嵌套 } }; TaWny.prototype.getonmouse=function (aBtn){ // 用prototype原型 使函数变成方法 for( var i=0; i<this.aBtn.length; i++){ this.aBtn[i].className=''; //清空 this.aDiv[i].style.display="none"; } aBtn.className='active'; //样式 this.aDiv[aBtn.index].style.display='block'; }; </script> <div id="div1"> <input class="active" type="button" value="选项1" /> <input type="button" value="选项2" /> <input type="button" value="选项3" /> <div style="display:block;" >这是容11111111</div> <div>这是是内容222222</div> <div>这是是内容3333</div>
<style> #div1 input{ background:white;} #div1 input.active{ background:yellow;} #div1 div{ width:200px; height:200px; background:#ccc; display:none;} </style> <script> window.onload=function(){ // 构造函数：window.onload= new TaWny('div1'); // 创建对象：TaWny('div1')传参 }; function TaWny(id){ // 构造函数： var _this = this; //传参 找到 this var oDiv=document.getElementById(id); //接收 TaWny('div1') 函数的参数 this.aBtn=oDiv.getElementsByTagName('input'); this.aDiv=oDiv.getElementsByTagName('div'); for(var i=0; i<this.aBtn.length; i++){ this.aBtn[i].index=i; this.aBtn[i].onmouseover=function(){ //函数 _this.ofclick(this); _this.getonmouse(this); //传参 找到 this }; // 面向对象：函数不要嵌套 } }; TaWny.prototype.getonmouse=function (aBtn){ // 用prototype原型 使函数变成方法 for( var i=0; i<this.aBtn.length; i++){ this.aBtn[i].className=''; //清空 this.aDiv[i].style.display="none"; } aBtn.className='active'; //样式 this.aDiv[aBtn.index].style.display='block'; }; </script> <div id="div1"> <input class="active" type="button" value="选项1" /> <input type="button" value="选项2" /> <input type="button" value="选项3" /> <div style="display:block;" >这是容11111111</div> <div>这是是内容222222</div> <div>这是是内容3333</div>
<style> #div1 input{ background:white;} #div1 input.active{ background:yellow;} #div1 div{ width:200px; height:200px; background:#ccc; display:none;} </style> <script> window.onload=function(){ // 构造函数：window.onload= new TaWny('div1'); // 创建对象：TaWny('div1')传参 }; function TaWny(id){ // 构造函数： var _this = this; //传参 找到 this var oDiv=document.getElementById(id); //接收 TaWny('div1') 函数的参数 this.aBtn=oDiv.getElementsByTagName('input'); this.aDiv=oDiv.getElementsByTagName('div'); for(var i=0; i<this.aBtn.length; i++){ this.aBtn[i].index=i; this.aBtn[i].onmouseover=function(){ //函数 _this.ofclick(this); _this.getonmouse(this); //传参 找到 this }; // 面向对象：函数不要嵌套 } }; TaWny.prototype.getonmouse=function (aBtn){ // 用prototype原型 使函数变成方法 for( var i=0; i<this.aBtn.length; i++){ this.aBtn[i].className=''; //清空 this.aDiv[i].style.display="none"; } aBtn.className='active'; //样式 this.aDiv[aBtn.index].style.display='block'; }; </script> <div id="div1"> <input class="active" type="button" value="选项1" /> <input type="button" value="选项2" /> <input type="button" value="选项3" /> <div style="display:block;" >这是容11111111</div> <div>这是是内容222222</div> <div>这是是内容3333</div>
分享到：
发表评论
相关推荐
这个压缩包“JavaScript经典案例大集合”显然是为帮助初学者深入理解和掌握JavaScript而设计的。下面，我们将详细探讨这些经典案例可能涉及的知识点，并分享一些学习JavaScript的重要原则和技巧。 1. **变量和数据...
JavaScript经典案例常常涉及到网页动态交互、数据处理及用户界面的美化。在这个特定的案例中，我们关注的是PHP如何读取XML数据，然后利用JavaScript进行进一步的处理和展示。XML（Extensible Markup Language）是一...
这个“javascript经典案例.rar”压缩包文件很可能包含了多个JavaScript的示例项目，旨在帮助学习者理解并掌握JavaScript的核心概念和实际应用。让我们深入探讨一下JavaScript的一些关键知识点。 1. **变量与数据...
JavaScript经典案例集合是送给入门者最好的礼物！是本人精心总结的案例！可以让你迅速上手，物有所值。内容囊括的js的各个方面，而且由浅入深，条例极为清晰，注释丰富。内容：js基础语法；Dom操作；Div操作；正则...
在这个名为"JavaScript经典案例共享"的压缩包中，我们可以期待找到一系列用于学习和参考的JavaScript实例。 首先，`说明.html`可能是对案例集合的一个详细解释或目录，它可能包含了每个案例的目标、实现方法以及...
在本资源"20个JavaScript经典案例"中，我们将会探索一些常见的、实用的JavaScript编程技巧和应用场景，旨在帮助开发者提升技能并拓宽视野。下面，我们将详细探讨这些经典案例可能涵盖的知识点。 1. **DOM操作**：...
javaScript经典案例
"JavaScript经典实例"这个主题涵盖了一系列经过实践验证的代码片段和实用技巧，旨在帮助开发者深化对JavaScript的理解并提升技能。 描述中提到“内容丰富”，意味着这个压缩包可能包含了各种类型的JavaScript应用...
通过学习和实践这些JavaScript经典案例，初学者不仅可以增强对语言的理解，还能提高解决实际问题的能力。记得结合HTML和CSS一起学习，因为JavaScript常常与它们结合使用，共同构建功能丰富的网页应用。同时，不断...
主要为大家详细介绍了JavaScript经典案例之简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
第1章使用JavaScript字符串 1.0简介 1.1连接两个或多个字符串 1.2连接字符串和另一种数据类型 1.3条件比较字符串 1.4在字符串中查找子字符串 1.5从一个字符串提取子字符串 1.6检查一个存在的、非空...
一共482个经典的javascript经典案例，对于学习javascript的人来说，可以尝试下载跟着操作，包括常见的按钮事件，标记，表单事件，表单特效，超链接操作，窗口事件，功能特效，时间日期，鼠标特效，数组，文件传输，...
JavaScript是一种广泛应用于网页和网络应用的脚本语言，它的强大在于能够实现动态交互，使得网页内容可以实时更新，用户交互性大大增强。本资源包含20类共计343个JavaScript源码示例，覆盖了JavaScript开发中的诸多...
《javascript 经典案例》，中国电力出版社出版，李强译，2012年第一版
《突破JavaScript编程实例五十讲》源代码 《突破JavaScript编程实例五十讲》源代码 《突破JavaScript编程实例五十讲》源代码
JavaScript，作为全球最广泛使用的编程语言之一..."500javascript经典例子"涵盖了JavaScript开发的各个方面，通过实践这些案例，开发者能够巩固基础，提升技能，逐步精通JavaScript，为构建复杂的Web应用打下坚实基础。
JavaScript经典案例大全 本文档汇集了史上最经典的JS案例，共计16个，涵盖了JS编程的多个方面，如事件处理、表单处理、样式控制、动画效果等。这些案例都是JS开发者不可或缺的基础知识，能够帮助新手快速上手JS编程...