#js学习总结
js语法要点：js的变量是区分大小写的
_调试js的语法 console.log(变量或对象或数组)_ 针对有返回值
js变量（全局变量与局部变量）

全局变量：
1，在函数外部设置的变量是全局变量
2，在函数内部不用var定义的变量，需要函数调用后才能起作用

局部变量
1，在js函数里面用var声明的变量


## js函数
js函数是有预加载，允许先调用函数，再声明函数  (实际的情况是把函数的声明放入内存，然后再调用函数，这是函数的调用）

_函数先调用后声明的条件，全部代码在一个标记里面，什么叫一个标记就是<scipt></script>，每个标记是独立编译，解释，运行的_
eg:
<script>
    getMyname(); //可以先调用，再声明，必须是要在一个标记体内，分开则不行。
    function getMyname(){
        alert('我的名字叫wilson');
    }    
</script>

### 匿名函数(没有预加载，必须先声明，后调用)
_var 函数名 = function (){ };_

关键词 arguments, 接受所有的实参，数组形式, 但它并不是数组
eg:
function demo(){
     console.log(arguments);
     // arguments[0] = red,  arguments[1]=blue,  argument = green
}
demo('red','blue','green');

匿名函数传参
var a =  function(x,y){
    return x+y;
};

a(5,6) // 11 调用方法

### callee代表当前函数的引用，类似于递归
eg:
function demo(){
    arguments.callee();  //调用本函数
}
demo();

### 函数的返回值 使用return
js函数可以返回任意类型的值（数值，字符串，布尔，对象，nuLL）
return关键字还可以作为直接结束函数的执行
javascript里面一切都是对象，函数也是对象，函数内部还可以返回一个函数

### 函数的调用
传统方式调用 //函数名();

匿名函数自调用
格式： (function(形参){})(参数) 
eg:
(function(x){
    console.log(x);
})('万邦')  //结出的结果是万邦

### 神奇的eval用法
根据上下文环境，将内部的表达式或参数运行起来
eval(alert("123"))； //弹出框，123
eval内部参数要求符合语法规则，如果有变量，刚要求先声明才能使用。

## DOM编辑，各个节点都是对象
文档对象模型，通过对节点的操作
在php里面，dom主要是与xml结合使用
在js里面，dom主要是与html结合使用

dom在html里面就是能看到的页面区域
js为了更好的操作DOM，把html标签内容划分了成了很多节点，划分如下：
1，文档节点，document
2，元素节点 -》 主要是指所有的html标签
3，文本节点 -》 主要是文本内容
4，属性节点 -》 主要是指标签的相关属性
5，注释节点

### 如何获得元素节点
1，通过id来获取元素节点，唯一性，getElementByid('id属性值')；//直接返回节点值

2，通过标签名称来获取元素节点，getElementsByTagName('tag标签名称') //以数组或集合的形式返回
可以通过这种方式来获取节点元素
eg:
 var inputs = getElementsTagName('input');
 console.log(inputs[0])//用来输出节点元素，还可以用这种方式来输出   console.log(inputs.item(0));
 
 3,通过标签name属性值来获取元素节点，通常用在表单里面。
 getElementsByName('name属性值') //也是以数组或集合的方式返回
 eg: <input type="text" name="password">
 var inputs = getElementsByname('password')；
 console.log(inputs.item(0));

### 文本节点的获取
通过子节点的方式来获取 用firstChild或者lastChild
<div>this is text</div>
eg:
var dv = getElementsByTagName('div')[0]; //获取div这个元素节点
_通过 dv.firstChild 来获取文本节点_
console.log(dv.firstChild); // <TextNode textContent = "this is text">
console.log(dv.firstChild.wholeText); // this is test (文本信息）

### 兄弟节点 (在firefox, chrome, safari,opera会给空白节点，ie中不考虑空白节点)
nextSibling   //获得下一个兄弟节点
previousSibling  //获得上一个兄弟节点
childNodes  //获取父节点中所有子节点

用法：  节点元素.兄弟节点 eg dv.nextSibling

###  父节点
parentNode  eg: dv.prarentNode 

## 属性值的操作
何为属性，就是指一个标签内的所有选项
eg：<input **type='' name='' class='' value=''**>加粗的这部分是属性
eg: <a **href='http://www.xingbell.com' addr='xingbell' target=''**></a> 加粗的这部分是属性

获取属性值：1，节点.属性名称；（注意：只要操作W3C规定的属性）
          2，节点.getAttribute （规定和自定义的都可以设置）
**
    eg: 
    var demo = getElementsByTagName('a')[0];
    console.log(demo.href); // http://www.xingbell.com
    console.log(demo.getAttribute('addr'));  //xingbell
**
注意： 自定义属性的获取。

设置属性值：1, 节点.属性名称 = 值；（注意：只要操作W3C规定的属性）
          2, 节点.setAttribute('属性','值')；  （规定和自定义的都可以设置）
          
何为自定义的属性(自己可以在任何标签内自定义属性）
eg: <a href="" **Myattr='bannerlink'**></a>

**
    eg: 
    var demo = getElementsByTagName('a')[1];
    console.log(demo.href); // http://www.xingbell.com;
    demo.addr = 'wanbong';
    demo.setAttribute('addr','bong');
**
注意：自定义属性值的设置。

### 获取属性节点的全部属性,通常很少使用 (节点.attributes)
<input type='text' name='username' class='red' value='red' id='username'>
**
    eg:
    var its = getElementById('username');
    var attrs = its.attributes;
    console.log(attrs.value); // value = 'red'
**

#### 节点的创建和追加
1，创建元素节点：
documents.creatElement('tag标签名称');

2,创建文本节点:
documents.creatTextNode('文本内容');
 
**属性的设置： 
节点.setAttribute('名称'，'值')；**

节点的追加：
父节点.appendChild(子节点)；
父节点.insertBefore(新节点，旧节点);  //将新节点放到旧节点的前面
父节点.replaceChild(新节点，旧节点);  //新节点替换掉旧节点

#### 节点复制
节点.cloneNode(true/false); 
传递参数
true: 深层复制，节点和子节点全部复制
false： 浅层复制，节点复制，子节点没复制

#### 节点删除
父节点.removeChild(子节点); 

## DOM对css的操作
1，获取css样式
元素节点.style.css样式名称 eg:  divnode.style.width;

2,设置css样式（有则修改，没有则添加）
元素节点.style.css样式名称 = '值';  eg: divnode.style.height = '100px';

注意事项：
1,DOM只能操作行内样式（css样式分为：行内样式，内部样式，外部样式）
行内样式eg:  <div style="width:100xp; backgroud-color:red;"></div>

**2,操作复合样式属性的时候，要去掉中杠，后面首字母要大写**
eg: div.style.backgroudColor = 'red';

# 事件操作
1，什么是事件
就是指能过鼠标，键盘对页面上所做的动作就是事件
**
事件一旦发生需要有事件处理，该事件处理称为『事件驱动』，事件驱动通常由函数担任，如下： onclick, onsubmit, onmouseover, onmouseout, onkeyup, onkeydown, 
onblur, onfocus
**
dom1级的事件方式（最基础的），有4种方式
1, <input type="text" name="username" onclick="demo()">
    function demo(){ this[window]} //这里this代表window
2，<input type="text" name="username" onclick="<script>this[itnode]</script>"
3, itnode.onclick = function(){this[itnode]};
4, itnode.onclick = 函数名；
   function 函数名(){this[itnode]}
   
**Dom2级事件方式 （主要学习内容）**
设置事件 ：itnode.addEventListener('事件类型'，事件处理[,事件流]);
取消事件 : itnode.removeEventListerner('事件类型'，事件处理[,事件流]);

事件类型，主流浏器器没有on， eg: click/mouserover
         IE浏览器有on， eg : onclick/onmouserover
         
e: 
<div id="demo" style="width:200px; background-color:blue;"></div>
eg:
var dv =  getElementById('demo');
**
dv.addEventListerner('click',function(){ ....}); //设置
dv.addEventListerner('click',changecolor);  //设置
**
function changecolor(){
    dv.style.backgroundColor = 'red';
}

**
dv.removeEventListerner('click',changecolor) //取消
**

事件流（true为真：捕捉型，false为假：冒泡型【默认是冒泡型】）
eg dv.addEventListerner('click',changecolor,true);

**IE浏览器（6，7，8）默认是冒泡型，没有参数。但是IE9以后的是支持捕捉型的**

事件对象的运用
function(evt){
  var evnt = evt ? evt : window.event; //获取事件对象
  console.log(evnt.clientX + '--' + evnt.clientY); //相对浏览器dom坐标
  console.log(evnt.pageX + '--' + evnt.pageY); //相对浏览器dom坐标，考虑滚动条
  console.log(evnt.screenX + '--' + evnt.screenY); //相对屏幕
}

事件对象阻止浏览器的默认动用，就是指我们通常在提交表单的时候，在验证表单字段不正确的情况下，阻止表单的提交
eg：
<form name="form" method="post" action="">
    <p>用户名： <input type="text" name="user"></p>
    <p><input type="password" name="pass"></p>
    <p><input type="text" name="mail"></p>
    <P><input type="submit" value="submit">
</form>
<script>
 var fm  = getElementsByTagName('form')[0];
 fm.addEventListerner('submit', function(Evt){
     if(fm.user.value == ''){
        alert('表单信息不正确');
        // return false; // dom1级事件阻止表单提交方式,不适合于dom2级
        evt.preventDefault(); dom2级事件阻止表单提交方式
     }
 });
</script>

###### 加载事件
我们通常在写js的时候，有时会写在html代码的最前面，当执行时，html不起用，原因是因为js需要html和css的加载环境，要等html和css先加载完后，再执行js才可以。所以我们之前写的js代码在放到最后面的原因。如果要js代码想放到最前面，则需要加载事件

最佳js加载事件的写法如下
<html>
.....
<script>
   function jz(){
      var dv = getElementByTagName('div')[0];
      dv.addElentListerner('click', function(){
        this.style.backgroundColor = 'red';
      });
   }
   window.onload = function(){
        jz();
        ...//想加载哪些事件就加载事件，这种方法灵活
   }
</script>
<body>
  <div></div>
</body>

### BOM（大致了解一下） 
主要操作dom区外的浏览器菜单等区域
平时主要是操作地址栏跳转, location  //类似 location.href=
另外操作history（历史记录）history.go()类型这样的

window对象常用方法
alert(); //弹出框
confirm（）//确认框

open();
close();
print();
setTimeout(); //定时器函数
clearTimeout();  //取消定时器函数

innerHTML :获取元素节点的内嵌内容
eg:
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("tr1").innerHTML);
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />
// 弹出的结果如下
<th>Firstname</th>
<th>Lastname</th>

###### setInterval 处理的是全局变量

##### open方法 （创建子级页面）
function newpage(){
    //window.open('显示页面的名称','页面打开方式','参数');
    window.open('11.html','_blank');
}
<input type="text" name="" value="" onclick="newpage()">

### 作用域链
先执行加载函数，然后再执行变量，注意执行的顺序，同名函数与变量是有顺序的。

外贸网站制作专家技术原创，javascript 入门总结（一），总结二将在后面推出。