js第四个月-ZhiMap思维导图

js第四个月
进入思维导图模式
- 事件对象，放大镜
  - 事件对象
    - 获取事件的详细信息：鼠标位置，键盘按键
    - 用法:obj.事件=function(ev){var ent=event||ev //ev是ent.clientX,ent.clientY //获取事件的详细信息:点击的X坐标，Y坐标}
    - 事件冒泡：子级事件会传递给父级，冒泡和父子级相关，和定位无关，父级不加对应事件属性，冒泡继续向上冒。
    - 取消事件冒泡：function(ev){
      var ent=event||ev //ev是形参
      ent.cancelBubble=true; //取消事件冒泡
      }
  - 放大镜
    - 布局问题：事件要给到盒子上面，不要单独放到图片上,JS操作图片卡顿问题:滤镜挡住了图片
    - 限制条件:mousemove
    - 显示:mouseover/mouseout
    - 比例: 滤镜.style.left/小图移动距离=大图片.style.left/大图移动距离
    - 滤镜与右大图盒子要成比例:100*100 300*300
    - 外层盒子定位问题:position:relative;left:100px;top:100px;要减去定位盒子距离左边的距离
    - offsetLeft:获取相对于定位元素左边的距离,clientX获取的是相对于浏览器窗口的X坐标
- 键盘事件，拖拽
  - 键盘事件：onkeydown，onkeyup
  - 键盘事件对象：evt.keycode 返回键码
  - 引入事件对象
    - var ent=event||ev;
      //keyCode 键码
      console.log(ent.keyCode); //返回按键数字
      //37 左方向键 38 上方向键 39 右方向键 40 下方向键
  - 注意按键盒子消失问题
    - odiv.offsetTop 最好每次从原来位置获取,不要是负数，会出现隐藏消失情况
      odiv.style.top=odiv.offsetTop-10+'px';
  - 拖拽三个事件
    - 三个事件:onmousedown,onmousemove,onmouseup
  - 拖拽移动距离
    - onmousedown：记录鼠标相对于盒子的位置
      onmousemove:新的鼠标位置-按下时记录鼠标位置
  - 去除默认事件
    - return false
  - 默认事件
    - 浏览器自动帮你做的一些行为
    - 去除默认事件：在事件函数最后加 return false;
- 事件绑定
  - 事件绑定:给同一个对象绑定多个事件用到,之前的方法后面一个事件会覆盖前面事件
  - 对象.addEventListener(事件名去掉on,function(){}/函数名,false/true); //for 高
  - 事件绑定 obj.attachEvent(事件,function(){}/函数名) //IE8以下
  - DOM 2级事件:事件绑定方法
    DOM 0级事件:行内事件,obj.onclick=function(){}
  - 解除绑定：
    对象.removeEventListener(事件名,函数,false) //for 高
    对象.detachEvent(事件名,函数); //IE8以下
  - DOM事件流：标准事件流:冒泡事件,捕获事件
    冒泡事件：从里往外走依次执行 -通过事件绑定里的false实现
    捕获事件：从外往里走依次执行 -通过事件绑定里的true实现
    DOM 0级事件:默认走的是冒泡事件
  - this指向：1.在事件函数里用:this指当前对象
    2.事件函数里有定时器:this指window ,若让它指向当前对象:定时器外定义变量 var _this=this,内部用这个变量;
- 鼠标滚轮
  - 鼠标滚轮事件:onmousewheel //IE,chrome
    DOMMouseScroll //FF DOM事件,要用事件绑定方法
  - 检测方向：var oEvent=ev||event; //注意先把传参的写前面
    //IE、Chrome
    //alert(oEvent.wheelDelta);
    //下负(-120)
    //上正(120)
    
    //FF
    //alert(oEvent.detail);
    //下正(3)
    //上负(-3)
  - 滚轮注意问题
    - 1，事件
      onmousewheel IE、Chrome
      DOMMouseScroll FF
    - 2，方向：wheelDelta 下-负
      detail 下-正
    - 3，注意：DOM——addEventListener
      addEventListener preventDefault()
- 事件委托
  - 加事件：循环加事件——缺点：慢、浪费资源
  - 事件委托——事件代理、事件委派
  - 事件委托：把事件委托给他爹
  - 事件委托的优点
    - 1.性能高——不用一个个加
      2.节约资源——不用一人一个函数
      3.事件只需要写一次
      4.可以给未来元素增加事件
  - 事件源：
    oEvent.srcElement Chrome IE系
    oEvent.target FF
- offset问题，懒加载
  - offsetWidth问题:
    offsetWidth=width+padding+border
  - offsetLeft问题:
    offsetLeft/offsetTop 找的到定位父级的距离,没有定位的话找的是元素到页面的距离包括margin值
  - offsetParent 返回的是有定位元素对象(找的是定位父级)
  - 获取元素到窗口的距离（无论有没有定位都可以获取到）
    - getBoundingClientRect:
      obj.getBoundingClientRect 返回矩形对象clientRect对象
  - clientRect对象,内部函数几个属性
    - (left/top/right/bottom/width/height)
  - 图片延迟(懒加载)加载：省流量(带宽)--钱
  - 看东西有没有加载：network
- math对象，随机数
  - math对象：做一些跟数学有关运算时用到,它里面封装了很多方法
  - 随机颜色：注意问题:字符串与变量拼接 ''+变量名+''
  - 随机数：Math.random() 0<=n<1
    0---1 * 100 0---100
    10 + 0---1 * (100-10) 10----100
    n=10
    m=100
    parseInt(Math.random()*(m-n)+n) 获得n-m固定范围内的随机数
  - 双色球：arr.push(数据) 向数组里添加数据
    思路：
    1.循环一定的次数，每次随机一颗球(补零)
    2.丢到数组里(如果数组里没有这颗球)
  - date时间对象
    - 1.创建
      日期对象 new Date() object
      get == 获取
      日期对象.get函数名() 返回是数字
    - 获取年：日期对象.getFullYear()
      月：日期对象.getMonth() 月+1(为了显示正确)
      号：日期对象.getDate()
      星期: 日期对象.getDay() 0代表周日
      小时: 日期对象.getHours()
      分钟：日期对象.getMinutes()
      秒：日期对象.getSeconds()
      毫秒：日期对象.getMillSeconds(); 1s=1000ms
      set == 设置
      set设置的是日期对象，无法设置系统(win7/8/9/10,)时间
      setMonth(9,1) 10月1号月-1
      d.getTime() 返回事件戳（1970.1.1到日期d,所经历的毫秒数）
    - 图片时钟
      - 1.str='152345'
        2.str.charAt(0)
    - 倒计时
      - 1.准备两个日期对象
        a nowTime new Date
        b targetTime new Date().setFullYear().setHours()
      - 2.算时间差：
        目标时间的时间戳-当前时间戳
      - 3.差值求模，转成天小时分秒
      - 4.开定时器写入
- bom
  - window.open(网址,目标窗口) 返回 [object Window]
  - 网址：
    http
    https
    ftp
    1.html
    about:blank 空窗口
  - 目标窗口：
    _blank
    _self
    _top
    _parent
    _target
  - 向窗口里面写内容：
    document.write(内容) 清空原有内容一次，再写入
  - window.navigator.userAgent //获取浏览器版本信息
    window.location 返回连接地址
    连接地址： https://www.a.com/app/a.html?a=12#1
    window.location.protocol 协议(标准) http://,https://(大网站常用,更安全一些),ftp://(连接远程服务器:上传，下载用)
    window.location.host 域名:(一级域名,二级域名等) a.com
    window.location.pathname 路径(页面的存放地址) /app/a.html
    window.location.search 数据(页面某一块的数据请求) ?a=12
    window.location.hash 锚 #1
  - alert(提示信息) 确认框暂停后续代码的执行，确认后，继续
    confirm（提示信息）确认选择暂停后续代码的执行，确认后，继续
    prompt（提示信息，默认值）确认输入
  - 历史对象(前进与后退) window.history
    后退： window.history.go(-1); //后退一个网页
    前进: window.history.go(1); //前进一个网页
- cookie
  - cookie介绍
    - Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。
      例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户喜欢选择浏览哪类新闻。在用户允许的情况下，还可以存储用户的登录信息，使得用户在访问网站时不必每次都键入这些信息？
  - cookie用法
    - 其它浏览器打开,文件要放在服务器，火狐中可直接打开
      cookie(可在火狐中打开,也能直接读取cookie):
      离不开wamp：
      必须要有域名，才能用cookie
      域名：一个域名值能有一个cookie
      cookie不能"跨域"
      "跨域"==两个域名的cookie不能共享
      做什么？
      保存信息
      用在哪?
      自动登录，记住用户信息（用户名，密码，地址)
      大小: 4k左右 4*1024英文 2*1024中文
      为什么小？
      出现的早
      cookie在哪？
      浏览器的缓存文件，在用户的电脑上
      安全：别存隐私
      cookie里面可以有很多条字符：
      expires 过期(3天后过期,1小时后,几年)
      session 会话结束（浏览器关闭cookie消失）
  - 本地服务器用法
    - 1.把创建的网页放到服务器集成环境(phpstudy,wamp,xampp等)
      2.去找环境安装目录,放到www文件下
      3.启动环境
      4.访问:localhost(或127.0.0.1)/你文件存放路径(如果文件路径有多层你就访问多层)
