Javascript BOM DOM编程

#BOM 和 DOM
#####浏览器内核：
①渲染引擎：webkit;  
② JS引擎：V8引擎（谷歌）
DOM浏览器：对DOM的支持高于IE（包括谷歌）。
###怎么在浏览器里面写JS代码:
    方法1：外联JS
    <script src="路径 "></script>   可以引多个JS，从上往下指行。

    方法2：内部书写
    <script> 
    let a = 100;       // 这个a是全局变量，整个网页都可以通用。
    consle.log(a);        // 100
    </script> 

    方法3：内嵌  内嵌作用域全局尽量避免
    <a  herf = " javasript:console.log(内嵌JS) " 执行JS</a>      console.log(内嵌JS)它是一个代码块。
    <input type = "button" value onclick = "console.log('click')">   console.log('click') 它是一个代码块。
    

    <script> 
     window.onload = function (){            //后面是的会覆盖前面的
     let a = 100;                   // 局部的a ,定义在函数里的变量就是局部的。
     console.log("a",a)
    }
    </script>

    window.addEventListener  ("load",function(){});    不会覆盖前面的。
    


##BOM
    window代表一个窗口
    window 对象有哪些属性和方法：
    BOM ：Bowser(浏览器) Object（对象） Moder （模式）
    属性：
    innerWidth    innerheight       // 可视区域的宽度
    outerWidth   outerHeight)      //浏览器的宽和高
    
     window.screenX      window.screenY    // screenX  窗口相当于屏幕的X轴 ；screenY窗口相当于屏幕的Y轴   类似雪碧图  

    （window里面的属性：就是window.属性）



    方法：alert("警告")；  如果出现框，如果不关掉，会阻止代码，下面的代码不会执行。
    let  flag = confirm ("确认")；
        console.log(flag);
    let value = prompt("请输入：")
     console.log(value);

    时间函数 ：异步 一般用在动画中
    1.    setTimeout()给定一个时间，等时间时间到了之后，执行且执行一次这个方法。
    例：let timeId = setTimeout ( function(){
    console.log("timeout");
    },200);
    cleartimeout(timeoutId);

    2. setInterval()   每隔多长时间后，不断的间隔执行方法。
    let  count  =0;
    let intervalId = setInterval( function(){
        count++;
        if(count>5){
        clearInterval(inderId)    //用来结束循环
        }
        console.log("interval",count);
    }


    队例：先进先出
    open（""）  打开一个新窗口 ，里面写地址，弹出一个标签页。
    open（"地址","name","width=0,height=30" ）; 子页面的宽高

    Screen 对象属性
    screen.availWidth      screen.availHeight    
        //电脑屏幕的宽度和高度  ，高度不加上下边的任务栏  。"screen.avail:",  可以不写它只是在终端显示出来，方便我们知道它是那个对象的属性。
    screen.width    screen.height         /电脑屏幕的总宽度和总高度   。高度要加上下边的任务栏

    location 对象属性 （通过location可以访问网站的任何一部分）
    location.herf = "http:"   ";   跳转到指定页面

    http://www.baidu.com:80/index.com/#xx?name:xxx





#DOM
##docunment(文档)Object（对象）Moder（模式）
DOM(文档树) ： html根节点  {head , body是子节点}(head , body里面的元素是子节点)   

                            
##点击事件  格式： n.onclick= function(){ }
 


DOM节点分三种：
                
                                 nodeType       nodeName       nodeValue

                1.  元素节点 :       1          元素名           null
                2.  属性节点 ：      2          属性名           属性值
                3.  文本节点：       3          #text           文本内容    例：<h1> 标题 <h1>
##获取节点的方法：（方法要调用）
1.  getElementById("")；   (获取节点)
2.  getElementsByTagName("元素名")；    根据元素获取多个节点（集合、数组）
3.  getElementsByName("元素名")；    根据内容属性获取
4.  doucument.querySelector("css选择器")；       根据css的选择器获取一个节点 （只得一个，第一个节点）
5.  doucument.querySelectorAll("css选择器")；       根据css的选择器获取全部节点
##属性用来遍历节点：（.属性）
1. firstChild第一个节点
2. lastChild 最后一个节点
3. nextSibing 下一个节点（兄弟查找）
4. previousSibing上一个节点（兄弟查找）
5. parentNale 父节点
6. childNodes所有的节点
##创建节点
创建元素节点：createElement("")；
创建属性节点：createAttribute("")；   也可以直接用 格式：newNode.id = " ";
创建文本节点：createTextNode("")；
##DOM 的方法：对整个节点的增改查删  进行操作。
添加：n.appendChild( )； - 添加新的子节点（元素）   （）括号里写新节点
插入父节点：n.insertBefore(新节点，旧节点 )；   新节点会插入到旧节点的前面
删除：n.removeChild()；  删除子节点（元素）  例：(n.lastChild)从最后一个开始删除
修改节点（替换节点）：  n.replaceChild();   括号里面填(newnode新节点，n.firstChild.nexSibing旧节点)；首先要先创建一个新的节点。
##innerHTML属性  ：可以获取或改变任意HTML元素，包括（HTML和BODY）。（把获取的内容以字符串的形式返回） input id = "innerHTMLBth" type= "button" value

innerHTMLBth.onclick = function (){

      .innerHTML = "<p>新增元素</p>"；     替换之前的元素

      .innerHTML += "<p>新增元素</p>" ；   添加在之前元素的后面

      .innerHTML = "<p>新增元素</p>" +    .innerHTML；     添加在之前元素的前面
}

.innerHTML设置的内容会被浏览器解析，而innerText的内容不会被解析，原样的显示出来。

###IE浏览器的限制：
1.    不允许tr,td通过innerHTML添加到table 里面
2.    不允许option通过innerHTML添加到select里面。 

##事件：在某一刻发生的事情
##事件流：在一个标签上触发了一个事件后，沿着这个方向进行传播

###事件流的分类：

1.    事件冒泡 ：（IE仅支持冒泡） 从里到外；
2.    事件捕获：（网景浏览器仅支持）从外到里
3.    DOM事件流：（及支持冒泡也支持捕获）。
默认情况下浏览器都是事件冒泡

###DOM处理事件的方法：
1. 内嵌事件 直接在标签上绑定事件 （尽量避免，它在全局找）
2. DOM0 传统处理事件：
     优点：兼容浏览器，以on开头后加属性名，所有的字母都是小写。
     缺点：只能为一个事件添加一个处理方法。
3. DOM2  优点：为一个事件，添加多个处理方法。
        缺点：IE不兼容
       IE的处理方法：
###DOM2 的增加删除
    增加：.addEventListener("事件"，function){    }
    删除：.removeEventListener("事件"，function){   }
###IE浏览器的增加删除
    增加：.addEventListener("事件"，show);
    删除：.removeEventListener("事件"，show);
###DOM0 的增加删除
    增加：.事件 = function (){}
    删除：.事件=null;
###事件处理的类型：
    鼠标 常用的：onclick点击    ondbliclick双击    oncontextmenu右键
    键盘： onkeydown 按下    onkeyup 松开  onkeypress 按下松开
###事件对象：Event 每一个事件被触发后，就会产生一个对象，用形参来接收这个事件。
    IE :    e= window.event || e
    DOM  :   e.
    
    clientX    clientY  鼠标顶部到可视区域的距离
    screenX    screenY   电脑屏幕区域的距离   IE用e.screenX  e.screenY
    pageY     pageX     鼠标顶部到body顶部的距离

###阻止事件的冒泡：
    IE方法：cansel Bubble = true
    DOM浏览器方法： stopProgation()方法    一般用于做复杂的动画

###阻止事件的默认行为：不是每一个事件都有默认行为
    IE：returnValue = false
    DOOM : preventDafault ()方法
###事件委托：适用于同时为很多标签绑定事件。 （子元素不处理，委托父元素统一处理）
怎么确定是子元素：
event.target.parentNode.

##消除闭包
产生闭包的两个条件：1.一个函数的内部函数在访问外部变量
                2.在此函数外部引用了这个内部函数
```js
let arr = [1,2,3,4,5]
for(var i = 0; i < arr.length; i++){
    (function(index){
        lis[index].onclick = function(){
            console.log(index);
        }
    })(i)
    }
//解决办法就是：使用立即调用函数，传形参，不让它访问外部变量
``` 



###获取表单：
1. DOM方法 document.getElementById("");

BOM方法：
2. document.forms[0];              // [下标]
3.  document.forms[""];         // ["ID名"] 
  document.forms["f"+"m"];            //["f"+"m"]字符串拼接，
4.  document.name(名)


###获取表单域对象/表单字段：
1. let a = document.getElementById("a");
2. fm(form的Id名).elements(表单元素)    // 例：let a = fm.elements[0]
3. let a = fm.elements[“”]；  //   [“Id名”]
4. let a = fm.a          //    .id或者  . name 都可以
5. let a = fm[""]      // ["ID名"] 
6. let a = fm[0]      //   [下标]


form表单可以用标签提交，也可以用JS方法提交
<input type="button">这是一个普通按钮，不具备提交功能，但是用JS方法也可以具备提交功能
<input type="rest">    返回初始状态（默认状态）
<input type="image" src = "地址">   具有提交功能
表单名.onsubmit = function （）{}     当利用标签提交时会触发onsubmit事件，如果用JS提交就不会触发onsubmit事件。重置标签和重置方法都会触发onrest.
###特殊属性  ：
多选     multipe    
关闭，禁用     disabled       无法提交到服务器  ，但是可以用JS（false,true）方法可以取消禁用，但是标签不可以取消
只读    readlyonly     只有输入框有readlyonly只读，单行和多行也可以有
选中   checked
添加元素：父级点. Option.add(Ls);   //(Ls)增加的内容
获取选中的元素： 父级点.onchange = function (){}  改变事件      [父级点. selectedIndex].innerHTML
删除元素：父级点.ption.remove();   删除一个
        父级点.ptions.length = 0;  清空
获取焦点事件： .onfocus  = function (){}
离开/失去焦点事件：  .onblur = function (){}           改变了值，并且离开才会触发焦点事件
              .oninput 只要改变了值以后，立即触发的事件。

###HTML5设置的JS方法
1. 视频
```js
<video>
    <source src = "" type = "video/mp4">
</video>
```
ontimeupdate   当时间改变时触发      //音频/视频的位置发生改变
ID名.play()    播放当前音频/视频
ID名.pause()       暂停 当前音频/视频  
controls   特殊属性   控制

2. 音频

3. canvas 标签
```html
        <canvas> </canvas>     //设置宽度，高度引用属性，并且不加px
        例:<canvas width = "800" height = "400"  id = "cs">     
       
```
```js
    let cs = document.getelementById("cs");/获取画板
    let ctx = cs.getContext("2d");      //获取画笔
    ctx.fillRect(0,0,200,50)//     矩型，有颜色填充
    ctx.fillStyle = "red"//     变换画笔颜色（默认为黑色）
    ctx.strokeStyle = "blue"无颜色填充
    ctx.lineCap ()设置直线
    ctx.arc(圆心X坐标，圆心Y坐标，半径，起始角位置，结束角 ，true/false(可选写))
      例：ctx.arc  （ 100，75， 50，2*Math.PI）;    //画圆  如果半圆就把（2*Math.PI改成Math.PI） ；如果要逆时针的半圆就在第六个属性写true  ,顺时针 false） 
    
    ctx.beginPath();        //开始新的路径
    ctx.lineWidth = 20;
    ctx.moveTo(20,20);    //起始坐标（从那个地方开始   。初始化）
    ctx.lineTo(20,150);    //结束坐标  （要移动到的那个位置）
    ctx.closePath();    //关闭路径
```

4. 引入图片

```js
    let image = new Image();
    image.src = "images/地址/路径";
    image.onload = function(){      //等加载完之后
        ctx.rotate(Math.PI);
        ctx.drawImage(image,-125,-125,250,250)
    }
```

如果做旋转之类的动画：
先  .save(),    //保存  状态；
完了再   .restore（）    //恢复；
 .translate（X,Y）    //改变原点位置；



###HTML5 内联SVG   全称（SVG可伸缩矢量图形）
1. 位图：有一个个的像素块构成。 
优点：图片色彩丰富
缺点：如果图片不等比例缩放会失真。
2. 矢量图：通过一系列的算法算出来的。 （它不是html5 的规范，它自己本身就是一个规范）
优点：不会失真，可伸缩。可通过编辑器来创建和修改。
缺点：色彩不够丰富。
3. SVG 优点:
可伸缩矢量图形
用于定义用于网络的基于矢量的图形
使用XML格式定义图形
SVG是万维网的标准
SVG可被搜索、索引
4. canvas 和SVG的区别：

Canvas  ：

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘



SVG:

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用


SVG教程：
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径
```js
  例：<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"      //画圆
  stroke-width="2" fill="red" />
</svg>
```




CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径
```js
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"          //椭圆
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
```

元素可以安排任何分小组与<tspan> 元素的数量。每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素
//几行文本共同组成的
```js
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>         
  </text>
</svg>

```

###HTML的拖拽
draggable = "true"   允许拖拽 ，标签跟着鼠标移动
拖放事件：
ondragstart   开始
ondragend  结束
ondrag
要有拖放目标 ：
 ondragenter 进入拖放目标 ，有响应事件（触发）
 ondragleave  离开时触发
ondragover  移动，一直在触发
ondrop 会受到干扰，如果让ondrop触发，首先要阻止 ondragover的默认行为，放开时才会触发。
e.preventDefault()  阻止默认行为。

###HTML5 web存储
cookie：服务器会发给浏览器一些简短的东西 （例登陆）   不属于HTML5
容量小 ： 4KB
安全性 ：容易被截获

HTML5开始的，存放在浏览器里面的对象。
sessionStorage 和 localStorage   本地存储，不会提交给浏览器

区别：
localStorage  存放时间长 除非自己删除，否则一直存放   用法一样

sessionStorage   打开浏览器开始，关闭浏览器结束。存放范围短，用法一样

方法: 保存数据   两者存进去的都是字符串，不是字符串会转成字符串。

JOSN.stringify();存入的是对象，先转成字符串 

JOSN.parse();取 还原成数组


属性：
保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);


