使用javascript实现的一些功能

今天学习了javascript中的事件,已经接近尾声,可以说明天跨入jquery的学习啦,学习了一周的javascript,感觉还没有掌握其中学习的微妙之处,javascript使用起来是比较灵活的,而且很多浏览器的兼容性还是不一样的,嘿嘿,或许这就是原因的所在吧,在事件的处理上面还是很容易理解的,前面学习了那么多的语法知识以及对DOM的操作,想必在事件的学习上还是很容易接受的,就来总结一下吧。

一.this的对象的区分

 <script>             //实现html与js分离的原则
        window.onload = function () {
            document.getElementsByName("btn")[0].onclick = function () {
                alert("我点击的是第一个按钮");
                alert(this);            //this指的是windw
                alert(this.value);      //this指的是所因为0的按钮
            };
            document.getElementsByName("btn")[1].onmouseenter = function () {
                alert(this.value);          //指的是鼠标进入事件
            };

            function showMsg() {
                alert("my name is btn ");
            };
            document.getElementsByName("btn")[2].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")[0].onmousedown = function (e) {
                var e = e || window.event;         //在这里鼠标按下事件有三种情况,0代表鼠标左键按下事件,1代表鼠标滚轴按下事件,2代表右键按下事件
                alert(e.button);
            };
            document.getElementsByName("name")[0].onsubmit = function (e) {
                e.preventDefault();        //阻止默认行为的发生
            };
        };
    </script>
<body>
    <p style="background-color:pink">1234</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">
        123
        <div style="background-color:red;height:600px" id="div">
            234
            <div style="background-color:silver" id="innerdiv">
                345
            </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 > 150) {
                     return false;
                 }
                 else {
                     document.getElementById("span").innerHTML = length + "/150";
                 }
             };
         };
     </script>
<body>
    <textarea id="txt" style="background-color:silver" rows="20" cols="20">
    </textarea><span id="span">0/150</span>
</body>

看到按键按下事件可能很模=迷惑,这个事件能有什么用那?不要着急,其实像上面的事件的实现我们就可以想象我们在qq空间发表说说时间是不是有一个限制,最多的字是多少?当达到一定字的数量输入的字即被忽略。在这里使用的就是按键的按下事件。

五.页面刷新事件

<script>
        function fresh() {
            window.location.reload(); //调用location对象的reload函数
        }
        setTimeout("fresh()",10000);
    </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")[0], onclick = function () {
                var bool = true;
                function clickBody() {
                    bool= false;
                };
                setInterval(function () {
                    if (bool) {
                        window.close();
                    }
                    else {
                        bool = true;
                    };
                },10000);
            };
        };
    </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‘;
            },10000)
        }

        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 = 0; i < spansnode.length; i++) {
                 spansnode[i].onmouseover = function () {// 鼠标进入的事件
                     if (isClicked) return;
                     for (var j = 0; j < spansnode.length; j++) {
                         spansnode[j].innerHTML = "★";
                         if (spansnode[j] === this) {
                             break;
                         }
                     }
                 };
                 spansnode[i].onmouseout = function () {// 鼠标离开事件
                     if (isClicked) return;
                     for (var j = 0; 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: 100%;
            }
                .meun a:hover {
                    background-color: pink;
                }
        .curr {
            background-color: pink;
        }
    </style>
    <script>
        window.onload = function () {
            var currentIndex = 1;
            var menunodes = document.getElementById(‘menu‘);
            var itemslinode = menunodes.children;
            for (var i = 0; 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是否真的很简单,但是无论怎样都想以一种诚恳的态度对待,相信只有这样学习起来才不会输在起点上面,嘿嘿,明天继续加油!

时间: 2024-10-03 08:34:17

使用javascript实现的一些功能的相关文章

javascript实现map的功能(转载)

/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key) 获取指定KEY的元素值VALUE,失败返回NULL * element(index) 获取指定索引的元素(使用element.key,

在TypeScript中扩展JavaScript基础对象的功能

最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫toFormat的方法来实现得到格式化后的字符串. 添加.d.ts定义 要在TypeScript中扩展一个基础对象的方法需要预先告知编译器有该方法才行: 1 interface Number { 2 toFormat(): string; 3 } 添加实现 具体实现根据需要编写即可,需要注意的是要添

JavaScript实现评论点赞功能

通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setTimeout设置定时器. 4.使用clearTimeout清除定时器以及事件代理的运用. 效果图: 1)实现删除分享内容功能 利用事件代理实现点击关闭按钮删除分享内容. 删除事件: 利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷. 事件代理的时候,使用事件对象中的srcElem

Visual Studio 2013开启JavaScript的智能提示功能

在前一次的发布的时候,我们共享了Visual Studio 2013中Windows Azure移动服务的集成和功能.其中包含了移动服务表脚本的编辑能力的介绍.这一次的发布,我们将描述在Visual Studio中怎么样在你的服务器脚本中激活智能提示.这个功能并没有被集成到Visual Studio 2013 预览版中,下边的步骤可以帮助你把它打开. 开始之前,请从这里下载我们的IntelliSense定义文件.将这些文件保存到一个相对容易访问的路径. 智能提示知多少? 我们今天将要发布的文件能

javascript 实现图片放大镜功能

淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中的透明度实现filter:alpha(opacity:20); opacity:0.2; 鼠标移动到小图上面时:虚框出现,大图对应出现 细节注意的地方: 1:虚框的定位:保持鼠标位于虚框的中心,如何处理鼠标中心距离四边距离小于虚框半径(或者方形的边长的一半)的情况? 2:保持大图中显示的内容是虚框选

Javascript的Alert函数功能

Alert的功能是弹出对话框并显示其中的内容,用法如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>函数调用</title> <script type="text/javascript"> fu

Web前端开发基础:HTML、CSS、JavaScript分别实现什么功能?

相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题

web前端入门到实战:HTML、CSS、JavaScript分别实现什么功能?

学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题加入背景图片.边框等. 所有这些用来改变内容外观的东西称之为表现. 三.JavaScript是用来实现网页上的特效效果 比如:鼠标滑过弹出下拉菜单.鼠标滑过表格的背景颜色改变.焦点新

让你的javascript函数拥有记忆功能,降低全局变量的使用

考虑例如以下场景:假如我们须要在界面上画一个圆,初始的时候界面是空白的.当鼠标移动的时候,圆须要尾随鼠标移动.鼠标的当前位置就是圆心.我们的实现方案是:假设界面上还没有画圆,那么就新创建一个:假设已经存在,就直接更新其位置.这样可以避免先销毁.后创建的开销. var circle = null; function drawCircle(position) { if(circle == null) { circle = GUI.Create(position);//创建1个圆 } else { c