JavaScript魅力总结(13-14)

最新推荐文章于 2019-08-01 23:36:43 发布
最新推荐文章于 2019-08-01 23:36:43 发布
阅读量151 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/89425426
版权

1. JS面向对象基础

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                无标题文档
            </title>
            <script>
                function createPerson(name, qq)		//构造函数
				{
					//系统偷偷替咱们做：
					//var this=new Object();
					
					//加工
					this.name=name;
					this.qq=qq;
					
					this.showName=function ()
					{
						alert('我的名字叫：'+this.name);
					};
					this.showQQ=function ()
					{
						alert('我的QQ号：'+this.qq);
					};
					
					//也会偷偷做一些：
					//return this;
				}

				var obj=new createPerson('blue', '258248832');
				var obj2=new createPerson('张三', '45648979879');

				obj.showName();
				obj.showQQ();
				//alert(obj.showName==obj2.showName);
            </script>
        </meta>
    </head>
    <body>
    </body>
</html>

普通函数中的this是指向window的原因：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                无标题文档
            </title>
            <script>
                window.show=function ()
				{
					alert(this);
				};

				show();
            </script>
        </meta>
    </head>
    <body>
    </body>
</html>

2. JS面向对象实例

通过选显卡实例玩转JavaScript里的this，第5个为正确版
1.

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<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 ()
{
	var oDiv=document.getElementById('div1');
	var aBtn=oDiv.getElementsByTagName('input');
	var aDiv=oDiv.getElementsByTagName('div');
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=function ()
		{
			for(var j=0;j<aBtn.length;j++)
			{
				aBtn[j].className=''
				aDiv[j].style.display='none';
			}
			this.className='active';
			aDiv[this.index].style.display='block';
			// console.log(i)
		};
	}
};
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>dfsadf</div>
<div>erwqerwe</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 input {background:white;}
#div1 input.active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<script>
var aBtn=null;
var aDiv=null;

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	aBtn=oDiv.getElementsByTagName('input');
	aDiv=oDiv.getElementsByTagName('div');
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=fnClick;
	}
};

function fnClick()
{
	console.log('fnClick', this)
	for(var j=0;j<aBtn.length;j++)
	{
		aBtn[j].className=''
		aDiv[j].style.display='none';
	}
	this.className='active';
	aDiv[this.index].style.display='block';
	// console.log(i)
}
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>dfsadf</div>
<div>erwqerwe</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<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 ()
{
	new TabSwitch('div1');
};

function TabSwitch(id)
{
	var oDiv=document.getElementById(id);
	
	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].onclick=this.fnClick;
	}
	console.log('aa',this.fnClick)
	// console.log('tabswitch', this)
};

TabSwitch.prototype.fnClick=function ()
{
	console.log('fnclick', this)
	for(var i=0;i<this.aBtn.length;i++)
	{
		this.aBtn[i].className=''
		this.aDiv[i].style.display='none';
	}
	oBtn.className='active';
	this.aDiv[oBtn.index].style.display='block';
}
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>dfsadf</div>
<div>erwqerwe</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<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 ()
{
	new TabSwitch('div1');
};

function TabSwitch(id)
{
	var _this=this;
	var oDiv=document.getElementById(id);
	
	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].onclick=function ()
		{
			_this.fnClick();
		};
	}
};

TabSwitch.prototype.fnClick=function ()
{
	//alert(this);
	console.log('fnClick', this)
	for(var i=0;i<this.aBtn.length;i++)
	{
		this.aBtn[i].className=''
		this.aDiv[i].style.display='none';
	}
	oBtn.className='active';
	this.aDiv[oBtn.index].style.display='block';
}
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>dfsadf</div>
<div>erwqerwe</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<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 ()
{
	new TabSwitch('div1');
};

function TabSwitch(id)
{
	var _this=this;
	var oDiv=document.getElementById(id);
	
	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].onclick=function ()
		{
			_this.fnClick(this);
		};
	}
};

