- 博客(45)
- 收藏
- 关注
RSS订阅原创 左右切换轮播图-swiper插件-面向对象
轮播图的代码一个小小的建议先要看得懂 -> 表示你听懂了 -> 如果看不懂, 那么直接问老师自己写注释 -> 留着上课的代码, 自己写注释 -> 表示你理解了看着自己的注释写代码 -> 某些方法不会, 自己去翻翻笔记 -> 表示你学会了如果你能自己先写一个思路, 按照思路写代码 -> 表示你记住了思路获取元素=> div.banner 需要的, 我们需要他的宽度-> 因为 ul 一次运动就应该运动一个可视窗口的宽度-> 因为每
2020-06-04 20:37:44
1096
原创 封装运动函数左右切换版本轮播图
运动函数需求: 当我点击 div 的时候, 让 div 定位到 left: 200px 的位置1. 获取元素2. 给元素绑定一个点击事件3. 在点击事件里面, 给元素设置定位3改. 调用运动函数 move, 一旦调用, 就能按照我传递的参数来给我定位需求2: 当我点击 p 的时候, 让 p 定位到 left: 200px 的位置1. 获取元素2. 给元素绑定一个点击事件3. 在点击事件里面, 给元素设置定位3改. 调用运动函数 move, 一旦调用, 就能按照我传递的参数来给我定位fu
2020-06-04 09:10:15
226
原创 JavaScript页面交互ES6
ES6 语法是一个官方发布的语法版本, ECMAScript2015里面定义了新的语法规范=> 定义变量=> 定义函数=> 对象赋值=> 字符串=> 新增数据类型=> …问题: 不兼容, 不用我们考虑在后期, 我们会学习一些工具把 ES6 的语法转换成 ES5 的语法颜色主题 one dark pro图标主题 vscode iconlet/const 统一和 var 定义变量的区别在 ES6 里面有两个定义变量的关键字一个叫做 let
2020-06-02 21:27:03
264
原创 JavaScript页面交互表单验证和密码强度验证
将来我需要做的事情是随着用户的输入检测输入的内容是不是符合规则如果符合规则, 那么 input 取消掉 active 类名, 并且 p.error 也取消掉 active如果不符合规则, 那么 input 要加上 active 类名, 并且 p.error 也要加上 active问题:input 和 p 标签本身都有个自的类名添加类名的时候好做 直接 += ’ 要添加的类名’删除类名的时候不好做, 我们要获取到字符串, 把里面的某些内容干掉, 再从新赋值解决:把他们两个的内容提出来, 放在
2020-06-01 21:22:35
618
原创 JavaScript页面交互正则和字符串合作的几个方法
了解正则什么是正则表达式, 也叫做规则表达式就是我们自己按照语法书写一套规则用来检测 字符串 是不是符合规则的从字符串里面捕获出来一部分符合规则的内容用处:正则表达式用来检测字符串至于你的字符串是不是从表单里面获取出来的无所谓我们大部分的时候, 是使用正则检测表单里面获取的字符串创建正则表达式明确: 正则表达式也是一个 复杂数据类型学过的复杂数据类型1. Function 函数2. Object 对象3. Array 数组4. Date 时间5. RegEx
2020-06-01 07:38:27
182
原创 JavaScript事件委托案例(可以删除的表格)阻止默认右键菜单和自定义右键菜单
选项卡(tab 切换)分析效果ul 下 有三个 li => 当作按钮使用ol 下 有三个 li => 当作展示内容的盒子使用按钮li点击, 对应切换 盒子li 显示怎么切换 ?当你点击第一个 按钮li 的时候只有第一个 按钮li 有 active 类名其他的 按钮li 没有 active 类名所有的 盒子li 都没有 active 类名只有第一个 盒子li 有 active 类名当你点击第二个 按钮li 的时候只有第二个 按钮li 有 active 类名其他的 按钮li
2020-05-28 21:55:35
337
原创 JavaScript页面交互事件(下)
解绑事件复习绑定事件dom0级 事件元素.on事件类型 = 事件处理函数dom2级 事件元素.addEventListener(‘事件类型’, 事件处理函数) - 标准浏览器元素.attachEvent(‘on事件类型’, 事件处理函数) - IE 低版本解绑事件dom0级 事件解绑元素.on事件类型 = null因为是赋值的关系, 所以当我给一个事件赋值为 null 的时候那么, 当事件触发的时候, 就没有事件处理函数执行了那么就相当于没有绑定事件是一个道理的dom2级 事
2020-05-27 21:24:27
319
原创 JavaScript页面交互事件(上)
事件三要素1. 事件源: 绑定在谁身上的事件(和谁约定好)2. 事件类型: 绑定一个什么事件3. 事件处理函数: 当行为发生的时候, 要执行哪一个函数// 1. 获取元素var box = document.querySelector(‘div’)// 2. 给 div 绑定一个点击事件// 事件源: div// 事件类型: click(点击行为)// 事件处理函数: 准备一个函数, 在点击行为触发的时候执行// on 是我们绑定事件的一种方式// click 叫做事件类型// 当页
2020-05-26 20:20:55
1012
原创 DOM节点获取元素的偏移量等属性词
节点属性每一个节点都有自己的特点这个节点属性就记录着属于自己节点的特点1. nodeType(以一个数字来表示这个节点类型)语法: 节点.nodeType得到: 一个数字, 代表着这个节点的类型元素节点: 1属性节点: 2文本节点: 3注释节点: 8例子: 将来我获取到某一个节点, 我不确定他是不是元素节点我只要判断他的 nodeType === 1 那么这个节点一定是一个元素节点2. nodeName(节点名称)语法: 节点.nodeName得到: 一个名称, 属于这个节点的名
2020-05-25 20:32:26
645
原创 JavaScript内置对象一周知识点总结
了解作用域作用: 生效, 可以使用域: 范围一个东西可以生效的范围什么东西 ? 变量(变量名, 函数名)其实就是一个变量可以生效的范围作用域分类1. 全局作用域一个 html 页面就是一个全局作用域打开页面的时候, 作用域就生成了, 直到关闭页面为止2. 局部作用域(私有作用域)只有函数生成私有作用域每一个函数就是一个私有作用域作用域的上下级关系全局作用域最大, 所有的私有作用域都是再全局作用域下面的函数生成的私有作用域, 函数写在那个作用域里面就是哪个作用域的子级这个位置
2020-05-23 18:25:43
314
原创 DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词
获取页面中的元素的方法作用: 通过各种方式获取页面中的元素以前我们说过, id 可以直接使用这个方法只能通过 id 获取今天学的就是使用各种方式比如: id, 类名, 标签名, 选择器 的方式来获取元素伪数组:长得和数组差不多, 也是按照索引排列也是有 length 属性, 也可以使用 for 循环来遍历但是就是不能使用数组常用方法1. 通过 id 获取元素的方法语法: document.getElementById(‘你要获取的元素的 id’)返回值: 是 dom 元素, 也叫做
2020-05-23 18:00:27
261
原创 BOM对象 概述 相关操作 DOM的概念 元素的获取 属性操作
获取时间差1. 获取 时间节点A 到 格林威治的毫秒数2. 获取 时间节点B 到 格林威治的毫秒数3. 两个时间节点的毫秒数相减, 得到两个时间节点之间相差的毫秒数因为相减的时候, 我不确定谁大谁小所以我最好是随便减一个, 取绝对值4. 通过相差的毫秒数换算出是 多少天多少小时多少分钟多少秒4-1. 换算天数总的秒数 / 一天的秒数 得到的就是 多少天(小数)我们只需要整天数, 不够整天的按照小时算Math.floor() 取整一下4-2. 换算小时总的秒数 % 一天的秒数 剩下的就
2020-05-21 19:08:07
171
原创 数学和时间对象 Math内置对象的常见API Date对象
字符串的常用方法都是用来操作字符串的所有的方法都不改变原始字符串所有的操作都是以返回值的形式给结果1. charAt()解释一下名字char: 字符, 表示一个字符at: 在哪作用: 根据索引找到对应的字符返回语法:字符串.charAt(索引)返回值: 对应索引位置的字符如果有对应索引, 那么得到的就是对应索引位置的字符如果没有对应索引, 那么得到的是 空字符串2. charCodeAt()作用: 根据索引找到对应的字符, 返回字符的编码语法:字符串.charCodeAt(
2020-05-20 19:40:55
252
原创 JavaScript内置对象ES5和字符串
冒泡排序 - 是我们若干排序算法中的一种, 最基础的一种解决一个技术问题数组中两个成员的交换位置 - 交换两个变量 - 利用第三个变量思路:先循环一遍, 让每一个数字和后一个数字进行比较如果前一个比后一个大, 那么两个数字交换位置, 否则不动循环完毕得到的一个结果, 就是最大的数字放到了数组的最后一位循环一次能把最大的放在最后面一模一样的代码重复执行第二遍的时候, 就把到数第二大的放在了到数第二的位置一模一样的代码重复执行第三遍的时候, 就把到数第三大的放在了到数第三的位置一模一样的代码
2020-05-19 20:43:43
139
原创 JavaScript内置对象数组的创建方式
对象的操作语法1. 复习一下对象什么是对象 ?是一个复杂数据类型, 专门用来存储数据的会给每一个存储的数据起一个名字创建对象的方式字面量创建var obj = {}内置构造函数创建var obj = new Object()操作对象的语法(点语法)增: 对象名.你要增加的名字 = 你要增加的值删: delete 对象.你要删除的名字改: 对象名.你要修改的名字 = 你要修改的值(原先有就是修改, 原先没有就是增加)查: 对象名.你要查询的名字操作对象的语法(数组关联语法)增:
2020-05-18 20:42:07
766
原创 JavaScrip作用域和递归函数知识点梳理
两个数字的最大公约数什么是最大公约数两个数字都能整除的一个数字并且是所有能整除的数字里面最大的那一个例子: 10 和 20能被 10 和 20 整除的数字有 1 2 5 10这些能整除的数字里面最大的就是 10所以 10 和 20 的最大公约数就是 10例子: 99 和 199能被 99 和 199 整除的数字有 1所以 99 和 199 的最大公约数就是 1计算最大公约数的思路1. 要有两个数字2. 找到两个数字里面相对小的那一个因为最大公约数不可能比相对小的那个数字还大假设
2020-05-15 21:16:38
197
原创 JavaScript函数知识点梳理
循环嵌套就是再循环里面再次写一个循环注意: 里外层循环变量不要一样for (var i = 1; i <= 5; i++) {for (var j = 1; j <= 7; j++) {// 里层循环, 会随着外层循环一遍一遍的执行// 当 i === 0 的时候, 会完整执行一遍里层循环 j === 0 1 2// 当 i === 1 的时候, 会完整执行一遍里层循环 j === 0 1 2// 当 i === 2 的时候, 会完整执行一遍里层循环 j === 0 1 2//
2020-05-14 20:48:47
468
原创 JavaScript循环结构语句知识点梳理
四种书写形式1. if () {}条件满足就执行, 不满足就不执行2. if () {} else {}条件满足就执行 if 后面的 {} 里面的代码条件不满足就执行 else 后面的 {} 里面的代码3. if () {} else if () {} …从左到右, 依次判断条件, 哪一个条件满足了就执行哪一个 if 后面的 {} 里面的代码前面的满足了, 后面的就都不管了, 直接跳过多有条件都不满足的时候, 就没有代码执行4. if () {} else if () {} else
2020-05-13 20:21:00
285
原创 JavaScript分支结构语句知识点梳理
数据类型转换 - 转数值1. parseInt()2. parseFloat()3. Number()4. 非 加法 的数学运算+ parseInt 和 parseFloat 方法在转换的时候时一位一位的看=> 第一位就不能转换的时候, 直接给出 NaN=> 第一位可以转换, 那么保留第一位, 继续看第二位, 以此类推=> parseInt() 不认识小数点, parseFloat() 认识小数点+ Number 和 非加法 是把要转换的数据当成一个整体来看=>
2020-05-12 20:29:53
268
原创 JavaScript基础语法知识点梳理
JS 的三大组成部分1. ECMAScript（ES） + 就是我们 js 的语法 + 也就是我们怎么写代码， 什么地方是字母， 什么地方是数字， 什么地方是符号2. BOM(Browser Object Model) - 浏览器对象模型 + 就是一套操作浏览器的属性和方法 + 操作浏览器的滚动条 地址栏， 改变页面， 关闭页面， 。。。3. DOM(Document Object Model) - 文档对象模型 + 就是一套操作文档（html 结构）的属性和方法 + 操作
2020-05-11 21:44:54
330
原创 4月17日知识点梳理兼容&图片整合
图片整合、css精灵、精灵图、雪碧图、CSS sprites优势：1：减少请求次数，缓解服务端得压力2：减少图片得质量，最终得目的：提高项目速度，减少性能消耗图片整合需要注意：1：背景图一定是透明得2：根据情况得需求，把小图标的间距要处理好。3：尽量上下排列。主流浏览器：谷歌、火狐、欧鹏、苹果、Ie浏览器的世界大战 -> 争夺市场份额上世纪90年代：当微软发布IE ...
2020-04-17 15:10:48
76
原创 4月16日grid布局知识点梳理
vw + rem 完成移动端布局根据设计图：640px html{font-size:31.25vw}750px html{font-size:26.67vw}vw???vw会根据视口的变化而变化rem的原理：根据html font-size值而定插件来进行html的font-size的值的改变。适应插件 flexible.js 进行适配步骤：1：先把html自身...
2020-04-16 19:23:29
175
原创 4月15日移动端布局（媒体查询及响应式 + rem）
媒体查询：由设备类型、监测设备特性表达式构成。语法：@media 设备类型[all\screen] and (条件表达式){css样式}注：and两侧必须有空格not放在设备类型的前面（反向选择【排除某个范围】）媒体查询：做样式微小调整例如：浮动显示隐藏文本大小宽高meta标签的设置：视口1：1比例、禁止用户缩放Retina屏 视网膜高清显示屏ppi : 每英寸...
2020-04-15 19:22:41
148
原创 4月14日css3弹性盒子知识点梳理
box-sizing:属性值：box-sizing:content-box; 常规盒模型box-sizing:border-box: 怪异盒模型（IE盒模型）怪异盒模型：触发怪异盒模型：box-sizing:border-box;怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。弹性盒子：布局方案。作用：控制离它最近的一层子元素,布局方式。...
2020-04-14 20:06:50
180
原创 4月13日css3新增属性讲解知识点梳理
文本阴影：text-shadow: x轴位置 Y轴位置 阴影大小 阴影颜色注：如果想添加多个阴影 每一组阴影以逗号分隔。盒子阴影：box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)添加多阴影：以逗号分隔的形式添加多阴影英文或者数字默认显示：如果没有换行的情况下：尝试把下一个长单词放在下一行显示。word-wrap:break-w...
2020-04-13 19:25:48
95
原创 4月10日css3选择符知识点梳理
1：新增加的type类型emailurlnumberrangecolorsearchtime 时间类型month 月份week 周datetime-local 选取本地时间date 只有年月日2: 新增的html属性minmaxrequired 如果表单没有输入内容的情况下，禁止提交step 确定一个法定值eg : 3 -6 -3 ...
2020-04-10 21:40:24
125
原创 4月9日css3知识点梳理
语义化结构标签：section 更偏于划分区域。（网页的外围结构…更类似与div）article 更偏向于内容的展示aside 侧边栏（在一旁的）header 网页头部或者是内容块头部footer 网页的顶部或者内容快的底部nav 导航区域。figure 代表一个独立的区域figcaption figure区域的标题main ...
2020-04-10 21:22:58
68
原创 4月8日知识点梳理
回顾：触发3d空间：transform-style:preserve-3d3d功能函数：3d-位移3d-旋转3d-缩放3d-位移：translate3d(x,y,z)translateZ()3d旋转：rotateZ();rotate3d(x,y,z,度数)注：x y z 一个矢量值 0 不旋转 1 旋转eg:rotate3d(1,1,0,45deg)等价于：ro...
2020-04-10 21:08:32
66
原创 4月7日css3知识点梳理
2D:平面空间的元素变形。变形属性：transform:transform的属性值为功能函数。2d功能函数：2d的位移：2D的旋转：2d的缩放：2d的倾斜：2D位移：transform:translate(x,y);transform:translateX(x轴移动的距离);transform:translateY(Y轴移动的距离);2D的缩放：transform:s...
2020-04-10 20:34:01
101
原创 4月3日CSS3属性
很多css3属性 最初的预览版没有形成最终的正式版，但是浏览器为了对这些新属性形成支持，主流浏览器提供属于自己的语法规则 “浏览器前缀”-webkit- 谷歌、苹果 浏览器前缀-moz- 火狐浏览器前缀-ms- IE浏览器前缀-o- 欧鹏浏览器注：添加浏览器前缀 -> 兼容模式不添加浏览器前缀 -> 标准模式...
2020-04-03 22:13:41
104
原创 4月2日BFC布局
BFC布局规定：一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的margin box的左边， 与包含块border box的左边相接触四、BFC的区域不会与float box重叠。五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响...
2020-04-02 21:51:45
97
原创 4月1日知识点梳理
宽度自适应：width:100%; || 不去设置宽度高度自适应：1：height:auto; || 不去设置 （内容撑开容器高度）2：让子元素跟随父元素height:100%;body,html{height:100%;}最小高度的设置高度塌陷以及高度塌陷的解决方法表格的作用：显示数据。表格标签补充:1:表格的数据行分组 表头 表体 ...
2020-04-01 19:41:55
76
原创 3月31日知识点梳理
宽高自适应：宽的自适应：width:100%;或者是width不去设置，子元素宽度跟随父元素。高度自适应第一种情况：height不去设置 或者height:auto; 内容撑开父元素高度。最小高度的设置。min-height:;需求：a: 内容增加能撑开父元素高度b: 内容特别少，能让元素保持一个最小高度正常项目中：最小高度直接用min-height即可。如果考虑兼容：min...
2020-03-31 21:35:41
189
原创 3月30日知识点梳理
定位属性：position属性值：staticabsoluterelative包含块的设置：给父元素添加position:relative; 形成参照物给子元素添加position:absolute 进行位置的移动。定位的层次关系：z-index绝对定位与相对定位区别：1：参照物：绝对定位参照物：已经添加定位的父元素相对定位参照物：自身默认的位置2：布局流：绝对定位...
2020-03-30 21:08:25
98
原创 3月28日知识点梳理
1:定位得流程：a: 给元素添加position属性。（告诉元素：开始进行位置移动）b: 属性值来确定参照物c: 固定坐标。 left /right /top / bottom2: position得属性值：position:static ( 静态定位 )position:absolute; （绝对定位）3：position：absolute;参照物：有定位的父元素。如果没有父元素...
2020-03-28 21:53:14
329
原创 3月27日知识点梳理
内联元素里面有个特殊的存在：input默认的display的值为inline-blockvertical-align让子元素在父元素里面左右垂直居中（记流程）1:给父元素添加text-align:center (左右居中)2:给当前元素添加display:inline-block;vertical-align:middle;3:在当前元素后面（不要回车），添加一个空的span给s...
2020-03-27 20:17:44
116
原创 3月26日知识点梳理
1：元素类型分类：块状元素、内联元素、可变元素 （内联块元素放在内联这一类里面）2：每类元素各自的特点：3：每个标签属于哪一类！！！4：元素类型的转换 display属性：block inline nonecss的显示对标签分类: 块状元素 内联元素（行内元素）争议点： 第三类： a:可变元素 b...
2020-03-26 19:52:17
78
原创 3月25日知识点梳理
新闻列表的流程:1:结构：a:如果新闻后面有时间：新闻条新闻条新闻条新闻条新闻条2020-03-25b:如果没有时间新闻条新闻条新闻条新闻条新闻条 2: 给li添加宽高，高度量取的时候，量行高就行。 3: 给新闻内容a 和 时间的span 添加浮动。一左一右 4:设置文本样式。 5:用添加背景图的形式 给 li添加列表符号 6...
2020-03-25 21:46:43
82
原创 3月24日知识点梳理
padding的用法：1: padding是长在内容和盒子之间的，在盒子内部。2：padding是为了调整 子元素 在 父元素里面位置关系。3：padding的特点：padding值会把盒子撑大。4：如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。5：给单一方向设置padding值：padding-left/right/top/bottom:;6: padding ...
2020-03-24 20:17:12
79
原创 3月23知识点梳理
列表属性1、定义列表符号样式list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；list-styletype:none===list-style:none;2、使用图片作为列表符号list-style-image：url(所使用图片的路径及全称)；3、定义列表符号的位置list-style-position:...
2020-03-23 22:21:03
98
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人