前端基础学习
文章平均质量分 91
跟着pink老师学习前端基础部分的笔记
外面有点冷的时候
这个作者很懒,什么都没留下…
展开
-
跟着pink老师学前端之JavaScript特效
1. 元素偏移量 offset系列offset翻译过来就是偏移量,我们可以使用offset系列相关的属性可以动态的得到该元素的位置(偏移)、大小等。1.1 offset系列常用属性返回的数值都不带单位属性描述element.offsetParent返回带有定位的父亲,否则返回的是bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移,若没有父亲或父亲不带单位,则以body为准element.offsetLeft返回元素相对带有定位父元素左原创 2021-07-11 16:55:42 · 499 阅读 · 0 评论 -
跟着pink老师学前端之jQuery
1. jQurey概述jQuery是一个快速简洁的JavaScript库,它封装了JavaScript常用的功能代码。学习jQuery本质就是学习调用这些方法。2. jQuery的基本使用1. jQuery入口函数jquery的入口函数,相当于原生js中的DOMContentLoaded。等着页面DOM加载完毕再去执行js代码。第一种:$(document).ready(function(){ $('div').hide();})第二种:$(function () { $原创 2021-07-11 16:44:52 · 804 阅读 · 0 评论 -
跟着pink老师学前端之JavaScript-BOM
文章目录@[toc]1. BOM概述1.1 什么是BOM1.2 BOM的构成2. window对象的常见事件2.1 窗口加载事件2.2 调整窗口页面大小事件3. 定时器(回调函数)3.1 setTimeout3.2 setInterval3.3 倒计时案例3.4 发送验证码案例4. this5. JS执行机制5.1 JS是单线程5.2 同步和异步同步同步任务异步异步任务本质区别5.3 JS执行机制6. location对象6.1 什么是location对象6.2 URL6.3 location对象的属性5.原创 2021-06-30 00:24:05 · 880 阅读 · 0 评论 -
跟着pink老师学前端之JavaScript-DOM
文章目录1. WebAPIs1.1 什么是DOM1.2 DOM树2. 获取元素2.1 根据id获取2.2 根据标签名获取3. 事件基础3.1 事件三要素3.2 执行事件的步骤4. 操作元素4.1 改变元素内容4.2 修改元素属性1. 点击不同按钮切换图片案例2. 分时问候案例3. 密码隐藏显示案例4. 样式属性操作(1) 行内样式操作关闭二维码案例循环精灵图背景案例显示隐藏文本框案例(2) 类名样式操作密码框判断格式案例5. 排他思想仿百度换肤案例表格变色案例全选反选案例6. 自定义属性操作5. 结点操作1原创 2021-06-26 17:39:14 · 1094 阅读 · 1 评论 -
跟着pink老师学前端之JavaScript-基础部分
1. 初始JavaScript1.1 JavaScript是什么JavaScript是一种运行在客户端的脚本语言。脚本语言:不需要编译,运行过程中由js解释器逐行来进行解释并执行。现在也可以基于Node.js技术进行服务端编程。1.2 JavaScript的作用表单动态校验(密码强度检测)(js最初产生的目的)网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)1.3 浏览器执行原创 2021-06-24 20:36:10 · 646 阅读 · 0 评论 -
跟着pink老师学前端之HTML5和CSS3的新特性
文章目录@[toc]1. HTML5新特性1.1 HTML5新增的语义化标签1.2 HTML5新增的多媒体标签1. 视频< video>2. 音频< audio>1.3 HTML5新增的input类型1.4 HTML5新增的表单属性2. CSS3新特性2.1 CSS3新增属性选择器2.2 CSS3新增结构伪类选择器1. nth-child2. nth-of-type和nth-child的区别2.3 CSS3新增伪元素选择器1. 伪元素字体图标2. 伪元素仿土豆案例3. 伪元素清除浮动原创 2021-06-19 15:27:01 · 607 阅读 · 1 评论 -
跟着pink老师学前端CSS-D7
1. 精灵图1.1 为什么需要精灵技术为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术。核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。1.2 精灵图(sprites)的使用精灵技术主要针对于背景图片的使用,就是将网页中的一些小背景图像整合到一张大图中。这个大图片也称为sprites精灵图或雪碧图。移动背景图片的位置,此时可以用background-position。移动的距离就是这个目标图片的x和y坐标。因为一般情原创 2021-06-18 20:57:29 · 141 阅读 · 0 评论 -
跟着pink老师学前端CSS-D6
1. 定位1.1 为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。1.2 定位组成定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置。定位模式:static/ relative/ absolute/边偏移:top/ right/ bottom/ left1.3 静态定位(static)静态定位时元素的默认定位方式,无定位的意原创 2021-06-17 22:28:07 · 163 阅读 · 0 评论 -
跟着pink老师学前端CSS-D5(学成在线案例)
1.CSS属性书写顺序布局定位属性:display/ position/ float/ clear/ visibility/ overflow自身属性:width/ height/ margin/ padding/ border/ background文本属性:color/ font/ text-decoration/ text-align/ vertical-align/ white-space/ break-word其他属性:content/ cursor/ border-radius/ bo原创 2021-06-16 20:51:51 · 594 阅读 · 2 评论 -
跟着pink老师学前端CSS-D4(浮动)
1. 浮动(float)1.1 传统网页布局的三种方式普通流(标准流/文档流)浮动定位1.2 标准流标准流就是按照规定好默认方式排列。块级元素会独占一行,从上向下排列。行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。1.3 为什么需要浮动?浮动的最典型应用:可以让多个块级元素排列在同一行显示。网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。1.4 什么是浮动?float属性用于创建浮动框,将其移动到一边,知道左边缘或有边缘触及包含原创 2021-06-16 20:50:42 · 137 阅读 · 1 评论 -
跟着pink老师学前端CSS-D3
1. CSS三大特性CSS三大特性:层叠性、继承性和优先级。1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖掉另一个样式。样式冲突:遵循就近原则样式不冲突:不会层叠<style> div { /* color会被覆盖掉 */ color: lawngreen; /* background-color不会被覆盖 */ background-color: lawngreen; }原创 2021-06-15 10:26:12 · 195 阅读 · 1 评论 -
跟着pink老师学前端CSS-D2
1. Emmet语法Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法。1.1 快速生成HTML结构语法<body> <!-- 生成多个标签 div*3 --> <div></div> <div></div> <div></div> <!-- 父子级 ul>li --> &l原创 2021-06-14 12:14:52 · 172 阅读 · 0 评论 -
跟着pink老师学前端CSS-D1
1. CSS简介 CSS是层叠样式表(Cascading Style Sheets)的简称。HTML只关注内容的语义,CSS负责美化页面。CSS最大的价值即为:由HTML专注去做结构呈现,样式交给CSS,实现结构和样式相分离。1.1 CSS语法规范<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat原创 2021-06-13 17:29:16 · 134 阅读 · 0 评论 -
跟着pink老师学前端HTML-D2
1. 表格标签不用来布局,主要用于展示、显示数据。1.1 基本格式<table> <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr> <tr><td>riki</td> <td>男</td> <td>27</td></tr> <tr&原创 2021-06-13 12:34:10 · 166 阅读 · 0 评论 -
跟着pink老师学前端HTML-D1
0. web标准的构成结构:用于对网页元素进行整理和分类(HTML)表现:用于设置网页元素的版式、颜色、大小等外观样式(CSS)行为:网页模型的定义及交互的编写(JavaScript)1. HTML语法规范1. 基本语法标签在尖括号里面标签总是成对出现,叫双标签极少数为单标签<br \ >2. 标签关系<html> <head></head> <body></body></html&原创 2021-06-12 15:55:55 · 241 阅读 · 0 评论