[巧克力变成巧克力之前都是苦的] 原生 J S

• JavaScript是一种基于对象和事件驱动的客户端脚本语言

• 组成: ECMAScript---------------标准语法

• Bom(browser Object Model) Dom(document)-------浏览器提供的扩充

• API : application programming interface 应用程序接口

• js引入,内部和外部,最好都放到body里的标签前;

• 外部:-----可维护性高,可缓存的;放在head和body中也可以,但是考虑加载顺序

• document.write()方法,将html内容输出到浏览器窗口,所以在document.write()中换行就是
  

• 变量:声明一个变量用var来声明 ------var 变量名 = 初始化值;

• js 是弱类型语言,定义时不声明变量类型;

• js的五种基本数据类型:字符串String,整数Number,布尔型Boolean,null,undefined

• 从逻辑上看,null值表示一个空对象指针,所以类型是object

• 变量在定义时可以使用逗号一次性定义多个变量,变量命名也就是标识符的命名规则;

• 标识符包括变量,函数,属性的名字,最好见名知意,小写字母开头,不能有空格,不能是关键字,不能是保留字,区分大小写;

• 驼峰命名法

• alert() 提示框, document提供的方法,所以换行就是"/n";alert只接收字符串作为参数,自动调用toString()方法转换;

• 字符串类型的变量定义可以用""也可以用’’;

• console.log();方法是在控制台输出结果,chrome浏览器的控制台输出,会自动提供换行;

• 字符串拼接:+

• 转型函数: 布尔型—Boolean();返回值就是true和false;

• 字符串返回true ,空串返回false;

• 数值0返回false ,其他返回true;

• null型返回false;undefined返回false ;

• float,型由于精度问题,计算不是精确计算,true为1,false为0;

• 数值型----parseFloat();返回值是浮点型数值;

• 解析一个字符串,返回一个浮点型数值;

• 数值型----parseInt();返回值是整型数值,true为1,false为0;

• 解析一个字符串,返回一个整形的数值;
  解析时候,参数如是0开头的数值,会按照8进制转
  解析时候,参数如果是0开头的字符串,0就会被忽略;
  解析时候,参数如果是ox开头的数值,就会按照16进制进行转换数值;(A_F是1015);

• 显示类型转换:
  .toString()方法,强制类型转换,转为字符串,对于null和undefined,无法转换,要用String()函数

• 对象:
  Object(),创建一个对象要用new关键字,它是一组数据和功能的集合;创建后可以为它添加属性和方法

• 算数运算符:
  +:只要出现了字符串,就会变成字符串拼接;
  - * / %:调用Number()转化;

• 赋值操作:
  就是将右边的值,给 左边的 变量;
  简单的赋值操作符: =
  复合赋值操作符: += -= *= /= %= (i += 1; 就是 i=i+1);

• 布尔操作符: ! && ||
  逻辑&&: 都真才为真,如果第一个为假,那么就不判断第二个元素,一定是假;
  逻辑||:只要一个为真,就为真,第一个为真,就不判断第二个元素,一定为真;
  逻辑 !:就是取反

• if语句:
  if(){}
  if(){}else{}
  if(){}else if(){} else if(){} else{}

• switch case :
  switch (条件):
  case 0: …(每一个case后要有break;)
  case穿透;
  条件可以为true,case中可以写判断式;

• 关系操作符: > < >= <= 比较规则:
  都是字符串就比较字符串编码
  一个是数值,另一就会转化为数值
  布尔值转换为数值,true为1,false为0;

• 相等性关系: == 相等 != 不等:
  如果比较类型相同:返回值为布尔值,相等返回true,不等返回false
  如果比较类型不同:转换后再比较
  一个布尔时,布尔转为数值;
  一个数值,一个字符串,字符转为数值;
  null和undefined是相等的;
  null和undefined不转换;
  只要有NaN就不等;
  全等性关系: ==== 全等 !== 不全等 :
  不仅要比较类型,还要比较值;

• 循环: for(var i = 0; i小于循环条件;i++){
  循环体;
  } //常用于知道循环次数的循环;

• while(循环条件){
  循环体;
  自增条件;
  }//常用于不知道循环次数的循环;

