JavaScript笔记

目录

        JavaScript基础

1.关系

2.JavaScript的引入方式

3.注释和结束符

4.输入和输出语法

5.变量

6.数组（Array）

7.常量

8.数据类型

9.运算符

10.模板字符串

11.类型转换

12.运算符

13.语句和运算符

13.continue和break

14.数组操作-新增和删除

15.函数

16.逻辑中断

17.对象

18.数据的存储

         Web API阶段

19.DOM

19.1.获取DOM元素

19.2.操作元素的内容

19.3.操作元素的属性

19.4.表单相关属性

19.5.自定义属性

19.6.计时器

19.7.事件监听

19.8.常用事件

19.9.事件对象 

19.10.环境对象

19.11.回调函数

19.12.事件捕获和事件冒泡

19.13 .事件委托

 19.14.阻止默认行为

19.15. 页面加载事件load和DomContentLoaded

19.16.滚动事件scroll

19.17.client家族和offset家族

19.18.日期对象

19.19.时间戳

19.20.DOM节点操作

综合案例

 广告实例

点名实例

小米搜索框实例

B站评论区实例

复选框全选/取消全选实例

京东动态购物栏实例

京东动态购物栏实例（优化后）

滚动事件案例-侧边栏的显示和隐藏

offset实例-仿京东头部导航条的显示隐藏

offset实例-bilibili导航条动画效果

时间戳-倒计时案例

---

JavaScript基础

1.关系

HTML控制着网页的结构，CSS控制着网页的外观，JaavaScript控制着网页的行为，如果将小人比作网页上他们的关系，他们之间的关系就像：

2.JavaScript的引入方式

• 内部样式
  在的上方书写（网页的加载是从上至下的）：

• 外部样式
  外部文件引入，当项目比较大时，可以实现结构、样式与行为的分离：
  
• 行内样式
  记载行内书写Js代码，例如：

  点击我月薪百万

 3.注释和结束符

• 注释分为单行注释和多行注释：
  • 单行注释：//（ctrl + /）
  • 多行注释：/**/（shift + alt + a）
• 结束符：在JavaScript中，以分号作为语句的结束符。由于浏览器可以自动判定语句的结束为止，因此分号可写可不写。具体按照团队开发要求进行。

4.输入和输出语法

三种输出语法：

• document.write(' ') -向body标签内输出，可以解析标签
  
• alert(' ') -网页打开时弹出对话框输出
• console.log(' ') -控制台日志输出，供程序员调试使用
  

输入语法：

• prompt(' ') -弹出对话框请求用户输入
  

 5.变量

变量的定义：

let 变量名 = 值

使用let还是使用var定义变量？
let的出现解决了var的一些问题（现任永远比前任优秀！）。let可以使未赋值仅声明的变量报错误；let可以使重复声明的变量报错；

变量的本质以及命名规则：

• 变量的本质是在内存中申请的一块用来存放数据的小空间。
• 命名规则：
  不使用关键字；只能由下划线、字母、数字构成且数字不能开头；起名要有意义；遵循小驼峰命名法，类似Java规范。

6.数组（Array）

数组的声明：

let arr = [e1,e2,e3,...]

数组的使用：

• 通过索引（从0开始）下标输出数组的元素
• 数组中可以存储任意类型的数据元素,以下这种定义方式就是正确的：

  let arr = ['hello', 0, false]

7.常量

常量的声明：

const PI = 3.14

8.数据类型

JavaScript中的基本数据类型包含：

• 数字类型(Number)：包含整数、小数、整数、负数
  NAN：计算结果错误
• 字符串类型（String）：使用单引号，双引号，反引号(` `)包裹的数据，引号的使用基本没有区别，一般使用单引号
• 布尔类型（Boolean）
• Undefined（未定义型）:声明了变量但未赋值
• null（空类型）

引用数据类型有：object（对象类型）

null和undefined的区别：
null表示赋值了，但是内容为空；undefined表示没有赋值。通常null常做为尚未创建的对象使用，像将来某个变量中存放的是一个对象，但是该对象还么有创建好，可以先给这个变量赋值为null

检测数据类型：typeof 变量名

 

9.运算符

除法运算符：
与Java语言不通，JavaScript的除法包含小数位。

加号运算符：
数值相加，字符串相连(拼接字符串)

10.模板字符串

• 字符串用` `包裹
• 在字符串内容中拼接变量时，用 ${ } 包裹变量
  例如：

11.类型转换

JavaScript中的类型转换分为显示类型转换和隐式类型转换：

显示类型转换：
将字符串转换为数字：Number(string)；parseInt(str)；（只保留整数）；parseFloat(str)；（保留小数）。其中paeseInt和parseFloat遇到非数字就停止转换

