JS基础(下)

事件DOM Event

更多事件请查询h3c htmldom参考手册 event

onclick() :当点击时

onfocus() :获得焦点时 ;当点击某个区域时触发,如点击输入框

onblur() :失去焦点时

onmouseover 鼠标经过时,触发

onload事件是当网页加载完后发挥作用;注意如果加载外网的图片也要加载完之后才生效

onsubmit() :提交事件,点击提交按钮的时候触发 ;阻止提交要return

使用检查表单提交数据是否合法,直接在浏览器内完成,提交到服务器远浪费资源

行为结构样式分离

行为结构样式分离即是把行为和样式分开不写在一条语句中,如上图是合在一起。样式分离则把CSS写成内联样式或者外联样式

换个角度来看 onclick也可以看做div的一个属性,因为写在div里面

this指向调用者,如php中

有时候你仅仅开发html,CSS是被另外的人进行写的,因此你不知道太多CSS的具体样式.

事件对象 duixiangshijain.html

事件发生的瞬间,发生的位置,时间,鼠标点击键位,触发的节点等信息,被打包成一个对象,此对象系统自动传递给 事件函数的第一个参数(即是你调用的函数)

target 事件属性可返回事件的目标节点,比如某个表格

实战:碰不到的美女

事件委托

把事件的处理委托给上级进行处理,关键属性target属性

实战五子棋

正则表达式验证邮箱

^ : 表示从字符串开始的地方就验证

$ : 表示结束检测

/w : 匹配所有的数字和字母以及下划线

利用正则寻找邮箱

exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

高级

函数嵌套 : 分析的时候从外到内分析。执行从内到外找

具体步骤:

0: 函数运行前的1瞬间, 生成 Active Object (活动对象),下称AO

1:

1.1 函数声明的形参,形成AO的属性,值全是undefined,

1.2 接收实参,形成AO相应的属性的值

2: 分析变量声明! 如 var age,

如果AO上还没有age属性,则添加AO属性,值是undefined

如果AO上已经有age属性,则不操作;变量赋值是在执行期执行

3: 分析函数声明,如 function foo() {},

则把函数赋给AO.foo属性

注: 如果此前foo属性已存在,则被覆盖成函数

先在里层寻找该参数,如果没有再一直往外找,直到找到为止

如果有多个相同的值,去最近的;注意函数的嵌套里层的函数需要被调用才能执行行

var是在函数的上下文中声明变量,

如果没有加var只是一个赋值操作,

函数之外的范围就被称作window了,也就是全局

console.log(d); //表示在控制台输出d变量

一旦执行到某个地方有错后面的代码不再执行即是直接退出程序,一般会在控制台输出错误信息

arguments

是函数运行时形成的实参列表,是一个对象,类似数组对象。不是数组。索引从0开始

arguments.length 获取实参的个数。每个函数都有自身的arguments,不能被外部引用

callee作用是代表当前运行的函数,在匿名函数的时没名字还要进行递归这是就能使用

如 n + t(n-1) à n + arguments.callee(n-1);

typeof

函数运行其内,关键的三个对象

AO ---> 本函数AO上没有某属性,则继续去外层函数的AO上找,直到全局对象. 叫做 作用域链

arguments ---> 每个函数有自己的callee,但 不 向外层接着找arguments的相关属性,即 不形成链

this

this

1:作为普通函数来调用时,

this的值指向->window,相当它

准确的说,this为null,但被解释成window

在ECMASCRIPT5标准中, 如果this为null,则解释成undefine*/

2: 作为对象的方法来调用

this指向方法的调用者,即该对象。作为方法调用时,

this指向其调用那一刻的调用者,即母体对象。不管被调用函数,声明时属于方法,还是函数

3:函数作为构造函数调用时

JS没有类的概念,常见对象是用构造函数来完成的,或者直接使用json格式来写对象

new Dog发生了以下几个步骤

系统创建空对象 à 把函数的this指向空对象 à 执行函数 à 返回该对象

4:函数通过call(对象,参数)

t函数的this指向当前对象 ; 然后运行t函数

闭包问题

闭包维护一个别人污染不到的变量

1:在大部分的语言中,t1被调用执行,则申请内存

并把其局部变量,push入栈!

t1函数执行完毕,内部的局部变量,随着函数的退出而销毁

因此, age = 20的局部变量,依靠已经消失了.

在js中, age = 20这个变量,却被t2捕捉,

即使t1执行完毕,通过t2,依然能访问该变量

这种情况---返回的函数,并非孤立的函数,甚至把其周围的变量环境,

形成了一封闭的"环境包",共同返回, 所以叫"闭包"

----一句话概括-----函数的作用域取决于声明时,而不取决于调用时

JS对象的特点

在js中,有对象,没有类(但有构造函数), JS中的对象,不依赖于类而存在,

支持任意添加和删除属性, 方法和属性不必区分.

JS封装

通过闭包来完成js面向对象的私有属性与封装

关于JS继承与原型链的问题

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。

老虎先在自己的对象找爬树方法,没有,再去原型中找(原型从cat函数返回的对象中克隆得到)发现有则调用。如果没有就继续往上一级原型找

原型链 : 对象à原型à原型原型àObject对象àNull

所以只要修改上游的原型就会影响下游 , 如Object.prototype.sing = ‘’;

还能直接修改属性,tiger.prototype.bark = function() {alert(‘我是老虎!’);}

