后浪小萌新JS --- 原生js的应用基础

一、常见的数据类型

js常用数据类型: 数字类型、字符串、布尔、数组

  1. 数字类型(Number) - 所有数字对应的类型

              1) typeof(数据) - 获取指定数据对应的类型

              2) 数学对象(Math)

                  a.小数转整数

                      Math.ceil() - 向上取整
                      Math.floor() - 向下
                      Math.round() - 四舍五入

                  b.常用运算

                      Math.pow() - x的y的次方
                      Math.abs() - 绝对值

                  c.随机数

                      Math.random() - 0~1的随机小数
                      parseInt(Math.random()*100) - 0~100的整数
                      Math.random()*899+100 - 100~999随机数

              3)类型转换

                      Number() - 转换成数字(元数据是什么格式的数字, 就转换成什么格式的数字)
                      parseFloat() - 将数据转换成带小数点的数字
                      parseInt() - 将数据转换成整数
                      Math.ceil()/Math.floor()/Math.round()

  1. 字符串(String) - 容器型数据类型, 不可变并且有序

              1)表示: 使用单引号或者双引号引起来, 模板字符串用``\

              2)转义字符

                  具有特殊功能和意义的字符
                  \u + 16进制数 - 编码字符

              3)获取字符

                  变量名[下标]

注意: js中下标值的范围是0~长度-1
下标越界不会报错,为 undefined

              4)相关操作

                  a.加法
                      不支持乘法运算

                  b.比较运算
                      比较第一对不相等的编码值

              5)相关方法和属性

                  length属性 - 获取字符串长度
                  match(正则表达式)方法 - 查找字符串中能够满足正则的第一个子串

注意: js中只找满足正则的第一个子串,正则中后面加g查找所有的子串

                  字符串.replace(正则, 新子串) - 替换
                  charAt(下标) - 获取对应下标的字符
                  字符串.slice(开始下标, 结束下标) - 切片

              6)类型转换
String(数据) - 将数据转换成字符串

  1. 布尔(Boolean)

    只有true和false两个值

  2. 数组(Array)

    相当于python中的列表

              1)增删改查

                  a.查 - 数组[下标]

                            遍历
                                for-in
                                数组.forEach(有一个或者两个参数的函数)

举例:

console.log(function(item,index){
					console.log(`x:${item}, y:${index}`)
				})

                  b.增

                      数组.push(元素) - 在数组最后添加指定元素
                      数组.splice(下标,0,元素1,元素2,…) - 在指定下标前插入指定元素

                  c.删

                      数组.pop() - 删除数组的最后一个元素
                      数组.splice(下标, 删除个数) - 从指定下标开始删除指定个数的元素

                  d.改

                      数组[下标] = 值

              2)相关方法

                  a.数组.every(函数) - 检测数组中所有的元素是否满足函数返回值提供的条件
                             函数 - 需要一个参数, 这个参数指向的是数组中的每个元素

                  b.数组.filter(函数) - 索取数组所有满足函数返回值要求的元素

                  c.数组.join(分隔符=’,’) - 将数组的所有元素放入一个字符串

                  d.数组.map(函数) - 将原数组中的元素按照函数做指定的操作后, 产生新的数组

                  e.数组.reduce(函数, 初始值) - 将原数组中的元素按照函数做指定的操作后, 产生新的数组

                  f.数组.sort(函数) - 排序
                             函数有两个参数, 指向的都是序列中的元素

二、对象

  1. 对象

    js中的可以看成是python中字典和对象的结合

    1)对象字面量

                对象名 = {key:value,…}

  1. 构造函数

    用来创建对象的函数, 函数名就相当于类名

    1. 相当于定义类

      function 类名(){
              this.属性 = 值
              this.方法 = 函数
      }

    2. 创建对象

      对象 = new 类名()

  2. 属性的操作


    1. 对象[属性名]
      对象.属性

    2. 改、增

      对象[属性名] = 值
      对象.属性 = 值

注意: 如果没有指定属性就是添加, 有就是修改

  1. 类的prototype属性

    给指定类所有的对象调价属性和方法(这儿的所有的对象可以是添加前创建的, 也可以是添加后创建)

    一般用于对系统或第三方的类进行扩展

    类名.prototype.属性 = 值

三、DOM操作

  1. 什么是DOM

    DOM是 document object model的缩写, 文档对象模型
    js中自带一个document对象, 指向的是当前网页的内容(包含了body以及body中所有的可见标签)

  2. DOM操作 - js通过操作document对象来操作网页内容

    1. 获取节点(获取标签)

      a.直接获取

            document.getElementById(id值) - 根据id值来获取节点(返回的是标签/节点对象)

            document.getElementsByClassName() - 根据class属性值获取节点(返回值是类似数组的容器-HTMLCollection, 容器中的元素是标签对象)

            document.getElementsByTagName() - 根据标签名获取节点(返回值是类似数组的容器-HTMLCollection, 容器中的元素是标签对象)

      b.间接获取

            获取一个标签的父节点: 节点对象.parentElement

            获取一个标签的子节点: 节点对象.children/节点对象.firstElementChild/节点对象.lastElementChild

四、节点的创建添加和删除

  1. 创建节点

    document.createElement(标签名) - 返回节点对象(节点不会添加到网页中)

  2. 添加节点(将节点放到网页中去)

    节点对象1.appendChild(节点对象2) - 将节点对象2添加到节点对象1内容中的最后

    节点对象1.inserBefore(节点对象2,节点对象3) - 在节点1中节点3的前面插入节点2

  3. 删除节点(删除网页中指定标签)

    节点对象.remove() - 删除指定节点

  4. 拷贝节点

    节点.cloneNode(false) - 浅拷贝一个节点

    节点.cloneNode(true) - 深拷贝一个节点

五、标签的属性操作

  1. 双标签标签内容属性

    innerText - 普通文本内容

    innerHTML - html内容

注意: 不赋值获取标签内容, 赋值修改标签内容

  1. 普通属性(原来标签的属性在js标签对象中都有对应的属性)

    className - class属性

注意: 属性有多个单词用-隔开,变成驼峰式命名

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页