首页 > 其他分享 >2022-08-27 田龙跃 web前端(JS)

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

时间:2022-09-04 23:12:51浏览次数:69  
标签:web 27 函数 08 JS 事件 key 节点 属性

原生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),但是可以定义多个标签 **

标签:web,27,函数,08,JS,事件,key,节点,属性
From: https://www.cnblogs.com/404tly/p/16656443.html

相关文章

  • 【django学习-08】视图之HttpResponse文件下载
    一:前言:响应内容除了返回网页信息外,还可以实现文件下载功能,是网站常用的功能之一。Django提供三种方式实现文件下载功能,分别是HttpResponse,StreamingHttpResponse和FileRe......
  • 2022-2023-1 20221408《计算机基础与程序设计》第一周学习总结
    班级:https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业链接:https://www.cnblogs.com/zhanquanchen/p/16654783.html作业目标:快速浏览教材作业正文:https://www.cn......
  • 【2022-08-30】哺乳
    20:00习惯的枷锁,开始的时候轻得难以察觉,到后来却重得无法摆脱。                                ......
  • Python Web开发主流框架
    Web开发是Python语言应用领域的重要部分,也是工作岗位最多的领域。如果你对基于Python的Web开发有兴趣,正打算使用Python做Web开发,或者已经是一个Web开发者有工作需要,要做自......
  • WEB自动化-02-Cypress 安装
    2Cypress安装2.1安装要求2.1.1系统要求  在操作系统满足以下要求时,才能进行安装,具体要求如下所示:MacOS10.9+(仅支持64位版本)LinuxUbuntu12.04+、Fedora21......
  • web框架-django框架
    目录web框架编写web框架模块动静态网页jinjia2模块python主流web框架django框架版本下载安装操作目录结构三板斧静态文件操作form表单request对象方法MySQL数据库连接ORM数......
  • 2022java-web一条龙工具安装
    @目录java安装java-jdk安装java环境变量配置java-eclipse工具安装Java-idea工具安装MySQL安装navicat安装tomcat安装maven安装配置本地仓库配置镜像配置jdk备忘~安装常见......
  • openEuler 22安装zabbix 4.0,提示无法安装zabbix-server-mysql和zabbix-web-mysql
    1.首先安装lamp环境作为zabbix的运行环境,也就是web展示界面环境dnfinstall-yhttpdmariadb-servermariadbphpphp-mysqlndphp-gdlibjpeg*php-ldapphp-odbcphp-p......
  • 2022java-web一条龙工具安装
    @目录java安装java-jdk安装java环境变量配置java-eclipse工具安装Java-idea工具安装MySQL安装navicat安装tomcat安装maven安装配置本地仓库配置镜像配置jdk备忘~安装常见......
  • 简单计数 P6008
    题目传送门题目大意:给定一张边框确定的图,在其中空地放水并满足物理要求,求总方案数题目分析:首先注意到,满足物理需求就是满足在一个连通块内从高度为\(h\)放水,则满足对......