js知识点乱炖

修改属性 元素.style.样式=值     document.getElementById('box').style.width='200px';

属性操作方式
 1、. 的
 元素.属性名
如果属性是单一属性,用点操作符是取不到的,而且还会报错:点操作属性的时候,后面只能跟真正的属性名称,不能跟变量名
 如果想用点操作符去获取带横杠的属性,那首先要把横杠去掉,然后把横杠后面的第一个字母大写
 2、[] 的
如果属性中带横杠,用[]的方式去操作属性:[]操作属性的时候,里面可以放属性名称与变量名,如果放的时属性名,那要加引号,如果放的是变量名,那不需要加引号

属性 :元素身上所具有的一些特征

1、系统自带的属性
* type、id、style、value、src
2、自己添加的属性 btn.kaivon='名字';
* 自定义属性,系统当中是没有的,我们自己添加的
* 系统自带的属性,满足不了我们的需求,给一个自己添加的属性

inputs[i].index=i; //给每个按钮添加一个自定义属性,存的是它们对应的索引值

表单的值:元素.value

获取属性class:用元素.className

获取到是一个标签对里的所有内容(包括子标签对):元素,innerHTML

地址:href(连接的地址) 和src(图片的地址):href与src取到的是绝对地址,不是属性里的值;切记不要拿href与src取到的值去做判断

如果元素没有加载完,js获取的对象就为null     所以ji代码要放在window.onload=function(){}

 函数的定义

function 函数名(参数){
   //在这里就可以使用这个参数
   //这里放的就是要重复利用的代码
 }

函数调用  函数名(参数);

函数表达式:

var 变量=function(参数){

     要执行的代码
}

函数表达式调用:   变量(参数)

 匿名函数 没有名字的函数
 
* 匿名函数不能直接声明,会报错
*
* 匿名函数怎么用
* 当匿名函数是以被赋值的形式所出现,并且它是被事件调用
 事件 window.onload      赋值 =
事件=匿名函数
window.onload=function (){
       alert(1);
}

break:停止剩下的所有循环

continue:停止本次循环

return:返回,让函数停止执行,它只能用在函数内

函数参数: 函数外面传到函数里面的数据,从而函数里面能使用这个数据;多个的话就用逗号隔开

arguments对象:代表了所有的实参集合(类数组)   这个集合还有一个length,代表了实参的个数      它只能在函数内使用

函数运算结果返回值:return 

有就返回return结果,并且return;后的代码不再执行,函数就此结束;没有就返回undefined;

作用域    全局变量是window下的属性,在函数外面声明

               局部变量与局部函数只能在声明它们的地方用,在其它的地方是用不到的

              函数(函数声明,不是函数调用)可以嵌套的,嵌套的函数(局部函数)可以访问父函数里的内容

             子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立

js会把函数或者变量提前解析一下

步骤

1、先找var 、function(函数声明)关键字以及参数

2、如果找到了var(声明的变量,参数),会给他赋一个undefined。如果找到了function,那它会把整个函数都拿过来

3、把找到的东西,放到对应的作用域的最开始的位置

4、逐行执行代码

备注:函数表达式,不会被预解析,所以只能先声明再调用,不能把调用放在声明的前面(不然就报错)

生命周期

变量或函数在相应的作用域里存在的时间

函数执行完,局部变量生命结束

页面关闭,全局变量生命结束

闭包

函数嵌套函数,子函数访问父函数的变量,就产生了一个闭包环境

闭包的作用:1、函数外可以使用函数内的局部变量和局部函数; 2、在循环当中找到对应的i的值

它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

垃圾回收机制

变量存在内存当中的,变量在使用完以后,没有在其它的地方再使用,就会被清除,用来释放内存。垃圾回收机制会按照固定的时间,周期性的执行

字符串拼接 :+ 当加号的任意一边有一个是字符串,那它就是字符串连接的意思

* if语法
* if(判断条件){
*   当判断条件成立的时候,执行这里的代码
* }else if(判断条件1){
*     当头条条件1成立的时候,执行这里的代码
* }else if(判断条件2){
*     当判断条件2成立的时候,执行这里的代码
* }else{
* 当以上条件都不成立的时候,执行这里的代码
* }
当一个条件满足的时候,代码只会走满足条件对应的大括号里的内容。其它的都不会走

数组 length属性

document.getElementById(id名称)

querySelector(css选择器)
* 通过css选择器去获取一个元素
* 它获取到的只有一个元素,如果说有重复的,那它只取第一个
*
* 主语
* document 从整个文档里去获取元素
* 父级 从父级里去获取元素

