javaScript知识点和实例

一、最终显示效果：点击红色按钮，会有视屏弹出并带有遮罩层

点击黄色区域可以关闭视频并回到最初的状态。

页面主要代码：main中主要包含一个a，控制显示的按钮。设置有id值。

<div class="main"><a href="javascript:;" class="video" id="video"></a>
</div>

以下代码就是用来控制视频的显示效果，.video-btn 包含了视频显示区域以及右边黄色关闭按钮（虽然黄色关闭按钮有点丑）。

id="shadow"用来控制遮罩层。主要是对各元素设置id的值  后面js就可以方便的调用各元素。
1 <div class="video-btn" id="video-btn">
2     <div class="video-area" id="video-area"></div>
3     <a class="video-shut" id="video-shut">x</a>
4 </div>
5 <div id="shadow"></div>

下面来看一下有关css

首先设置video-btn区域。

 .video-btn{position: absolute;width:600px;height: 300px;background:black;top:50%;left: 50%;margin-top: -150px;margin-left:-300px;display: none;z-index: 101;}.video-area{float:left;width:500px;height: 300px;background:red;}
.video-shut{height:100px;width:100px;font-size:40px;color:pink;float:left;text-align: center;/*line-height: 50px;*/background: yellow;display: block;padding-top:30px;}

然后设置遮罩层的css

        #shadow{position: absolute;opacity: 0.5;filter:alpha(opacity=50);bottom:0;left: 0;right: 0;top: 0;background:black;z-index: 100;display: none;}

重点1：此处一定把两个div设为绝对定位，让其脱离文档流。

重点2：遮罩层要设置bottom，left，right，top值为0 这样遮罩层就可以平铺整个屏幕了。

重点3：一定要把这两个div设为display：none。让用户一开始是看不到这两个div ，否则一进去就看到这两个会很丑。

重点4：要设置z-index的值，黄色按钮和显示视频那个div的优先级一定要比遮罩层的优先级大，不然点击不了。

现在开始js。前面五个获取id赋值。然后在点击黄色按钮时响应事件。

点击事件1：将视频所在的div设置display：block。将遮罩层所在div设置display：block。同时，视屏div内显示土豆视频。此链接为土豆网的分享链接。

点击事件2：在点击黄色x按钮时，应该将这两个div隐藏起来。即设置两个div的display：none。

 1 <script>2     var obtn=document.getElementById('video');3     var ovideo=document.getElementById('video-btn');4     var oatn=document.getElementById('video-area');5     var oshut=document.getElementById('video-shut');6     var oshadow=document.getElementById('shadow');7     obtn.onclick=function () {8         ovideo.style.display='block';9         oshadow.style.display='block';
10         oatn.innerHTML='<embed src="http://www.tudou.com/v/Bs_lZPxcoRs/&rpid=818231113&autoPlay=true&resourceId=818231113_04_05_99/v.swf" allowFullScreen="true" quality="high" width="500" height="300" align="middle" allowScriptAccess="always" flashvars ="isAutoPlay=true" type="application/x-shockwave-flash"></embed>';
11     }
12     oshut.onclick= function () {
13         ovideo.style.display='none';
14         oshadow.style.display='none';
15     }
16 </script>

二、javaScript常用事件

1、鼠标事件

1、onmousemove, onmouseenter 和 onmouseover 的不同。

（1）onmousemove 事件在鼠标移动到 div 元素上时触发。

（2）onmouseenter 事件在鼠标指针进入 div 元素时触发，onmouseleave 事件在鼠标指针离开 div 元素时触发，唯一的区别是 onmouseenter ，onmouseleave事件不支持冒泡。

（3） onmouseover 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span), onmouseover,onmouseout事件支持冒泡。

（4） mouseout 与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

解释：鼠标监听A元素的onmouseout事件，结果当鼠标移到A元素里面的B元素时，事件也触发了。
原因是因为：事件冒泡。
当鼠标从A元素进入到B元素时，A也会触发自己的onmouseout事件，但是由于自己并没有绑定这个事件，因此B的onmouseout传递给了A元素，所以当进入B时，实际上就触发了A元素的onmouseout事件了。
解决办法是使用onmouseleave事件来代替onmouseout事件。
onmouseleave禁止了事件冒泡，因此B元素并不会触发事件。

因此，如果不希望触发冒泡事件的时候尽量使用onmouseenter和onmouseleave。

