web前端开发
文章平均质量分 90
对前端开发知识的总结和理解
十八岁讨厌编程
没事就喜欢画思维导图
展开
-
CSS3动画
是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡(过渡可以说是一种简单的动画),动画可以实现更多变化,更多控制,连续自动播放等效果。制作动画分为两步:首先定义动画,我们使用keyframes(类似定义类选择器)语法结构:这里的0%和100%有专门的名字 – 动画序列接下来是元素使用动画,在使用的时候有两个属性是必不可少的:语法结构:动画的基本使用现在我们来做一个小案例:一打开网页,一个红色的盒子就从左边飞到右边。代码实现如下:利用动画原创 2022-07-02 22:32:57 · 513 阅读 · 0 评论 -
浏览器本地存储
首先我们可以通过一个场景来理解什么是浏览器的本地存储例如我们打开淘宝搜索psp(不登陆账号的情况下),然后关闭网站之后,我们重新打开淘宝,可以发现在搜索历史里面可以看到psp。为什么会这个样子呢?这里就是网站借助了浏览器的本地存储,将数据存储到了计算机的硬盘上。我们可以借助浏览器的开发者工具查看:同样的我们也可以在浏览器中存储东西!Web 存储 API 提供了 和 两个存储对象来对网页的数据进行添加、删除、修改、查询操作。相应的API及属性:语法:保存数据语法:读取数据语法:删除数据语原创 2022-06-30 14:19:42 · 1090 阅读 · 0 评论 -
jQuery常用API①(选择器、样式操作)
文章目录jQuery选择器jQuery 基础选择器jQuery层级选择器隐式迭代jQuery 筛选选择器jQuery 筛选方法jQuery 里面的排他思想链式编程jQuery 样式操作操作 css 方法设置类样式方法类操作与className区别jQuery选择器jQuery 基础选择器原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号jQuery层级选择器原创 2022-04-01 19:35:04 · 1068 阅读 · 0 评论 -
jQuery入门
文章目录jQuery 概述JavaScript 库jQuery 的概念jQuery 的优点jQuery 的基本使用jQuery 的下载jQuery 的使用步骤jQuery 的入口函数jQuery 的顶级对象 $jQuery 对象和 DOM 对象jQuery 概述JavaScript 库仓库: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多原创 2022-03-31 19:38:21 · 299 阅读 · 0 评论 -
动画函数封装
文章目录动画实现原理动画函数简单封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动动画函数添加回调函数动画函数封装到单独JS文件里面动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left例如:<body> <div></div原创 2022-03-31 17:25:28 · 328 阅读 · 0 评论 -
元素滚动 scroll 系列
文章目录元素 scroll 系列属性页面被卷去的头部案例:淘宝固定右侧侧边栏页面被卷去的头部兼容性解决方案元素 scroll 系列属性scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。页面被卷去的头部如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件我们可以拿以下代码进行实验: <style原创 2022-03-31 15:23:35 · 1147 阅读 · 0 评论 -
元素可视区 client 系列
文章目录什么是client立即执行函数淘宝 flexible.js 源码分析什么是clientclient 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。立即执行函数立即执行函数语法:(function() {})() 或者 (function(){}())主要作用: 创建一个独立的作用域。 避免了命名冲突问题例如:<script> // 1原创 2022-03-31 14:39:52 · 376 阅读 · 0 评论 -
元素偏移量 offset 系列
文章目录offset 概述offset 与 style 区别offset 概述offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)返回的数值都不带单位offset 系列常用属性:<body> <div class="father"> <div class="son"></div> &原创 2022-03-31 14:03:57 · 613 阅读 · 0 评论 -
BOM编程③(location、navigator、history对象)
文章目录location 对象什么是location对象URLlocation 对象的属性location 对象的方法navigator 对象history 对象location 对象什么是location对象window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。URL统一资源定位符 (Uniform Resource Locator, URL) 是互联网原创 2022-03-29 15:16:45 · 925 阅读 · 0 评论 -
BOM编程②(定时器、执行队列)
文章目录定时器两种定时器setTimeout() 定时器停止 setTimeout() 定时器setInterval() 定时器停止 setInterval() 定时器thisJS执行机制JS是单线程同步和异步同步、异步任务JS执行机制定时器两种定时器window 对象给我们提供了 2 个非常好用的方法-定时器setTimeout()setInterval()setTimeout() 定时器语法:window.setTimeout(调用函数, [延迟的毫秒数]);setTimeout原创 2022-03-29 13:49:17 · 1224 阅读 · 0 评论 -
BOM编程①(概述、window常见事件)
文章目录BOM概述什么是BOMDOM和BOM的区别BOM 的构成window 对象的常见事件窗口加载事件调整窗口大小事件BOM概述什么是BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一原创 2022-03-29 11:33:06 · 295 阅读 · 0 评论 -
DOM事件高级④(常用的鼠标、键盘事件)
文章目录常见的鼠标事件鼠标事件鼠标事件对象常用的键盘事件键盘事件键盘事件对象附:ASCII码表常见的鼠标事件鼠标事件1.禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单。document.addEventListener('contextmenu', function(e) { e.preventDefault();})2.禁止鼠标选中(selectstart 开始选中)document.addEventListener('原创 2022-03-28 20:23:21 · 602 阅读 · 0 评论 -
DOM事件高级③(阻止事件冒泡、事件委托)
文章目录阻止事件冒泡阻止事件冒泡的两种方式阻止事件冒泡的兼容性解决方案事件委托(代理、委派)阻止事件冒泡阻止事件冒泡的两种方式事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。阻止事件冒泡标准写法:利用事件对象里面的 stopPropagation()方法e.stopPropagation()非标准写法:IE 6-8 利用事件对象 cancelBubble 属性e.cancelBubble =原创 2022-03-28 19:33:33 · 325 阅读 · 0 评论 -
DOM事件高级②(事件流、事件对象)
文章目录事件流事件对象什么是事件对象事件对象的使用语法事件对象的兼容性方案事件对象的常见属性和方法事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。比如我们给一个div 注册了点击事件:DOM 事件流分为3个阶段:捕获阶段当前目标阶段冒泡阶段事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程事件捕获: 网景最早提出,由 DOM 最顶层节点开始,然后逐级向下传原创 2022-03-28 18:55:39 · 282 阅读 · 0 评论 -
DOM事件高级①(注册、删除事件)
文章目录注册事件(绑定事件)注册事件概述addEventListener 事件监听方式attachEvent 事件监听方式注册事件兼容性解决方案删除事件(解绑事件)删除事件的方式删除事件兼容性解决方案注册事件(绑定事件)注册事件概述给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式方法监听注册方式①传统注册方式利用 on 开头的事件 onclick<button οnclick=“alert(‘hi~’)”></button>btn.on原创 2022-03-28 17:03:44 · 908 阅读 · 0 评论 -
DOM编程② (操作元素)
文章目录原创 2022-03-23 20:58:08 · 1381 阅读 · 0 评论 -
CSS3的新特性② -- 盒子模型、过渡、其他特性
文章目录原创 2022-03-22 19:23:46 · 416 阅读 · 0 评论 -
CSS3的新特性① -- 选择器
文章目录属性选择器结构伪类选择器nth-child(n)nth-child 和nth-of-type的区别总结伪元素选择器伪元素选择器使用场景场景一:伪元素字体图标新增的CSS3特性有兼容性问题,ie9+才支持CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器属性选择器属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。注意:类选择器、属性选择器、伪类选择器,权重为 10。例如:原创 2022-03-22 14:55:37 · 471 阅读 · 0 评论 -
HTML5新特性
文章目录HTML5 新增的语义化标签HTML5 新增的多媒体标签视频标签音频标签总结HTML5 新增的 input 类型HTML5 新增的表单属性HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。HTML5 新增的语义化标签以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的。<div class=“header”&原创 2022-03-22 10:58:01 · 294 阅读 · 0 评论 -
CSS高级特性③(文字溢出省略,常见布局技巧,CSS初始化)
文章目录溢出的文字省略号显示单行文本溢出显示省略号多行文本溢出显示省略号常见布局技巧margin负值的运用文字环绕浮动效果行内块的应用CSS三角强化CSS初始化溢出的文字省略号显示分为两种情况:单行文本溢出显示省略号多行文本溢出显示省略号单行文本溢出显示省略号三个步骤:强制一行内显示文本超出的部分隐藏文字用省略号替代超出的部分代码实现:/*1. 先强制一行内显示文本*/ white-space: nowrap; ( 默认 normal 自动换行) /*2. 超出的部分隐原创 2022-03-21 21:22:39 · 1074 阅读 · 0 评论 -
CSS高级特性②(三角、用户界面样式、vertical-align属性)
文章目录CSS三角CSS用户界面样式什么是用户界面样式更改用户的鼠标样式表单轮廓防止拖拽文本域 resizevertical-align 属性应用解决图片、表单和文字对齐的问题解决图片底部默认空白缝隙问题CSS三角网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。一张图, 你就知道 CSS 三角是怎么来的了, 做法如下:本质就是盒子将高度和宽度设为0,此时边就呈现一个三角形的效果代码实现:div { width: 0; height: 0; line-hei原创 2022-03-21 19:03:22 · 510 阅读 · 0 评论 -
CSS高级特性①(精灵图、字体图标)
文章目录精灵图为什么需要精灵图精灵图(sprites)的使用字体图标字体图标的产生字体图标的优点字体图标的使用字体图标的追加精灵图为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务原创 2022-03-21 18:13:45 · 313 阅读 · 0 评论 -
CSS元素的显示与隐藏
文章目录原创 2022-03-21 14:16:05 · 292 阅读 · 0 评论 -
DOM编程① (DOM简介,获取元素,事件基础)
文章目录预备知识什么是API什么是Web APIDOM简介什么是DOMDOM树获取元素如何获取页面元素根据ID获取根据标签名获取通过 HTML5 新增的方法获取获取特殊元素(body,html)事件基础事件概述事件三要素执行事件的步骤预备知识什么是APIAPI(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。简单理解:API是给程原创 2022-03-17 19:07:31 · 1080 阅读 · 0 评论 -
CSS定位
文章目录原创 2022-03-21 13:32:47 · 275 阅读 · 0 评论 -
Web前端笔记 -- CSS③
文章目录CSS 的三大特性层叠性继承性优先级CSS的注释CSS盒子模型看透网页布局的本质盒子模型(Box Model)组成边框(border)表格的细线边框边框会影响盒子实际大小内边距(padding)外边距(margin)外边距典型应用外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷清除内外边距CSS 的三大特性CSS 有三个非常重要的三个特性:层叠性继承性优先性层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。原创 2022-01-30 22:12:33 · 314 阅读 · 1 评论 -
Web前端笔记 -- CSS②
文章目录CSS 的复合选择器什么是复合选择器后代选择器子选择器并集选择器伪类选择器链接伪类选择器:focus 伪类选择器复合选择器总结CSS的元素显示模式什么是元素显示模式块元素行内元素行内块元素元素显示模式总结元素显示模式转换CSS的背景背景颜色背景图片背景平铺背景图片位置背景图像固定(背景附着)背景复合写法背景色半透明背景总结附1:Emmet 语法快速生成HTML结构语法快速生成CSS样式语法快速格式化代码附2:如何使单行文字垂直居中单行文字垂直居中的原理CSS 的复合选择器什么是复合选择器在 C原创 2022-01-29 21:59:33 · 308 阅读 · 0 评论 -
Web前端笔记 -- CSS①
文章目录CSS简介HTML的局限性CSS-网页的美容师CSS语法规范CSS代码风格样式格式书写样式大小写空格规范CSS基础选择器CSS选择器的作用选择器分类标签选择器类选择器类选择器-多类名id 选择器通配符选择器基础选择器总结CSS字体属性字体系列字体大小字体粗细文字样式字体复合属性字体属性总结CSS文本样式文本颜色对齐文本装饰文本文本缩进行间距文本属性总结CSS的引入方式CSS 的三种样式表内部样式表行内样式表外部样式表CSS 引入方式总结CSS简介HTML的局限性说起 HTML,这其实是个非常单原创 2022-01-29 17:52:37 · 307 阅读 · 0 评论 -
Web前端笔记 -- HTML③
文章目录表格标签表格的主要作用表格的基本语法表头单元格标签表格属性表格结构标签合并单元格列表标签无序列表有序列表自定义列表列表总结表单标签为什么需要表单表单的组成表单域表单控件< input> 表单元素< label> 标签< select> 表单元素< textarea> 表单元素表单元素几个总结点表格标签表格是实际开发中非常常用的标签:表格的主要作用表格的基本语法表头单元格标签表格属性表格结构标签合并单元格表格的主要作用表格主要用于原创 2022-01-29 15:27:38 · 299 阅读 · 0 评论 -
Web前端笔记 -- HTML②
目录HTML 语法规范基本语法概述标签关系包含关系并列关系HTML 基本结构标签HTML 常用标签标题标签 < h1> - < h6>段落标签换行标签文本格式化标签< div> 和< span>标签HTML 语法规范基本语法概述HTML 标签是由尖括号包围的关键词,例如 < html>。HTML 标签通常是成对出现的,例如 < html> 和 < /html> ,我们称为双标签。标签对中的第一个标签是开始标签,第二原创 2022-01-29 12:36:55 · 284 阅读 · 0 评论 -
web前端笔记 -- HTML①
目录HTML简介网页什么是网页什么是HTML网页的形成常用浏览器浏览器内核Web标准为什么需要Web标准Web标准的构成HTML简介网页什么是网页网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。什么是HT原创 2022-01-28 23:25:44 · 289 阅读 · 0 评论