- 博客(26)
- 收藏
- 关注
RSS订阅原创 JS高级 05.正则表达式、缓存、节流防抖
正则表达式正则概念正则表达式的定义正则表达式：正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式的作用给定的字符串是否符合正则表达式的过滤逻辑(匹配)可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
2022-03-03 14:45:42
219
原创 JS高级 04.函数高级应用
函数高级应用1.函数的定义方式(1)、函数声明function fn(){console.log('this is a function')}(2)、函数表达式var fn = function(){console.log('赋值表达式函数')}(3)、内置构造函数的形式varfn3=newFunction("num1","num2","returnnum1+num2");console.log(fn3(2,3));推荐使用第二种形式，...
2021-12-14 21:07:09
207
原创 JS高级 03.面向对象之贪吃蛇
贪吃蛇通过贪吃蛇案例，做到对昨日学习的面向对象思想的深入，以及对于js高级语法的使用熟练编写贪吃蛇小游通过上图中展示的效果，我们来分析一下该项目中需要用到的对象成员。首先思考我们应该如何来实现这样一个游戏呢？1.阶段一：玩游戏的操作步骤1、点击游戏开始2、蛇出现 食物出现3、开始控制蛇头方向去撞击食物4、碰撞到食物，食物消失，蛇身拉长。如果撞墙，游戏结束。5、继续下一轮(1)、搭建页面放一个容器盛放游戏场景 div#map，设置样式#.
2021-12-14 21:04:29
228
原创 JS高级 02.面向对象继承
面向对象继承1.复习原型 就像道格拉斯克罗克福德所说 - “每一个对象都与一个可以继承属性的原型对象相关联。从对象文字创建的所有对象都链接到Object.prototype，这是一个JavaScript标准对象。“在这里，我们将探讨一些有趣的事情。{Prototype}（花括号的原型是隐藏的链接）是一个隐藏的链接，用户无法直接访问该对象。这个隐藏的链接也是一个对象。因此，有三种方法可以在JavaScript中创建对象，并且每种方法都可以创建原型链接。目的：1、节省内存空间，2、实现数据共享.
2021-12-14 21:01:04
137
原创 JS高级 01.面向对象
面向对象1.JavaScript 面向对象的介绍、什么是对象Everything is object （万物皆对象）对象到底是什么，我们可以从两个层次来理解。(1) 对象是单个事物的抽象。一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。(2) 对象是一个容器，封装了属性（property）和方法（met...
2021-12-14 20:57:29
161
原创 JSAPI 06.高级动画(二)
高级动画(二)1.获取浏览器的body的兼容性问题在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在html页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.bo...
2021-12-14 20:53:13
128
原创 JSAPI 05.高级动画(一)
高级动画(一)1.图片跟着鼠标飞动画利用了鼠标的移动事件以及元素的坐标属性。varimgObj=document.querySelector("#imgObj");//鼠标移动事件document.onmousemove=function(event){varevent=event||window.event;varleftObj=event.clientX-imgObj.clientWidth/2;...
2021-12-14 20:50:13
982
原创 JSAPI 04.动画以及封装
动画以及封装1.定时器动画案例(1)、案例1：协议按钮禁止(2)、案例2：手机短信等待2.js的动画案例(1)、动画的原理动画是通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，再用摄影机连续拍摄成一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉暂留原理。医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。利用这一原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的..
2021-12-14 20:46:13
111
原创 JSAPI 03.DOM节点操作、事件对象与BOM
DOM节点操作、事件对象与BOM节点操作什么是节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点 document每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点节点类型通过nodeType属性可以获取节点的类型document的节点类型---9console.log(document.nodeType);//9标签的节点类型---1va..
2021-12-14 20:43:25
95
原创 JSAPI 02.属性操作与事件
属性操作与事件隔行换色案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）varbtn=document.getElementById("btn");varliObj=document.getElementById("list").getElementsByTagName("li");console.log(liObj);btn.onclick=function(){//第一种for(vari=...
2021-12-14 20:40:31
897
原创 JSAPI.01DOM操作
DOM操作webapi介绍api的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、prompt()、log()、reverse()、getMonths()任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())、weba...
2021-12-14 20:35:53
116
原创 05.JS内置对象使用
1.内置对象JavaScript中的对象分为4种：内置对象、浏览器对象、自定义对象、DOM对象。JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean ... ...。对象只是带有属性和方法的特殊数据类型。学习一个内置对象的使用，只要学会其常用的成员的使用(通过查文档学习)。内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。(1)、如何学习一个方法？方法的功能、参数的意义和类型、返回值意义和类型、demo进行测试..
2021-11-28 16:09:42
103
原创 04.JS预解析、对象、错误
单线程JavaScript语言是单线程的区分线程和进程很多新手是区分不清线程和进程的，没有关系。这很正常。先看看下面这个形象的比喻：进程是一个工厂，工厂有它的独立资源-工厂之间相互独立-线程是工厂中的工人，多个工人协作完成任务-工厂内有一个或多个工人-工人之间共享空间如果是 windows 电脑中，可以打开任务管理器，可以看到有一个后台进程列表。对，那里就是查看进程的地方，而且可以看到每个进程的内存资源信息以及 cpu 占有率。所以，应该更容易理解了：进程是 cpu 资源分配..
2021-11-28 16:05:47
90
原创 03.js.数组与函数
数组与函数V1.31. 数组为什么要学习数组只能存储一个值(比如：Number/String。数组的定义所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。通过数组字面量创建数组// 创建一个空数组vararr1=[]; // 创建一个包含3个数值的数组，多个数组项以逗号隔开vararr2=[1, 3, 4]; // 创建一个包含2...
2021-11-27 11:21:36
124
原创 02. 流程控制
流程控制介绍程序的三种基本结构顺序结构：从上到下执行的代码就是顺序结构(程序默认就是由上到下顺序执行的)分支结构：根据不同的情况，执行对应代码循环结构：重复做一件事情2.分支结构、if语句if 语句- 只有当指定条件为 true 时，使用该语句来执行代码if...else 语句- 当条件为 true 时执行代码，当条件为 false 时执行其他代码if...else if....else 语句- 使用该语句来选择多个代码块之一来执行语法格式:第一种if...
2021-11-21 16:52:04
95
原创 01. js 变量、数据类型、运算
JavaScript介绍JavaScript是什么JavaScript的历史Netscape（网景）在最初将其脚本语言命名为LiveScript，是布兰登.艾克发明的。后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java..
2021-11-21 16:44:41
121
原创 10.CSS3弹性布局、响应式布局、PS
响应式 Web 设计 -Viewport响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况(1)、什么是 Viewportviewport 是用户网页的可视区域。view...
2021-11-21 16:39:02
666
原创 09.CSS3渐变、过渡、转换、动画
CSS3渐变(1)、什么是渐变CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：(2)、CSS3渐变的分类线性渐变（Linear Gradients）- 向下/向上/...
2021-11-21 16:22:25
365
原创 08.CSS3选择器、边框、背景、按钮
CSS3概述CSS3简介如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷 动画 圆角 阴影 边框图片 …CSS3现状1、浏览器支持程度差，需要添加私有前缀-webkit- 谷歌 safari-moz- 火狐-ms- IE2、移动端支持优于PC端3、不断改进中4、应用相对广泛CSS3选择器CSS3新增了许多灵活查找元素的方法，极...
2021-11-21 16:04:20
446
原创 07.高级技巧
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display、visibility和overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！displaydisplay设置对象是否显示、如何显示。display : none隐藏对象。与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。特点：隐..
2021-11-21 15:49:04
464
原创 06.浮动与定位
浮动标准流这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？CSS的定位机制有3种：普通流（标准流）、浮动和定位。...
2021-11-21 15:40:29
211
原创 05.CSS三大特性与盒子模型
CSS三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。(1)、CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这时一个属性就会将另一个属性层叠掉。比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 记住：就近原则。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。1. 样式冲突，遵循的原
2021-11-21 15:04:18
94
原创 03表单类型、多媒体与css初始
表单的input输入类型HTML5新增了表单的输入类型email输入email格式，email 类型用于应该包含 e-mail 地址的输入域。url只能输入url格式，url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。number： 只能输入数字search： 搜索框search 类型用于搜索域，比如站点搜索或 Google 搜索。range 进度条<input type="range" name="points" .
2021-11-20 17:52:59
308
原创 04.CSS选择器与标签的分类
复合选择器复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格标记选择器类别选择器{属性：属性值；属性：属性值}并集选择器可以多个，不限制选择器，中间用逗号隔开类别，标记{属性：属性值； }子代选择器子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 &g
2021-11-04 20:41:41
136
原创 02表格、表单和H5
1.表格标签表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。、创建表格在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：<table><tr> <td>单元格内的文字</td> ...</tr>...</table>表格属性表格结构在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘...
2021-11-03 20:08:18
182
原创 web前端基础01
1.开发工具主要用的开发工具有编辑器，浏览器，photosh。（1）编辑器：dreamweaver、sublime、webstorm、Hbuilder、vscode（2）浏览器：IE,火狐，谷歌，Safari和opera2.浏览器内核浏览器内核又可以分成两部分：渲染引擎(layoutengineer或者RenderingEngine)和JS渲染引擎。1、渲染引擎它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式...
2021-11-01 21:00:06
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人