JS自学记录一

自学了很多次JavaScript，有很多问题甚至是很基础的问题总是：看了就懂，过后就忘。因此打算从头再学一遍，并记录下来。本着自己对一些非常非常基础的东西有点了解了，所以这次记录不是很全面，一些非常基础的东西就不浪费时间记录了。。。。。。。。

JavaScript组成

JavaScript由三部分组成，分别为ECMAScript（核心）、DOM（文档对象模型）、BOM（浏览器对象模型）。

兼容性

ECMAScript：扮演翻译的角色，把人类的语言翻译成机器能看懂的语言，也可以叫做解释器。因此ECMAScript是整个JS的核心，几乎没有兼容性问题。
DOM：全称Document Object Model（文档对象模型），说白了就是HTML文档，用于操作HTML页面。有一些操作不兼容。
BOM：全称Browser Object Model（浏览器对象模型），用于操作浏览器。没有兼容性问题（原因：根本就是完全的不兼容）。

变量类型

JS有六种数据类型，分别为：Number（数字）、String（字符串）、Boolean（布尔）、Null（空）、Object（对象）、Undefined（未定义）

原始类型和引用类型

JS的数据类型按访问方式可以分为原始类型和引用类型。
原始类型：按值访问，原始类型中的变量保存的内容为原始值，包含的数据类型有Number、String、Boolean、Null、Undefined。
引用类型：引用类型中的变量保存的是实际值在内存中的位置指针。包含的数据类型Object（Function、Array、Date）。
typeof：用于类型检测。

//typeof示例
var a=5;
alert(typeof a);//number

类型转换

显示类型转换（强制类型转换）

parseInt():字符串转为数字（整数）
parseFloat():字符串转为数字（可转小数）

//parseInt()示例
var a = '12';
alert(parseInt(a));//12

var b = '12abc';
alert(parseInt(b));//12

var c = '12abc12';
alert(parseInt(c));//12

var d = 'abc';
alert(parseInt(d));//NaN      Not a Number:非数字

isNaN()：检测是否为NaN

var a = 'avc';
isNaN(parseInt(a));//true

var a = '3';
isNaN(parseInt(a));//false

隐式类型转换

==：先转换类型，然后比较

var a = 5;
var b = '5';
alert(a==b);//true

===：不转换类型，直接比较

var a=5;
var a='5';
alert(a===5);//false

注意：做减法是（-）也会进行隐式转换。

闭包

子函数可以使用父函数的局部变量。

运算符

%：取余运算符

var  a = 5;
alert(a%2)//1

?: :三目运算符

var a = 5;
var b = 6;
alert(a>b?a:b);//6

判断真假

真：true、非零数字、非空字符串、非空对象。
假：false、数字零、空字符串、空对象、null、undefined。

JSON

JSON和数组的区别：
1.JSON下标为一个字符串，数组下标为数字
2.数组有length属性，JSON没有length属性
for in遍历：即可以遍历数组，又可以遍历JSON对象。

//遍历数组
var a = ['a','b','c','d','e'];
for(var i in a){
	console.log(i+':'+a[i]);//0:a 1:b 2:c 3:d 4:e
}

函数传参

arguments：可变参（不定参）

//例一：求和
function num(){
	var result = 0;
	for(var i=0;i<arguments.length;i++){
		result = result + arguments[i];
	}
}
num(1,2,3,4,5);//21

数组

length：获取数组的长度（可读可写）

//读
var a = [1,2,3,4,5];
alert(a.length);//5

//写
var a = [1,2,3,4,5];
a.length = 3;
alert(a)//1,2,3

Tip:可以通过修改length值为0来清空数组。

数组方法

尾部增加和删除元素

push(新元素,…):在数组尾部添加新的元素,返回增添以后的数组长度。
pop():删除数组末尾的元素,返回删除的元素。(不接受传参)

//末尾增添新元素
var a = [1,2,3];
a.push(4,5);//5
alert(a);//1,2,3,4,5

//末尾删除元素
var a = [1,2,3,4,5];
a.pop();//5
alert(a);//1,2,3,4

在数组首部添加和删除元素

unshift(新元素,…)：在数组头部添加新元素，返回添加以后数组的长度。
shift()：删除数组头部的元素，返回被删除的元素。（不接受传参）

