本文为原创文章，未经作者允许不许转发
JavaScript
执行JS的方式
1. 写在 <script> 标签中
2. 通过事件的方式
添加事件属性
3. 通过协议的方式
4. 通过外部引入
注意: 一旦 <script> 标签引入了外部样式，里面的内容都会失效
由于代码从上往下执行，html标签没有加载完毕，JS无法找到它
alert，prompt，confirm
1） alert弹出框，有警告作用
2） prompt(“用户输入内容“,”默认值”)
3） confirm(“选择行的问题”);//true,false
4） innerHTML:获得对应对象中的所有的HTML内容
5） JS和CSS属性改变的写法
a) CSS=>Margin(JS=>margin)
b) CSS=>border-color(JS=>borderColor)
JS基本语法
1. 变量
x = 5;
y = 2;
z = x + y;
* 使用字母替代数值
2. 变量的定义
使用关键字 var 定义变量
var i = 10, num = 20;
3. 命名规则
必须由字母，数字，下划线，美元符$，组成，不能以数字开头
var $ = 100;
4. 敏感的私处
JS严格区分大小写
大B和小b 的故事
var b = '伟纯';
var B = '伟纯妈妈';
5. 变量使用
变量先声明，后使用
如果变量没有声明就使用，会报语法错误！！！
JS调试方式:
1. alert();
弹出警告框，特点就是中断代码执行
2. 控制台
在控制台中，不会解释HTML标签
console.log();
打印到控制台
打印数字是蓝色
打印字符串是灰色
console.dir();
打印详情
3. document.write();
就像 echo
4. 断点调试
debugger
中断代码一行一行地解释，方便我们理清逻辑
奇葩的加号
1. 求和
1 + 1
2. 拼接
两边只要有一边是字符串，就是拼接效果
JS六大数据类型
1. boolean 布尔类型
2. number 数值(包含整数和浮点数)
3. string 字符串
4. object 对象
5. function 函数
6. undefined 未定义类型
照妖镜: typeof
boolean:
true 和 false
要 不要
number:
包含整型和浮点型
1. 浮点数(0.8, .8, -.8)
1. 浮点数精度损耗问题
* 浮点数，精确度高，但不精确
总结:
1. 由于舍入误差问题(其他语言都会存在，现代计算机处理小数并不是很好)
2. 永远不要使用浮点数进行比较
3. 如果涉及金融计算，不能有一点误差?
解决方案:
变为整数处理
0.99元 --> 99分
string 类型
1. PHP中，双引号可以解析变量，JS中都不可以
2. JS中，单双引号一致，没有区别
字符串长度:
1. 如何获取字符串长度
'str'.length
2. 中英文长度一样吗？
一样，都算一个长度
JS支持 Unicode 字符集
集合了全世界所有进入互联网国家的字符集合
组成: 由 u 后面接 4 个16进制
字符串数组:
可以通过数组的形式访问单个字符串
NaN
Not a Number
人称"奇葩"，它是数字界的一股清流
涉及非法运算，就有可能得到 NaN
奇葩特性:
1. 任何涉及NaN的计算，返回的结果还是NaN
2. JS中唯一一个连自己都不等于自己的奇葩
检测奇葩的方式:
1. isNaN()
检测是否NaN
2. 判断自己是否不等于自己
x != x --> true -->NaN
变量可变:
值可变，重新定义(可以给任何类型)，后面覆盖前面
var n = 10;
n = 'dsb';
弱类型特性:
变量的类型是由值决定的！
var s = 'sb';
强类型特性:
定义变量必须指定数据类型，以后仅仅可以存储对应的类型
int n = 100;
n = '你啥啊';
undefined 类型:
表示的含义: 未定义的，不存在的！
1. 定义了变量没有初始化(系统也不知道应该是哪种类型)，那么类型就是 undefined
2. 变量没有定义不可以用，但是可以检测类型
使用了没有定义的变量，也是 undefined
定时器:
时间的单位: ms
注意: 设置时间起码在10毫秒以上，计算机执行也要花费事件
1.周期性(老婆)
setInterval(回调, 时间);
每隔指定时间，就会回调一次
2.一次性(快餐)
setTimeout(回调, 时间);
3.理解他们的执行顺序
定时器
每个定时器都是一个标记，而这个标记代表定时器本身
var timer = setInterval(function() {
console.log('来一炮');
},300);
//定时器的返回值
console.log(timer);
清除定时器
clearInterval(timer);
找对象改属性
Varbox = document.getElementById(‘BOX’);
修改样式
Box.style.borderRadius=i+”px”;
修改标签内容
Tips.innerHTML=…;
a) 获得对象：varobj=document.getELementById(“id名”);
b) Varobj=document.getElementsByTagName(“标签名”);//获得的是所有的标签对象都放到一起，数组obj[0]代表第一个获得的标签对象.其中不只是document还可以是某个对象，比如form1这个id对应的表单对象。
c) Document.body获得body这个对象
转换
1.number to boolean
只有 0 和 0.0 为false
2. string toboolean
只有空字符串为 false ，其他都为 true
3. boolean to string
var bool = true;
bool = false;
result = String(bool);
console.log(typeof result, result);
4. number to string
var num = 10;
result = String(num);
console.log(typeof result, result);
5. boolean to number
var bool = true; // 1
bool = false; // 0
6.string tonumber
用的是Number和parseInt两种
Number只要扫描检测到不是数字的会成NaN,如果是‘’则会是0
parseInt会从头检测，一遇到不是数字的就停下来，返回之前检测到的数字，
但是如果没有检测到任何数字就会成为NaN.
parsefloat会从头检测，一遇到不是数字和.的就停下来，返回之前检测到的数字，
但是如果没有检测到任何数字就会成为NaN.
隐性转换
除了10+‘30’是拼接，其他的-*/都是转换成number进行计算
False是自动转换为0；
NaN和undefined为false
随机数封装函数：
function mt_rand(start, end) {
var intNum = Math.floor(Math.random() *1000000000);
var num = (end - start) + 1;
var random = (intNum % num) + start ;
// 返回随机数
return random;
}
var result = mt_rand(31, 89);
console.log(result);
Math
Math.pow(n1,n2);求n1的n2次方
Math.abs(n);求n的绝对值
Math.round(n);求n的四舍五入的值
Math.max(n1,n2。。。);可以放好多个参数，求这些参数的最大值
Math.min();求最小值
Math.floor(n);向下取整，不大于n的最大的整数
String
toLowerCase(); //转化为小写
toUpperCase(); //转化为大写
Var k = 'qwertyuiop';
Var i = k.toUpperCase();
console.log(i,k); //结果为： QWERTYUIO qwertyio
函数
返回值：
1.函数没有返回值，默认返回 undefined
2.返回值可以返回任意数据类型
3.函数是一个数据类型，可以被覆盖，可以传递本身，还可以打印
调用以及定义
JS在执行之前，会进行一次语法扫描的过程，目的就是检测开发者所写的内容是否合法。同时，会将函数预先存放到内容当中，当执行第一行代码是，所有的函数已经被"预加载"。
函数的垃圾回收机制
1.函数每调用一次，里面的内容都会被重新初始化
2.调用完毕后，里面的内容都会被释放
全局变量和局部变量
局部变量
1.在函数内定义的就是局部变量
2.仅仅可以在函数中使用
有var --> 局部变量 --> 访问范围就在函数体
无var --> 全局变量 --> 全局可访问
提前声明
局部变量有效范围是整个函数体，在函数体中，只要被var声明过的变量，都是数据局部变量，局部变量可以使用在定义之前，系统内部已经在函数行首进行了声明，这个特性叫做"声明提前"
自调函数
1. 本质: 把一个匿名函数当作一个整体，并调用
2. 它可以模拟"命名空间"技术，命名空间，就是为了解决命名冲突而使用的。
3. 避免了全局函数，全局变量的污染问题
闭包函数
当一个函数，使用了非本身作用域的变量，则称为闭包函数
打破了作用域链，从而访问了一个局部变量
作用:
1.打破了作用域链，从而访问了一个局部变量
2.子函数的执行依赖于父级函数的变量，父级函数执行完毕后，该变量并没有被销毁，否则就会相互矛盾。当再次调用子函数时，访问的则是元素的变量，它会长期驻扎在内存，直至脚本执行完毕。
利用闭包函数做缓存：用一个按钮不停触发test函数；
function cache() {
//用于存储数据的变量
vardata = null;
//直接返回匿名函数
returnfunction () {
if(data === null) {
//第一次执行
//模拟复杂运算
varsum = 0;
for(var i = 1; i <= 100000000; i++) {
sum+= i;
}
//缓存数据
data= sum;
setTimeout(function(){
data= null;
},3000);
}
console.log('你是我儿子！', data);
};
}
//获取子函数
varfn = cache();
//console.log(fn);
functiontest() {
console.time('本次计算耗时:');
//调用子函数
fn();
console.timeEnd('本次计算耗时:');
}
对象
[ ] -> 数组 -> 键值对 -> key-value结构 -> key:number,value:all -> 无序集合 -> 索引性 -> JS索引数组
{ }-> 对象 -> 键值对 -> key-value结构 -> key:string,value:all -> 有序集合 -> 关联性 -> JS关联数组
定义对象
1. 直接量定义
var girl = {name:'coco', age:20,height:'170cm', size:'36D'};
2. 通过关键字 new 创建对象
等价：var o = {};
var o = new Object();
3. 寻找页面中的元素(宿主对象)
* 在页面上的每一个标签 ，元素都是对象！
1. 通过ID找对象
document.getElementById('IdName');
2. 通过标签名找对象
document.getElementsByTagName('TagName');
3.document.getElementsByName('name值')；
4.document.getElementsByClassName('class类名')
访问属性时，可以使用两种语法
1. 点
2. 方括号
2.1可以访问包含特殊字符的属性名
2.2变量解析问题
让一个对象等于另一个对象的时候并不是复制赋值，而是取别名，有引用传递的特性
但是要是一定要进行一个对象的复制赋值的时候就要使用concat函数
var result =list.concat(other, coll);这是让这相当于php中的array_merge,可以用var new_list =other.concat();来进行复制
对象的遍历 ( 只能可以说是遍历各个属性中的属性名，然后可以通过属性名来获取属性值)
var phone = {mainboard:'主板', 'screen':'屏幕', sim:'手机卡',"po-wer":'电池'};
for ( var keyin phone) {
console.log(key+ ' => ' + phone[key]);
}
var list =[10, 30, 99];
for (var keyin list) {
console.log(key+ ' => ' + list[key]);
}
// ES6新语法的遍历 (浏览器版本要相对较新，不推荐使用)
list.forEach(function(val, key){
console.log(key + ' => ' +val);
});
将一个数组对象清空或者保留前几位的方法
List.length = 0 //清空
List.length = 1 //保留第一个元素以此类推
事件
i. 鼠标事件
1. onmouseover鼠标放上
2. onmouseout鼠标离开
3. onclick点击
4. ondblclick双击
5. onmousedown鼠标按下
6. onmouseup鼠标抬起
7. onmousemove鼠标移动
a) 一般是document.onmousemove =function(){};
8. oncontextmenu鼠标右击触发事件会有默认行为冲突
ii. 键盘事件
1. onkeypress按键一次
2. onkeydown键盘按下
3. onkeyup键盘抬起
iii. 表单事件
1. onsubmit提交事件
2. onreset重置
3. onblur失去焦点
4. onfocus得到焦点
5. onchange该事件在表单元素的内容改变时触发( <input>,<select>, 和 <textarea>)
6. oninput 元素获取用户输入时触发
注意：IE8不兼容
实例：实时统计字符数量
iv. 窗口事件：页面加载完成之后调用的事件
1. window.onload=init;
2. <bodyonload=”init()”></body>
v. Event
1. event.target事件源
2. event.clientX;鼠标的x坐标
3. event.clientY;鼠标的y坐标
vi. this事件源，代表事件本身的对象
vii. 图片事件
1. onload
加载成功
2. onerror
加载错误
注意：从网页上获得的数据都是字符串
innerHTML和value对比
innerHTML：所有在这个对象之内的内容都是innerHTML的内容
value内容
一般情况：input的时候都是value，双标签都需要用到innerHTML
绑定事件的两种方法：
1. 在标签中直接添加事件属性
2. 用找对象的方式：
Ibox.onclick =function(){};
表单事件，滚动事件，点击事件，定时器的灵活运用
1. 在script中定义一个变量，他在函数内做的改变会影响外面定义的常量，不像php中只是在函数中进行操作，具体反映在进行轮播图数组下标的操作的时候，需要对一个下标值进行加加减减，就需要外部的一个变量来进行存放
2. 对于登录显示只是点击登陆的时候出发点击事件将两个div的两个display的值进行改变。
3. Window.onscroll = function(){};滚动事件，在滚动网页的时候进行触发，不停低滚动就不停地触发，window.scrollY为滚动条到顶部的距离
4. 在导航延时消失的js中，延时消失使用了定时器，但是在延时消失没有消失的时候其他的选项可以触发，就会一次性出现所有的导航子列表，用户体验不佳，所以在显示子列表的时候要判断当前的定时器是不是为0，只有为0的时候才能进行显示，就是要登到定时器执行完毕将自己置0的时候才能够显示
5. 表单点击按钮触发事件：
通过id来获得会识别这个一个from标签就返回所谓的标签对象
这个对象的下标对应这第几个input标签，但是.name就返回的是一个匹配name的数组
a.获取当前的表单
var radio =document.getElementById('form1');
b. var test = radio[i].value;获取这个表单下标为i的input标签的value值
c.获取这个表单的name为character的个数
var test =radio.character.length;
d.判断这个标签是不是被选中
var test =radio[i].checked;
e.onreset表单重置的重置的事件还有onsubmit事件
var radio1 = document.getElementById('form1');
radio1.onreset = function(){
// console.log(name);
var showbox =document.getElementById('box1');
var re = confirm('你确定要重置吗？');
if(re){
showbox.style.display="none";
return true;
}else{
return false;
}
}
DOM
DOM树
文档(document)
|
根元素(<html>)
|
_____________________________________
| |
元素(<head>) 元素(<body>)
| |
___________ ______ __________________________
| | | |
元素<title> 属性(href)--- 元素<a> 元素<b> 元素<h1>
| | | |
文本："文本标题" "百度" "青瓜" "其它文本"
DOM树：
标签 -- 对象 -- 节点
所有的内容都是节点
1.document 文档节点(整个文档)
2.每个HTML元素，是元素节点
3.HTML元素内的文本，是文本节点
4.HTML元素内的属性，是属性节点
5.注释，是注释节点
节点定位:
通过ID找对象(节点)
document.getElementById();
通过标签找对象(节点)
document.getElementsByTagName();
通过类名找对象(节点)
document.getElementsByClassName();
根节点:
特点: 无需寻找
html--> document.documentElement
body--> document.body
DOM对象的常用属性 -- 查找节点(家族式查找)
1. firstChild 大儿子
2. lastChild 么儿子
3. childNodes 所有子节点
4. children 所有子元素节点
5. parentNode 父节点
6. nextSibling 下一个兄弟
7. previousSibling 上一个兄弟
8. element.attributes 属性的集合
DOM方法(创建、添加、修改、删除、克隆)
1. 创建节点:动态创建元素
格式：
document.createElement('tag');/重要
2. 添加节点
添加到最后：
parent.appendChild(object son )
添加到position之前：
parent.insertBefore(objectson , position )
添加节点的两种情况要分清：
1. 添加动态创建的节点(真正意义上的添加)
2. 添加找来的节点（这个是将找来的节点剪切过来）
3. 替换节点
替换元素中的子节点
parent.replaceChild(newnode,oldnode);
4.克隆和删除节点
克隆节点
var newObj =old.cloneNode([true]);//只有传了参数true，才会带着子节点一起克隆
删除节点(只能删除子节点)
die.removeChild(son)
经典的自杀案例
son.parentNode.removeChild(son);
杀爹
son.parentNode.parentNode.removeChild(son.parentNode);
删html
document.removeChild(document.documentElement);
自动跳转
Location:href=’http://www.baidu.com’;
History.back();回到原页面
克隆节点：
varirect = document.getElementById('irect');
varnew_rect = irect.cloneNode(true);
//true为克隆里面的子元素
//修改新克隆的对象
new_rect.id= 'irect2';
new_rect.style.border= '1px solid red';
//添加到节点树
document.body.appendChild(new_rect);
设置获取删除标签属性：
varlink = document.getElementById('link');
console.dir(link);
//HTML标签属性
console.log(link.attributes);
//设置属性
link.setAttribute('class','test');
//删除属性
link.removeAttribute('title');
//获取属性值
console.log(link.getAttribute('class'));
history历史对象
window.history.length;//可后退数
window.history.back();//后退一步
window.history.forward();//前进一步
window.history.go(1);//前进一步
window.history.go(-1);//后退一步
鼠标坐标点
e.clientX
e.clientY
键盘编码
e.keyCode
组合键
e.ctrlKey
e.altKey
e.shiftKey
以下这些我们叫做 DOM 属性
ipt.checked= true;
ipt.firstChild;
ipt.nextSibling;
// 添加标签属性
ipt.setAttribute('title','勾引我');
//添加自定义属性
ipt.attr_marke= 100;
// 怎么设置，怎么获取
console.log(ipt.attr_marke);
console.log(ipt.getAttribute('attr_marke')); //null
console.dir(ipt);
//删除属性
Ipt.removeAttribute(‘title’);
解决兼容性获取外部样式
var cs = irect.currentStyle || window.getComputedStyle(irect);
irect.currentStyle是ie能识别的获取外部样式，在其他浏览器中是undefined；
但是window.getComputedStyle（irect）是其他浏览器获取外部样式的，但是在ie中不是undefined而是直接报错，所有这个短路就有了先后顺序的说法；
冒泡行为：当元素存在层叠现象，触发子元素事件的同事也会引发父级元素的事件执行。
阻止冒泡行为：在最内部的子元素事件内加上：
① IE中：evn.cancelBubble = true;
② Other:evn.stopPropagation();
Onkeydown 和 onkeyup 是不区分大小写的
☆：evn.keyCode返回事件中的键盘编码
Onkeypress：按下了等于按了一次
按键组合:
If(evn.altKey&& evn.keyCode == 82){
//判断是不是alt + E按下
}
AJAX
1. 实例化对象
`var ajax = new XMLHttpRequest();`
2. 建立连接
* 调用open()方法并不会真正发送请求，而只是启动一个请求准备发送
ajax.open(method,url,async)
method:请求的类型；GET 或 POST
url: 文件在服务器上的位置，get方式可以通过url进行传参
POST：要加上一句：
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send('key1=val1&key2=val2');
async:true(异步) 或 false(同步)
3. 发送请求
ajax.send([string])
string: string 参数仅用于 POST 请求
4. 准备事件
ajax.onreadystatechange
每当 readyState 改变时，就会触发onreadystatechange 事件。
ajax.onreadystatechange= function (){
if(ajax.readyState == 4 && ajax.status ==200){
document.write(ajax.responseText);
}
};
readyState状态：
0:请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
JSON方法
1. JSON.stringify(obj);
将对象转换为字符串
2. JSON.parse(string);
将字符串转换为对象
* 注意:
内容只能使用双引号
3. eval()
只能转换PHP的索引数组
eval ("(" + txt +")");
均可
4. PHP函数
json_encode()转化为字符串
编码
json_decode( string $json ,bool $assoc)
解码
通过a标签提交表单，这样不会使用button改变样式：
<a href="javascript:document.getElementById('dopay').submit();">
var timestamp = Date.parse(new Date())/1000;
console.log(timestamp);
varfuck = $('.fuck');
varsb = 1512564849;
vartimer = setInterval(function(){
varss = sb - timestamp;
fuck.html(ss);
timestamp++;
},1000);