【嘉兴东臣php】JS BOM和DOM学习周总结

一.集合

打印数组的两种方法：

（未知长度）   var list= [2,4,6,8,10];
    for(var i=0;i<list.length;i++){
        console.log(list[i]); 

    }
（超出数组长度，数组值为undefined）   var list= [2,4,6,8,10];
    for(var i=0;i<1000;i++){
        if(list[i]==undefined)
         break;
         console.log(list[i]);
   }

  var list= [4,6,8,10,123,321,22222];

  var list2=[1,32,23,222,333];    
 倒序排序 console.log(list.sort(function(a,b){return b-a;}));
 升序排序 console.log(list.sort(function(a,b){return a-b;}));

join join()方法将数组中的全部元素转换成字符串，而后链接起来，join()默认是使用“,”做为分隔符，固然也能够在方法中指定分隔符

concat链接两个数组 【注意】返回的是合并后的数组

push在数组尾部加入数值，【注意】返回的是字符串的长度

pop删除数组尾部的一个数  【注意】返回的是删除的字符串

splice删除数组中某个位置的数1为初始位置即元素下标，3为删除个数 【注意】返回的是删除的字符串
console.log(list.splice(1,3));

slice选出某一段的数组 【注意】返回的是选出的的字符串，1为起始位置即元素下标，4为末位置但不选出这个下标所表示的数。

数组套字典，字典套数组

   var dic={"name":"杰克",
             "sex":"男",
              "date":[{"dat":"1994","dae":"1996"},
                       {"da":"2000","de":"2002" }]}
              console.log(dic["date"][0]["dae"])

二.节点

每个HTML都有节点，节点就是元素
整个文档是一个文档节点
每一个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每个 XML 属性是一个属性节点
注释属于注释节点

IE下会自动识别换行，空格等特殊字符。FF,Safri等下不会自动识别，也就是会把换行。空格看成一个子节点。

firstElementChild和firstChild的区别就是会不会识别特殊字符。

若是要找节点里的某个节点的abc属性【注意：在这里换行空格属于一个节点，简单理解就是空节点】：document.getElementById("dd").childNodes[3].childNodes[2].getAttribute("abc");

找id为dd节点里的第一个节点：   document.getElementById("dd").firstElementChild；
找id为dd节点里的最后一个节点：   document.getElementById("dd").lastElementChild；
找id为wei节点的父节点：               document.getElementById("wei").parentNode;

返回id的全部属性：document.getElementById("id").attributes【注意】返回值为数组。
childNodes[i] i就是这个父辈节点里第i个子节点。 【注意：在这里换行空格属于一个节点，简单理解就是空节点】。
console.log(document.getElementById("dd").childNodes[3].childNodes[4].getAttribute("abc"));

寻找标签节点的全部属性

<div class="123" id="wode" abv="356"></div>
<div></div>
<div></div>

 a=document.getElementById("wode").attributes;
       console.log(a.abv)

三.BOM 计时器

<input type="text" id="jishi"value="0" />

   var a=setInterval(loading,100)
        function loading(){
           c=document.getElementById("jishi").value
           c=parseInt(c)+1
          document.getElementById("jishi").value=c    
          if(c==100)
          clearInterval(a)
        }
        
      setTimeout(abd,10000)
     function abd(){
        document.getElementById("jishi").value="加载完成"
     } 

BOM：浏览器结构模型
    一、history :.go(-1);
    二、location :.href();
    三、navigator :.appName();
    四、screen：width , height

this对象指的是window或者调用该函数的对象。

四.DOM事件

onclick 点击事件

onblur  失焦事件
onfocus 聚焦事件
onkeyup 键盘释放事件
onkeydown 键盘按下事件
onchange 改变值的失焦事件
onsubmit 表单提交事件
onreset 表单重置事件

onmouseover 鼠标移入事件

onmousemove 鼠标移动事件

两种事件的不一样写法：（还有一种直接写在标签里）
document.getElementById.onclick = function(){
}
document.getElementById.addEventListener ( "click", function(){
});

两种获取控件值的方法：
getElementById("") 经过ID获取 返回的是元素
getElementsByName("") 经过Name获取 返回的是数组

removeEventListener 移除一个事件

addEventListener用法，代替onclick等事件
 <button id="btn">提交</button>
 document.getElementById("btn");
      addEventListener("click",function(){alert("漂亮");});

若要移除某个控件的函数，先获取这个控件节点，再移除
 <button id="listen">提交</button>
 <button id="remove">提交</button>

    document.getElementById("listen").addEventListener("click",clic);
  function clic(){
         alert("123123123123123123123");
   }
 document.getElementById("remove").addEventListener("click",function(){
        document.getElementById("listen").
        removeEventListener("click",clic);
   });

表单：

【注意】：若是须要提交表单的话，要加入属性name，否则后台接受不到。

<form> 用于提交表单内输入的信息。
 action: URL地址
method：GET  POST（POST通常用于传输数据，GET通常用于跳转页面 ）
GET：
  URL为明文 也就是显示在地址栏里
  相对不安全
  长度是有必定的限制的。
    
POST：
  URL为密文
  相对安全
  长度相对没有限制
  name：
  enctype：支持文件上传

五.函数

onclick="return subForm();" return的做用一般为，要求该按钮优先执行这个函数。
return false；阻止程序继续往下执行。

函数有两种定义写法：

1.   function abc(){}
   

2. var abc=fiunction(){}
   

【注意】1当出现.同名的函数时，若是调用在后，第二种的函数优先级更高。2.第二种若调用在前，则会找不到该函数。

变量

 1.若是变量没有用var定义，则该变量为全局变量，全局变量能够从函数中被解析出来，可是赋值只能经过函数调用运行后才能产生做用。

2.函数有无形参很关键，若是有形参，那么函数里面和形参同名的变量将永远做用不到函数外。

3.JS里没有块做用域，只有函数做用域，全局的变量，在局部是可使用，可是局部的变量，全局不可使用。

4.就近原则。特指在函数做用域内，若是做用域内有被定义，那么就取做用域内的变量，若是没有，则去外层找。

5.在JS中，若是多个形参都相同的状况，打印的时候通常是输出最后一个参数的值

六.总结

   又是开心的一周结束了。经过两周的学习我发现时间过的真的好快，感受比平时玩游戏都要快。这一周的知识点较上一周相比略少，不过知识点虽少，却都是比较考验人思惟逻辑的东西。第一周比如在学文科的知识，第二周略偏向于理科方面。本身也很喜欢这样的学习氛围。这周知识点整体来讲吸取效果仍是不错的。不会的多问，多去百度，多给本身找问题，多想办法怎么解决问题。我想这样的学习效率才能够更高。固然本身也有不少的不足之处。好比没有失眠致使精神有点疲惫等等。不过我相信只要坚持下去，总会有结果的。我相信天道酬勤。