每个对象,都有一个__proto__指向其原型对象,如hnhu对象有一个__proto__指向其原型对象。原型对象也是对象故也有__proto__ 指向其原型对象

console.log(hnhu);得到

原型冒充与复制继承

好处:不会影响原型链,下游不影响

原型冒充

在用Tiger造对象时,在Tiger影响空对象前,先用要继承的函数即是由Cat函数实施影响

因此,最终得到的对象,是由Cat和Tiger两者共同作用过的对象(具有Cat对象的特性)

复制继承

多态模拟

多态 传实参的时候必须为对应的对象类型 , 变继承之后,父类作为形参,只要传子类也可,多态

绑定事件

绑定事件的方式

1、 直接写在html标签中 : 几乎所有浏览器都支持,但是不简洁没分离,效率低

2、 addEventListener 进行绑定

参数解析 :

1: 绑在哪个事件上? click,load,change,blur,focus,mouseover,mouseup.等(没on)

2: 绑定什么函数---自定义事件函数

3: 什么方式监听执行事件函数? 捕捉,冒泡?

详解第三个参数

第三个参数默认为false,表示冒泡模型,即是多个触发事件的时候执行顺序是从 里层开始执行到外层

true,表示捕抓模型,

如 : 3个div,从大到小,分别命名为china,bj,hd,并添加点击事件

图解原因

红色为捕抓从最大的找要执行的事件;绿色为冒泡

经验之把经常重复的语句封装到一个方法

事件停止 removeEventListener

实战 三级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
</head>
<body>
    <select name="" id="pro">
        <option value="-1">请选择</option>
        <option value="0">广东</option>
        <option value="1">江苏</option>
    </select>

    <select name="" id="ct" ></select>

    <select name="" id="cty"></select>
</body>

<script>    var area = [
                ['广州','珠海'],
                ['南京','苏州']
    ];    var area2 =  [
                [['花都','番禺'],['香洲','斗门']],
                [['江宁','栖霞'],['吴中','吴江']]
    ];    
    var dprovince = document.getElementById('pro');    var dcity = document.getElementById('ct');    var dcounty = document.getElementById('cty');

    dprovince.onchange = function(){        
        //注意放在里面每次初始化清空
        var opt = '';        if (this.value == '-1'){
            darea.innerHTML = opt;            //dcounty.innerHTML = opt;        }        var len = area[dprovince.value].length;        for (var i = 0; i < len ; i++){
            opt = opt + '<option value ="' + i + '">' + area[this.value][i] + '</option>';
        }
        dcity.innerHTML = opt;        var opt2 = '';        var len2 = area2[this.value][0].length;        for (var i = 0; i < len2 ; i++){
            opt2 = opt2 + '<option value ="' + i + '">' + area2[this.value][0][i] + '</option>';
        }
        dcounty.innerHTML = opt2;
    }        //        dcity.onclick = function (){            var opt2;            var len2 = area2[dprovince.value][dcity.value].length;            for (var i = 0; i < len2 ; i++){
                opt2 = opt2 + '<option value ="' + i + '">' + area2[dprovince.value][dcity.value][i] + '</option>';
            }
            dcounty.innerHTML = opt2;
            
        }</script>
</html>

因为多了个空格导致获取的value值有问题,然而我用了一个下午排错,日了狗,空格真的很难找出错误,所以以后变成不必要的空格别用

头像修改

this作用是表示当前函数执行所在的标签对象

坚持到感动自己,努力到无能为力!

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-06-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

web前端开发初学者十问集锦(4)

利用JS来控制页面控件的显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

1742
来自专栏TungHsu

这或许是对小白最友好的python入门了吧——12,列表深入体验

有些时候我们不需要整个列表元素,只需要其中一段列表就好了,我们应该怎么办呢? 这个叫做列表切片。 exam = ["cet","english","math",...

2925
来自专栏nimomeng的自我进阶

《Objective-C基础教程》笔记

1.xcode中,oc的.m文件代表message,指的是Objective-C的一个主要特性。 2.NS前缀的来历要追溯到次公局包还被成为NextStep,...

832
来自专栏小灰灰

SPI框架实现之旅三:实现说明

SPI框架实现之旅三:实现说明 前一篇 《SPI框架实现之旅二:整体设计》中,介绍了几个定义的接口,注解;叙述了实现流程;并简单的介绍了 SpiLoader中...

19810
来自专栏IMWeb前端团队

20个例子入门Q.js

本文希望通过20个简单的例子让没用过Q.js的同学快速掌握其基本用法 1. 新建实例 html代码: <div id="demo" q-text="msg"><...

2567
来自专栏LIN_ZONE

javascript基础重点

1.在javascript中使用 == 比较,会自动转换数据类型再比较,有时候会 得到非常诡异的结果;一般情况下使用 === 比较,它不会自动转换数据类型,如果...

942
来自专栏LEo的网络日志

go语言接口学习

3685
来自专栏LIN_ZONE

javascript对象序列化(对象与JSON字符串的互换)

前一段时间用到h5的本地存储---需要把某个js对象存储在浏览器的本地存储中,用到了javascript对象的序列化与反序列化

812
来自专栏阮一峰的网络日志

async 函数的含义和用法

本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。 Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义...

2826
来自专栏偏前端工程师的驿站

JS魔法堂:那些困扰你的DOM集合类型

一、前言                                     大家先看看下面的js,猜猜结果会怎样吧!   可选答案:   ①. 获取id属...

2389

扫码关注云+社区

领取腾讯云代金券