2022-08-27 田龙跃 web前端(JS)

原生JS

数据类型

Number-数字 String-字符串 Boolean-布尔型 null-空 undefined-未定义
变量 (同var功能相同)

  • let num1=“das”（let会自己检查变量是否重复定义）
  • const num1=“das”（具备let的功能，但是是一个常量，不能二次修改） const n.常量 adj.不变的，恒定的
    数组定义 let=Array（）； let=new Array(); let=[];
    函数定义 function 函数名(){}

弹窗：

alert()-警告（必须点击）
confirm("文字")-确认（可以点击确定取消） 有返回值 确认-true 取消-false
prompt("文字-请输入学号"，默认值) 有返回值 带文本框的弹窗，返回值是输入的内容 prompt n.提示
弹窗可以使用转义字符 \n换行

流程控制

  • if。。else。。适用范围判断（0，null，undifined为false，除了他们仨都是true）
    switch。。case。。适用于常量判断，（switch。。case。。只掉一次内存）

  • for循环执行细节：let i-初始条件只执行一遍 --》然后执行循环条件判断，符合条件执行循环体，i自增 --》不断执行循环条件判断（不再执行初始化条件），执行循环体，i自增，直到达到判断条件；
    forin(JS中的增强for循环)

  • 对象[属性名]--只访问属性的值，无法增加属性，但是可以改变属性
    delete 对象[属性名] 只是把属性里面的值删除掉了（变成了undefined），但是属性还存在

  • &&，||是有返回值的，返回能判断出结果的那个值（原先的值，不是ture或者false）

  • ！！a 强制类型转换-转成boolean值

  • 号不能强转，只能链接
    • / %可以强转，但是转换不了的结果为NAN
      == 转换成一个类型比较，相等返回true
      === 不转换直接比

闭包

是指有权访问另一个函数作用于的变量的函数（就是你想访问哪个函数中的变量，就让该函数return一个函数，return的这个函数，可以访问该函数的变量，return的这个函数就叫做闭包）

原型

就是所有构造函数的原型属性Prototype（就是java中的Object类，可以通过对原型添加属性，所有通过该构造函数构造的对象都有这个属性）

Json字符串

key=" " 空格是key的名字 key只能是字符串 value=任意类型
存储方式：{key：value，key：value}

Document方法

  • 获取节点GetElementBy..... 获取到节点对应---》获取到的就是原始文本

  • document.querySelector（"选择器（.class #id div）"）获取到对应选择器（标签和里面的子标签都会抓到）-----------只能获取到第一个选择器 （常用id

  • document.querySelectorAll（返回一个集合）（标签和里面的子标签都会抓到）（常用class 标签

  • 节点.innerHtml=str（html便签结构，也可以拿到里面的所有结构）（替换的话里面的东西都会被覆盖）（innerHTML的值就是字符串）

  • 节点.innerText=str（写文字，也可以拿到里面的所有文字）（替换的话里面的东西都会被覆盖）

  • 节点.value=str字符串（往文本框内容区加东西

  • 节点.addEventListener(事件类型-没有on，函数)节点.addEventListener(事件类型，函数名)
    节点.事件=函数 也能添加事件 节点.事件=null 删除事件

事件（交互事件）：

-------在标签中添加的事件，事件发生时执行函数。
onclick="函数" 单击事件
ondblclick="函数" 双击时间
onblur="函数" 失去焦点 blur n.模糊 v.使模糊
onfocus="函数" 获得焦点
onchange="函数" 改变事件
onload="函数" 加载事件 （一般挂载在body上
onsubmit当表单提交时(挂载在form标签上 return false/true ~不但要写在函数体内，还要写在事件上 事件="return 函数"~

事件冒泡：

容器内的元素触发事件的同时也出发了容器的事件（内部影响了外部） event.stopPropagation()停止事件冒泡

DOM：document 文档对象模型

	* .createElement()创建HTMl元素-》可以用setAttribute(Key，Value)为标签设置属性-》.innerHTML，innerText=设置里面的内容
	* .querySelector(ALL)(先择元素的方式)来获取html中的元素
        元素.append在元素内追加进我们创建的元素*******
            .remove删除调用的元素
            .childNodes 获取所有类型的节点
        .children HTML的节点
    元素.属性 只能获取原生属性节点
            .getAttribute(属性) 能拿到任何属性节点
        .setAttribute(属性，value)     .removeAttribute(属性，value)
        .className ·类·名属性
            .childNodes拿到所有节点-text和html（什么都认识）
            .children拿到HTML类型节点

文档本身就是一个文档对象document

            * 所有的HTML元素都是元素节点
            * 所有的HTML属性都是属性节点
            * 元素的文本是文本节点

BOM：·window· 浏览器对象模型 window=document+任务栏

* 回调函数：一个函数的参数可以是另一个函数(调用的地方传参)**********在函数调用函数
* 定时函数：setTimeout(函数，延迟时间) 定时执行这个函数 setInterval(函数，延迟时间)设置循环定时执行
* 清除定时函数：clearTimeout(定时函数)清除这个定时函数  clearInterval(定时函数)清除这个定时函数
* .localstorage本地存储在127.0.0.1中 (本地会一直存在除非手动删除-与session相反)： 方法 .setItem(key,value)  .getItem(key)  .removeItem(key)	.clear()
* .confirm确认弹窗有返回值 
* .prompt(String msg,默认值)	
* .alert（String msg）警告	
* .history历史记录   方法 .forword()前进 .back()后退 .go(number-步长) 正数前进，复数后退
* .location跳转位置(在自己身体内打开-请求转发) .href 地址 .reload()刷新页面
* .screen .height bom高度 .availHeight document高度 
* .close()关闭当前窗口
.open() 打开一个新窗口-请求重定向

ECMA和JS

ECMAscript：官方规范，其他语言要遵守我的规范来具体实现
JavaScript：ES的落地语言，我们真正操作的语言(不依赖HTML，而是依赖于浏览器)

JS函数

eval()函数：会把字符串解析为JS表达式进行执行
parseInt（数字字符串转数字）
String(转成字符串)

数组的方法：

  • .join(值)用值代替逗号就整个数组拼成一个字符串（与字符串的split方法相反）
  • .push(值)在数组末尾加入‘值’元素
  • .slice（start，end）从start截取到end(左闭右开)返回一个新数组（字符串也有这个相同的方法）
  • .splice(index,howmany,item1,.....,itemX)不会返回新数组，改变了原数组
    **script标签只做一件事(引入其他js或者写JS)，但是可以定义多个标签 **
posted @ 2022-09-04 23:00  沧月我爱  阅读(18)  评论(0)    收藏  举报