break:跳出整个循环
continue:跳出本次循环,继续程序
死循环: 由于编程错误,使得其自身无法控制终止的程序;
由于需要,希望程序一直执行,当达到某一特定要求才终止循环的情况下;
浏览器调试:(debug) sources 里查看,可以设置断点,想要观察的变量可以右键Add watch,刷新后,点击下一步,一步一步看执行;
函数: 可以重用的代码块(分为自定义函数,内置函数)
函数的声明:function 函数名(参数1,参数2){
函数体;
}
函数可以没有名字,我们称为匿名函数
函数可以没有参数
函数的调用------函数名(实际参数1,实际参数2);
理解参数:函数的参数不介意传进来多少个,也不介意传进来的数据类型,
也就是说定义的时候是要传进来两个参数,但是在调用的时候也未必一定要传进来两个参数,
可以是一个,也可以是三个;参数的内部是直接存在一个数组中的,所以,
我们在访问时,可以通过arguments对象取得传递给函数的每一个参数;
局部变量 和 全局变量:
优先级:局部 大于 全局 ;
如果一个函数内定义一个变量,没有添加var来声明,那么系统自认为这个变量是全局变量;
随机数: function randomNum(min, max){
return Math.floor(Math.random()*(max-min+1)+ min);
}
事件驱动:1获取元素,2绑定事件
事件:onclick 鼠标点击事件
ondblclick 鼠标双击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter
onmouseleave
-递归函数:函数通过名字调用自己的情况;

数组

数组: 一组数组的有序列表,每一项可以保存任何类型的数据;
数组的长度是可以动态调整;
数组长度:数组名.length;
创建:var 数组名 = new Array[];
var 数组名 = [];
添加:数组名[位置下标]= “”;
数组名.push(a"");从数组的最后一个位置添加元素"a";
数组名.unshift(“a”);从数组的第一个位置添加元素"a";
数组名.concat(参数1,参数2…)方法;基于当前数组创建一个新数组;
作用是合并,可以合并两个或多个数组,如果是一个值,就会添加到新数组
如果是一个或者多个数组,那么参数数组中的 每一项都会添加到新数组中
删除:数组名.pop(a"");从数组的最后一个位置删除元素"a";
数组名.shift(“a”);从数组的第一个位置删除元素"a";
转串:数组名.join("")方法就是将数组里的每一项按照字符连接组成一个新的字符串;
排序:数组名.sort()方法;就是数组的排序:
升序:数组名.sort(function(a,b){return a-b;});
降序:数组名.sort(function(a,b){return b-a;});
反序:数组名.reverse()方法;数组反序
查找:数组名.indexOf(“a”)方法;从数组第一个元素开始查找a,并返回下标值;找不到返回-1;
数组名.indexOf(a,b)方法;从数组的地a+1个元素开始查找b,并返回找到的元素的下小标
数组名.lastIndexOf(“a”)方法;从数组的最后一个元素查找a,并返回下标值;找不到返回-1;
截取:数组名.slice()方法;截取数组得到一个字数组,接受一个或者两个参数
一个参数就是从参数的位置到最后截取,
两个参数就是从参数1取到参数2,不含参数2;
接受负数参数,负数就是从数组的最后项找位置截取;
数组名.splice()方法;可以实现数组的添加删除和截取;参数接受两个,三个或者多个,接受负数参数;

字符串

String对象:是字符串的对象类型,可以用构造函数来创建;
创建:var str = new String(“内容”);
var str1= “内容”; //基本都这么创建,因为基本类型的字符串也可以用String的方法;
方法:
查找: 字符串.charAt() 方法;返回给定位置的字符;
字符串.charCodeAt()方法;返回给定位置的字符的编码;//与String.fromCharCode()相反的方法;
String.fromCharCode()方法;静态方法,接收字符编码,转成字符串;
字符串.indexOf(“a”)方法;返回a在字符串中第一次出现的位置下标;如果找不到返回-1;
字符串.lastIndexOf(“a”)方法;返回a在字符串中最后一次出现的位置下标;如果找不到返回-1;
添加: 字符串.concat(“a”,“b”,“c”…)方法;不改变原串,生成在原有串上添加的新串;多用于多个字符串的拼接;
加号 + 字符串的拼接 //最长用;
取子串:
字符串.substring(x)方法;截取下标x开始到字符串结尾的子串,不改变原串;
字符串.substring(x,y)方法;截取字符串下标x到y的子串,含x不含y,不改变原串;
字符串.slice(x);截取下标x开始到字符串结尾的子串,不改变原串;
字符串.slice(x,y);截取字符串下标x到y的子串,含x不含y,不改变原串;
字符串.substr(x);截取下标x开始到字符串结尾的子串,不改变原串;
字符串.substr(x,y);截取字符串下标x开始,后面的y个;不改变原串;
去空格:字符串.trim()方法;去掉字符串头和尾的空格;
字符串.trimLeft()方法;去掉字符串最左边的空格;
字符串.trimRight()方法;去掉字符串最右边的空格;
分割:根据分割符将字符串拆分成数组;不改变原串;
字符串.solid(“原字符串中有规律的字符”); //找不到 原字符串中有规律的字符 返回1;
大小写转换:
字符串.toLowerCase()方法;转换为小写;
字符串.toUpperCase()方法;转换为大写;
替换:字符串.replace();接受一个或两个参数,一个参数是从下标参数到最后,两个参数是参数2替换参数1字符串;
保留小数位:字符串.toFixed(s);保留小数后s位;

