表单项

不同类型的input元素,下拉列表,文本域

<input>定义表单项,通过type属性控制输入形式

text,password,radio,checkbox,file,date,datetime-local,time,hidden,button,submit

<select>定义下拉列表

<textarea>定义文本域

表单属性

action

规定当提交表单时向何处发送表单数据,url

method

规定用于发送表单数据的方式

• get:浏览器会将数据直接拼接在表单的提交的url之后,有大小限制
• post:浏览器会将数据放到http请求消息体中,大小无限制

JavaScript

什么是js

• 是一门跨平台,面向对象的脚本语言,是用来控制网页行为的,它能使网页可交互
• js和java完全不同,不论是概念还是设计,但基础语法类似
• 1997年成为ECMA标准

引入方式

内部脚本

• 将js代码定义在HTML页面中
• js代码必须位于<script></script>标签之间
• 在HTML文档中,可以在任意地方放置任意数量的<script>
• 一般会把脚本置于元素的底部,可以改善显示速度

外部脚本

• 将js代码定义在外部js文件中,然后引入到HTML页面中
• 外部js文件中,只包含js代码,不包含<script>标签
• <script>标签不能自闭合

基础语法

书写语法,输出语句

区分大小写,变量名,函数名及其他一切都区分

每行结尾的分号可有可无

注释

• 单行---//
• 多行---/* */

大括号表示代码块

输出

• 使用window.alert()写入警告框
• 使用document.write()写入HTML输出
• 使用console.log()写入浏览器控制台

变量

用var关键字来声明变量

一门弱类型语言,变量可以存放不同类型的值

• 组成字符可以是任何字母,数字,下划线或美元符号
• 数字不能开头
• 建议使用驼峰命名

ES6新增let定义变量,用法类似var,但声明的变量只能在代码块内有效,且不允许重复声明

ES6新增const声明只读的常量,一旦声明不可改变值

数据类型

原始类型

• number数字
• string字符串
• boolean布尔
• null对象为空
• undefined当声明变量未初始化,默认undefined

引用类型

对象

typeof运算符可以获取数据类型

运算符

分类

• 算术运算符
  + - * / % ++ --
• 赋值运算符
  = += -= *= /= %=
• 比较运算符
  > < >= <= != == ===
• 逻辑运算符
  && || !
• 三元运算符
  表达式?真:假

==比较值,会进行类型转换,===比较类型和值,不会进行类型转换

类型转换

其他类型转数字类型:

parseInt()将字符串字面值转为数字(一个字符一个字符的转,遇到无法转换就截止),如果第一字符就不是数字,则转为NaN

其他类型转布尔类型

0 NaN "" null undefined 均转为false,其他值均转为true

流程控制语句

• if...else if...else...
• switch
• for
• while
• do...while

函数

介绍

函数(方法)是被设计为执行特定任务的代码块

定义

Js函数通过function关键字进行定义,语法为

function functionName(参数1,参数2...){
   //要执行的代码
}

定义方式二:匿名函数
定义方式三:es6提供的箭头函数,类似于java中的lambda表达式

注意

• 形式参数不需要类型,因为js是弱类型语言
• 返回值也不需要定义类型,可以在函数内部直接使用return返回即可

调用

函数名称(实际参数列表)

对象

Array

定义

let 变量名 = new Array(元素列表);
let 变量名 = [元素列表];

访问

arr[索引] = 值;

注意

js中的数组相当于Java中集合,数组的长度是可变的,而js是弱类型,所以可以存储任意的类型的数据

属性

length
设置或返回数组中元素的数量

数组的遍历

fori遍历

for(let i=0;i<数组.length;i++){

}

forof遍历

for(let 变量 of 数组){
//变量表示遍历的元素值
}

forEach遍历

arr.forEach((e,i)=>{
//e表示元素值,i表示索引
})

String

定义

let 变量名 = new String("...");
let 变量名 = "...";

属性

length
字符串长度

模板字符串中可以使用$(表达式)来引用变量的值,不需要拼接字符串

JSON

定义格式

let 对象名 = {
  属性名1:属性值1,
  属性名2:属性值2,
  属性名3:属性值3,
  函数名称:function(形参列表){},
  函数名称(形参列表){}
};

调用格式

对象名.属性名;
对象名.函数名();

介绍

• JavaScript Object Notation,js对象标记法,本质是通过js对象标记法书写的文本
• 使用场景:由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输

JSON定义

let 变量名 = {"key":value,"key":value,"key":value,...};
let json = [value,value,value];

js对象转JSON字符串

let str = JSON.stringify(json);

JSON字符串转js对象

let json = JSON.parse(str);

BOM

概念

Browser Object Model浏览器对象模型,指的是js将浏览器的各个组成部分封装为对象,使用对象可以操作浏览器

组成

• Window:浏览器窗口对象
• Navigator:浏览器对象
• Screen:屏幕对象
• History:历史记录对象
• Location:地址栏对象
• location.href="url" 实现页面跳转

DOM

概念

Document Object Model,文档对象模型

将标记语言的各个组成部分封装为对应的对象

• Document整个文档对象
• Element元素对象
• Attribute属性对象
• Text文本对象
• Comment注释对象

js通过DOM,就能对HTML进行操作

• 改变html元素的内容
• 改变html元素的属性
• 改变html元素的样式(CSS)
• 对html DOM事件做出反应

获取元素对象

方法
document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

document.querySelector("css选择器")
根据css选择器获取一个Element对象
document.qureySelectorAll("css选择器")
根据css选择器获取一个Element对象数组

使用元素对象

常用操作
访问内容体
元素对象.innerHTML
访问输入框内容
元素对象.value
访问属性
元素对象.属性名
访问样式
元素对象.style.样式属性名

事件监听

html事件是发送在html元素上的事情,如按钮点击,按下键盘按键,鼠标移动到元素

事件监听:js可以在事件被侦测到时执行代码

事件绑定

方式一

通过html标签中的事件属性进行绑定

方式二

通过DOM元素属性绑定

常见事件

onclick
鼠标点击
onblur
元素失去焦点
nofocus
元素获得焦点
onload
某个页面或图像被完成加载
onsubmit
当表单提交时触发该事件
onkeydown
某个键盘的键被按下
onmouseover
鼠标被移到某元素之上
onmouseout
鼠标从某元素移开

Vue

一套前端框架,免除原生JS中的DOM操作,简化书写.基于MVVM思想实现双向数据绑定
框架:是一个半成品软件,是一套可重用的,通用的,软件基础代码模型.基于框架进行开发,更加快捷,更加高效

使用Vue的基本步骤

• 新建html页面,引入Vue.js文件
• 在JS代码区域,创建Vue核心对象,定义数据模型(变量)
• 将视图(html标签)和数据模型(变量)进行绑定

常用指令

v-bind
为html标签绑定属性值,如设置href,css样式等
v-model
在表单元素上创建双向数据绑定
v-on
为html标签绑定事件
v-if v-else-if v-else
条件性渲染某元素,判定为true时渲染,否则不渲染
v-show
根据条件展示某元素,区别在于切换的是display属性的值
v-for
列表渲染,遍历容器的元素或者对象的属性

生命周期

指一个对象从创建到销毁的整个过程

八个阶段,没触发一个生命周期事件,会自动执行一个生命周期方法(钩子)

beforeCreate
创建前
created
创建后
beforeMount
挂载前
mounted
挂载完成
beforeUpdate
更新前
updated
更新后
beforeDestroy
销毁前
destroyed
销毁后

mounted()生命周期方法的应用场景

表示挂载完成,也就意味着html文档已经加载完成了,此时可以向服务器发送请求,获取数据