使用javascript实现的一些功能
今天学习了javascript中的事件，已经接近尾声，可以说明天跨入jquery的学习啦，学习了一周的javascript，感觉还没有掌握其中学习的微妙之处，javascript使用起来是比较灵活的，而且很多浏览器的兼容性还是不一样的，嘿嘿，或许这就是原因的所在吧，在事件的处理上面还是很容易理解的，前面学习了那么多的语法知识以及对DOM的操作，想必在事件的学习上还是很容易接受的，就来总结一下吧。
一.this的对象的区分
<script> //实现html与js分离的原则
window.onload = function () {
document.getElementsByName("btn")[].onclick = function () {
alert("我点击的是第一个按钮");
alert(this); //this指的是windw
alert(this.value); //this指的是所因为0的按钮
};
document.getElementsByName("btn")[].onmouseenter = function () {
alert(this.value); //指的是鼠标进入事件
}; function showMsg() {
alert("my name is btn ");
};
document.getElementsByName("btn")[].onclick=showMsg; //鼠标的单击事件
};
</script>
<body>
<form>
<input type="button" name="btn" value="点击" /><br />
<input type="button" name="btn" value="点击函数执行" /><br />
<input type="button" name="btn" value="函数体赋值" />
</form>
</body>
其实刚开始接触javascript就接触了this，那时间虽然知道当前页面有个父类是window，但是却不知道在直接alert（this）的this为window，一直在迷茫中也没有明白，后来还是看了一个有关闭包的问题才对this有了了解，可以说就在这时间我才分清楚this在什么情况下指的是window，在什么情况下是当前的对象。就来看下我理解this时间的例子：
<script>
var name = "my name";
var resoult="";
var object = {
name: "my object",
getNameFunc: function () {
return function () {
return this.name;
};
}
};
alert(object.getNameFunc()());
</script> <script>
var name = "my name";
var resoult="";
var object = {
name: "my object",
getNameFunc: function () {
var that = this;
return function () {
return that.name;
};
}
};
alert(object.getNameFunc()());
</script>
可以看下上面的两个例子的区别，一个是直接返回name，一个是把this赋值给that，而第一个弹出的值是my name，第二个弹出的值是my object，嘿嘿，我刚开始直接看这个例子时间没考虑很多，只是猜一猜的心态感觉第一个是object，第二个是name，恰恰相反的是，第一是name，第二个是object，这个说起来只有分析，但是你尝试的时间结果就在你面前，你也不得不相信啦，至于为什么会是这样的结果，还是我师傅给的解释：javascript是动态（或者动态类型）语言，this关键字在执行的时候才能确定是谁。所以this永远指向调用者，即对‘调用对象‘者的引用。第一部分通过代码：object.getNameFunc()调用返回一个函数。这是个返回的函数，它不在是object的属性或者方法，此时调用者是window。因此输出是 The Window；第二部分，当执行函数object.getNameFunc()后返回的是：function（）{return that name}；此时的that=this，而this指向object，所以that指向object，无论执行多少次，都是执行对object的引用，所以弹出的是my object。这个还是最好理解的吧，嘿嘿。
二.鼠标按下和按钮提交事件
<script>
window.onload = function () {
document.body.getElementsByTagName("span")[].onmousedown = function (e) {
var e = e || window.event; //在这里鼠标按下事件有三种情况，0代表鼠标左键按下事件，1代表鼠标滚轴按下事件，2代表右键按下事件
alert(e.button);
};
document.getElementsByName("name")[].onsubmit = function (e) {
e.preventDefault(); //阻止默认行为的发生
};
};
</script>
<body>
<p style="background-color:pink"></p>
<span style="background-color:yellow">元素</span>
<input type="submit" name="name" value="提交 " id="submit" />
</body>
在写鼠标的onmousedown事件时间，这个就是要考虑其他的情况啦，我上面的注释写的鼠标的左右和滚轴键按下的事件弹出的数字，在IE里卖弄是不一样的，其他浏览器是这样的情况，IE中左键是0，滚轴键是4，鼠标的右键按下事件则是2，这个是需要注意的。另外，在第二个submit提交的事件中传的一个参数e，很确定的说学习了上面的this，在这里应该能够反映过来e指的就是我们的window对象，可以使用preventDefault（）来阻止浏览器加载就要跳转的页面。
三.冒泡与捕获
<script>
window.onload = function () {
document.getElementById("outdiv").onclick = function () {
alert("我是外层div");
};
document.getElementById("div").onclick = function () {
alert("我是中层div");
};
document.getElementById("innerdiv").onclick = function () {
alert("我是内层div");
};
};
</script>
<body>
<div style="background-color:yellow;height:800px" id="outdiv"> <div style="background-color:red;height:600px" id="div"> <div style="background-color:silver" id="innerdiv"> </div>
</div>
</div>
<a href="http://www.baidu.com" id="link">链接</a>
</body>
冒泡事件：其实就是在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。上面的定义看过后不一定能够真正的了解，还是实施操作实例吧，嘿嘿，很简单的说：冒泡事件，即点击内层的div时间中层的和外层的都可以触发，点击中层的外层的可以触发。这是看上面的实例写的。
四.按键按下事件
<script>
window.onload = function () {
document.getElementById("txt").onkeydown = function () {
var length = this.value.length;
if (length > ) {
return false;
}
else {
document.getElementById("span").innerHTML = length + "/150";
}
};
};
</script>
<body>
<textarea id="txt" style="background-color:silver" rows="" cols="">
</textarea><span id="span">/</span>
</body>
看到按键按下事件可能很模=迷惑，这个事件能有什么用那?不要着急，其实像上面的事件的实现我们就可以想象我们在qq空间发表说说时间是不是有一个限制，最多的字是多少？当达到一定字的数量输入的字即被忽略。在这里使用的就是按键的按下事件。
五.页面刷新事件
<script>
function fresh() {
window.location.reload(); //调用location对象的reload函数
}
setTimeout("fresh()",);
</script>
<body>
<p>页面正在刷新</p><span id="span"></span>
</body>
页面刷新使用的reload方法，这里方法一般用于要求不断更新数据的情况下，不断更新数据当然需要的不是手动的更新，而是页面自动更新，这样的情况主要使用于像12306的预定火车票，甚至更精确地是炒股的页面。
六.页面的前进与后退
<body>
<span>我是第一个标签</span><a href="007.html">007back</a>
</body>
<script>
window.onload = function () {
document.getElementById("btn").onclick = function () {
window.history.back(); //返回到上一页
};
document.getElementById("back").onclick = function () {
window.history.farword(); //前进到下一页
};
}
</script>
<body>
<input type="button" name="name" value="向前 " id="btn" />
<input type="button" name="name" value="退后 " id="back" />
</body>
<body>
最后以及节点<a href="007.html">退后</a>
</body>
前几天就学习了页面的前进与后退使用window的history这个属性，但是仅仅学习了后退使用的是history的back（）方法或者在IE上面也可以使用go（-1），现在学习下前进页面则使用的是history的farword（）方法，这样实现了页面的前进与后退。
七.页面在一定的时间内未发生事件则关闭
<script>
window.onload = function () {
document.getElementsByTagName("body")[], onclick = function () {
var bool = true;
function clickBody() {
bool= false;
};
setInterval(function () {
if (bool) {
window.close();
}
else {
bool = true;
};
},);
};
};
</script>
<body>
<p>如果10秒钟之后不操作，那么页面自动关闭</p>
</body>
这个功能的实现可能会使用在我们个人的的信息需要保密，当我们长时间未操作界面即可让他关闭即可。有助于保护我们的个人隐私信息。
八.广告的实现
<script>
function showAdPic() {
var ad = document.getElementById("ad");
ad.innerHTML = "<img src='1.jpg' width='300' height='200'>";
setTimeout(function () {
ad.style.display = 'none';
},10)
} window.onload = showAdPic;
</script>
<body>
<p>网页内容上部</p>
<p id="ad"></p>
<p>网页内容下部</p>
</body>
说起来广告页面，我们都很讨厌的，嘿嘿，这是一种最简单的方法实现的广告的页面的呈现，即在这里是呈现10钟后消失。
九.五角星实现评分的效果
<script>
window.onload = function () {
var isClicked;
var spansnode = document.getElementsByTagName("span");
for (var i = ; i < spansnode.length; i++) {
spansnode[i].onmouseover = function () {// 鼠标进入的事件
if (isClicked) return;
for (var j = ; j < spansnode.length; j++) {
spansnode[j].innerHTML = "★";
if (spansnode[j] === this) {
break;
}
}
};
spansnode[i].onmouseout = function () {// 鼠标离开事件
if (isClicked) return;
for (var j = ; j < spansnode.length; j++) {
spansnode[j].innerHTML = "☆";
}
};
}
}
</script>
<body>
<div>
<span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span>
</div>
</body>
上面的功能其实也是我们很熟悉的，最常见的地方就是我们在淘宝买完商品后对店家的评分，功能其实就是这样实现的。
十.菜单的事件
<style>
.meun {
list-style: none;
width: 400px;
margin: 10px auto;
}
.meun li {
float: left;
width: 98px;
border: 1px solid black;
}
.meun a {
color: black;
width: %;
}
.meun a:hover {
background-color: pink;
}
.curr {
background-color: pink;
}
</style>
<script>
window.onload = function () {
var currentIndex = ;
var menunodes = document.getElementById('menu');
var itemslinode = menunodes.children;
for (var i = ; i < itemslinode.length; i++) {
itemslinode[i].onmouseover = function () {
this.className = 'menuname';
};
};
};
</script>
<body style=" text-align:center">
<ul class="menu" id="menu">
<li><a href="#" class="a">菜单</a></li>
<li><a href="#" class="a" >菜单</a></li>
<li><a href="#" class="a">菜单</a></li>
<li><a href="#" class="a">菜单</a></li>
</ul>
</body>
好啦，今天就写到这里，可以说javascript的基本知识要告一段落啦，下面就要学习它的一个库JQuery，熟悉了javascript不知道学习jquery是否真的很简单，但是无论怎样都想以一种诚恳的态度对待，相信只有这样学习起来才不会输在起点上面，嘿嘿，明天继续加油！
使用javascript实现的一些功能的更多相关文章
- JavaScript如何实现计时功能。
JavaScript如何实现计时功能. 解答:<script> window.setTimeout( “window.location = ‘http://www.csdn.net ‘; ...
- javascript屏蔽浏览器右键功能按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js javascript map函数去重功能的使用实例
js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...
- Visual Studio 2013开启JavaScript的智能提示功能
在前一次的发布的时候,我们共享了Visual Studio 2013中Windows Azure移动服务的集成和功能.其中包含了移动服务表脚本的编辑能力的介绍.这一次的发布,我们将描述在Visual ...
- 开源的javascript实现页面打印功能，兼容所有的浏览器（情况属实）
这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...
- 不需要JAVAScript完成分页查询功能
分页查询之前已经说过,现在用另一种方法实现,换汤不换药.但是更简单. view层代码: 控制层代码: 业务逻辑层,主要看一下方法count1()的代码: count1()方法的功能就是控制翻页,如果传 ...
- ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）
转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...
- JavaScript实现评论点赞功能
通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...
- C# + Javascript 实现评论回复功能
首先先介绍一下前台 <script type="text/javascript"> function openWindow() { window.open(" ...
随机推荐
- OpenStack路: OpenStack建筑设计指南 - 概要(摘录和翻译)
OpenStack它是在云技术领先的黄金工艺,作为一个组织,使各类企业,具有较大的灵活性和速度被发现,向市场推出自助服务云计算和基础架构即服务(IaaS)积.然,为了能够真正享受到这些好处,云计算必须 ...
- 用AsyncTask实现多线程
前言 在Android应用开发中,有时我们需要实现任务的同步.Android里的AsyncTask类可以帮我们更好地管理线程同步(异步方式),就像Thread类能做的,不过用法比Thread更简单. ...
- [Android 4.4.4] 泛泰A870 通过刷第三版 Mokee4.4.4 KTU84P 20140626 RC2.1 by syhost
主题及注意事项请访问以前的版本: http://blog.csdn.net/syhost/article/details/29931291 此RC2.1版比RC2.0改进的地方: 1. Mokee本身 ...
- atitit.（设计模式1）--—职责链(chain of responsibility)最佳实践O7 转换日期
atitit.设计模式(1)---职责链模式(chain of responsibility)最佳实践O7 日期转换 1. 需求:::日期转换 1 2. 能够选择的模式: 表格模式,责任链模式 1 3 ...
- Java彻底 - WEB容器的侦听具体解释 ServletContextListener
WEB容器的侦听器ServletContextListener主要用于监测容器启动和 当破坏需要做一些操作,听众将能够使用此做. ServletContextListener在Spring开始,然后再 ...
- 大约cocos2d-X 3.x使用引擎版本自带的物理引擎Physics
今天打算用BOX2D物理引擎, 我想我以前听说过一些时间cocos2d-X在3.0版本封装自己的物理引擎Physics, 听名字很霸气量, 这的确是一个比BOX2D非常多( 毕竟是基于BOX2D封装的 ...
- 数据你把它的金额-JAVA分页
数据量你造吗-JAVA分页 原创地址: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),须要转载的,保留下! Thanks 学习的心态第一,解行要对应. 事实 ...
- android 实现悬架控制
实现桌面View 如桌面歌词 1)将要显示在桌面的view,通过WindowManager.addView.挂在到WindowManager下;注意,WindowManager对象 ...
- ASP.NET开发规范：OWIN
ASP.NET开发规范:OWIN 今天投简历 准备面试了... 本节目录: OWIN简介 OWIN规范 Katana Hello World(3种Host) 自定义Middleware OWIN简介 ...
- php 简单的存在 （方法之间的神奇作用：容错）
<span style="font-family:KaiTi_GB2312;font-size:18px;"><?php // 重载 class Person{ ...