console.log(Number('456.33'));    //456.33
console.log(parseInt('345.55'))   //345
console.log(parseFloat('345.55')) //345.55
console.log(parseInt('33.5px'))     //33
console.log(parseFloat('33.5px'))   //33.5

隐式类型转换：
使用‘+’可以将字符串转换为数字：

console.log(typeof (+'1223'))    //number

此外，-，*，/ 在进行运算时，会先将字符串转换为数字再进行运算：

console.log(2 - '2')        //0
console.log(2 * '2')    //4
console.log(14 / '3')   //4.66666666...

12.运算符

其他常见的常用的运算符就不说了，在JavaScript中常用的有：

• 自增/自减运算符，并且在开发中通常都是使用后置自增自减，并且时单独使用的
• 区分比较运算符’==‘和‘===’：‘==’比较的是左右两边的值是否相等，‘===’比较的是左右两边的类型和值是否都相等，在实际开发中常用‘===’。例如：

  console.log(3 === '3')  //false
  console.log(3 == '3')  //true
  console.log(NaN === NaN)//false

13.语句和运算符

语句：

• 单/多分支语句(if..else if..else..、switch..case..default)
• 循环语句(while,for)

运算符：
常见的运算符就不说了，以下为三目运算符的使用：

3 > 5 ? alert('3>5') : alert(3 < 5)
//3>5成立的话返回alert('3>5')，否则返回alert('3<5')

13.continue和break

continue: 跳过本次循环，继续循环的进行
break: 跳出循环结束循环

14.数组操作-新增和删除

新增：（单词可以增加多个）
数组头部新增：arr.unshift(e1,e2...)
数组尾部新增：arr.push(e1,e2...)

删除：（一次只能删除一个）
从数组头部删除：arr.shift()
从数组尾部删除：arr.pop()
指定下标删除：arr.splice(index_start,num);（从index_start开始，删除num个元素）,再开发中使用最多，像抽奖等

15.函数

函数的注意事项：

• 函数定义时实参的声明不用使用使用关键字let
• 函数在定义时可以通过e = 0的方式指定参数的默认值，当函数的调用方没有传递过来参数时，就使用默认值进行函数的运算：
  
• 使用return可以返回函数执行的结果，return的结果不能换行写；return语句之后的语句不会在被执行 

函数的定义：

function(e1,e2,e3...) {
    ...
}

• 匿名函数：
  定义：

  let fn = function(e1,e2...) {}    //函数表达式
  //调用
  fn(e1,e2...)

• 立即执行函数（引入JavaScript文件时会自动执行）
  定义：

  //实参：sc，形参:xc
  ①(function(xc1,xc2...) {} (sc1,sc2...));
  ②(function(xc1,xc2...){})(sc1,sc2...);

  立即执行函数在使用时需要在语句块末尾加上分号！

函数的使用案例：

• 输入秒数，转换为时分秒：

  

16.逻辑中断

逻辑终端常用于函数形参的默认赋值，例如：

function(a,b) {
    a = a || 0
    b = b || 0
    ...
}

逻辑与&&进行运算时，如果左表达式的值为true，就不再执行右表达式。同理，逻辑或 || 在左表达式的值为false时，就不再进行右表达式的判定。

' '，0，undefined，null，false，NaN转换为布尔值后都是false，其余都为true

17.对象

对象的定义：

let obj = {
    属性：值,
    属性：值，
    方法名：function() {},
    ...（最后一个属性/方法 结束不用加分号）
}

对象的增删改查：

//查①：
对象名.属性
//查②：⭐⭐
//改：对象名.['属性名']    //必须带引号
对象名.属性 = 值
//增：
对象名.新属性名 = 值
//删：
delete 对象名.属性

对象的遍历：

let dogs = {    
    'dog-name': 'chick',
    age: 4,
    cry:function() {console.log('汪汪~')}
}
for(let key in dogs) {
    console.log(dogs[key])
}

• 对象遍历的注意事项：
  对象遍历的fori n循环中取出的key值为字符串，因此不能通过dogs.key访问，会报undefined错误。应当通过dogs[key]的方式访问对象属性的值。

18.数据的存储

基本数据类型：在变量中存储的是值本身，因此也叫做数值类型。基本数据类型变量的值存放在内存的栈空间上

引用数据类型：在变量中保存的是对象的地址或者说是引用。对象及其属性保存在内存的堆空间上。

---

 Web API阶段

19.DOM

19.1.获取DOM元素

• document.querySelector(' CSS选择器 ' )
  获取该页面中该选择器对应的第一个元素。
