* 基础知识
* js的输出方式
* js的组成
* js的命名规范
* 数据类型
* number数据类型
* 布尔数据类型 boolean
* 数据类型之间的比较规则
* 检测数据类型
* 判断
* arguments
* 对象
* for循环
* 数组的方法
* 实例创建数组
* 字符串的方法
* DOM获取元素
* 动态创建元素
* 元素节点
* 自定义属性的操作
* Math函数
基础知识
ctrl +f 搜索
js的输出方式
js的输出方式：
1：alert('珠峰培训'); 弹出框 弹出一个层
alert(confirm('')) --弹出框 加一个确定或者取消 加上alert有返回值 true false
2：
1）console.log('fandonglai') ;控制台输出 主要用于调试js代码
2）console.error('报错'）; 报错
3）console.warn('警告') ; 警告
4）console.info ('信息');!
5）console.dir('');输出对象详细的信息
6）console.table('');以表格的形式输出 两层以上的嵌套的时候才会输出
7）console.clear('') ;清空控制台
js的组成
js的组成：
1)ECMAScript(5) js的帮助文档api 核心 规定了js的引入方式、命名规范、变量、数据类型、语法、操作语句
2）DOM document object model 文档对象模型
3）BOM browser object model 浏览器对象模型
js的命名规范
js的命名规范
1）区分大小写
document documenT
2）遵循驼峰命名法
第一个单词首字母小写，从第二个单词开始首字母大写
personInfo
studentManageSystem
3）匈牙利命名法
oDiv aStu
4）由数字、字母、下划线、$组成，不能以数字作为开头
div1 box1 stu $stu
5) 不能使用关键字和保留字
关键字：在js中有特殊意义的
var
保留字：未来可能作为关键字的
数据类型
数据类型
1）基本数据类型
number(数字)、string（字符串）、boolean（布尔）、null（空）、undefined（未定义）
2）引用数据类型
1.object(对象数据类型 ):object 对象 Array数组 RegExp正则
2.function（函数数据类型）
基本数据类型和引用数据类型区别：
1）基本数据类型：值
2）引用数据类型：空间地址
number数据类型
number数字数据类型
包括：正数、负数、小数、0、NaN
1 -1 1.2 -1.2 0 NaN
NaN：not a number 不是一个数
NaN==NaN //false
isNaN(NaN) //true
1.isNaN(检测的内容) 作用 ：`判断`一个内容是不是有效数字，如果不是有效数字返回true，
如果是一个有效数字返回false
2.Number(要转换的内容) 强制转换，必须全部都为数字才可以转换，否则返回NaN
Number(null) 0
Number('') 0
Number(false) 0
Number(true) 1
3.parseInt() 非强制转换 从左到右依次查找，是数字继续查找，只要遇到一个字符不是有效数字，就停止查找，直接返回之前找到的数字
4.parseFloat() 非强制转换 和parseInt一样，但是可以多识别一个点.
``转换不成功 返回NaN``
布尔数据类型 boolean
布尔 boolean
包括：只有两个值 true false
方法：
1.! 一个叹号，取反：先转为布尔类型（Boolean()）然后再取反
将任意的值转为布尔类型，只有0、NaN、''、null、undefined这五个值为false 其余都为true
2.!! 取反再取反，相当于直接转为布尔类型Boolean()
3.Boolean() 等价于!!
以上三个方法的返回值（结果）为true或者false
数据类型之间的比较规则
数据类型之间的比较规则
= 赋值
== 比较
相同的数据类型直接比较
1.对象==对象 false
不同数据类型之间的比较：
2.对象==字符串 对象先转为字符串（.toString()） 然后再比较
3.对象==数字 对象先转为字符串（.toString()）再转为数字（Number()）
4.对象==布尔 对象先转为字符串再转为数字，布尔直接转为数字
5.布尔==字符串 布尔转数字 字符串转数字
6.布尔==数字 布尔转数字
7.数字==字符串 字符串转数字
8.null==undefined true
9.null或者undefined和其它任何类型比较都返回false
![]==false 先取反再比较
检测数据类型
1、typeof null "object"
typeof的返回值：字符串类型 "number"、"string"、"boolean"、"undefined"、"object"、"function"
2、instanceof 当前這个对象,是否属于某个类
问题;当前這个类,只要在這个对象原型链上,永远都是true
var ary = [1,2,3]
ary instanceof Array //true
3、constructor;作用；打印出当前在這个对象所属的类
问题；当我们给类.prototype自己复制的时候，constructor会出问题；
ary.constructor 返回的是函数 函数的名字就是他的类型
4、Object.prototype.toString.call()
基类上的tostring；作用可以打印出当前实例this，所属累的详细信息；
所以我们想要检测谁，就让this通过call变成谁
判断
判断
1、if、else if、else
2、三元运算符 三目运算符：主要应用于简单的if else的判断
3、switch case：不同值情况的判断
1: if(条件1){
条件1成立（为真）执行的代码
}else if(条件2){
条件2成立（为真）执行的代码
}else if(条件3){
条件3成立（为真）执行的代码
}...
else{
以上条件都不成立执行的代码
}
只有0 NaN '' null undefined 5个值为false 其余都为true
if条件中可以有以下符号：
&& 并且 两边的小条件都为真，整体即为真
|| 或者 只要有一个真 整体即为真 第一个为假操作第二个
> >= < <= == ===
只有一个值：直接判断真假
+ - *(乘) /（除）
! !!
2:三元运算符
应用于if else判断 或者只有一个if
格式：
条件?条件成立执行的代码:条件不成立执行的代码
3:switch case：不同值情况的判断 每一个case是三个
switch (变量){
case 值1:
变量与值1比较 成立执行的代码
break;
case 值2:
变量与值2比较 成立执行的代码
break;
....
default:
以上条件都不成立执行的代码
}
var a = 3
switch (a){
case 1:
alert(1);
break;
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default:
alert(5);
}
arguments
函数中，存储参数的一个集合
函数天生自带的一个属性：内置属性 arguments
1：非严格模式： arguments 和形参存在映射关系：一个改了另外一个也跟着改
'use strict'严格模式下： arguments和形参之间没有映射关系;
2：严格模式下不可以使用arguments.callee arguments.callee.caller
arguments.callee:当前函数本身，這里代表的是当前的函数
arguments.callee.caller :当前方法是在哪一个函数中执行的，我们可以通过這个方法获取到，如果是在window下执行的，caller值是null
----------
对象
对象
对象数据类型创建的三步：
1）开辟一个空间地址 堆内存
2）把对象中的属性名和属性值 存储到空间中
3）空间地址赋值给对象名
指向同一个空间地址时：对象1==对象2 true
1.增加一组属性
obj.name = 'zfpx'
2.获取属性名对应的属性值 'zfpx'
obj.name
3.修改属性名对应的属性值 'zf'
obj.name = 'zf'
4.删除属性
1.假删除 obj.name = null
2.直接删除 delete obj.name
obj.name
obj['name']
如果属性名为数字 只能用obj[1]
for循环
for循环
每一轮循环都要执行四步：
1）初始值
2）判断是否满足循环执行的条件
3）执行循环体中的内容
4）累加
（1） for in对象中的属性名和属性值
var obj = {
name:'zf',
age:8,
add:'北京',
1:2016,
6:6666
}
for(var a in obj){
console.log(obj[a]) obj[]的形式
}
顺序：先输出属性名为数字的(从小到大)，再按照书写顺序输出
var ary = [100,200,300,400];
for(var key in ary){
console.log(key); 数组的索引 都是从0开始一串数字 索引的作用：用来表示每一项的位置
}
（2）while
var i=0; while(i<5){ console.log(i); i++; }
19、在循环体中有两个关键字：break continue
break 跳出整个循环，整个循环结束
continue 本轮循环 循环体后面的代码不再执行，会继续执行累加，继续下一轮循环
20、 i++ 在i原有的基础上加1
i+=1 i=i+1
i+=5 在i原有的基础上加5
i++ 先运算乘除加法 在累加
++i 先自己加1在去运算
var a=0;
console.log(a+++1);1 a++先运算 不累加 得到的结果是1 (a+1)=1
console.log(a);1 运算完以后，在进行累加；這时候a=0;累加1=1
var b=0;
var b=a+++1;
b=a+1;
a++;
数组的方法
数组
1）方法的作用
2）方法的参数
3）方法的返回值
4）原数组是否改变
24;数组方法
1）增加、删除、替换 `原数组改变`
1.push(要增加的内容) 末尾增加一项
返回：新增后数组的长度
原数组：改变
2.pop() 删除最后一项
返回值：被删除的那一项
原数组：改变
3.unshift(要增加的内容) 在数组开头增加一项
返回值：增加后数组的长度
原数组：改变
4.shift() 删除第一项
返回值：被删除的内容
原数组：改变
5.splice() 删除 替换 增加
splice(n,m) 从索引n开始 删除m个
splice(n) 从索引n开始 删除到最后
splice() 返回[] 原数组不变
splice(n,m,x) 替换 从索引n开始删除m个 用x替换被删除的内容
splice(n,0,x) 增加 在索引n的前面增加一项
splice(0) 克隆
1.删除数组最后一项
1.pop()
2.ary.length--;
3.ary.length-=1;
4.ary.length = ary.length-1;
5.ary.splice(ary.length-1,1)
数组中最后一项的索引：ary.length-1
2;在数组末尾增加一项
push
ary[ary.lenght]=100;
splice(ary.lenght,0,要增加的内容)
3.克隆
splice(0) slice(0)/slice() ary.concat()
4.获取数组中[第n项，第m项],原数组不变
第n项的索引：n-1
第m项的索引：m-1
slice(n-1,m)
26；数组截取和拼接 原数组不变
1.slice(n,m) 从索引n开始截取到索引为m处，不包括m 包前不包后
返回：提取的内容
原数组：不变
slice(n) 从索引n开始 截取到最后
slice(0) 克隆
slice() 克隆
2.concat() 拼接数组
返回：拼接后的新数组
原数组：不变
ary.concat(ary2) 新数组的顺序：书写的顺序
克隆： ary.concat()、 splice(0)、slice(0)、 slice()
27；数组转为字符串的方法 原数组不变
1；.toString() 转为字符串
返回一个新字符串【】-->‘’
原数组；不变
2；join('分隔符') 根据分隔符将数组的每一项链接，—— + 把，改成分隔符了
返回；新字符串
原数组；没改变
eval 将字符串转为js代码执行
eval('3+4+5')
返回的是12
28数组的排序跟倒序
排序和倒序 原数组改变
1；sort(排序) 只能进行9以内的排序
返回的是一个排好序的新数组
原数组改变
ary.sort(function(a,b)){
return a-b;从小到大排序
}
ary.sort(function(a,b)){
return b-a;从大到小排序
}
2；倒序
reverse()
将数组反转
返回值；新数组
原数组；改变
29；原数组不变
常用但不兼容，ie6-ie8
1）indexOf(内容) 根据内容找到在数组中第一次出现的索引 索引的位置
找不到的话，返回-1
返回值；索引（的位置）
应用：判断数组中是否存在這个内容
2）lastIndexOf(内容)根据内容找到在数组中最后第一次出现的索引 索引的位置 找不到的话，返回-1
返回值；索引（的位置）
3）map()遍历数组中的每一项
有返回值
ary.map(function(a,b,c)){
a;每一项的内容
b;每一项的索引
c;原数组
}循环数组中的每一项
4)forEach()
没有返回值
区别：map有返回值 forEach没有返回值
实例创建数组
实例创建数组
var ary=new Array(12);12是设定数组的长度
var ary=new Array('12','12') [12,12]
var ary=new Array(12,23) 这样数组有两项，分别是12 和13
字符串的方法
字符串
1.通过下标找字符
2.通过字符找下标
charAt(索引) 通过下标找对应字符
charCodeAt(索引) 通过下标找对应字符的 Unicode 编码
indexOf():从前往后找； 找到的时候，返回对应的索引，找不到，返 回-1；
lastIndexOf()：从后往前找； 找到的时候，返回对应的索引，找不到， 返回-1；
3.字符串的截取
substr(n,m) 从索引n开始，截取m个；
substring(n,m) 从索引年开始，截取到索引m，包前不包后；
slice(n,m) slice功能跟substring一样，但是slice支持负值；
4.字符串的转大小写 toLowerCase()
字符串转小写 toUpperCase() 字符串转大写
5.可以跟正则配合的字符串方法：
1)split('分隔符') 根据 分隔符 将字符串转数组
2)replace(旧,新) 字符串替换
3)match() 捕获：找到要找的字符，返回数组[内容，索引，原字符串], 找不到返回null
4)search() 查找字符：找到的时候，返回对应内容的索引，找不到返 回-1；
DOM获取元素
1；如果id值重复了，只能获取第一个
可以直接通过id的名字进行操作，不推荐使用
在ie6还有ie7中，不区分id值的大小写
document.getElementById('box');
2；通过标签名获取---一组元
类数组 ；索引 lenght
document.getElementsByTagName('li')
li.length 想要操作第一个li1 li1[0]
3;通过类名获取---一组元素
var li1 =document.getElementsByClassName('li1')
想要操作第一个li1 li1[0] 类数组中索引为0的一项
不能对类数组进行操作，而是直接对這个类数组种的某一个元素进行操作
4；通过name获取的方法 一般用于表单元素（表单元素）ie下只对表单元素起作用
var input=document.getElementsByName('sex');
也有对应的索引还有长度 lenght
5；获取body
document.body
获取html
document.documentElement
6;获取可视窗口的宽度
document.documentElement.clientWidth||document.body.clientWidth;
获取可是窗口的告诉
document.documentElement.clientHeight||document.body.clientHeight;
7;不兼容 主要在移动端使用 他和css选择器是一样的
获取一个元素 支持所有的选择器
document.querySelector('#box')
获取的是一组元素
document.querySelectorAll('li')
动态创建元素
动态创建元素
1.document.createElement('标签名')
克隆
元素.cloneNode(true)
2.父容器.appendChild(oDiv) 在末尾的位置
把创建的标签，放在页面中
父容器.insertBefore(新,老) 添加到老元素之前
3.父容器.removeChild(删除的元素) 删除
父容器.replaceChild(新,旧) 用新的替换旧的
元素节点
//节点；nodes nodeType(节点的类型) nodeName nodeValue
//元素节点(标签） 1 大写的标签名 null
//文本节点（文字 空格 回车） 3 #text 文本的内容
//注释节点（注释—） 8 #comment 注释的内容
//document 9 #document null
childNodes 获取所有的子节点
children 获取所有的子元素节点 【不兼容ie8】（不写注释的情况下，可以直接用）
parentNode 父节点
previousSibling 获取上一个哥哥节点
xtSibling 下一个弟弟节点
firstChild 第一个子节点
lastChild 最后一个子节点
childNodes 获取所有的子节点
document.body.childNodes//获取body下面所有的子节点
2；children 获取所有的子元素节点 不兼容
document.body.children// 获取的是所有子元素的借点
3；parentNode 父节点
document.body.parentNode
自定义属性的操作
1
: 自定义属性的操作
属性操作有三种方法；
1‘’.‘’
2;
[]
3;attribute系列
attribute系列；
获取；obj.getAttribute(attr)-拿到元素身上自带的属性
设置；setAttribute(attr,value)
删除：removeAttribute(attr)
点和attribute的区别
1）直接给标签上添加自定义属性，通过.获取不到，但是通过getAttribute可以获取到
2）设置时；通过.设置的自定义属性，可以设置成功，但是在标签上看不到，
而通过setAttribute设置的属性，通过getAttribute获取
注意；用.来设置，就用.来获取
2
:设置自定义属性
1. obj.属性名 = 属性值
2. 设置：元素.setAttribute('属性名','属性值')
获取：元素.getAttribute('属性名')
移除：元素.removeAttribute('属性名')
Math函数
Math函数
Math不是类，他仅仅是一个对象，'Math' in window ==>true
他是window全局对象的一个属性而已，這个对象包含了很多的方法，供我们操作数字，所以我们把它称之为’数学函数‘
Math.floor(12.5) //向下取整 12.5
Math.ceil(12.5) //向上取整 13
Math.min(1,2,3); //取最小值
Math.max(1,2,3); //取最大值
Math.round(12.5); //四舍五入
Math.random() //取[0,1)之间的随机数
Math.round(Math.random()*(m-n)+n);
Math.abs() //绝对值
Math.PI() //3.1415926圆周率
Math.sqrt(9) //开平方
Math.pow()// 幂次方 x的y次方 （2，3）2的3次方
Math.trunc(); 把小数点后面的数字切掉返回整数部分
Math.sign() 判断这个数是不是正数 或者 负数 或者0 正数返回1 负数返回-1 0 返回0
网友评论