//头部增添新元素
var a = [1,2,3];
a.unshift(4,5);//5
alert(a);//4,5,1,2,3

//头部删除元素
var a  = [1,2,3,4];
a.shift();//1
alert(a);//2,3,4

注意：pop()、shift()、unshift()这三个方法不常用。

万能方法splice()

splice(起始位置下标，操作长度，新元素)：插入元素（操作长度为0）。
splice(起始位置下标，操作长度)：删除元素。
splice(起始位置下标，操作长度，新元素)：替换元素（操作长度非0）。
解释：
起始位置下标：从数组哪一位开始操作。
操作长度：从选定的起始位置开始，要操作的元素个数。
新元素：要插入或替换的元素。
返回值：数组，包含被删除元素（如果有的话）

//插入
var a = [1,2,3];
a.splice(3,0,4,5);//[]   无删除元素，随意返回空数组
alert(a);//1,2,3,4,5

//删除
var a = [1,2,3,4,5];
a.splice(3.2);//[4,5]
alert(a);//1,2,3

//替换
var a = [1,2,3];
a.splice(1,1,3);//[2]
alert(a);//1,3,3

数组连接

concat(arr)：连接数组,返回连接以后的数组

var a = ['a','b','c'];
var b = ['d','e','f'];
a.concat(b);//a,b,c,d,e,f

数组拼接

join(分割符)：用分割符把数组元素拼接起来，以字符串的形式返回。

var a = ['a','b','c'];
a.join('-');//a-b-c

数组排序

sort(比较函数)：用于数组排序,返回排好序的数组。

//排列字符串数组
var a = ['float','width','alpha','zoom','left'];
a.sort();//alpho,float,left,width,zoom

//排列数组数组
var a = [1,5,7,6,3];
a.sort(function (n1,n2){
	return n1-n2;
});//1,3,5,6,7

注意：sort中的参数为一个比较函数，该函数中的参数指的是要排序的数组中的元素。

定时器

setInterval(函数，指定时间（单位：毫秒）)：间隔型计时器（隔一段指定时间，执行一次函数）
setTimeout(函数，指定时间（单位：毫秒）)：延时型计时器（指定时间后，执行函数，只执行一次）
clearInterval()：停止间隔型计时器（setInterval）
clearTimeout()：停止延时型计时器（setTimeout）

Date对象及其常用方法

getFullYear(): 获取当前年
getMonth():获取当前月（获取的月是从0开始，因此用的时候需要+1）
getDate():获取当前日
getDay():获取当前星期（星期日为0）

CSS相关拓展

获取元素边距和宽高

offfsetLeft：获取元素左边距
offsetTop：获取元素上边距
offsetWidth：获取元素的宽
offsetHeight：获取元素的高

获取非行间样式

currentStyle：获取非行间样式(兼容性不好，适合低版本浏览器)
例：oDiv.currentStyle.width
getComputedStyle（元素，任意参数）：获取非行间样式（兼容性不好，适合高版本浏览器）
例：getComputedStyle(oDiv,false).width（第二个参数是什么都可以）

兼容性处理

if (obj.currentStyle){
	return obj.currentStyle.width;
}else{
	return getComputedStyle(obj,false).width;
}

封装获取非行间样式的方法

function getStyle(obj,name){
	if(obj.currentStyle){
		return obj.currentStyle[name];
	}else{
		return getComputedStyle(obj,false)[name];
	}
}

注意：该方法只可取单一样式（backgroundColor），不可取复合样式（background）

DOM

注意：没特别指出，元素和节点指的是同一个东西。一下DOM相关的知识点的应用实例参考本章最下面的DOM操作应用实例那一小节。

节点

元素节点：被标签单独包围的文本
文本接单：未被标签单独包围的文本

获取子节点

childNodes：获取子节点，以数组的形式返回
问题：在高版本浏览器中（IE9以上），childNode会把文本节点也算进去
解决方案一：nodeType 返回节点类型（文本节点返回数字3，元素节点返回数字1）。通过判断节点类型选取子节点
解决方案二（使用这种）：children 获取子节点
注意：获取子节点只获取后边第一层的节点，即只获取儿子辈，孙子辈及以后的后代都不获取。

parentNode：获取父节点
offsetParent：获取元素用于定位的父级

首尾子节点（有兼容性问题）

