01、JavaScript基础

1. 请说明什么是事件冒泡和事件捕获
   答：
   （1）事件冒泡:父级和子级拥有相同的事件，同时触发事件的话，事件会从子级向上传递执行。
   事件冒泡可以形象地比喻为一颗石头投入水中，泡泡会一直从水底冒出，也就是说事件会从最内层的元素开始发生，一直向上传播直到document。
   不是所有的事件都能冒泡，如blur、focus、load、unload
   （2）事件捕获:父级子级拥有相同事件时,同时触发事件的话，事件会从最外层向内传递执行

   
   
   

   maopao.jpg
   
   

   (3) addEventListener(event,fn,userCapture)
   event: 需要绑定事件
   fn: 执行函数
   userCapture： false:冒泡（默认） true: 捕获

2. 阻止事件冒泡的方法都有哪些？
   答：
   取消冒泡事件
   （1）非IE：事件对象.stopPropagation();
   （2） IE：事件对象.cancelBubble=true;
   取消默认事件
   （1） 非IE：事件对象.preventDefault();
   （2）IE: 事件对象.returnValue = false;

3.什么叫做事件委托？
答：
通俗的讲，onclick，onmouseover，onmouseout等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
好处：节省代码提高效率
使用场景：当有多个同级标签，要响应相同的事件，就要想到事件委托。

4.分别说明，在非ie浏览器和ie浏览器下如何添加事件监听和移除事件监听。
（1）非ie浏览器
添加事件监听：addEventListener();
例如：ele.addEventListener("click",doSth,true)；
移除事件监听：removeEventListener(
（2）ie浏览器
添加事件监听：attachEvent();
例如：ele.attachEvent("onclick",doSth)
IE只支持事件冒泡，不支持事件捕获；写事件名时要加上"on"前缀；例如："onclick"、"onload"
移除事件监听：detachEvent();

5.什么是闭包？作用是什么？
（1）闭包：闭包是指有权限访问另一个函数作用域的变量的函数
（2）闭包的作用: 1. 创建内部变量，让变量不能被外部随意更改，防止变量被污染。2. 让这些变量的值始终保持在内存中，不被垃圾回收机制所回收。

6.说明cookie、localStorage的区别
（1）cookie：本地存储，存储容量5kb，生命周期(可以设置它的过期时间,如果不设置,则在浏览器关闭时失效)
（2）localStorage：本地存储，存储容量为5M，其生命周期为在不手动删除的情况下,永远都会存在于浏览器中
（3）SessionStorage 生命周期(浏览器会话结束,关闭时,失效)

7.代码实现正则限定ip地址。
var re = /^((\d|[1-9]\d|(1\d{2}|(2[0-4]\d|25[0-5]))).){3}(\d|[1-9]\d|(1\d{2}|(2[0-4]\d|25[0-5])
(0_255).(0255).(0_255).(0255)
\d表示0~9的任何一个数字
{2}表示正好出现两次
[0-4]表示0~4的任何一个数字
| 的意思是或者
1\d{2}的意思就是100~199之间的任意一个数字
2[0-4]\d的意思是200~249之间的任意一个数字
25[0-5]的意思是250~255之间的任意一个数字
[1-9]\d的意思是10~99之间的任意一个数字
[1-9]的意思是1~9之间的任意一个数字
.的意思是.点要转义（特殊字符类似，@都要加\转义）

8.原生touch事件有哪些？如何添加原生touch事件以及获取手指？
（1）touchstart：手指按下屏幕事件，获取手指：事件对象.touches[0]
（2）touchmove：手指在屏幕移动事件，获取手指：事件对象.touches[0]
（3）touchend：手指从屏幕抬起事件，获取手指：事件对象.changedTouches[0]

9.什么是JQuery？JQuery的优势是什么？
（1）JQuery：是基于js原生的一个强大的类库。
（2）优势：1. 代码简洁，开发效率高； 2. 开发者不需要考虑兼容性；3. JQuery封装了很多JS原生没有的好的方法供我们使用。

10.代码实现JQ的tab切换功能。

    

        
        
        
        
A
        
B
        
C
    
    答：
    $(function(){
        $(".all input").on("click",function(){
            $(".all input").attr("class","");
            $(".all div").attr("class","");
            $(this).attr("class","click");
            $(".all div").eq($(this).index()).attr("class","show");
        })
    })