#jQuery

jquery:函数库，简化开发
特点：
1. 简单，小巧
2. 兼容所有的浏览器
 
jquery版本：
      1.X版本 任兼容IE8以下的版本
      3.X 以 2.X开始完全放弃IE9以下的版本
###一 引入jquery
jquery的用法：
先得到jquery对象:jquery("选择器")  ; 在jquery中 $ = jquery ，所以可以写成$("选择器")   例：$("#d1")
###二 jquery对象如何转化成原生
方法1：.get        例： $("选择器").get(0).innerHTML ="hello";   (0)下标
方法2. []    例: $("#d1")[0].innerHTMl = "hello";
###三 原生对象转化成jquery对象
$()  
   例：let d1 = document.getElementById("d1");
    $(d1).html("hello");
###四 jquery对象里循环对象的方法  (遍历出来的都是数组，需要转换成jquery)
 1.  for
 2.   for of
 3.   map
 4.   reduce
 5.   for in
 6.   forEach
 7.   filter
 8.   jquery each
 ###五jquery选择器
例：$("#d1").css("color","red");

atter一般用做普通属性的设置
prop一般用作特殊属性的设置
toggleClass:切换
###文档处理：
#####添加节点:
添加
方法1 父级. append 子级点   添加在父级的后面   例：$("选择器")（"<p>增加节点</p>"）
方法2 子级 . appendTo 父级    添加在父级的后面    例：$("<p>增加节点</p>") . appendTo("选择器")
添加在前面   ：$("选择器") . prepend （"增加的节点"）
加到对应的选择器后面： $("选择器").before  （"增加的节点"）
加到对应的选择器前面： $("选择器"). after  （"增加的节点"）