• docuemnt.querySelectorAll('CSS选择器')
  获取该页面中该选择器对应的所有元素，返回的是一个伪数组。如果要访问数组中的每一个元素，则要通过遍历的方式。

19.2.操作元素的内容

• eleObj.innerHTML
  可以解析标签
• eleObj.innerText
  不能解析标签

19.3.操作元素的属性

• 操作简单属性

  eleObj.属性 = '值'

• 操作CSS样式属性，三种方式：

  • //通过style.属性修改CSS的值
    eleObj.style.属性 = '值'

    注意事项：对于CSS中出现的带有 ‘-’ 的属性名称，在JS中采用小驼峰的书写方式。
    body标签中在整个页面中只有一个，可以直接使用docuemnt.body得到该标签对象。

  • //通过类名的方式修改CSS属性
    eleObj.className = '新的类名'

    该方法是在css文件中穿件一个待使用的样式newCName，然后在js中设置该元素对象的类名为newCName实现修改元素css属性的目的；比较适用于css样式多的更改方案。
    使用该方法的缺陷是新的类名可能会覆盖旧的类名使得一些属性失效

• //通过classList操作类名修改CSS样式
  eleObj.classList.add('类名')      //添加类名
  eleObj.classList.remove('类名')   //删除类名
  eleObj.classList.toggle('类名')   //修改类名：有则删除，无则添加⭐⭐

  这种方法也是在开发中使用较多的方法，可以很好的解决通过类名修改CSS属性而导致的类名覆盖问题。

  
  
  
  
      
      
      
      
      
  
  
  
      
  加油努力干
      切换
      
  
  
  

  

19.4.表单相关属性

• input.value:获取文本框中的内容
• input.type = 'type_'：设置表单的种类

19.5.自定义属性

标签的自定义属性统一以data-开头，在JavaScript中获取时统一以eleObj.dataset.自定义属性名（去除data-）的方式获取自定义属性的值。

例如：

19.6.计时器

计时器用来每隔一定间隔时间执行一次特定代码

//启动计时器
let n = setInterval(fn,时间间隔ms)

//停止计时器
clearInterval(n)

注意事项：
计时器中的函数在调用时只需要填写函数名不需要带( )。

例如：

//写法1


//写法2

实例：实现阅读协议效果：

    
    
    
    



        用户注册协议欢迎注册成为京东用户!在您注册过程中，
    您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或T划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。
    
    

    
    

19.7.事件监听

事件监听三要素：

• 事件源：哪个DOM对象触发的事件
• 事件类型：如鼠标单击click，鼠标经过mouseover等
• 事件调用函数

为DOM对象添加事件：

eleObj.addEventListener('事件类型',事件函数)

19.8.常用事件

19.9.事件对象 

当浏览器监听到事件执行事件处理函数时会向事件处理函数传递一个事件对象，该事件对象中包含触发该事件的许多属性，例如：

19.10.环境对象

讲讲环境对象this的指向：

可以简单记为：谁调用的函数。this就指向谁

详细的：

• 在非严格模式下，直接调用函数，this指向的WIndow
• 在严格模式下，事件监听函数下，this指向的是函数的调用者
• 括号函数没有 this

19.11.回调函数

当函数A作为参数传递给函数B时，则称函数A为回调函数

常见的使用场景：

19.12.事件捕获和事件冒泡

阻止事件冒泡和事件捕获：

e.stopPropagation()

默认情况下，为元素添加的事件都是事件冒泡的，例如：

 而有时候为了避免子元素触发事件时具有同名事件的父元素也出发事件，可以设置阻止子元素的事件冒泡，例如给上例中的son类元素设置禁止事件冒泡，此时点击son类元素即不会触发父类元素的同名事件：

19.13 .事件委托

事件委托能够有效减少注册次数，提高程序性能。例如，现有需求？：点击ul中的哪个li元素，哪个就变色，往常一般是采用for循环为每个li元素绑定事件，影响程序的性能。现在可以通过事件委托将li元素的点击事件委托给父元素ul，例如：

但是此时如果ul中的其他标签元素同样也会事件冒泡，此时可以通过元素类型核验避免除li元素外的其他元素事件冒泡：

//找到真正触发事件的元素   e.target.tagName
//可以使用console.dir(e.target)查看

 19.14.阻止默认行为

e.preventDefault()

例如 ，当表单收集到的数据不满足条件时，阻止表单的提交行为：

    提交

19.15. 页面加载事件load和DomContentLoaded

页面加载事件记作"load"，在JavaScript中表示整个页面加载完成后才被触发，例如，可以将js的script标签写在head标签中为window添加load事件，待页面加载完成后执行load事件中的js代码：