- 正则表达式
  - 正则也是一门语言：用的规则新的
  - 应用场景：
    邮箱验证 2s_@1-4字母
    手机号 138.....
    识别IP 196.168.18.1
    身份证： 15-18 x
  - JS认为正则就是一个对象：
    number string array json
  - 正则：RegExp regular expression
  - 创建正则对象：
    var re=new RegExp('规则','选项');
    var re=/规则/选项; perl 风格
    /abcde/ 一个一个的去匹配
  - 量词：数量 n==数字
    x{数量} 找的是x，多少？花括号里写数量
    x{n} 要找的x必须正好是n个
    x{n,m} 要找的x最少n个，最多m个
    x{n,} 要找的x最少n个，最多不限
    x{0,m} 要找的x最少0个，最多m个
    + 至少一次多了不限 {1,}

js第四个月

​事件对象，放大镜

​事件对象

​获取事件的详细信息：鼠标位置，键盘按键

​用法:obj.事件=function(ev){var ent=event||ev //ev是ent.clientX,ent.clientY //获取事件的详细信息:点击的X坐标，Y坐标}

​事件冒泡：子级事件会传递给父级，冒泡和父子级相关，和定位无关，父级不加对应事件属性，冒泡继续向上冒。

​取消事件冒泡：function(ev){var ent=event||ev //ev是形参ent.cancelBubble=true; //取消事件冒泡 }

​放大镜

​布局问题：事件要给到盒子上面，不要单独放到图片上,JS操作图片卡顿问题:滤镜挡住了图片

​限制条件:mousemove

​显示:mouseover/mouseout

​比例: 滤镜.style.left/小图移动距离=大图片.style.left/大图移动距离

​滤镜与右大图盒子要成比例:100*100 300*300

​外层盒子定位问题:position:relative;left:100px;top:100px;要减去定位盒子距离左边的距离

​offsetLeft:获取相对于定位元素左边的距离,clientX获取的是相对于浏览器窗口的X坐标

​键盘事件，拖拽

​键盘事件：onkeydown，onkeyup

​键盘事件对象：evt.keycode 返回键码

​引入事件对象

​var ent=event||ev; //keyCode 键码 console.log(ent.keyCode); //返回按键数字 //37 左方向键 38 上方向键 39 右方向键 40 下方向键

​注意按键盒子消失问题

odiv.offsetTop 最好每次从原来位置获取,不要是负数，会出现隐藏消失情况odiv.style.top=odiv.offsetTop-10+'px';

​拖拽三个事件

​三个事件:onmousedown,onmousemove,onmouseup

​拖拽移动距离

​onmousedown：记录鼠标相对于盒子的位置onmousemove:新的鼠标位置-按下时记录鼠标位置

​去除默认事件

​return false

​默认事件

​浏览器自动帮你做的一些行为

​去除默认事件：在事件函数最后加 return false;

​事件绑定

​事件绑定:给同一个对象绑定多个事件用到,之前的方法后面一个事件会覆盖前面事件

​对象.addEventListener(事件名去掉on,function(){}/函数名,false/true); //for 高

​事件绑定 obj.attachEvent(事件,function(){}/函数名) //IE8以下

D​OM 2级事件:事件绑定方法DOM 0级事件:行内事件,obj.onclick=function(){}

​解除绑定：对象.removeEventListener(事件名,函数,false) //for 高对象.detachEvent(事件名,函数); //IE8以下

​DOM事件流：标准事件流:冒泡事件,捕获事件冒泡事件：从里往外走依次执行 -通过事件绑定里的false实现捕获事件：从外往里走依次执行 -通过事件绑定里的true实现DOM 0级事件:默认走的是冒泡事件

​this指向：1.在事件函数里用:this指当前对象2.事件函数里有定时器:this指window ,若让它指向当前对象:定时器外定义变量 var _this=this,内部用这个变量;

​鼠标滚轮

​鼠标滚轮事件:onmousewheel //IE,chrome DOMMouseScroll //FF DOM事件,要用事件绑定方法

​检测方向：var oEvent=ev||event; //注意先把传参的写前面 //IE、Chrome //alert(oEvent.wheelDelta); //下 负(-120) //上 正(120) //FF //alert(oEvent.detail); //下 正(3) //上 负(-3)

​滚轮注意问题

​1，事件 onmousewheel IE、Chrome DOMMouseScroll FF

​2，方向：wheelDelta 下-负 detail 下-正

​3，注意：DOM——addEventListener addEventListener preventDefault()

​事件委托

​加事件：循环加事件——缺点：慢、浪费资源

​事件委托——事件代理、事件委派

​事件委托：把事件委托给他爹

​事件委托的优点

​1.性能高——不用一个个加2.节约资源——不用一人一个函数3.事件只需要写一次4.可以给未来元素增加事件

​事件源：oEvent.srcElement Chrome IE系oEvent.target FF

​offset问题，懒加载

​offsetWidth问题:offsetWidth=width+padding+border

​offsetLeft问题:offsetLeft/offsetTop 找的到定位父级的距离,没有定位的话找的是元素到页面的距离包括margin值

​offsetParent 返回的是有定位元素对象(找的是定位父级)

​获取元素到窗口的距离（无论有没有定位都可以获取到）

​getBoundingClientRect: obj.getBoundingClientRect 返回矩形对象clientRect对象

​clientRect对象,内部函数几个属性

​(left/top/right/bottom/width/height)

​图片延迟(懒加载)加载：省流量(带宽)--钱

​看东西有没有加载：network

​math对象，随机数

​math对象：做一些跟数学有关运算时用到,它里面封装了很多方法

​随机颜色：注意问题:字符串与变量拼接 ''+变量名+''

​随机数：Math.random() 0<=n<1 0---1 * 100 0---100 10 + 0---1 * (100-10) 10----100 n=10 m=100 parseInt(Math.random()*(m-n)+n) 获得n-m固定范围内的随机数

​双色球：arr.push(数据) 向数组里添加数据 思路： 1.循环一定的次数，每次随机一颗球(补零) 2.丢到数组里(如果数组里没有这颗球)

​date时间对象

​1.创建 日期对象 new Date() objectget == 获取日期对象.get函数名() 返回 是数字

​图片时钟

​1.str='152345'2.str.charAt(0)

​倒计时

​1.准备两个日期对象 a nowTime new Date b targetTime new Date().setFullYear().setHours()

​2.算时间差： 目标时间的时间戳-当前时间戳

​3.差值求模，转成天小时分秒

​4.开定时器写入

​bom

​window.open(网址,目标窗口) 返回 [object Window]

​网址： http https ftp 1.html about:blank 空窗口

事件对象，放大镜

事件对象

获取事件的详细信息：鼠标位置，键盘按键

用法:obj.事件=function(ev){var ent=event||ev //ev是ent.clientX,ent.clientY //获取事件的详细信息:点击的X坐标，Y坐标}

事件冒泡：子级事件会传递给父级，冒泡和父子级相关，和定位无关，父级不加对应事件属性，冒泡继续向上冒。

取消事件冒泡：function(ev){
var ent=event||ev //ev是形参
ent.cancelBubble=true; //取消事件冒泡
}

放大镜

布局问题：事件要给到盒子上面，不要单独放到图片上,JS操作图片卡顿问题:滤镜挡住了图片

限制条件:mousemove

显示:mouseover/mouseout

比例: 滤镜.style.left/小图移动距离=大图片.style.left/大图移动距离

滤镜与右大图盒子要成比例:100100 300300

外层盒子定位问题:position:relative;left:100px;top:100px;要减去定位盒子距离左边的距离

offsetLeft:获取相对于定位元素左边的距离,clientX获取的是相对于浏览器窗口的X坐标

键盘事件，拖拽

键盘事件：onkeydown，onkeyup

键盘事件对象：evt.keycode 返回键码

引入事件对象

var ent=event||ev;
//keyCode 键码
console.log(ent.keyCode); //返回按键数字
//37 左方向键 38 上方向键 39 右方向键 40 下方向键

注意按键盒子消失问题

odiv.offsetTop 最好每次从原来位置获取,不要是负数，会出现隐藏消失情况
odiv.style.top=odiv.offsetTop-10+'px';

拖拽三个事件

三个事件:onmousedown,onmousemove,onmouseup

拖拽移动距离

onmousedown：记录鼠标相对于盒子的位置
onmousemove:新的鼠标位置-按下时记录鼠标位置

去除默认事件

return false

默认事件

浏览器自动帮你做的一些行为

去除默认事件：在事件函数最后加 return false;

事件绑定

事件绑定:给同一个对象绑定多个事件用到,之前的方法后面一个事件会覆盖前面事件

对象.addEventListener(事件名去掉on,function(){}/函数名,false/true); //for 高

事件绑定 obj.attachEvent(事件,function(){}/函数名) //IE8以下

DOM 2级事件:事件绑定方法
DOM 0级事件:行内事件,obj.onclick=function(){}

解除绑定：
对象.removeEventListener(事件名,函数,false) //for 高
对象.detachEvent(事件名,函数); //IE8以下

DOM事件流：标准事件流:冒泡事件,捕获事件
冒泡事件：从里往外走依次执行 -通过事件绑定里的false实现
捕获事件：从外往里走依次执行 -通过事件绑定里的true实现
DOM 0级事件:默认走的是冒泡事件

this指向：1.在事件函数里用:this指当前对象
2.事件函数里有定时器:this指window ,若让它指向当前对象:定时器外定义变量 var _this=this,内部用这个变量;

鼠标滚轮

鼠标滚轮事件:onmousewheel //IE,chrome
DOMMouseScroll //FF DOM事件,要用事件绑定方法

检测方向：var oEvent=ev||event; //注意先把传参的写前面
//IE、Chrome
//alert(oEvent.wheelDelta);
//下负(-120)
//上正(120)

//FF
//alert(oEvent.detail);
//下正(3)
//上负(-3)

滚轮注意问题

1，事件
onmousewheel IE、Chrome
DOMMouseScroll FF

2，方向：wheelDelta 下-负
detail 下-正

3，注意：DOM——addEventListener
addEventListener preventDefault()

事件委托

加事件：循环加事件——缺点：慢、浪费资源

事件委托——事件代理、事件委派

事件委托：把事件委托给他爹

事件委托的优点

1.性能高——不用一个个加
2.节约资源——不用一人一个函数
3.事件只需要写一次
4.可以给未来元素增加事件

事件源：
oEvent.srcElement Chrome IE系
oEvent.target FF

offset问题，懒加载

offsetWidth问题:
offsetWidth=width+padding+border

offsetLeft问题:
offsetLeft/offsetTop 找的到定位父级的距离,没有定位的话找的是元素到页面的距离包括margin值

offsetParent 返回的是有定位元素对象(找的是定位父级)

获取元素到窗口的距离（无论有没有定位都可以获取到）

getBoundingClientRect:
obj.getBoundingClientRect 返回矩形对象clientRect对象

clientRect对象,内部函数几个属性

(left/top/right/bottom/width/height)

图片延迟(懒加载)加载：省流量(带宽)--钱

看东西有没有加载：network

math对象，随机数

math对象：做一些跟数学有关运算时用到,它里面封装了很多方法

随机颜色：注意问题:字符串与变量拼接 ''+变量名+''

随机数：Math.random() 0<=n<1
0---1 * 100 0---100
10 + 0---1 * (100-10) 10----100
n=10
m=100
parseInt(Math.random()*(m-n)+n) 获得n-m固定范围内的随机数

双色球：arr.push(数据) 向数组里添加数据
思路：
1.循环一定的次数，每次随机一颗球(补零)
2.丢到数组里(如果数组里没有这颗球)

date时间对象

1.创建
日期对象 new Date() object
get == 获取
日期对象.get函数名() 返回是数字

图片时钟

1.str='152345'
2.str.charAt(0)

倒计时

1.准备两个日期对象
a nowTime new Date
b targetTime new Date().setFullYear().setHours()

2.算时间差：
目标时间的时间戳-当前时间戳

3.差值求模，转成天小时分秒

4.开定时器写入

bom

window.open(网址,目标窗口) 返回 [object Window]

网址：
http
https
ftp
1.html
about:blank 空窗口

目标窗口：
_blank
_self
_top
_parent
_target