数值

Math对象:该对象的方法都是静态方法,数学公式和信息,与自己编写的方法相比较,Math提供的方法效率更加高;
属性: .PI 就是数学里的圆周率π
方法:Math.random() 随机数0~1
Math.min(x,y);x y 返回最小值;
Math.max(x,y);x y 返回最大值;
Math.ceil(a) ;a向上取整,取最大整数;
Math.round(a);a数学四舍五入取整;
Math.floor(a);a向下取整,取最小整数;//通常考虑到效率问题,用该方法代替parseInt()取整方法;
Math.ads(a);返回a的绝对值;
Math.sqrt(a);a开平方;
Math.pow(a,n);a的n次方;

时间

Date()对象:ECMAScript中的日期是在1970年1月1日午夜零时开始经过的毫秒数保存时间的;
创建:
var 变量名 = new Date(); Date()系统当前时间,在传参时,会自动调用Date类型的toString()方法;
var d = new Date(年,月,日); d Date类型
方法:在方法使用前,都要new一个Date对象,才能使用;
Date对象.getFullYear(); 获得年份;
Date对象.getMonth(); 获得月份;
Date对象.getDate(); 获得日期;
Date对象.getHours(); 获得小时数;
Date对象.getMinutes(); 获得分钟数;
Date对象.getSeconds(); 获得秒数;//一秒 = 1000毫秒;
Date对象.setFullYear();设置年份;
Date对象.setMonth();设置月份;
Date对象.setDay();设置日期;
Date对象.setHours();设置小时数;
Date对象.setMinutes();设置分钟;
Date对象.setSeconds();设置秒数;
Date.now() //当前时间的毫秒数;
Date对象.parse(2016,8,23)//将日期20160823转成距离1970年1月1日的毫秒数;
getTime();获取指定日期的毫秒数
setTime();根据指定毫秒数,设置或者修改日期;

字符串和数组的转换:
将数组转成字符串:arr.join(“符号”);//每个字符串之间用符号分隔
将字符串转成数组:str.split(“符号”);//字符串中以字符规律,分隔成数组元素;
DOM:(document object model)文档对象类型;

注意: 标签.innerHTML =" " ; :写入内容到输出标签内,可以直接写入html标签;
顶层对象:window:
window.screen 屏幕对象
window.location 地址栏对象
window.history 历史记录对象
window.navigator 浏览器对象
方法:
window.alert();//alert();//只接收字符串参数;不是会调用toString()方法;
window.document.write();//输出内容;
window.promet("");//提示输入框
window.confirm();//确认信息框,返回值是布尔类型
if(window.confirm()){
alert(“您点击了确定”);
}else{
alert(“您点击了取消”);
}
window.onload = function(){

} //网页加载完成之后执行;
//一般当有要求将js写在head中的时候,就要写这个,避免因加载顺序取不到元素;

定时器:
一次性定时器:
setTimeout(参数1,参数2);//参数1一般是函数,参数2 一般是时间单位毫秒;
setTimeout(function(){

},时间(毫秒));
循环定时器:
setIterval(参数1,参数2);//参数1一般是函数,参数2 一般是间隔执行参1的时间,单位毫秒;
var temer = setInterval(function(){

},间隔时间(毫秒));
为了能够关闭定时器,一般在写定时器的时候都要给定时器的返回值 付给一变量;
定时器的关闭:
cleatInterval(参数);//参数一定是一个定时器的返回值;

焦点事件:
onfocus //得到焦点
onblur //失去焦点
//焦点事件一般就是表单用的比较多:表单元素.onfocus = function(){}
this关键字:触发事件的本身就是this;