有时候为了提高网页性能，可以使用DomContentLoaded事件，表示当Dom节点加载完成后就可以进行交互操作，即使当网页中的图片，表单没有加载出来：

19.16.滚动事件scroll

 在JavaScript中获取页面中的html标签的写法：

document.documentElement

 页面中的滚动事件有两个属性，并且这两个属性是可以访问或者赋值的：

• element.scrollLeft
  获取元素往左滚出去的看不到的距离
• element.scrollTop
  获取元素往上滚出去的看不到的距离

19.17.client家族和offset家族

client-获取元素可见部分的宽高，不包含margin，边框，滚动条等，如果元素被隐藏，则获取出来的数值为0

• clentWidth:获取元素宽度
• clientHeight:获取元素高度

offset- 获取元素可视自身宽高，包含padding和border，不包含margi，如果盒子是隐藏的，获取到的数值为0：

• offsetWidth:获取元素自身宽度
• offsetHeight:获取元素自身高度

•  offsetTop:获取元素距离自己定位的父级元素的顶部距离，从border算起（包含border）
• offsetLeft:获取元素距离自己定位的父级元素的左侧距离，从border算起（包含border）

---

19.18.日期对象

获得日期对象实例：

日期对象的方法：

注意：日期对象方法得到的月份加1之后才是当前的月份；通过getDay获得的周日会被显示为0

让页面上的时间动起来：

格式化日期对象方法：

• date.toLocalString() 
  - 格式类似：2023/3/9 09:35:03
• date.toLocalDateString()
  - 格式类似：2023/3/9
• date.toLocalTimeString()
  - 格式类似：09:35:03

19.19.时间戳

时间戳通常用于制作倒计时效果，是指1970年01月01日起至现在的毫秒数。
使用详情见倒计时案例  ↓

19.20.DOM节点操作

创建节点：

document.createNode('标签名')

追加节点：

//在fatherNode的尾部追加节点
fatherNode.appendChild(节点对象)

//在fatherNode的某个元素前追加节点
fatherNode.insertBefore(待插入节点对象，插入到哪个节点的前面)

删除节点：

fatherNode.removeChild(元素节点)

查找节点：

• 查找父级节点：（找不到返回空）

子元素.parentNode

• 查找兄弟节点

  //当前节点的下一个兄弟节点
  node.nextElementSibling
  
  //当前节点的上一个兄弟节点
  node.previousElementsibling

综合案例

 广告实例

例如，实现弹出广告点击关闭的效果：

    
    
    
    
    



    

        我是广告
        ×
    
    









    
    
    
    
    



    

        
X
    
    

点名实例

例如，实现随机点名的效果：

 

    
    
    
    
    



    

        即将选到：
        
开始
   
        
结束
    
    

小米搜索框实例

    
    
    
    
    



    

        
        

            
小米12s
            
RedMi
            
小米笔记本
            
黑鲨4
            
空调
            
油烟机
        
    
    

B站评论区实例

    
    
    
    
    



    

        

            
            
发布
            0/200
        
        

        


        
    
    

复选框全选/取消全选实例

    
    
    
    
    



    

        

            
全选
            
商品
            
商家
            
价格
        
        

            

            
小米手机
            
小米
            
1999
        
        

            

            
小米净水器
            
小米
            
4999
        
        

            

            
小米电视
            
小米
            
5999
        
    
    

---

  京东动态购物栏实例

    
    
    
    
    



    

        

            
蔬菜
            
水果
            
手机
            
花卉
        
    
    

        
蔬菜栏
        
水果栏
        
手机栏
        
花卉栏
    
    

  京东动态购物栏实例（优化后）

使用事件委托优化后：

    
    
    
    
    



    

        

            

                
水果
                
蔬菜
                
运动
                
养生
            
        
        

            
水果
            
蔬菜
            
运动
            
养生
        
    
    

滚动事件案例-侧边栏的显示和隐藏

    
    
    
    
    



    

        顶部
        

            

                
为你推荐
                
回到顶部
                
反馈
            
        
    

    

offset实例-仿京东头部导航条的显示隐藏

    
    
    
    
    



    

        顶部导航条
    
    

        

        
页面滚动到这里顶部导航条出现
    
    

offset实例-bilibili导航条动画效果

    
    
    
    
    



    

        
喜剧
        
动画
        
学习
        
搞笑
        

    
    

效果：

 时间戳-倒计时案例

思路：用指定时间的时间戳减去当前时间的时间戳在转换为时分秒渲染到页面显示，转换时分秒的方法：

效果图：

    
    
    
    
    



    

        

        
距离Java上课
        

            

            
:
            

            
:
            

        
        
18:45:00上课