- 博客(32)
- 收藏
- 关注
原创 VUE生命周期、模板语法、事件、表单、计算属性、监听器学习
VUE简介安装生命周期模板语法插值文本原始html属性事件JavaScript表达式条件渲染v-ifv-show列表渲染v-forkeyclass绑定属性绑定style绑定简介vue是一个MVVM视图层框架,可以构建出复杂的单页面应用程序。vue与原生的Js显著的区别就是不再对dom进行直接操作,而是通过对数据操作来改变视图。安装①cdn在cdn加速服务器中获取vue的库直接进行导入即可,这种方式更加便捷<script src="https://cdn.bootcdn.net/ajax/l
2021-10-08 20:11:41 274
原创 ES6 Promise、Generator、async学习
Promise实例化实例方法创建promise对象静态方法Generator特征创建Generator函数asyncPromise一种异步编程解决方案,Promise是一个容器,保存着将来才会执行的代码;从语法角度来说Promise是一个对象,可以用来获取异步操作的消息。异步操作,同步解决,避免了层层嵌套的回调函数实例化Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供。Promise对象代表一个异步.
2021-09-29 20:07:38 352
原创 ES6 类、Symbol学习
类class构造函数实例方法静态方法继承Symbol创建symbol值应用解决冲突消除魔术字符串全局注册表类class通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰更像面向对象编程的语法而已。所以ES6 的类,完全可以看作构造函数的另一种写法。构造函数constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方.
2021-09-28 19:04:41 411
原创 ES6变量、解构、对象、数组、函数学习
变量常量变量ES6中用let 声明变量,let有如下特点:1.变量声明不会被提升,即在变量声明之前无法使用该变量console.log(name);//ReferenceError:Cannot access 'name' before initializationlet name='zhangsan';// console.log(name);//zhangsan具有局部作用域,即let声明的变量只能在对应代码块中使用let name='zhangsan';{ let n.
2021-09-27 22:31:22 1035
原创 AJAX学习
这里写目录标题简介get请求post请求简介Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序
2021-09-26 19:26:05 118
原创 画布、拖放、浏览器存储、web存储学习
其他知识点画布 canvas属性方法拖放事件浏览器存储画布 canvas属于html元素,需要结合js,用来绘制图形在页面上放置一个canvas元素,就相当于放置了一块画布,可以绘制路径、矩形、圆形、字符、图像属性width:默认为300pxheight:默认为150px注意:canvas需要写闭合标签<canvas></canvas>一般不建议使用css设置它的宽高方法 var ctx=canvas.getContext("2d");
2021-09-15 15:21:07 180
原创 JavaScript事件学习
事件事件三要素事件流事件冒泡事件捕获非IE事件处理程序addEventListener()removeEventListener()onXXX属性IE事件处理程序attachEvent()detachEvent()事件对象 event属性事件类型鼠标事件焦点事件UI事件键盘事件事件三要素事件目标、事件处理程序、事件对象事件流页面接收事件的顺序事件冒泡特点:从内往外传递;事件由一个具体的元素接收,然后又逐步传递到不具体的节点注意:元素需要嵌套,每层元素都绑定事件<div class="o
2021-09-14 17:25:09 116
原创 JavaScript DOM学习
DOM:文档对象模型实例化通过DOM拿到想要的节点通过DOM创建节点文档类型Document方法属性Element属性TextComment三级目录DOM是针对HTML和XML文档的一个APIIE中的所有DOM对象都是以COM对象的形式实现的实例化通过DOM拿到想要的节点</body><!-- 要在html文件读取结束后再获取DOM节点 --><script> var myDiv=document.getElementById("myDiv");
2021-09-13 21:11:46 97
原创 Ajax学习
简介特点HTTP协议请求报文响应报文GET请求server.jsGET.html设置请求体信息POST请求server.jsPOST.html设置请求体信息设置请求头信息响应JSONserver.jsJSON.html数据转化IE缓存问题简介Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术,而是用来描述一种使用现有技术集合的‘新’方法特点优点:1.可以无需刷新页面而与服务器端进行通信2.允许根据用户事件来更新部分页面内容缺点.
2021-09-13 17:00:37 97
原创 jQuery学习
这里写目录标题简介二级目录三级目录简介是一个快速小巧、功能丰富的第三方JavaScript库**功能:**选取HTML元素操作HTML元素二级目录三级目录
2021-09-10 23:52:29 124
原创 布局、二级导航、块元素居中
定位布局二级导航块元素居中定位静态定位静态定位不要搭配定位的方位名词 position: static;相对定位// An highlighted blockvar foo = 'bar';绝对定位// An highlighted blockvar foo = 'bar';固定定位// An highlighted blockvar foo = 'bar';布局浮动布局// An highlighted blockvar foo = 'bar';粘性布局/.
2021-09-07 17:33:41 169
原创 默认文档流、浮动布局、清除浮动
这里写目录标题父元素支撑默认文档流一行多列文字环绕cleardisplayfloat父元素支撑二级目录默认文档流二级目录一行多列二级目录文字环绕二级目录clear规定元素的哪一侧不允许其他浮动元素left 在左侧不允许浮动元素right 在右侧不允许浮动元素none 默认值。允许浮动元素出现在两侧inherit 规定应该从父元素继承 clear 属性的值bothclear: both;//在左右两侧均不允许浮动元素网页效果:display二级目录float二
2021-09-06 20:13:29 356
原创 JavaScript数组学习
初始化Array构造函数数组字面量三级目录访问数组元素数组变量名[索引]数组检测Array.isArray()数组序列化toString()join();栈方法push()pop()队列shift()unshift()排序reverse()sort()截取方法concat()slicesplice索引方法indexOf()lastIndexOf()迭代方法every()some()filter()map()forEach()初始化Array构造函数数组字面量三级目录访问数组元素数组变量名[索引.
2021-09-04 22:02:42 452
原创 JavaScript面向对象的程序设计学习
深入理解对象、继承对象的创建工厂模式构造函数模式原型模式组合模式:构造函数模式+原型模式对象的继承原型链继承经典继承(借用构造函数、伪造对象)组合继承对象的创建工厂模式使用普通字面量创建多个对象时,会产生大量的重复代码,为了解决该问题,引入了工厂模式。工厂模式:通过将创建对象的方法封装起来,避免重复代码产生function newPerson(name,age,gender){ var p =new Object(); p.name = name; p.age = age;
2021-09-03 17:18:27 90
原创 JavaScript流程控制语句、对象及函数的学习
流程控制语句顺序语句分支语句ifif-elseif-else if-elseswitch循环语句forwhiledo-while对象创建函数流程控制语句顺序语句按照顺序一条一条的执行代码,从上到下分支语句ifif(表达式){//该表达式求值的结果不一定是布尔类型,如果不是布尔类型,ECMAScript会调用Boolean() 转换函数将这个表达式结果转换为一个布尔类型 ,当该值为true时,执行if代码块中的内容语句;}if-else//当条件表达式为true时,执行if代码块中的.
2021-09-02 18:29:05 100
原创 JavaScript内置对象及内置函数学习
内置对象及内置函数基本包装类型BooleanNumberStringMath对象比较方法小数舍入为整数的方法随机数其他方法Date对象新建方法例题函数判断第三方库moment时间戳转换基本包装类型BooleanBoolean,Number,不建议直接使用这两种包装器类型NumberString方法描述length属性,获取字符串的字符数量charAt(i)返回给定位置的字符charCodeAt(i)返回给定位置字符的字符编码indexOf (“x”)
2021-09-02 16:52:50 506
原创 JavaScript正则表达式学习
正则表达式创建构造函数字面量修饰符img原型方法exec()test()toString()原型属性正则表达式规则字符类字符集合边界分组Javascript中 String对正则表达式的支持match()search()replace()创建构造函数修饰符只能是g i m,可以省略var pattern = new RegExp("正则表达式内容","修饰符");var pattern = new RegExp("abc","ig");字面量var pattern = /正则表达式/修饰符;
2021-09-01 23:58:40 277
原创 javas操作符、类型转换
操作符算数运算符逻辑运算符一元运算符三元运算符比较运算符类型转换其他数据类型转换为String其他数据类型转换为Boolean其他数据类型转换为Number特别注意操作符算数运算符运算符描述+加法-减法*乘法/除法%取余var n = 10;var o = 3;console.log(n+o,n-o,n*o,n/o,n%o);//13 7 30 3.3333333333333335 1逻辑运算符运算符描述&a.
2021-08-28 18:36:43 131
原创 JavaScript基础知识学习(关键保留字、变量、数据类型、转义字符)
js学习: 知识点导图 JS简介关键字&保留字变量数据类型基本数据类型引用数据类型转义字符JS简介关键字&保留字(不能把关键字、保留字、true、false和null用作标识符)关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等。关键字也是语言保留的,不能用作标识符。break | do | instanceof | typecase | else | new | varcatch | finally | return | voidcontinue | for |
2021-08-28 12:55:18 176
原创 background、盒子模型、表格、图片精灵、border、margin
背景表格盒子模型边框盒子W3C盒子图片精灵border属性margin单方向设置背景背景颜色background-color: pink;背景图片background-image: url('图片路径');重复背景图像background-repeat: repeat;网页效果:其它取值:背景图像是否固定规定背景图像是否固定或者随着页面的其余部分滚动background-attachment: scroll;其它取值:背景图片尺寸background-size:.
2021-08-21 19:00:18 192
原创 列表、列表图片、字体库、隐藏、display等内容的学习
这里写目录标题文字行高文本对齐列表list-style-typelist-style-positionlist-style-imagelist-style列表图片paddingmargin字体库隐藏display文字行高line-height:normal; //默认。设置合理的行间距 //number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距 //length 设置固定的行间距 // % 基于当前字体尺寸的百分比行间距 //inherit 规定应该从父元素继承 li
2021-08-21 11:22:33 125
原创 CSS伪类选择器、伪类选择器表单、伪元素选择器等特性学习
伪类选择器伪类:用于定义元素的特殊状态。例如它可以用于设置鼠标悬停在元素上时的样式,为已访问和未访问链接设置不同的样式,设置元素获得焦点时的样式等详细学习: https://www.w3school.com.cn/css/css_pseudo_classes.asp.独生子元素:only-child第一个孩子元素:first-child最后一个孩子元素:last-child第n个孩子元素,n从1开始:nth-child(n)倒数第n个孩子元素:nth-last-child(n)每种类型(不同
2021-08-16 13:02:55 989
原创 CSS的选择器学习
CSS与HTML建立联系外部样式表该方式需新建 .css 后缀的文件,然后在HTML内head里通过link引入(这种方式可以实现CSS和HTML完全分离,方便维护)在html文件的 head 标签加如下代码:<head><link rel="stylesheet" type="text/css" href="css文件路径/style.csss" />//link标签定义文档与外部资源的关系(常用来链接样式表)//rel:规定当前文档与被链接文档之间的关系(style
2021-08-15 16:28:38 152
原创 HTML表格复习,表单、表单元素学习,登录页面制作
表格标签基本格式 table thead tr>th tbody tr>td tfootcaption <caption>//作为table的子元素,表示表格的标题信息 学生名单 </caption> //caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标
2021-08-15 13:34:57 2351
原创 学习HTML播放视频、音频,语义标签、其它标签、表格等
播放视频音频视频 <video src="../图片文件/编译原理.mp4" controls autoplay muted loop>您的浏览器不支持 video 标签</video>//controls属性会出现播放控制条(单值属性)//autoplay为自动播放 //muted为静音播放 //loop为循环播放 网页效果:音频<audio src="./video/audio.mp3" controls autoplay muted loop>
2021-08-04 11:21:17 251
原创 HTML基础语法+常用元素
今天学习了html的基础部分,作以下总结:基础知识什么是HTLM?答:超文本标记语言超文本: 通过超链接,页面内显示的内容除了文本,还有图片、链接、音乐、视频等非文字元素。标记语言:(非编程语言)与文本相关的其他信息(包括文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记进行标识。什么是HTLM5?HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式。开发环境vi、vim、记事本、VS Code、Sublime(安装插件困难)、Chrome\Firefox
2021-08-02 22:21:16 337
原创 学习中继器
Axure学习总结中继器在元件库中拉出中继器原件,然后通过中继器面板对其进行操作(添加行或者列)。中继器内部的内容决定了页面中显示的内容。中继器面板的内容:(在该处对中继器进行修改)axure中显示的中继器内容:发布预览的网页显示内容:中继器“数据集”:(默认有一列三行的数据)举例交互:每项加载中继器在页面中加载的时候,会读取数据集。如果发现数据集存在数据,就将第一行数据读取出来,通过交互设置将数据与编辑区中的元件关联,生成列表项的第一项。然后再次读取数据集中的第二行,将数据
2021-08-02 19:25:09 778
原创 初步使用Axure
今天老师教我们利用Axure 9来重构中国农业银行的首页,目标是这样的:一开始以为会很难,但没想到有这么难,鼠标移动时出现的界面、变化,鼠标点击时出现的细微的变化,作为初学者,老师都一一指出并让我们根据参数细心模仿。实现农商银行登录界面参考界面:在老师的演示指导下,我完成的界面如下:在该界面里,我基本实现以下功能:1.点击掌银注册可跳转到该界面:2.点击掌银扫码登录:本应该出现此界面,但由于后面的修改,暂时不能展示出来了 老师在课堂上展示的信息验证功能以及显示登录成功等功能未完整实
2021-07-28 19:09:00 126
原创 VSCode+Git仓库+初识Axure
@VSCodeTOC@Git仓库TOC@AxureTOC今天是正式开始前端学习的第一天!根据老师要求每周写一篇文章,以此自勉并作自我反省!!!VSCode快捷键ctrl+~ : 快速打开终端窗口ctrl+d : 选中目标代码后,使用该快捷键可快速向下进行寻找(找出与目标代码中一样的代码位置在哪)ctrl+f : 当你选中某目标代码后,使用该快捷键可打开替换窗口,并对所有相同目标代码进行便捷替换(按回车即可)ctrl+x : 快速删除选中行代码ctrl+c : 复制ctrl+v : 粘
2021-07-27 20:07:18 653
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人