//以下对新窗口的操作都要让新窗口获取焦点( onfocus )
window.open(参数1,参数2,参数3);//该方法可以在当前的窗口再打开一个指定大小和位置的新窗口;
//参数1:url 参数2:“窗口名” 参数3:窗口设置的字符串(值对之间逗号分开) ;
window.close() //关闭新窗口;
window.moveTo();//设置新窗口位置;
window.resizeTo(width,height);//设置新窗口宽高;
Location对象:
主机域名:window.location.hostname
当前页面路径:window.location.pathname
完整URL:window.location

方法:assign(“url”);//传递一个地址,根据地址跳转;

reload() //刷新当前页面;
function reloadPage(){
window.location.reload();
}

roSource(); //表示对象的源代码,通常由JS自动后台调用,不写在代码中(火狐不支持);
属性:location.href = “url”;//根据地址跳转;

理解构造函数:
构造函数可以创建指定类型的对象,原生构造函数在运行时会自动出现在运行环境中,
可以创建自定义的构造函数,从而定义对象类型和方法;
构造函数本身也是函数,只是可以用来创造对象;
按照惯例,构造函数始终以大写字母开头;

实例化一个对象时: var 实例化对象 = new 构造函数
Navigator对象:
浏览器名称:
浏览器版本:
操作系统信息:
//以上的基本不用了,最新的浏览器都只要:
navigator.userAgent; //浏览器以及操作系统信息;
//在http协议的头中,也会传该信息;

screen 对象: //显示屏幕
window.screen.width //宽
window.screen.height//高
window.screen.availWidth //可用宽(除去任务栏)
window.screen.availHeight//可用高(除去任务栏)
history对象:
属性:history.length //是0就是新开的一个页面
方法:history.go();//参数是-1 和 1 代表上一页和下一页;
滚动事件 ( onscroll ) :
兼容:
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var sctollTop = document.body.scrollTop || document.documentElement.scrollTop;
DOM中获取元素的方法:
document.getElementById(“id名”);
document.getElementsByTagName(“标签名”);//放到数组中
document.getElementsByClassName(“class名”);//放到数组中
document.getElementsByName(“name名”);//放到数组中,元素有name属性才可以取

document.querySelector(“css选择器”);//只要第一个,IE8以下不支持;
document.querySelectorAll(“css选择器”);// 找到所有,放到数组中,IE8以下不支持;
表达式的优先级:
小括号可以改变优先级
算数(+) > 关系(==) > 逻辑(&&) > 赋值(=);
DOM树:
节点:是包含了标签,注释,文本,doctype等在内的多种组合;
节点的属性:nodeType 节点类型 返回值 : 1 2 3
nodeName 节点名称
nodeValue 节点值

nodeType nodeName nodeValue
元素节点 1 大写元素名(标签名) null或者undefined
属性节点 2 属性值
文本节点 3 #text 文本本身

节点关系:
childNodes :元素的所有子节点(包含空格,回车,tab空白);
children :　元素的所有元素子节点,不包含文本节点;
firstChild : 元素的第一个子节点
lastChild :　　元素的最后一个子节点

parentNode: 元素的父亲节点

nextSibling: 元素的下一个兄弟节点
previousSibling:元素的上一个兄弟节点

firstElementChild :元素的第一个子节点
lastElementChild : 元素的最后一个子节点
nextElementSibling:元素的下一个兄弟
previousElementsibling:元素的上一个兄弟

节点操作:
查 :就是获取节点(dom中获取元素的六种方法)
增加:增加分两步,先创建,在加入
创建:createElement(“属性名”);//创建属性节点
createTextNode("");//创建文本节点
加 :父级元素.appendChild(“创”);//将创添加到父中;
父级元素.insertBefore(“创”,“节点”)//添加到父级的某节点前;
修改:父级.replaceChild(“新的”,“旧的”);//父级中旧的被新的替换;
删除:父级.removeChild(“节点”);//删除父级中的节点
删.remove() //IE不支持;
克隆:节点.cloneNode(true);//克隆后再添加到新的节点中即可;

获得特定元素节点属性的值:
某元素.getAttribute(“属性名”);//获得末元素的某属性的值—等价:某元素.属性名
设置特定元素节点属性的值:
某元素.setAttribute(“属性名”,“属性值”);//设置某元素的某属性和对应的值—等价:某元素.某属性 = 属性值;
删除特定元素节点的属性值:
某元素.removeAttribute(“属性名”);//删除某元素的某属性;----等价:某元素.某属性 = “”;

自定义属性:
自定义属性多用于懒加载图片
按照惯例:data_属性名 = 属性值;
这时只能用Attribute才能取到;