firstChild：获取第一个子节点（适用低版本）
firstElementChild：获取第一个子节点（适用高版本）
注意：firstChild在IE6-8等低版本浏览器获取的第一个子节点为元素节点，高版本浏览器获取的第一个子节点为文本节点，高版本浏览器适用firstElementChild。

//兼容处理
if(obj.firstElementChild){
	obj.firstElementChild.style.background = 'red';
}else{
	obj.firstChild.style.background = 'red';
}

lastChild：获取最后一个子节点（低版本）
lastElementChild：获取最后一个子节点（高版本）
注意：lastChild和lastElementChild的兼容性同firstChild和firstElementChild。

兄弟节点

nextSibling：获取相邻的下一个节点（低版本浏览器）
nextElementSibling：获取相邻的下一个节点（高版本浏览器）
previousSibling：获取相邻的上一个节点（低版本浏览器）
previousElementSibling：获取相邻的上一个节点（高版本浏览器）
注意：以上方法的兼容性参考首尾子节点的兼容性。

元素操作（三种方式）

方式一：
点操作：oDiv.style.display = ‘block’;
方式二：
中括号操作：oDiv.style[“display”] = ‘block’;
方式三：
DOM方式：
获取 getAttribute(名称)
设置 setAttribute(名称，值)
删除 removeAttribute(名称)
注意：可以用方式三操作的基本都可以用中括号操作，因此方式三基本很少使用（只有一种特定的场合采用方式三）*

元素查找（获取）

方式一：getElementById(‘id名’)：通过元素的id属性获取元素。
方式二：getElementsByTagName(‘标签名’)：通过标签名称获取元素，以元素集合（注意不是数组，所以不可用数组的方法）的方式返回，可以通过下标选取指定元素。
方式三：用className选择元素

//通过方式三封装getByClass函数
function getByClass(oParent,sClass){
	var aResult = [];
	var aEle = oParent.getElementsByTagName('*');
	for(var i = 0; i < aEle.length; i++){
		if(aEle[i].className = sClass){
			aResult.push(aEle[i]);
		}
	}
	return aResult;
}

创建、插入和删除元素

创建节点

createElement(标签名)： 创建一个节点

appendChild(标签名)：在指定父级节点中追加一个节点。
格式：父级节点.appendChild(‘子节点’)
把一个节点从一个父级节点中转换到另一个父级节点使用appendChild即可。
原理:
1.appendChild会先把元素从原有父级上删除.
2.然后添加到新的父级
注意:如果父级节点中已经存在子节点,则把创建的子节点插入到原有子节点后面。

插入节点

insertBefore(节点，原有节点)： 在已有节点前插入（和appendChild相反）
格式：父级节点.insertBefore(子节点，原有节点)
注意：在一些浏览器中存在一些现象，那就是如果父级节点中没有子节点，那么使用insertBefore插入节点会报错。原因是insertBefore第二个参数会为空。
解决方法：显示用 if 条件判断语句判断父级节点中是否存在子节点，如果存在，则使用insertBefore，否则显示用appendChild在父级节点中先插入一个节点，然后在使用insertBefore插入后续子节点。

删除节点

removeChild(子节点)： 删除子节点。
格式：父级节点.removeChild(子节点)

表格元素特有属性

tBodies：获取表格中所有标签
tHead：获取表格标签（表头标签，只有一个，因此返回的不是数组）
tFoot：获取表格标签（表尾标签，只有一个，因此返回的不是数组）
rows：获取表格中所有标签（行标签）
cells：获取表格中所有标签（单元格标签）

DOM操作应用实例（表格应用）

隔行变色、鼠标移入高亮显示

