一、JavaScript属性操作
1、鼠标事件有如下这些：
onclick 鼠标点击；onmouseover 鼠标移入；onmouseout 鼠标移开；onmousedown 鼠标按下 ；onmouseup 鼠标抬起；onmousemove 鼠标移动。
2、变量的命名规则：可以由数字、字母、下划线、$组成；但是数字不能开头。一般习惯有驼峰命名法，如：oDivElem、object、aDiv。
3、通过某些方法得到元素实例var bnt=document.getElementById(‘bnt’);然后可以通过点的形式读取元素的属性。但是要注意：直接写在HTML的自定义属性不能通过点的形式读出来 但是可以在JavaScript代码中重新给元素加一个自定义属性 并且可以读出来：
bnt.abc=’789’;alert(bnt.abc)
3、innerHTML
a、元素.innerHTML 读这个标签开始到这个标签结束中间的结构，如果有子标签，会解析子标签后以子标签设置好的样式显示出来。
b、innerHTML会重新渲染页面，即可以动态的给HTML加元素或改变元素的样式。
4、不能获取src url background 的值来作为判断条件。
5、JavaScript的数组可以放任何数据类型var arr=[‘abc’,’sd’,’我’,6,’a’,function abc(){},[],{}].
arr.push(数据) 往数组的最后的一项添加数据。
6、getElementsByTagName获取元素
getElementById只能获取一个元素，如果想一次获取同类元素就可以用getElementsByTagName；如下：
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var aLi=document.getElementsByTagName('li');
// 得到一组元素 【li,li,li,li】 不是数组
//aLi[0] aLi[1] aLi[2]
//aLi.length;
</script>
</body>通过getElementsByTagName得到的数据是一个集合，担不是一个数组，和数组相同的地方只是：能用下标来获取元素：aLi[0] aLi[1] aLi[2]；可以用length获取集合长度：aLi.length；
7、获取和设置元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
background:red;
margin:30px auto;
display: none;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="按钮" id="btn"/>
<script>
//div.style.width 读行间里面的样式 如果样式写在css里面就读不到
//getComputedStyle(元素).属性 最好不要获取复合属性 有兼容问题
var div=document.getElementById('div1');
var btn=document.getElementById('btn');
btn.onclick=function(){
div.style.width='200px';
alert(getComputedStyle(div).width)
}
</script>
</body>
</html>直接写在HTML里的样式可以通过：元素.style.样式属性，来获取，否则就只能通过getComputedStyle(元素).样式属性，来获取。
通过div.style.width=’200px’;设置的样式是相当于直接在HTML加style样式的。
二、for循环和索引值
1、关于this：只要定义一个函数，函数内容就有一个关键字this，this的值是动态绑定的；在函数调用的时候再确定this的值。this的调用情况：a:直接调用 指向window；b：事件调用 指向调用她的元素；c：定时器调用 指向window；d：new 调用 指向new出来的新对象；e：call apply。例如:
function tab(){
console.log(this)//window;
}
oDIV.onclick=function(){
console.log(this)//oDIV
}
oDIV.onclick=tab;
oDIV.onclick=function(){
tab();//tab方法中的this值为window
}2、for循环中的this和索引值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var aLi=document.getElementsByTagName('li');
aLi[2].onclick=function(){
this
}
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
// i=3
//aLi[i].style.background='red';
this.style.background='red';
}
}
</script>
</body>
</html>上面代码中的22行注释的代码是错误的写法，这样写会数组溢出，这样写的效果是每个aLi的点击事件都是aLi[3].style.background='red';因为onclick是点击的时候才执行的，而变量i在内存中是动态变化的，循环结束后i就变为3，所以循环结束后aLi[0]、aLi[1]、aLi[1]的onclick方法都是aLi[3].style.background='red'; 注意：虽然20行中的i在循环中也是变化的，担它每变一次值就确定一个元素的onclick方法，而this代表调用者，每一次循环this代表的值都是不一样的(分别为对应的三个元素)，所以循环结束后，每个元素的点击事件就是把自己的背景变为红色。
当在循环的时候想要建立“匹配” 对应关系的时候就用索引值，如下：
<body>
<input type="button" value="bnt1" a=0 />
<input type="button" value="bnt2" a=1/>
<input type="button" value="bnt3" a=2/>
<input type="button" value="bnt4" a=3/>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<script>
// 想要建立“匹配” 对应关系的时候 就用索引值
var aBnt=document.getElementsByTagName('input');
var arr=['Annie','jame','Amy','Anna'];
var aP=document.getElementsByTagName('p');
for (var i = 0; i < aBnt.length; i++) {
aBnt[i].index=i;
// 事件加在谁身上 谁的身上就加索引
aBnt[i].onclick=function(){
this.value=arr[this.index]
aP[this.index].innerHTML=arr[this.index]
}
}
</script>
</body>补充：
当new 调用函数时，在函数里面做了3件事：
1、在内部创建了一个空对象
2、函数内部的this指向这个空对象
3、函数完成后 返回这个空对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 当new 调用函数
// 在函数里面做了3件事
//1 在内部创建了一个空对象
//2 函数内部的this指向这个空对象
//3 函数完成后 返回这个空对象
function Creatperson(names){
this.name=names
this.showName=function(){
alert(this.name)
}
}
var p1=new Creatperson('小明')
p1.showName()
var p2=new Creatperson('小强')
p2.showName()
var p3=new Creatperson('小王')
p3.showName()
</script>
</body>
</html>三、六大数据类型
JavaScript的数据类型可以分为六中，有两种分法：
第一种分法：1、Number；2、String；3、boolean；4、null；5、underfind；6 、objcet；
第二种分法：1、Number；2、String；3、boolean；4、function；5、underfind；6 、objcet；
可以用typeof()来判断数据的类型；null可以理解为对象为空的时候，所以也可以把它归到objcet中，function可以理解为是一种比较复杂的对象类型，例如我们可以把方法赋值给一个引用对象，但是用typeof()判断出来的结果是function，所以也可以把他单独做为一个数据类型。两种分法都可以。
数据类型的相关方法：
1、Number()可以把字符串转成数值；必须是纯数字的字符串，否则转换结果为NaN；NaN也是Number类型的一个值，只是比较特殊，表示不是一个数字；
parseInt()把字符串转成数字，不认小数点， 第一个是数字的情况下， 一个个字符去读，当读到不是数字的时候就停止，返回读出的数字，当第一个字符不是数字的时候转换结果为NaN。
parseFloat() 把字符串转成数字，认小数点。当第一个字符不是数字的时候转换结果为NaN。
2、charAt(n)截取String的第n个字符；
3、object可以有多中存在形式，例如普通对象o={name:’Annie’,age:18};数组arr=[a,b,c,d]；function abc(){}；
其中数组实际上也是以键值对的形式存在的，[0:a,1:b,2:c,3:d],只是一般省略了名字（键），只留下值，数组下标实际上就是这里元素的名字，取值的时候和普通对象一样通过名字来取。由于数组也是一个对象，所以JavaScript的数组也可以像普通对象一样通过‘.’来动态的添加属性，这么做不影响数组的下标和长度。var a=[1,2,3];a.abc=111;a.push(55);alert(a);结果输出1，2，3，55；
通过断点可以看到a中的值：
4、switch
var a={'key':'value','key2':'value2'};
var b = a;
switch(a){
case '小明':
alert('小明');
break;
case true:
alert('正确');
case undefined:
alert('未定义');
break;
case null:
alert('null');
break;
case b:
alert(a);
break;
default:
alert('不存在');
}JavaScript中的switch参数可以是任何数据类型（这点和Java很不一样，需要注意一下）。
四、字符串方法
1、charAt()截取第几个字符。
2、indexOf(str2，[seachIndex])， 查找str2在字符串中首次出现的位置，如果查找的str2 不在字符串中 就会返回-1，第二个参数表示从下标为几开始查找，没有写的话 默认从0开始。
3、str.substring(startIndex,[endIndex])，提取指定范围内的字符串；
a:参数只有一个 时返回 从startIndex一直截取到最后，
b:参数有2 个时返回 从startIndex 到endIndex 中间的字符串。
注意：如果startIndex < endIndex 则返回 从startIndex 到endIndex 中间的字符串（包含startIndex，不包含endIndex）。
如果startIndex =endIndex则返回空字符串；
如果startIndex>endIndex则前后的值互相交换，然后同第一种情况。
4、slice()和substring类似
区别1、可以接受负 -1 代表从最后一位开始算。
区别2、如果说startIndex>到endIndex 不会交换位置，如果都是正数截取结果为空，有负数的话就按负数从后面算起的规则截取，总之第一个参数代表的位置在第二个参数代表的位置之后，则截取结果为空。
5、split()，切割字符串并把切割结果作为数组返回。
a、无参数时：整体作为数组的一项返回。
var str='猿说教育';
var arr=str.split();
console.log(arr);
b、有参数时：参数为字符（传入数子会默认转为字符），字符串中包含参数这个字符的话，就通过这个字符来分割，字符的前后2项作为数组的每一项，字符串中不包含参数这个字符的话，字符串整体作为数组的一项存在。
var str='猿说2教2育';
var a=["说","s"];
var b=["猿"];
var arr=str.split(a);
var arr2=str.split(b);
var arr3=str.split("-");
console.log(arr);
console.log(arr2);
console.log(arr3);
可以看到，当切割变量是数组时，且只有一个元素时，split会把数组的这唯一元素做为切割字符来对待，而当数组有多个字符时则不行。
当切割的字符刚好在被切割字符串的边缘时，切割后没有剩下内容的那边也会是返回数组的一个元素，元素值为一个空字符”“。
6、join()把数组连接字符串。
这实际上是数组的方法，详情看数组的第6个方法。
五、数组方法
1、push()：向数组的最后一项添加元素， 返回值为新数组的长度。
2、unshift()：往数组的第一项添加元素，返回值为新数组的长度。
3、pop()：向数组的最后一项删除元素，返回值为删除的元素。
4、shift()：向数组的第一项删除元素，返回值为删除的元素。
5、sort()： 数字排序，默认是用字符串的形式来比较，这个方法的参数是一个方法，如果穿了一个方法进去，就用参数方法的形式比较大小在排序，例如想要数组按数字大小排序的代码如下：
arr.sort(function(a,b){
return a-b;
});a、b是数组中比较大小的两个值，参数方法返回0表示相等，不交换位置；小于0，表示a
var arr=['猿','说','教','育'];
console.log(arr.join());
console.log(arr.join(""));
console.log(arr.join('我'));
7、splice()删除特定元素 var arr=['a','b','c','d']
a、一个参数：删除指定位置开始到后面的所有的项 。 arr.splice(1);arr为：arr=[‘a’];
b、二个参数：删除指定位置开始 要删除几个元素. arr.splice(1,1);arr为：arr=[“a”, “c”, “d”];
第二个参数比数组的下标大时删除下标为第一个元素开始后面的所有元素，第二个参数为0时，不删除任何元素；
第一个元素超出下标范围不删除任何元素；
参数不符合规则时不删除任何元素。
c、三个参数：用第三个元素替换被删除的元素：
var arr=['a','b','c','d'];
var arr2=['a','b','c','d'];
arr.splice(1,2,'a');
arr2.splice(1,0,'a');
console.log(arr);
console.log(arr2);六、怎么操作对象和数组属性
JavaScript的给对象和数组添加属性的情况有点多，哪些合法哪些不合法非常容易混淆，我这里做了详细的总结。
1、给对象设置属性值
var obj={};
var t=2;
var tt="ttt";
var arr=[2,"arrTest"];
// obj.'t'="";
// obj.1="";
obj[1]="";
obj['1']="111";
obj.t="变量t";
obj.tt="test1"
obj.a=t;
obj.arr="arr";
obj[arr]="arrarr";
// obj[a]="testaa";
obj['t']="test2";
obj[t]="test333";
obj.b=true;
console.log(obj);上面注释的代码表示不合法，运行会报错，而注释掉这些不合法的代码后运行结果为
从而课得出如下结论：
a、可以通过“.属性名”这种方式来添加和设置属性，其中属性名应该是一个变量名，这个变量和在外面定义的同名变量没有任何关系。而属性值可以是任何数据类型。如：obj.tt="test1";obj.a=t;
b、通过“.属性名”这种方式来添加和设置属性时，属性名“key”不能直接是数字和字符，这样不合法，“key”必须是一个合法的变量名。如：obj.'t'="";obj.1="";；”key”不合法运行报错。
c、另一种设置属性的方法是通过obj[‘key’]来设置属性，这种方法[]里面可以是数字、字符、已经定义的变量，但是不能是未定义的变量，[]里面必须是一个已经确定的值，如果[]里面的key是在外面定义并赋值的复合属性值，那么会把这个整个复合值做为key。如：
var arr=[2,"arrTest"];
obj[1]="";
obj['1']="111";
obj.arr="arr";
obj[arr]="arrarr";其中[]里面数字和加引号的数子是一样的，并且以写在后面的值为准，但是当t是一个已经定义的变量时，加引号和不加引号是不一样的，因为加了引号就是一个普通的字符了，arr是一个已经在外面定义好并赋值的数组，那么输出的时候就把整个数组的值作为key；obj[arr]的键值对为：2,arrTest:”arrarr”。
注意：数字只能放在[]中，而且加不加引号都一样；相同的key，写在后面的值会覆盖前面的值。
一句话总结：[]里面必须是确定的值，不管什么形式，而点的形式定后面必须是一个合法的变量名（这个变量名跟外面相同名字的变量没有任何关系）。
2、关于数组的属性和下标
实际上数组也是变量的一种形式，只是属性默认从0开始自动增加，并且有一些特定的方法。所以数组的属性设置方式和对象一样。
var arr=[];
var arr2=[1,2,3];
var a = 2;
arr[a] = "it is a";
arr[1]="";
arr.b="a equal 2";
arr.b = a;
arr[10]="number 10";
arr[111]="number 11";
arr[4] = 55;
arr.c=20;
arr[arr2]="it is arr2";
arr.arr2 = "arr2";
alert(arr.length);
// arr.1="";
console.log(arr);运行结果：
数组属性的设置方法和对象一样，另外数组的最大下标以设置属性中[]里面数字最大的为准，.length的结果为[]中最大数字+1，和其他属性名不是数字的无关。
七、定时器
1、设置定时器setInterval(函数,时间，实际传入的参数)
第一个参数为要调用的方法，第二个为循环调用的时间间隔，后面的参数都是参数一方法的参数。
定义了定时器之后如果不想它继续循环执行就要调用clearInterval方法清除，它会一直循环执行。
var timer=setInterval(函数,时间，实际传入的参数)
清除 clearInterval(timer)；也可以 clearInterval(setInterval(函数,时间，实际传入的参数))
注意：a、定时器调用 (this 的指向为window)；b、每次定义一个定时器 系统会给定时器随机打一个编号，清除定时器编号是不会去掉的。
2、延迟定时器setTimeout
延迟定时器只会触发方法执行一次；但是同样要清除，否则会占用资源，
var timer=setTimeout(函数，时间，调用时实际传入的参数)；
clearTimeout(timer)；
打印timer是一个数字（定时器编号）；
八、其他小知识点
1、关于方法返回结果也是一个方法。
var g=function refunction(){
alert('text');
return 11;
}
function show(){
return g;
}
console.log(show());当一个方法(show)的返回结果也是一个方法(g)时，调用这个方法(show)时会把返回方法（g）的方法体全部返回（把g换成匿名函数直接返回也一样），上面的返回结果为：
ƒ refunction(){
alert('text');
return 11;
}想通过show调用返回方法（g），则调用show()之后再加一个括号，因为show返回一个方法，加上括号就是调用，代码如下：
var g=function refunction(){
alert('text');
return 11;
}
function show2(){
return g;
}
console.log(show2()());运行结果：弹窗显示：text。
2、运算符
a：== 和 === 的区别：
== 左右比较的时候，先把左边右边转成同一种数据类型，再比较值，如果值相同返回true，否则返回flase；例如：console.log( 2 == “2” );输出true；
=== 严格比较，先比较两边的数据类型是否相同，不相同，直接返回false，否则，在比较两边的值是否相同，相同true，否则返回flase；例如：console.log( 2 === “2” );输出false；
注意：NaN和任何值都不相同，包括在自身；例如console.log( NaN == NaN );输出false；
b、&&和||
在JavaScript中变量的值为null,undefined,数字0，NaN，false时，判断结果就为false，其他情况（有正常值）则为true；
&&：逻辑且；当左边为true时，返回右边的值，当左边为false时，右边代码不运行，直接返回左边的值。
左边为true，右边为true，返回的是右边的值
左边为true，右边为false，返回的是右边的值
左边为false，右边为true，返回的是左边的值
||：逻辑或；当左边为true时，右边代码不运行，直接返回左边的值，当左边为false时，返回右边的值。
左边为true，右边为true，返回的是左边的值
左边为true，右边为false，返回的是左边的值
左边为false，右边为true，返回的是右边的值
注意：&&和||的返回结果不一定是true和false，而是左右变量的具体值。