分类: 前端

web前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互

51 篇文章

Vue 实现小小记事本
1、实现效果 用户输入后按回车,输入的内容自动保存,下方会显示记录的条数,鼠标移动到文字所在div上,会显示删除按钮,点击按钮,相应记录会被删除,下方的记录条数会相应变化,点击clear,所有记录会被删除。效果如下: 2、实现思路 先写出记事本的基本样式,在vue实例中的data对象里定义list数组,以及message的初始值。通过 v-mode…
JS 可编辑表格的实现
1、实现效果 用户点击语文,数学,英语部分的单元格,可以实现分数的编辑,总分也会随之变化。先看下效果,如图: 2、设计思路 先通过HTML5+CSS3绘制表格,添加input的样式和err提示动画。 给要修改的数据的单元格添加name属性,给总分那一列的单元格添加rname属性。先获取所有要更改数据的单元格,通过for循环遍历,给他们添加单击事件。…
JS学习笔记 (五) 函数进阶
1、函数基础 1.1 函数的基本概念 函数是一段JavaScript代码,只被定义一次,但是可以被调用或者执行许多次。函数是一种对象,可以设置属性,或调用方法。 函数中的参数分为实参和形参。其中,形参在函数体中类似局部变量,函数调用会为形参提供实参的值。函数使用实参的值来计算返回值,成为该函数调用表达式的值。除了实参外,函数每次调用都会有一个thi…
JS学习笔记 (四) 数组进阶
1、基本知识 1、数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始。 2、数组是无类型的。数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型。数组的元素可以是对象或其它数组。 3、数组是动态的,数组长度可长可短。在创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间 4…
JS学习笔记 (三) 对象进阶
1、JS对象 1.1 JS对象特征 1、JS对象是基本数据数据类型之一,是一种复合值,可以看成若干属性的集合。 属性是名值对的形式(key:value) 属性名是字符串,因此可以把对象看成是字符串到值的映射 2、对象除了可以保持自有的属性,还可以从一个称为原型的对象继承属性。其中,原型链继承是JavaScript的核心特征。 3、对象是动态的,可以…
ES6学习笔记(七)正则表达式
正则表达式 1、基础 1.1 含义: 通俗的来讲,正则表达式是一种匹配和替换的工具。如:在JS中验证手机号时,我们需要考虑用户输入的字符必须是number类型,且必须是11位的整数,且数字的前三位必须是134,155,183,188,199等等。对于这一问题,可以用if-else来实现,只不过太过于麻烦,而正则表达式就将这一问题简单化。 1.2 组…
ES6 学习笔记(六)基本类型String
字符串String 1、字面量 需要注意的地方: 由单引号或双引号括起来的字符序列。 单双引号可以嵌套,由最外围引号定界字符串 字符串字面量可以拆分成数行,每行必须以反斜线(\)结束,且反斜线都不计入字符串的内容。 在书写HTML的JS代码时,要注意与HTML代码混合搭配使用引号。 实例代码: let str1 = "I have a d…
ES6 学习笔记(五)基本类型Boolean
Boolean 1、需要注意的地方: 取值:true false 对于值为空字符串,0,-0,NaN,Null,undefined,false的布尔对象,它都会有一个初始值false。对于其它的值如"false",[]等都会建立一个初始值是true的对象。 不能把基本类型中true或false和值为true或false的对象搞混…
ES6 学习笔记(四)基本类型Number
1、数值 1.1 、JavaScript数值的特点 不区分整数值和浮点数值。 所有数值均用浮点数值表示。 采用IEEE-754标准定义的64位浮点数格式表示。 整数在实际操作时(如数组索引),则是基于32为整数。 1.2、 整数直接量 除十进制外,JavaScript能识别十六进制(以0x或0X为前缀)、二进制(以0b或0B为前缀)和八进制(以0o…
ES6 学习笔记(三)原始值与引用值
总结: 1、原始值,表示单一的数据,如10,“abc”,true等。 1.1、 ES的6种原始值: Undefined、Null、Boolean、Number、String、Symbol 1.2、 保存原始值的变量是按值访问,操作存储在变量内存中的实际值 2、引用值,表示有多个值(原始值或其他引用值)构成的对象 2.1、 ES不允许直接访问对象的内…
ES6 学习笔记(二)解构赋值
一、数组的解构赋值 1、基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) // a=1 b=2 c=3 let [foo,[[bar], baz]]=[1,[[2],3]]; console.log(foo,bar,baz)…