#####包裹节点：
$("选择器").mrap("<div></div>")   向每个选择器加入父节点
$("选择器").mrapAll("<div></div>")   向整个选择器加入父节点
$("选择器").mrapInner("<div></div>")   向每个选择器内容加入一个节点

#####修改/替换节点：
方法1：$("选择器").replaceWidth("节点")
方法2：$("节点").replaceWidth("选择器")

#####删除节点;
$("选择器").remove()     清空所有的内容，包括事件，标签，内容 //$("选择器")被删除
$("选择器").detach()  
$("选择器").empty()    还剩一个标签

###操作CSS
一个属性的书写格式：$("选择器").css(backgroundColor:red);
多个属性的:
$("选择器").css ({
backgroundColor:red,
border:1px solid red

})
###筛选
prev() 用于筛选前一个同辈元素
prevAll()查找当前元素之前的所有同辈元素

###其他：
$("选择器").offset.left/top     ：相对可视区域 （有2个属性left/top ）

("选择器").position :返回相对于父元素

width  height   设置的宽/高
innerWidth   innerHeihgt     还包含padding 和border
outerWidth    outerHeight        还包含padding 和border和 margin

###语法糖：on("事件类型"，回调函数)   可以解决所有事件
格式：$("选择器"). on ("事件类型"，function(){



})
 
