【031】Python全栈日记-JavaScript（三）

先看一点点基础，然后全部通过案例来进行学习，所以很多东西都在代码截图的注释里。

所有的例题都在今日代码里，看不清可以直接复制粘贴到自己电脑看（http://note.youdao.com/noteshare?id=1b5a64c46996f2a8b819880299c57762）

 

一、Web API

1、API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

- 任何开发语言都有自己的API

- API的特征输入和输出(I/O)

- API的使用方法(console.log())

 

2、Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

 

3、掌握常见的浏览器提供的API的调用方式

这是一个web接口的参考：

MDN-Web API（https://developer.mozilla.org/zh-CN/docs/Web/API）

 

4、JavaScript的组成

核心语法已经学完了，这两天学习DOM.

(1)ECMAScript - JavaScript的核心

定义了javascript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

 

(2)DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

 

(3)BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

 

 

二、DOM

1、概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

 

DOM又称为文档树模型（模型很重要！！！！！）

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签的属性

 

2、DOM经常进行的操作

- 获取元素

- 动态创建元素

- 对元素进行操作(设置其属性或调用其方法)

- 事件(什么时机做相应的操作)

 

 

二、js获取元素

为什么要获取页面元素

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

你可以把获取元素理解成css的选择器，因为这两个功能是一致的，就是从整个HTML中挑选我需要修改的的元素。

 

 

一般我们在获取元素之前都会写上

Window是代表整个页面，onload代表加载完毕，

我们要想获取页面上的元素，当然需要先等页面上的东西都加载完了，再去获取。

 

首先我们常用的4种获取的方法·

Document就是我们树形结构的根，我们所有的方法都建立在存于document的内置函数

1、通过标签名来挑选

我们发现Elements，是复数，我们提取的button本来网页中也不止一个，提取后这些button会生成一个数组，我们在修改的时候需要选出来一个，例如我们要修改第4个button，就需要在document.getElementsByTagName('button')后加个[3] ，来选取第4个button。

我们可以通过打印到控制台来看看是不是真的是数组，我在html中写了两个button，添加console.log(btn); 然后运行上面的代码，在浏览器控制台查看：

所以你即使只有一个button，你要使用获取全部的（加s的）也需要先从数组中取出来。

 

2、通过id来获取

通过id获取的是唯一的，和css选择器的id是一个东西

 

3、通过类名来获取

通过类名选择的也是一类，所以为复数，结果为数组，需要提取其中元素。

 

4、通过选择器来获取（用的多）

这个就是直接调用css的类名，应该很好理解吧

 

三、匿名函数

匿名函数：没有名字的函数

匿名函数如何使用：

    将匿名函数赋值给一个变量，这样就可以通过变量进行调用

匿名函数自调用

 

关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。

我们在dom中会大量使用匿名函数。

 

正文开始

四、实例练习

1、点击按钮弹出对话框

用到的陌生方法：

（1）鼠标事件：

onmousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。

onmouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。

onclick:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。

ondblclick:双击鼠标左键时触发。

 

一对：不能和下面混拼

onmouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。

onmouseout:鼠标移出目标元素上方。

一对：不能和上面混拼

onmouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。

onmouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。

 

onmousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

 

（2）js弹窗

Alter（）

结果：

 

2、点一组照片弹出对话框

用到的陌生方法：

 

我们用for循环来先试试，让弹窗显示这是第几个图片：

代码看起来和往常一样，没啥毛病，那我们运行一下试试：

然后我们就发现，点哪个图都是显示这是第四个图，这是为啥，这就要说说我我们的触发事件了，我们在没有触发这个点击图片的事件时，函数是不会去运行的，这时候程序就会跳过函数运行，直到循环结束，所以在我们没有点击图片的时候，i++就已经加到了3，再加上输出的i+1，所以三个图都显示是第4张。

那如何避免呢，在js的对象中我们学了一个叫做this的东西，this就是我们点哪个哪个就是this。

我在控制台添加了打印this，然我们看看this是啥：

当我们点击照片触发点击事件时，匿名函数就会返回值，控制台就会打印出当前点击的照片。

 

 

3、点击a链接修改文字和地址

用到的陌生知识点：

元素文本操作

innerText：修改纯文本

innerHTML：修改文本

区别用代码看一下

点击按钮后结果：

很明显这俩的却别了吧。

 

回到我们的实例上，其实上一个已经展示了修改文本，让我们看看如何修改元素属性：

结果：

点击按钮前：

点百度会跳转到百度首页

