js知识点乱炖

Posted 2020-10-31 pengc

修改属性 元素.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、如果用户连续点击开始按钮的话速度就会越来越快
* 原因：用户不断去点击按钮话会重复开启多个定时器，造成速度累加
* 解决：在点击的时候先把上一个定时器给它清除了