目录：
一、JS补充
1、函数类型
2、string对象
3、instanceof
4、Array 数组对象
5、Date对象
6、RegExp 正则表达式
7、Math对象
二、BOM补充
1、window对象
2、histroy对象
3、location对象
三、DOM补充
四、替换clear:both撑开页面的方法
五、show hide toggle方法
内容：
类型函数：
1、typeof
只能判断基本数据类型，对于引用数据类型，只能判断它为object
var s=8;
console.log(typeof(s));
var s2=new String('hello2');
console.log(typeof(s2)); //没法判断它的具体类型
2、instanceof
var s3= new String('hello')
console.log(s3 instanceof(String));//判断s3是否为String实例化的对象
3、String对象
String有两种创建方式：
1） var s=“hello”；
2）var s=new String（‘hello’）;
String可以操作的方法：
1）length
2）字体：
s.italics() 斜体
s.bold() 加粗
s.anchor() 链接，正确写法：s.anchor(‘alex’)
3）大小写转换：
s.toUpperCase();都变大写
s.toLowerCase();都变小写
4）获取指定字符：
s.charAt(1) 根据索引取值
5）查询字符串：
match（）；
search（）；
s.search('h'); 返回第一个匹配结果的索引值
s.match('l'); 返回所有的匹配结果的数组
6）replace
s.replace(‘e’,'E')
7) split
s.split('e')
8) concat 拼接
s.concat('world')
9） substr sbustring slice 截取字符串
s.substr(1,2)
s.slice(1,-2) slice可以倒着取
10）Indexof
s.IndexOf(‘h’)
s.lastIndexOf('h')
4、Array 数组对象
var arr=[];
var arr=[1,2,3,4,5];
var arr=new Array(1,2,3,4,5)
var arr2 = new Array(3) 表示占了3个位置，三个值都是undefined，如果采用初始化对象的方式创建数组
如果里面只有一个值还是数字，那么数字表示长度而不是内容
Array的方法：
1、join方法
var ret = ['hello', 'world'].join('+++++')
2、shift unshift pop push方法（栈方法）
补充：
栈操作：
先进后出，有压栈和弹栈两个操作
队列操作：
先进先出
var arr1=[1,4,6];
arr1.push(13);
console.log(arr1) 发现13放在最后面
arr1.pop() 弹最后的数值
arr1.shift(45);从前面插入
arr1.unshift() 从前面移除
3、sort和reverse方法
arr1.reverse()；反转
arr1.sort(); 排序
4、Date对象
创建方式：
var date_obj=new Date()
console.log(date_obj.toLocaleString())
var date_obj = new Date('017/07/20 16:30')
console.log(date_obj.toLocaleString())
date_obj.getFullYear();
date_obj.getZMonth();
date_obj.getDate();
date_obj.getDay();
date_obj.getHours();
date_obj.getSeconds();
date_obj.getMinutes();
date_obj.getHourMinuteSecond();
date_obj.getMilliseconds();
5、RegExp 正则表达式
var re_obj=new RegExp("d+","g");
console.log(re_obj.test('asdf2345dk'))
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //方法一 var re_obj = new RegExp('d+','g')//定义规则,后面的g表示全局通用，如果是i表示不区分大小写，可以写成gi console.log(re_obj.test('abd345adf234dg'))//test方法表示测试，匹配成功返回true //方法二 var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; console.log(reg2.test('ste11345')); //匹配的内容： var s='helee2234o2351' console.log(s.match(/d+/g))//取出所有匹配的内容放到数组中去 console.log(s.search(/d+/g))//匹配第一个结果的索引值，只能取一个 console.log(s.split(/d+/g))//取出数据分割值 console.log(s.replace(/d+/g,"*"))//替换匹配出来的数字 </script> </body> </html>
6、Math对象
console.log(Math.random()); 随机小数
console.log(Math.round(2.8)); 取四舍五入值
console.log(100*Math.pow(2,3));2的3次方
二、BOM对象
BOM浏览器对象模型，可以对浏览器窗口进行访问和操作，使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作
使JavaScript有能力与浏览器对话
1、window对象
所有浏览器都支持window对象
概念上将一个html文档对应一个window对象
功能上讲控制浏览器窗口的
使用上讲，window对象不需要创建对象，直接使用即可
例如：window.alert（） 是window对象，前面的值可以不写
window对象方法：
1、alert（）显示带有一段消息和一个确认按钮的警告框
2、confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框
3、prompt() 显示可提示用户输入的对话框
4、open（） 打开一个新的浏览器窗口或查找一个已命名的窗口
5、close（）关闭浏览器窗口
6、setInterval（）按照指定周期（以毫秒计）
7、clearInterval（）取消由setInterval（）设置的timeout
8、setTimeout（）在指定的毫秒数后调用函数或计算表达式
9、clearTimeout（）取消setTimeout（）方法设置的timeout
10、scrollTo（）把内容滚动到指定的坐标
例子：
var ret=confirm('是否保存');
alert(ret)
if(ret == true{}{
}else{
}
//可以根据返回值来进行后面的操作
var ret=prompt('hello')
alert(ret)
返回值是用户输入的内容
如果什么都不输入，就返回空，如果选择取消，就返回null
2、history对象
能够知道用户上一次从哪来，下一次往哪去，也就是浏览器的前进和回退按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="前进" onclick="func1();"/> <a href="histroy2.html">lesson2</a> <script> function func1() { history.forward(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="后退" onclick="func2();"/> <a href="histrory1.html"></a> <script> //history内部有三种方法：forward back go function func2() { history.back(); } </script> </body> </html>
3、location对象
方法：
1、locatin.reload() 重新加载界面
三、DOM对象
DOM是W3C的标准，定义了访问HTML和XML文档的标准
推荐：
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementchild 最后一个子标签元素
nextElementSibing 下一个兄弟标签元素
previousElementSibing 上一个兄弟标签元素
DOM Event（事件）
1、onclick
2、ondblclick 当用户双击某对象时调用的事件句柄
3、onfoucs 元素获取焦点 ,input点击输入框时获取焦点
例子：
<input type='text'/ onfouce="func1();"> function func1(){ alert(111) }
4、onblur 失去焦点时触发的事件
5、onchange 一旦内容改变就触发
备注：input标签的DOM对象，判断非空字符是通过Document.getElementzByid('xx').value.trim().length==0，其中trim（）表示去掉空格
6、onkeydown 某个键盘按键被按下触发
7、keyCode 对于keypress事件，虚拟键盘码不同，对于不同的键盘码可以区别不同的按键
8、onkeyup 当按键松开时触发
9、onmousedown 鼠标按键按下
10、onmousemove 鼠标被移动
11、onmouseout 鼠标从某元素移开
12、onmouseover 鼠标移到某元素之上
13、onsubmit 只能用于form表单
14、onselect 文本被选中
例子：判断并阻止表单提交内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form onsubmit="return check();"> <input type="text" name="username"/> <input type="submit" value="submit"/> </form> <script> function check() { alert('123'); return false; } </script> </body> </html>
标签的增删改查:
1、增加：
document.createElement('p') 创建一个p标签
例子：
var ele = document.getElementById('div1');
var son=document.createElement('p')
son.innerHTML='<em>hello world</em>'
ele.appendChild(son);
2、移除：
removeChild（）；
例子：
var ele = document.getElementById('div1');
var last_son = ele.lastElementChild;
ele.removeChild(last_son);
3、修改：
例子：
var ele = documnt.getElementById('div1');
ele.style.fontSize ="30px";
关于class操作：
elementNode.className
var ele = documnt.getElementById('div1');
ele.className 查找这个标签对应的class的名称
elementNode.classList.add
elementNode.classList.remove
改变HTML属性：
getAttribute()获取属性
setAttribute()设置属性
例子：
var ele=document.getElementById('add')
ele.onclick=function(){
var div1=document.getElementByClassName('div1')[0]
var img=document.createElement('img')
img.src='a.jpg' 这个方式是dynmic html语法，动态html
这个也可以写成 img.setAttribute('src','a.jpg') a.jpg是一张图片
div1.appendChild(img);
}
四、替换clear:both方法：
使用class名：after{
content：ooo；必须的
display：block；
clear:both;
visibility:hidden;
height:0;
}
五、jQuery动画效果
$('#id1').show(1000) 会显示display：none的标签，1000表示1s后执行该动作
$('#id1').hide() 会隐藏display：block的标签
$('#id1').toggle() 会判断标签属性然后做相反的动作
$('#id1').fadein(1000) 会将display：none的标签显示
$('#id1').fadeout(1000) 会将display：block的标签隐藏
$('#id1').fadetoggle(1000) 判断并进行相反的操作
$('#id1').fadeto(1000，0.3) 会调整透明度