点击按钮后：

文字已经被修改，而点击我不是百度了，会跳转到我上个练习题

 

 

4、点击小图变大图

Css就不贴而出来了，没啥陌生知识点。

结果：

点哪个图，哪个图就会变大显示在下面。

 

 

5、设置元素宽高

我们修改标签本身的属性时（如a的href，img的src）直接this.属性就能修改，那如果我们要修改宽高这种style中的属性，应该如何呢？

我们可以通过this.style.width = 的方法来修改，这个是直接写在标签里的行内元素，后面会有更好的方法，因为这样修改会直接把属性写入到html里，对于后期维护，如果要进行修改很麻烦，而且写在行内他的权重是最高的，无论你在css中如何修改，都不会发生改变。

当修改的属性中间有横线比如：background-color，修改为backgroundColor

结果：

 

 

6、操作元素的样式

陌生知识点：

（1）鼠标样式改变

语法：

default  箭头

text  文本 

move  十字架

pointer; 链接的小手

平时只有a带有这种效果，现在所有的都可以有了。

 

（2）第二种修改css样式的方法：

添加

[1]classname=‘style style …’ ：

首先我们在css里方几个我们需要用的修改选择器：

然后，如果我们需要在js中一次把所有未使用的css都使用就可以用classname：

例如：点击方盒子后变圆，鼠标样式变为小手，xxx.classname  =‘border yuan yiRu’，因为这个是使用类名的，所以不用加类名前的那个‘.’。

但是他有个缺陷，你写入属性的时候会清空原有的全部属性，只保留这两个写入的。

当然我们也可以用classname获取标签存在的css属性。

 

[2]classList （HTML5提供的）

classList.add（）:增加元素

classList.Remove（）：移除元素

classList.contain ()：检测元素存不存在，多用于if里做判断

很好理解，增加删除，不会对原有的修改，增加以有属性，会覆盖原有。

一次只能增加和删除一个属性。

要注意增加属性权重，例如div .box 的权重为div+.box，当你增加的属性为.box2时，权重小于div .box是不能重写的，需要把你.box2的类名改为div .box2。

 

 

回到我们的实例上：点击按钮把方形变为圆形，并添加鼠标样式

普通版：

效果：

 

升级版：

让我们试试使用classList.contain ()：来做一个点圆形变方形，点方形变圆形

结果：

 

 

 

7、排他

排他太常见了，

网页的轮播图上总会有这么一排小点，一排小点只有一个能亮，其他的都是暗的，这就是排他。

还有这种，放在促销上显示促销的内容，放在公告上显示公告的内容，其实用的都是排他的思想，先讲简单的，下一个例子讲这个：

、

 

 

圆点的排他做法：

先说一下思想，就是在鼠标点击之后去除所有圆圈的背景颜色属性，再给鼠标点击的那个圆圈添加背景属性，这样其他的都没有背景，只有我们点中的那个圆圈有背景，所以我们得单独创建个背景颜色属性供我们写入，

结果：

点哪个，哪个亮，不会一次亮两个。

 

 

9、我们来说一下刚才提到的选项卡的思路

其实是促销新闻和公告新闻的两个块同时存在，不过只有一个显示，剩下的都是不显示，当我们放到促销时，促销的选项卡显示，公告的不显示，当我们放到公告时，公告的选项卡显示，是不是和上面的思路一样的，不过这里就涉及到一个问题，在js里回调函数的循环变量时不可用的（参考第2题），那如何绑定促销和促销的选项卡，公告和公告的选项卡？

这理解涉及到了一个新知识，自定义属性

 

自定义属性：     

设置属性：对象.setAttribute('属性名','属性值')

移除属性：对象.removeAttribute('属性名')

获取属性：对象.getAttribute('属性名')

属性是啥：比如对于标签a，herf就是他的属性，对于img，src就是它的属性，这些都是js自带的，我们同样可以自己定义一些属性。

回到如何绑定促销和促销的选项卡，公告和公告的选项卡？

我们给促销和公告这两个块添加序号的属性，当我们移入到这两个标签时，this就代表当前的标签，标签中有我们存的序号属性，然后通过序号属性绑定我们的选项卡，这样就实现了促销和促销的选项卡，公告和公告的选项卡的绑定。

Css

Html

 

 

 

还有这种

思路就是，底下那个块是隐藏的，当鼠标放在客户服务时显示，当鼠标离开大块，隐藏。

 

 

今天这些题好好吸收，对于js的基本使用就差不多了，明天讲轮播图。