表格添加删除

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>表格添加删除</title>
    <script>
      window.onload = function (){
        var oTab = document.getElementById('tab');
        var oName = document.getElementById('name');
        var oAge = document.getElementById('age');
        var oBtn = document.getElementById('btn');
        var id = oTab.tBodies[0].rows.length + 1;

        oBtn.onclick = function (){
          var oTr = document.createElement('tr');

          var oTd1 = document.createElement('td');
          oTd1.innerHTML = id++;
          oTr.appendChild(oTd1);

          var oTd2 = document.createElement('td');
          oTd2.innerHTML = oName.value;
          oTr.appendChild(oTd2);

          var oTd3 = document.createElement('td');
          oTd3.innerHTML = oAge.value;
          oTr.appendChild(oTd3);

          var oTd4 = document.createElement('td');
          oTd4.innerHTML = '<a href="javascript:;">删除</a>';
          oTr.appendChild(oTd4);

          oTd4.getElementsByTagName('a')[0].onclick = function (){
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
          }

          oTab.tBodies[0].appendChild(oTr);
        }
      }
    </script>
  </head>
  <body>
    姓名：<input id='name' type="text"><br>
    年龄：<input id='age' type="text"><br>
    <input id='btn' type="button" value="添加">
    <table id='tab' border='1' width='500'>
      <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>11</td>
          <td></td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>12</td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td>王五</td>
          <td>21</td>
          <td></td>
        </tr>
        <tr>
          <td>4</td>
          <td>赵六</td>
          <td>22</td>
          <td></td>
        </tr>
        <tr>
          <td>5</td>
          <td>史密斯</td>
          <td>31</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

表格基础搜索

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>表格基础搜索</title>
    <script>
      window.onload = function (){
        var oName = document.getElementById('name');
        var oBtn = document.getElementById('btn');
        var oTab = document.getElementById('tab');
        oBtn.onclick = function (){
          for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            var oTrN = oTab.tBodies[0].rows[i].cells[1].innerHTML;
            var str = oName.value;
            if(str.toLowerCase() == oTrN.toLowerCase()){
              oTab.tBodies[0].rows[i].style.backgroundColor = '#ccc';
            }else{
              oTab.tBodies[0].rows[i].style.backgroundColor = '';
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <input id='name' type="text" value="">
    <input id='btn' type="button"  value="搜索">
    <table id='tab' border='1' width='500'>
      <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>11</td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>12</td>
        </tr>
        <tr>
          <td>3</td>
          <td>王五</td>
          <td>21</td>
        </tr>
        <tr>
          <td>4</td>
          <td>赵六</td>
          <td>22</td>
        </tr>
        <tr>
          <td>5</td>
          <td>shimisi</td>
          <td>31</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

表格模糊搜索

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>表格基础搜索</title>
    <script>
      window.onload = function (){
        var oName = document.getElementById('name');
        var oBtn = document.getElementById('btn');
        var oTab = document.getElementById('tab');
        
        oBtn.onclick = function (){
          for(var i=0;i<oTab.tBodies[0].rows.length;i++){
          
            var oTrN = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var str = oName.value.toLowerCase();
            
            if(oTrN.search(str)!=-1){
              oTab.tBodies[0].rows[i].style.backgroundColor = '#ccc';
            }else{
              oTab.tBodies[0].rows[i].style.backgroundColor = '';
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <input id='name' type="text" value="">
    <input id='btn' type="button"  value="搜索">
    <table id='tab' border='1' width='500'>
      <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>11</td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>12</td>
        </tr>
        <tr>
          <td>3</td>
          <td>王五</td>
          <td>21</td>
        </tr>
        <tr>
          <td>4</td>
          <td>赵六</td>
          <td>22</td>
        </tr>
        <tr>
          <td>5</td>
          <td>shimisi</td>
          <td>31</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

表格多关键词搜索

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>表格基础搜索</title>
    <script>
      window.onload = function (){
        var oName = document.getElementById('name');
        var oBtn = document.getElementById('btn');
        var oTab = document.getElementById('tab');
        
        oBtn.onclick = function (){
          for(var i=0;i<oTab.tBodies[0].rows.length;i++){
          
            var oTrN = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var str = oName.value.toLowerCase();

            var arr = str.split(' ');

            oTab.tBodies[0].rows[i].style.backgroundColor = '';

            for(var j=0;j<arr.length;j++){
              if(oTrN.search(arr[j])!=-1){
                oTab.tBodies[0].rows[i].style.backgroundColor = '#ccc';
              }
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <input id='name' type="text" value="">
    <input id='btn' type="button"  value="搜索">
    <table id='tab' border='1' width='500'>
      <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>11</td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>12</td>
        </tr>
        <tr>
          <td>3</td>
          <td>王五</td>
          <td>21</td>
        </tr>
        <tr>
          <td>4</td>
          <td>赵六</td>
          <td>22</td>
        </tr>
        <tr>
          <td>5</td>
          <td>shimisi</td>
          <td>31</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>