js入门知识点

* 基础知识

* 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