获取非行内样式属性和属性值:
兼容:
if(某元素.currentStyle){
某元素.currentStyle.属性名;
}else{
window.computedStyle(“某元素”,“null”).属性名; //没有伪类参数2就是null
}
偏移量:(相对于定位父级的)
offsetWidth: 元素在水平空间上占用的大小(内容+边框+内边距)
offsetHight:元素在垂直空间上占用的大小(内容+边框+内边距)
offsetTop:元素上边界到父级元素上边界
offsetLeft:元素左边界到父级元素左边界
offsetParent:参照物为父级元素

事件:是对用户操作的响应,用于处理表单验证等,事件通常和函数结合使用,函数不会再事件发生前执行;
例如:
用户点击:onclick ondbclick
验证用户输入合法性:onsubmit
窗口滚动:onscroll
页面大小改变:onresize

事件对象:event是事件中的一个隐含元素,可以通过arguments[0]来获取;
在触发一个DOM事件时,就会产生一个event对象,它包含着事件的所有信息,例如鼠标位置,键盘按下等
阻止默认事件(兼容): //例如右键 菜单 (oncontextmenu)
if(event.preventDefault){
event.preventDefault();
}else{
return false;
}

阻止事件冒泡(兼容): //例如右键 菜单 中li的点击和 点击其他地方 ul 消失;
if(event.stopPropagation){
event.stopProragation();
}else{
event.cancelBubble = true;
}

事件绑定:标签直接绑定------< input type=“button” οnclick= “func()”>
script中:onclick = function(){}
addeEventListener(“click”,functon(){}, false/true);
第一个参数,事件名没有on,
第二个参数多是函数,如果不是匿名函数,只写函数名,没有小括号,
第三个参数,都false冒泡(冒泡就是从子级元素向父级执行) 都true 捕获(捕获机制就是从父级元素向自己元素执行)
如果多个一个事件绑定多个函数,谁true先执行谁,都true先父级,都false就冒泡;

键盘事件:
获取键盘编码:event.keyCode //每次只能存一个值
onkeydown 键盘按下
onkeypress 键盘一直按着
onkeuup 键盘松开

键盘的组合功能键:
ctrl shift alt 是特殊的按键
按下ctrl event.ctrlKey 返回true;
按下shift event.shiftKey 返回true;
按下alt event.altKey 返回true;
所以组合键的判定:

if(event.keyCode == 按键编码 && event.ctrlKye){}//同事按下Ctrl和一个按键,才会执行;

鼠标事件:
onclick 左键单击
ondbclick 左键双击
oncontextmenu 右键单击
onmousedown 左键按下
onmouseup 左键送开
onmusemove 鼠标移动
onmouseover 鼠标移入
onmouseout 鼠标移出

可以通过event对象,获得鼠标坐标:
event.offsetX //相对于事件源的 对象的偏移量 就是元素相对坐标;
event.offsetY //
event.clientX //可视区的位置 ,就是浏览器坐标
event.clientY //
event.offsetWidth //内容+padding+border(除去margin)
event.offsetHeight//
event.clientWidth //内容+padding
event.clientHeight//
event.screenX //屏幕的坐标 (用的少)
even.screenY //
event.pageX //页面的坐标
event.pageY //

事件监听;addEventListener(“dbclick”,函数, false);//默认false (冒泡)
捕获机制/冒泡:捕获就是父向子,冒泡就是子向父;

事件委托; 就是利用冒泡机制,将事件添加到父级元素上,然后通过event.target();找到所对应的实际目标对象,提高效率;

cookie:
构成:名称; 值; 域(有默认); 失效时间(有默认); 安全标志(有默认); path(有默认);
写法:分号和空格 分隔每一段cookie;
读写不直观,所以调用cookie,js(自己写的)
工作中的cookie都是规定好后直接拿来用的JS文件;
客户端存储用户信息能力的要求，属于某个特定用户的信息应该存在该用户的机器上，例如登陆信息、偏好设置等等,简单说cookie就是在客户端存储数据的一种选项

兼容整理:
event||window.event(获取event对象，兼容IE老版本)
stopPropagation||cancelBubble = true(阻止事件冒泡，兼容IE老版本)
preventDefault()||return false(阻止默认事件，兼容IE)
window.getComputedStyle("","")||currentStyle(获取非行内样式，兼容IE)
document.documentElement.scrollTop()||document.body.scrollTop(onscroll,兼容的是谷歌)
addeventListener(“click”,function(){},false/ture)方法||attachEvent(“onclick”,function(){})(事件监听器的兼容IE写法,执行顺序按照绑定顺序的反序进行执行)