事件委托点击事件：$("父级").delegate("指定哪一个子元素做委托"，"事件"，function(){

})

###面试常问的;
on  可以解决所有事件
bind       现在几乎不用了，转向on
live      用来做委托事件，过时了
delegate     用来做委托事件，现在还在用

怎么在浏览器里写jquery代码：
$(window).on("load",function(){

});  可以添加多个事件。DOM加载完成，等整个页面加载完成后执行   尽量使用这个

而之前的window.oload = function(){}   只可以添加一个事件


$(document).ready(function(){
});    页面加载完成，等DOM加载完成后执行。  可简写 （语法糖）：$(function(){  })  这两个如果一起写，他们的执行顺序是丛书到下的

###链式操作
  例：$("选择器").css({
            width:100,
            height:100,
            border：“1px  solid  red ”
    }).atter("title","标题").html("<p>段落</p>")     //  1. 链式操作的写法：不换行的写法
    2.普通操作的写法： $("").atter("name","id")
    3.或：let $d1 = $("")     //他也是链式操作的写法，换行的写法。把选择器先交给一个变                      $d1.css()                             量，而这个变量名我们通常给它前面加一个$.
    （在筛选的方法中会破坏原有链条  .find    .end回到最近一次破坏性的操作）       

###jquery动画
show:显示隐藏的匹配元素
hide:隐藏显示的元素
toggle:用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideDown:从下到上
slideUp:从上到下
slideToggle:

