js - 02课 4 浅谈this -3

1.两种方式绑定, this 不同的指向

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{width: 100px; height:150px;float:left; margin-right:30px; background: #f1f1f1;position: relative; z-index: 1;}
        div{width: 80px; height:200px; background:red; position: absolute; top:75px;left:10px;display: none}
    </style>
</head>
<body>
<ul>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
</ul>
<script>
    window.onload = function(){
        var aLi = document.getElementsByTagName(‘li‘)
        for(var i = 0; i < aLi.length; i++){
            aLi[i].onmouseover = function(){
                var _this = this;
                showDiv(_this);
            }
            aLi[i].onmouseout = hideDiv;
        }
    }
    function showDiv(_this){
        _this.getElementsByTagName(‘div‘)[0].style.display = ‘block‘;
    }
    function hideDiv(){
        this.getElementsByTagName(‘div‘)[0].style.display = ‘none‘;
    }
</script>
</body>
</html>

时间： 2024-11-29 03:25:03

js - 02课 4 浅谈this -3的相关文章

js - 02课 4 浅谈this

1. 在标签内部调用事件默认都是window调用的! 2. 为什么函数fn1()必须写在window.onload = function(){} 外面才有效果! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input i

js - 02课 4 浅谈this -2

1. 防止this重名,可以通过设置值,然后通过参数传递过去 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="按钮1"/> &

JavaScript作为一种基于对象(非严格面向对象)的语言,函数在JS中的地位非同一般:用函数声明类和对象.甚至函数本身也是对象. 一.函数的三种声明方式辨析. 1.function命令 function printAbc(){ console.log('ABC'); } 2.函数表达式(变量赋值形式) var printAbc = function (){ console.log('ABC'); }; 注意:1.使用函数表达式形式时务必要有分号. 2.此时function后函数名可有可无,且

js - 02课 3

1. 自动生成5条新闻 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input id="btn1" type="button" value="自动生成5条新闻"&

js - 02课 - 图片循环顺序切换实例

思路: 总结: 1. 给循环与否设置标识 isLoop ,true为循环 2. 下一张到最后一张的时候, 循环则 index 变成0 , 否则停留在最后一张,下标为arrImg.length-1 上一张到第一张的时候, 循环则跑到最后一张, 否则停留在第一张 3.当下标发生变化的时候, 哪些东西要改变? 图片 , 图片顶部的文字, 图片下面的文字信息 1. 效果 2. 代码 <!DOCTYPE html> <html lang="en"> <head>

浅谈JS之AJAX

0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导致页面重新加载,这样才有更好的用户体验. Ajax是基于以下开放标准: javascript(DOM) css html xml(json) 通俗的说就是使用了javascript(DOM)的XMLH

浅谈 js eval作用域

就简单聊下如何全局 eval 一个代码. var x = 1; (function () { eval('var x = 123;'); })(); console.log(x); 这个代码得到的是 1 而不是 123如果想让 eval 执行的代码是全局的,那么有几种方法. var x = 1; (function () { window.eval('var x = 123;'); })(); console.log(x); 这个方法标准浏览器都可以得到 123 而IE6-8则依然是 1 相同的

浅谈 js 正则之 test 方法

原文:浅谈 js 正则之 test 方法其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. ? 1 2 3 4 5 var re = /\d/; console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1"

浅谈 js 语句块与标签

原文:浅谈 js 语句块与标签语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象字面量么?怎么成了语句块了?如果在赋值语句或者表达式里用的时候,确实是对象字面量,如: var a = {}; ({toString:function(){return "hehe"}}) + "..."; 是不是很有意思..但是直接使用如: {toString: fu