TabSwitch.prototype.fnClick=function (oBtn)
{
	//alert(this);
	for(var i=0;i<this.aBtn.length;i++)
	{
		this.aBtn[i].className=''
		this.aDiv[i].style.display='none';
	}
	oBtn.className='active';
	this.aDiv[oBtn.index].style.display='block';
}
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>dfsadf</div>
<div>erwqerwe</div>
</div>
</body>
</html>
. . . . .
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript魅力总结(1-5)
EmotionComputer
04-16 180
初探JavaScript魅力1 获取CSS样式的名称： className classList <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> 无标题文档 ...
面向对象实例
weixin_33704234的博客
12-10 144
<!--把一个面向过程的程序，改成面向对象的形式--> 一、一个基本的选项卡： <div id="div1"> <input class="active" type="button" value="aaa" > <input type="button" value="bbb"> <input type="b...
JavaScript 你特有的魅力
android_0327的博客
10-08 258
JavaScript，你特有的魅力 数据可视化 在过去我阅读的一些书籍里面，主要是以Processing作为可视化的语言——它起始于2001年，它最初是面向美术工作者和设计者创建的，后来变成了全面的设计和原型工具，可以用于创建复杂数据可视化领域。 移动端应用： Cordova 接着就是PhoneGap（今天的Cordova），将WebView带向了移动应用，也将JavaSc
智能社JS学习笔记（七）
mirror29的博客
06-21 274
面向对象基础——定义：在不了解原理的情况下，会使用功能——对象：不了解内部的结构，知道表面的各种操作（按钮），如date，array【面向对象是一种通用思想】——面向对象编程（OOP）特点        抽象：把最主要的特征，跟问题相关的特征抽出来（抓住核心问题）；        封装：不考虑内部的实现，只考虑功能的使用；        继承：从父类上继承出一些方法，属性；子类又有一些自己的特性（...
JavaScript魅力总结(14-16)
EmotionComputer
04-21 383
1. JS事件基础 通过keyCode来获取键盘键值 <script> document.onkeydown=function (ev) { var oEvent=ev||event; alert(oEvent.keyCode); }; </script> 取消冒泡： oEvent.cancelBubble=true; 或者 oEvent....
JavaScript魅力总结(6-10)
EmotionComputer
04-19 305
6. BOM应用 打开和关闭标签页 <body> <input onclick="window.close();" type="button" value="close"/> <input onclick="window.open();" type="button" value="close"/> </body> ...
JavaScript魅力总结(11-12)
EmotionComputer
04-20 182
javascript基础 NaN和NaN不相等 {}和{}也不相等 在通过parseInt(‘abc23’) -> NaN等转换时会出现NaN，parseInt(‘123ad’) -> 123 判断是不是NaN通过isNaN()函数 typeof(NaN) -> number <!DOCTYPE HTML> <html> <head&g...
开始感受JavaScript的魅力
weixin_42699636的博客
08-01 207
** 初探JavaScript的魅力1 ** 第一个js特效——鼠标提示框 首先，我们要求鼠标移入移出提示框的时候有特定的变化，那么我们在没有学习js的时候我们都是直接把标签的样式进行改变即可，但是使用起来往往不太方便。 改变div样式 我们直接将复选框的样式改变 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展...
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
node-v0.10.27-x86.msi
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
课设毕设基于SSM的高校二手交易平台-LW+PPT+源码可运行.zip
05-16
课设毕设基于SSM的高校二手交易平台--LW+PPT+源码可运行
c++,冒险游戏，可供学习
05-16
冒险游戏，可供学习
node-v0.11.7-sunos-x64.tar.gz
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v0.8.6-sunos-x64.tar.gz
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于C语言的天气客户端的实现.zip
05-16
基于C语言的天气客户端的实现.zip
javaScript蓝桥杯----外卖给好评
10-25
JavaScript蓝桥杯是一个计算机编程竞赛，而外卖给好评是一个具体的问题，需要更多的上下文信息才能回答。不过，如果你想在JavaScript中实现外卖给好评的功能，可以考虑以下步骤： 1. 创建一个包含外卖评价的HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值