* querySelectorAll(css的选择器)
* 通过css选择器获取到一组元素
* 它获取到的也是一组元素,它也是一个类数组
*
* 主语
* document 从整个页面中去获取一组元素
* 父级 从父级下去获取一组元素

for循环:

for(条件初始化;条件判断;条件变化){
   当条件成立的时候(true)重复执行这里的代码
}

第一步:条件初始化

第二步:条件判断

第三步:走大括号里的代码

第四步:条件变化

第二次循环:第二步、第三步、第四步

for in用来遍历对象当中的数据:

for(var 变量名 in 对象){
* 变量名 对象里的属性名(key)
* 对象[属性名] 属性名对应的值
* }

while:条件循环 

* for 次数循环
* while 条件循环,它一般用在嵌套的元素,或者有嵌套的数据

* this
* 指的是当前对象
* 关键词,不能当作变量名
* 只能读,不能写。它的值只能用,不能修改
*
* 1、在函数外用
* this是指向window
* 2、在函数内使用
* 1、函数是直接被调用的
* this指向window
* 2、被事件所调用,并且是以赋值的形式出现
* this指向是,谁调用了函数,那this就指向谁
*
* 谁调用了函数,那this就指向谁

 js简单数据类型:String     Number(NaN运算失败时出现,NaN不等于NaN)   Boolean    Undefined(未定义:只有undefined;声明一个变量,但没给它赋值,那它就是undefined)   Null(空: 只有null)

js复杂数据类型:Object(对象 键值对:key:value),操作:Object.属性

 检测数据类型:tyleof(数据) 

* 系统定义的数据类型        typeof返回的数据类型
* String                                 string
* Number                              number
* Boolean                             boolean
* Undefine                            undefined
* Null                                    object
* Object                                object

 函数的typeof结果为function

从页面当中拿到的内容都是字符串

数据类型转换  

js支持把任意一种数据类型转换成以下类型
* 数字
* 字符串
* 布尔值
* 对象转成这三种数据是没有意义,因为对象里面可以放任意一种数据类型

显式数据类型转换

Number(要转换的值) 把任意类型都转为数字    Undefined:NaN     Null:0    字符串:(空为0 ;纯数字为数字;不纯为NaN)、、、parseInt()   parseFloat()  :开头是空格或数字(否则就是NaN)开始找,直到遇到非数字就停止;

String(要转换的值):加上引号

Boolean(要转换的值):Undefined和Null、数字0和NaN、空字符串都是false

isNaN():检测数字  它会先把参数用Number()方法转一下 纯数字的字符串或是数据都返回false

隐式数据类型转换:在进行操作的时候,js内部把数据转换成符合操作的类型

加号两边没有字符串,那就是数学中的加法运算,会把true转成数字;有字符串的话就都转成字符串

减号的作用就是数学上的减法运算,会把两边都转成数字

数组和对象的区别:

数组表示有序数据的集合,而对象表示无序数据的集合。如果数据的顺序很重要,就用数组,否则就用对象。
 数组和对象的另一个区别是,数组的数据没有”名称”(name),对象的数据有”名称”(name)。
对象里的“名称”是唯一的,很多时候我用对象来去除重复数据。


三元操作符

a?b:c
* 如果a的值为真,返回b,否则返回c

switch

语法
* switch(变量){
* case 值:
* 当这个值与变量的值相同的时候,才会走这里的代码
* break; 停止以下代码继续执行
* case 值:
* 当这个值与变量的值相同的时候,才会走这里的代码
* break; 停止以下代码继续执行
* case 值:
* 当这个值与变量的值相同的时候,才会走这里的代码
* break; 停止以下代码继续执行
* default:
* 当以上变量都不满足的时候,会执行这里的代码
* }

定时器:js中内置的一个方法

每隔一段时间或者延迟一段时间就执行一段指定的代码

setInterval(function(){
* 每隔一段时间就会执行这里的代码
* },时间)

setTimeou(function(){
* 当时间到达后,会执行这里的代码
* },时间);
如果函数是写在外面的,在这里调用的时候只用写函数的名字,不能加括号

定时器里的this是指向window的,因为定时器是window身上的一个方法,所以this指向window

清除定时器:clearInterval(timer);

clearInterval(定时器的返回值)

运动的原理
* 在定时器里不断的去修改元素的属性,修改完成以后再把结果重新赋给元素

* 运动的问题
* 1、如果每次的步长如果与目标值不成倍数的话,就到达不了目标值
* 解决:把判断条件改成大于等于就可以
* 2、如果用户连续点击开始按钮的话速度就会越来越快
* 原因:用户不断去点击按钮话会重复开启多个定时器,造成速度累加
* 解决:在点击的时候先把上一个定时器给它清除了

 

原文地址:https://www.cnblogs.com/pengc/p/8893075.html