一、引入js文件
行内式<div οnclick="alert(hello)">hello</div>
外链式<script src='html.js'></script>
内嵌式<script> function() {}</script>
二、输出
window.alert()；弹出警告框
window.prompt()；可以接收用户的输入
document.write()；方法将内容写到html文档中
document.getElementById("id").innerHTML="内容"；写到HTML元素
console.log()；写到浏览器的控制台
三、变量
未定义未赋值=报错
定义未赋值=undefined
未定义有赋值=赋值
var a=b=c=9 相当与 var a =9; b=9; c=9; b和 c 直接赋值，没有var 声明
四、数据类型
1.数字 Number
Number.MAX_VALUE:最大值
Number.MIN_VALUE:最小值
Infinity:无穷大
-Infinity:无穷小
NaN: not a number 非数值 'a'-100
isNaN() 判断非数字并返回 false 或 true
2.字符串 String
可以是 " 或者 ' (外双内单，外单内双)
转义符 ' \n' 换行符 '\\' 斜杠\ '\'' 单引导 '\"' 双引导 '\t' tab缩进 '\b' 空格
字符串长度 .length
字符串拼接 字符串+任意类型=新字符串
3.布尔型
boolean :true=1 flase=0
4.undefined:
声明后未赋值定义数据类型 undefined + 数字 = NaN
5.none:空
6. typeof 判断数据类型
数据类型转换
转换为字符串
变量.toString();
String(变量)强制转换;
加号拼接字符串(隐式转换)
转换为数字型
parseInt(string)函数;将string类型转换为整数数值型
paesrFloat(string)函数;将string类型转换为浮点数数值型
Number()强制转换函数;将string类型转换为数值型
js隐式转换(- * /)利用算术运算隐式转换为数值型
转换为布尔型
Boolean()函数
代表空，否定的值都会被转换为false,如",0,NaN,null,undefined。其他值都被转换为true
.trim():去除字符串前后两端的空白字符
五、运算符
1.自增运算符 ++var 先+1后返回值 var++ 先返回原值后+1
2.比较运算符 === 值和数据类型都相等
3.逻辑与短路运算 （123&&456） 如果表达式1结果为真，则返回表达式2，反之返回表达式1
4.三元表达式 条件表达式 ？ 表达式1 ：表达式2
5.switch (表达式) case value: 表达式;break; default : 表达式;
六、数组 Array
var arr = new Array(); //创建一个新的空数组
var 数组名 = [ ] ; //利用数组字面量创建数组
数组长度 arr.length
新增数组元素 1. 修改length长度 2.修改索引号
冒泡排序
var arr = [ 5 4 3 2 1 ];
for (var i = 0; i <= arr.length - 1; i++){ //外层循环管趟数
for( var j = 0;j <= arr.length-i-1; j++){ //里面的循环管每一趟的交换次数
//内部交换两个变量的值，前面一个和后面一个数组元素相比较
if ( arr [ j ] >arr [ j+1]){
var tem = arr [ j ];
arr [ j ] = arr [ j+1 ];
arr [ j+1 ] = temp;
}
}
}
七、函数 Function 函数名 (形参1，形参2...){ }
函数名 （实参1，实参2...);
函数的返回值 : return
function 函数名（）{
return 需要返回的结果;}
函数名();
arguments : 只有函数才有 arguments 对象，而且是每个函数都内置好了这个arguments
function fn() {
console.log(arguments) ;
console.log(arguments.length); }
function(1,2,3);
//伪数组 并不是真正意义上的数组
1.具有数组的length 属性 ,
2.按照索引的方式进行存贮，
3.它没有真正数组的一些方法 pop() push()等
函数表达式 (匿名函数) ：var fn = function () {}; fn(); //fn 是变量名,不是函数名
作用域
1.如果在函数内部，没有声明，直接赋值的变量属于全局变量
2.函数的形参可以看作是局部变量
3.全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
4.局部变量当程序执行完毕就会销毁，比较节约内存资源
es6新增块级作用域 {} if {} , for {}
作用域链 : 内部函数访问外部函数的变量,采取链式查找的方式来决定取哪个值(就近原则)
预解析
js 引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面，不提升赋值(不调用函数)操作
八、对象 Object
是一组无序的相关属性和方法的集合，所有的事物都是对象
1.字面量创建对象
var obj = { uname: '张山'，age: 18, say: function() {console.log('hi')} //匿名函数}
调用对象的属性 : obj.uname 或 obj['uname'];
调用对象的方法 : obj.say();
2.利用 new Object 创建对象
var obj = new Object ();
obj.uname = '张山';
obj.age = '18';
3.利用构造函数创建对象 泛指某一大类，类似于java里的类(class)
function 构造函数名 () { // 构造函数名字首字母要大写！ function Star (uname, age, sex){
this.属性 = 值 ; this,name = uname;
this.方法 = function (){} } this.age = age;
new 构造函数名 (); //构造函数不需要 return就可返回结果 this.sex = sex; }
//调用函数必须使用new new Star('张山','18','男');
//调用函数返回的是一个对象， 通过new关键字创建对象的过程称为对象实例化
***new 关键字执行过程 ：
1.new 构造函数可以在内存中创建一个空对象
2.this 就会指向刚才创建的空对象
3.执行构造函数里面的代码，给这个空对象添加属性和方法
4.返回这个对象
遍历对象
for...in 语句用于数组或者对象的属性进行循环操作
for (变量 in 对象){}
//for (var k in obj){ console.log(k);//输出的是属性名 console.log(obj[k]);//得到的是属性值}
//使用 for...in 里面的变量常用 k 或者 key
九、内置对象
Math 对象
Math.PI() 圆周率
Math.max() 函数返回最大值 非数值返回NaN 无数值
Math.abs() 绝对值
Math.floor() 向下取整，往最小了取值 //3.4=3
Math.ceil() 向上取整,往大了取值//3.4=4
Math.round() 四舍五入，.5特殊，往大了取
Math.random() 返回一个浮点数随机数 [0,1)
//得到两个数之间的随机整数，且包含这两个整数
function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min;}
Date 对象
是一个构造函数，必须使用new 来调用创建日期对象
var date = new Date(); 无数值则返回当前系统时间；
常用写法 数字型：2020,10,01 或 字符串型 ：' 2020-10-1 8: 8:8'
var date =new Date(2020,10,1);返回的是11月不是10月
格式化日期 年月日
var date = new Date(); console.log(date.getFullYear());//返回当前日期的年
getMonth();返回月份小一个月，需要月份+1;
getDate();返回的是几号
getDay(); 返回星期几；周一返回1，周日返回0
完整日期
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var date = date.getDate();
var arr = ['星期日’'星期一'...];
var day = date.getDay();
console.log( year+month+date+arr[day]);
格式化 时 分 秒
getHours();时
getMinutes();分
getSeconds();秒
//获得 Date总的毫秒数 距离1970.1.1过了多少毫秒数
valueOf() 或 getTime()
简单写法：var date = +new Date();
H5 新增获得总毫秒 ：console.log(Date.now())
倒计时
function countDown (time) {
var nowTime =+new Date();//获取当前时间总毫秒
var inputTime =+new Date(time);//获取输入的时间总毫秒
var times=(inputTime - nowTime)/1000;//得到剩余的秒数
var d = parseInt( times / 60/60/24);//计算天数
d = d < 10 ? '0' + d : d;
var h = parseInt( times / 60/60%24);//计算小时
h = h < 10 ? '0' + h : h;
var m = parseInt( times / 60%60);//计算分数
m = m < 10 ? '0' + m : m;
var s = parseInt( times %60);//计算秒数
s = s < 10 ? '0' + s : s;
return d + h + m + s;}
数组对象
var arr = new Array(1);//表示数组长度为1
var arr = new Array(1,2);//表示数组元素是1，2
检测是否为数组
1.instanceof 运算符 用来检测是否为数组 ( arr instanceof Array)
2.Array.isArray(参数) H5新增,ie9以上版本 优先级高于 instanceof
添加删除数组元素的方法
.push(添加的数组元素) 在数组末尾添加一个或多个数组元素；push 完毕后返回的结果是新数组的长度；原数组也会发生变化
.unshift() 在数组的前面追加元素
.pop(没有参数) 删除数组最后一个元素；返回的是删除的元素
.shift(没有参数)删除数组第一个元素；返回的是删除的元素
翻转数组
.reverse();
数组排序(冒泡排序)
.sort(function(a,b){return a-b;升序的顺序排列 return b-a;降序的顺序排列 });
返回数组元素索引号方法
.indexof(数组元素);返回该第一个满足条件的数组元素的索引号；找不到该元素则返回-1；从前开始查找
.lastIndexof(数组元素);返回该第一个满足条件的数组元素的索引号；找不到该元素则返回-1；从后开始查找
数组去重
function unique (arr){
var newArr = [];
for (var i=0;i<arr.length;i++){
if(newArr.indexof(arr[i])===-1){
newArr.push(arr[i])}
return newArr;}
var demo = unique([1,2,2,3,4,5,4,5,66,7,8,1]);
console.log(demo);
数组转换为字符串
.toString();把数组转化为字符串，逗号分隔每一项
.join('分隔符');方法用于把数组中的所有元素转化为一个字符串
基本包装类型
var str = 'andy';//相等于以下代码
1.把简单数据类型包装成复杂数据类型
var temp = new String('andy');
2.把临时变量的值给str
str = temp;
3.销毁临时变量
temp = null;
字符串不可变性
定变量的值不可变，虽然看上去内容改变了，其实是地址变了，内存中开辟了一个内存空间
根据字符返回位置
.indexOf('要查找的字符'，[起始的位置]);
.lastIndexof(数组元素);
返回字符位置及次数
var str = 'abccdogoohlo';
var index = str.indexOf('o');
var num = 0;
while(index!==-1){
console.log('index');
num++;
index = str.indexOf('o',index+1);
}
console.log(num);
根据位置返回字符
1. .charAt(index)//字符串的索引号
var str = 'abcd';
console.log(str.charAt(3));
//遍历所有的字符
for(var i=0;i<str.length;i++){
console.log(str.charAt(i));}
2. .charCodeAt(index);//返回相应索引号的字符ASCII值，目的：判断用户按下哪个键；
3. str[index] H5新增
遍历对象，得到最大值和该字符
var str='abcdefoxoazzhddsopa';
var o={};
for (var i=0;i<str.length;i++){
var chars = str.charAt(i);//chars 是字符串的每一个字符
if (o[chars]){ //o[chars]得到的是属性值
o[chars]++;}
else{ o[chars] = 1;}}
console.log(o);
遍历对象
var max = 0;
var ch ='';
for (var k in o){
//k得到的是属性名
//o[k]得到的是属性值
if (o[k]> max){
max = o[k];
ch = k;
}}
console.log(max);
console.log('最多的字符是'+ ch);
字符串操作方法
concat(str1,str2,str3...) : concat()方法用于连接两个或多个字符。拼接字符串，等效于+，+更常用
substr(start,length) :从start位置开始（索引号），length取的个数
slice(start,end)：从start位置开始，截取到end位置，end取不到（他们俩都是索引号）
substring(start,end):从start位置开始，截取到end位置，end取不到,基本和slice相同但是不接受负值
//str.substr(1,3);
替换字符replace（‘被替换的字符’，‘替换的字符’）只替换第一个字符
字符转换为数组 split('分隔符')
toUpperCase()转换大写；toLowerCase()转换小写；
简单类型与复杂类型
简单类型又叫基本数据类型或者值类型，复杂类型又叫引用类型。
值类型：string,number,boolean,undefined,null
引用类型：通过new关键字创建的对象（系统对象，自定义对象）如Object,Array,Date等。
引用类型变量（栈空间）里存放的是地址。真正的对象实例存放在堆空间中。
堆和栈空间分配区别：
栈：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似数据结构的栈；
简单数据类型存放在栈里面
堆：存储复杂类型（对象），一般有程序员分配释放，若程序员不释放，有垃圾回收机制回收
复杂数据类型存放在堆里面
WebAPIs :
浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法
DOM
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
document.body 返回文档的body元素
document.documentElement 返回文档的根节点
document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll() document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
改变元素内容：element.innerText,element.innerHTML
innerText 不识别html标签，非标准；去除空格和换行；
innerHTML 识别html标签，w3c标准，保留空格和换行；
这两个属性是可读写的，可以获取元素里面的内容；src;href;title,alt
表单元素的属性操作：type,value,checked,selected,disabled
//eye.onclick = function(){if(flag == 0){pwd.type ='text';eye.src ='';flag =1;}
else{pwd.type='';eye.src='';flag=0;}}
element.style 行内样式操作
element.className 类名样式操作
js 修改 style 样式操作，产生的是行内样式，css权重比价重
排他思想：当有同一组元素，需要某一个元素实现某种样式时，需要使用循环的排他思想；
1.所有元素全部清除样式；2.给当前元素设置样式；
自定义属性操作：
获取属性值：element.属性；获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')；主要获得自定义的属性（标准）程序员自定义的属性
设置元素属性值：
element.属性='值'；
element.setAttribute('属性','值')；主要针对与自定义属性
移除属性：element.removeAttribute('属性')；
设置H5自定义属性 data-开头做为属性名并且赋值；
<div data-index='1'></div>
阻止链接跳转需要添加javascript:void(0);或者javascript:;
节点操作：
获取元素两种方式：利用DOM提供的方法获取元素；利用节点层级关系获取元素；
节点至少拥有nodeType（节点类型）,nodeName（节点名称）,nodeValue（节点值）
元素节点 nodeType 为1；属性节点 nodeType 为2；文本节点 nodeType 为3（文本节点包含文字，空格，换行等）；
节点操作主要操作的是元素节点
父节点 node.parentNode(离元素最近的父级节点)
子节点 parentNode.childNodes(标准)返回包含指定节点的子节点的集合 （包括文本节点，元素节点）
children(非标准)获取所有的子元素节点
firstchild:第一个子节点；lastchild:最后一个子节点;(不管是文本节点还是元素节点)
firstElementChild:第一个元素节点，找不到返回Null；lastElementChild:最后一个元素节点，找不到返回Null；（考虑兼容性）
children[1];(没有兼容问题)
兄弟节点：node.nextSibling:返回当前元素的下一个兄弟节点；
node.previousSibling:返回当前元素的上一个兄弟节点；包含所有的节点
nextElementSibling:得到下一个兄弟元素节点；
previousElementSibling:得到上一个兄弟元素节点；
动态创建元素节点：document.createElement('tagName'）
添加节点：node.appendChild(child) node:父级；child:子级;（在最后添加）
node.insertBefore(child,指定元素)
删除节点：node.removeChild（child）
复制节点（克隆节点）：node.cloneNode(ture/false);false:浅拷贝，只复制标签不复制内容；
复制完要添加
三种动态创建元素的区别：
document.write()是直接将内容写入页面的内容流，但文档流执行完毕，则它会导致页面全部重绘
element.innerHtml 是将内容写入某个DOM节点，不会导致页面全部重绘；创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
document.createElement() 创建多个元素效率稍微低一点点，但是结构更清晰
注册事件（绑定事件）：传统方式和方法监听注册方式
传统注册方式：利用On开头的事件onclick；注册事件的唯一性；同一元素同一事件只能设置一个处理函数
方法监听注册方式：标准；addEventListener()；同一元素同一事件可以注册多个监听器；按注册顺序执行
eventTarget.addEventLister(type,lister[,useCaoture])
该方法将指定的监听器注册到eventTarget（目标对象）上，该对象触发指定的事件时，就会执行事件处理函数
接收三个参数：type:事件类型字符串，如click,mouseover，不要带on；
listener:事件处理函数，事件发生时，会调用该监听函数
useCapture:可选参数，是一个布尔值，默认false
删除事件：传统注册方式：eventTarget.onclick = null;
方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture];)
DOM 事件流：事件发生时会在元素节点之间按特点的顺序传播过程；
捕获阶段（document--html--body--div），当前任务阶段，冒泡阶段(div--body--html--document)；
JS代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段；
addEventListener(type,listener[,useCapture])第三个参数如果是ture，表示事件捕获阶段
调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序；
onblur,onfocus,onmouseenter,onmouseleave事件没有冒泡
事件对象 div.οnclick=function(event){}
event就是一个事件对象，写的侦听函数的小括号里，当形参看；
事件对象只有了事件才会存在，系统自动创建的，不需要传递参数；
事件对象是事件的一系列相关数据的集合，跟事件相关的；
事件对象命名可以自定义 event,evt,e;
常见事件对象的属性和方法：
e.target返回的是触发事件的对象（元素）；
this返回的是绑定事件的对象（元素）
返回事件类型：e.type
阻止默认行为（事件）让链接不跳转或提交按钮不提交：e.preventDefault();
阻止事件冒泡：e.stopPropagation();
事件委托（代理，委派）
原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，
然后利用冒泡原理影响设置每个子节点；（提高了程序性能）
禁止鼠标右键菜单：document.addEventListener('contextmenu',function(e){e.preventDefault();})
禁止鼠标选中：document.addEventListener('selectstart',function(e){e.preventDefault();})
鼠标事件对象 MouseEvent
e.dlientX/Y :返回鼠标相对于浏览器窗口可视区的X/Y坐标；
e.pageX/Y:返回鼠标相对于文档页面的X/Y坐标；
e.screenX/Y: 返回鼠标相对于电脑屏幕的X/Y坐标；
键盘事件:
keyup:按键松开的时候触发；
keydown：按键按下的时候触发；能识别功能键
keypress：按键按下时的时候触发；不能识别功能键：ctrl.shift等；区分大小写
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
BOM
调整窗口大小 ：window.οnresize=function(){};window.addEventListener('resize',function(){})
定时器：window.setTimeout(调用函数，延时时间)；//只调用一次； 停止window.clearTimeout(timeoutID)
window.setInterval(调用函数，延时时间);//重复调用； 停止window.clearInterval(timeoutID)
this 指向问题：一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window(定时器里面的this指向window);
2.方法调用中谁调用this指向谁；
3.构造函数中this指向构造函数的实例
JS执行机制 ：同步和异步
同步任务：都在主线程上执行，形成一个执行栈；
异步任务：通过回调函数实现；一般而言，异步任务有以下三种类型：
1.普通事件：click,resize等；
2.资源加载：load,error等；
3.定时器：setInterval,setTimeout等；
异步任务相关回调函数添加到任务队列中（任务队列也称消息队列）
location对象：用于获取或设置窗体的URL，并且可以用于解析URL。该属性返回的是一个对象；
location.href:获取或设置整个URL；
location.host:返回主机（域名）；
location:port:返回端口号，如未写返回字符串；
location.pathname:返回路径；
location.search:返回参数；
location:hash:返回片段 #后面内容常见于链接锚点；
location.assign():跟href一样可以跳转页面（也称为重定向页面）
location.replace():替换当前页面，因为不记录历史，所以不能后退页面；
location.reload():重新加载页面，相当于刷新按钮或者F5 如果参数为ture强制刷新ctrl+f5；
navigator 对象：包含浏览器的信息，userAgent 可以判断用户哪个终端打开页面，实现跳转；
history 对象：与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL；
back():可以后退功能；
forward():前进功能；
go(参数)：前进后退功能，参数是1，前进一个页面，-1后退一个页面；
offset :偏移量，可以动态的得到该元素的位置（偏移），大小等；
获取元素距离带有定位父元素的位置；
获取元素自身的大小（宽度高度）；
返回的数值都不带单位；
element.offsetParent:返回作为该元素带有定位的父级元素，如果父级元素没有定位则返回body；
element.offsetTop:返回元素相对带有定位的父级元素上方的偏移；
element.offsetLeft:返回元素相对带有定位的父级元素左边框的偏移；
element.offsetWidth:返回自身包括padding,边框，内容区的宽度，返回值不带单位；
element.offsetHeight:返回自身包括padding,边框，内容区的高度，返回值不带单位；
offset 和style区别：
style:只能得到行内样式表中的样式值，带单位；是可读写属性，可以获取和赋值。不包含padding,border；
offset:可以得到任意样式表中的样式值，不带单位，只读属性，只能获取不能赋值；
获取元素大小使用offset;给元素更改值用style；
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