###animate 第一个参数是JOSN，第二个参数是时间   （指定一个最终样式，自动补充）
例：$("").animate({
    maginLeft:500,   //第一个参数仅限于数字（padding,top...）
    opcity:0,
    width:0,
    color:red

   },2000);
    $("").animate({


   },2000,function(){
    $("").stop(true ,false);
    }     //停止
   );

###停止动画：
.finsh():停止当前正在运行的动画，删除所有排队的动画，完成最终的状态。
.stop(参数1，参数2如果不写默认false)
.stop（true,true）  //来到当前状态
.stop（false,false）   //来到当前动画，执行下一个动画
.stop（true,false）     //停在原地
.stop（false,true）   //直接到当前动画的最终状态，执行下一个动画
###性能的优化：
1. 应该总是从ID选择器开始继承   例;$("")
2. 尽量在class前面加元素名    例：（"h1.tt"）
3. 尽量使用ID选择器来替代class选择器
4. 在适当的时候使用jquery的链式操作
5. 将jquery对象缓存起来使用，赋值给一个变量，变量名前加$

例：  let $obj = $("");
      $obj.css();
      $obj.html();

例： let $ps = $("");
    for (let i = 0;i<$ps.length;i++){
    $ps.eq(i).html();
   }
6. 限制直接操作DOM的次数（循环的时候不要append,先用字符串拼装，然后再一次型添加到节点上）。
7. 尽量使用事件委托
8. JS代码尽量推迟到window.onload事件中进行
9. 使用事件委托时用delegate来替代live
10. 能用子代选择器就不用后代选择器。