附加链接： https://www.runoob.com/try/try.php?filename=tryjsref_onmousemove_over_enter

2、键盘事件

3、框架、对象事件

4、表单事件

1、onfocusin 事件类似于 onfocus 事件。主要的区别是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用 onfocusin 事件。

2、注意：Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。

5、剪切板事件

1、oncopy 事件在用户拷贝元素上的内容时触发。

提示： oncopy 事件在用户拷贝元素时也会触发，例如，拷贝元素。

提示： oncopy 事件通常用于 type=“text” 的元素。

提示： 有三种方式可以拷贝元素和内容：

按下 CTRL + C
在你的浏览器的 Edit(编辑) 菜单中选择 “Copy（复制）”
右键鼠标按钮，在上下文菜单中选择 “Copy（复制）” 命令。

2、oncut 事件在用户剪切元素的内容时触发。

注意： 虽然使用的 HTML 元素都支持 oncut 事件，但实际上并非支持所有元素，例如

元素，除非设置了 contenteditable 为 “true” (查看下文的更多实例)。

提示： oncut 事件通常应用在 type=“text” 的元素中。

提示： 有三种方式可以剪切内容：

按下 CTRL + X
从浏览器的编辑菜单中选择 “Cut（剪切）”
右击鼠标按钮在上下文菜单中选择 “Cut（剪切）” 命令。

3、onpaste 事件在用户向元素中粘贴文本时触发。

注意： 虽然使用的 HTML 元素都支持 onpaste 事件，但实际上并非支持所有元素，例如

元素，除非设置了 contenteditable 为 “true” (查看下文的更多实例)。

提示： onpaste 事件通常用于 type=“text” 的元素。

提示： 有三种方式可以在元素中粘贴内容：

按下 CTRL + V
从浏览器的编辑菜单中选择 “Paste（粘贴）”
右击鼠标按钮在上下文菜单中选择 “Paste（粘贴）” 命令。

5、打印事件

6、拖动事件

7、鼠标/键盘事件对象

三、this关键字

1. 当函数没有被自身的对象调用时 this 的值就会变成全局对象。

2、一般而言，在Javascript中，this指向函数执行时的当前对象。

	注意 this 是保留关键字，你不能修改 this 的值。

3、函数作为对象方法调用，会使得 this 的值成为对象本身。

4.、call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

实例

function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); // 返回 20

尝试一下 »

实例

function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); // 返回 20

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

四、闭包

1、变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

2、闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

五、JavaScript HTML DOM EventListener

1、 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

2、向同一个元素中添加多个事件句柄

1. addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件

3、在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发，然后再触发

元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, *useCapture*);

六、JavaScript HTML DOM 集合(Collection)

1、HTMLCollection 不是一个数组！

HTMLCollection 看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

2、HTMLCollection 与 NodeList 的区别

HTMLCollection是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

七、var、let和const 的区别和联系

1、使用var关键字声明的全局作用域变量属于window对象。

使用let关键字声明的全局作用域变量不属于window对象。

使用var关键字声明的变量在任何地方都可以修改。

在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。

在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。

let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。

在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。

在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量

const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

var关键字定义的变量可以先使用后声明。

let关键字定义的变量需要先声明再使用。

const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改。

八、javascript:void(0)

// 阻止链接跳转，URL不会有任何变化
<a href="javascript:void(0)" rel="nofollow ugc">点击此处</a>// 虽然阻止了链接跳转，但URL尾部会多个#，改变了当前URL。（# 主要用于配合 location.hash）
<a href="#" rel="nofollow ugc">点击此处</a>// 同理，# 可以的话，? 也能达到阻止页面跳转的效果，但也相同的改变了URL。（? 主要用于配合 location.search）
<a href="?" rel="nofollow ugc">点击此处</a>// Chrome 中即使 javascript:0; 也没变化，firefox中会变成一个字符串0
<a href="javascript:0" rel="nofollow ugc">点击此处</a>

九、鼠标移入暂停animation动画与清除动画

我们可以利用鼠标的hover伪类实现动画的暂停

div:hover {animation-play-state:paused;（暂停）
}
123

animation-play-state 的默认值是 running（运行）

W3C animation动画暂停

顺便说一下animation清除动画

div:hover {animation-duration: 0s;
}
123

W3C animation动画有介绍

$(selector).each(function*(index,element)*)

参数	描述
function(index,element)	必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置。element - 当前的元素（也可使用 “this” 选择器）。