- 博客(41)
- 收藏
- 关注
RSS订阅原创 iOS＜u＞标签中出现上角标下划线位置错位问题
标签中出现上角标下划线位置错位问题，去掉u标签的下划线样式：text-decoration: none;通过标签的背景渐进属性background: linear-gradient（）设置。
2024-06-18 10:29:06
234
原创 jQuery初识、 jQuery和DOM对象的关系、表单选择器、节点遍历(常用)、操作标签属性 样式、循环 21
1.jQuery初识1.1 jQuery是优秀JavaScript库解决了兼容问题简化获取标签、DOM操作、事件、动画、ajax强大的选择器功能（通过选择器选择标签）$(“选择器”)函数化(方法化) 语法：$(“选择器”).action();取值赋值一体 //赋值$("div").html("<strong>发卡福建安防</strong>");//取值var text = $("div").html();console.log(text)
2021-01-11 21:30:06
359
原创 移动端事件 pc端事件在移动端延迟300ms触发、移动端事件对象、touch.js、绑定方式、事件对象、 手势事件 20
day20 移动端事件回顾事件：鼠标事件：onclick，onmouseover，onmouseout（冒泡，子元素可以触发父元素事件）,onmouseenter,onmouseleave(不冒泡，子元素不能触发父元素事件)，onmousemove,onmouseup,onmousedown,滚轮事件： onmousewheel DOMMoseScroll滚动事件：onscroll窗口大小发生改变时触发的事件：onresize表单事件：表单域：onsubmit，onreset表单事件：
2021-01-09 21:18:52
134
原创 闭包、ajax、get请求、post请求、封装、解析数据 15
day15 闭包与ajax1.回顾面向对象继承方式function Student(name,age,sex){ //父类 this.name = name; this.age = age; this.sex = sex;}Student.prototype.study = function(){ console.log("天天放假")}原型链继承：子类的prototype = 父类的实例function MiniStudent(){ //子类
2021-01-02 15:57:25
138
原创 面向对象继承、 原型链继承、 对象冒充继承、 混合继承、寄生式组合继承、正则表达式创建、修饰符、检索方法、正则元字符 14
day14 面向对象与正则1.面向对象继承1.1 原型链继承原型链继承 ：子类的原型对象 = 父类的实例对象//1.父类构造函数function Student(name,age,sex){ this.name = name; this.age = age; this.sex = sex; this.arr = [1,2,3];}Student.prototype.classId = "1116"Student.prototype.study = functi
2020-12-30 22:57:48
177
原创 对象组成 创建方式、字面量创建、关键字new创建、工厂模式创建、构造函数创建 new操作的作用、原型创建、混合创建、call与apply的作用及区别 13、
对象的组成 属性 —特征的描述，静态 变量 方法 — 行为 ，动态 function对象创建方式1.字面量创建：var obj = { "name":"Web","eat":function(){} } 优点：直观 缺点：代码冗余，适合创建单个对象2.关键字new创建 var obj = new Object()obj.name = "Web";obj.eat = functi
2020-12-30 22:54:22
89
原创 滚轮事件、拖拽、回调函数 12
day12 js特效动画1.滚轮事件添加滚轮事件：chrome、ie : onmousewheelff:添加一定要通过事件绑定方式添加 addEventListener(“DOMMouseScroll”)滚动方向：chrome、ie : ev.wheelDelta 上120 下-120ff: ev.detail 上-3 下 3var oDiv = document.getElementsB
2020-12-28 21:25:52
264
原创 事件对象、事件绑定、事件取消、DOM事件流、阻止事件默认行为、键盘事件、事件代理(委托) 11
day11 事件高级1.回顾表单事件表单域事件提交事件 onsubmit重置事件 onreset表单元素事件获得焦点事件 onfocus失去焦点事件 onbluronchange：失去焦点时内容和之前有变化时触发oninput/onpropertychange:输入框内容发生变化时触发(实时)window和document？window–窗口document–文档locationlocation.href : 获取设置当前窗口显示的urlloca
2020-12-27 21:36:57
134
原创 表单、快速获取表单元素、表单事件方法 获得/失去焦点、BOM、window提供的系统方法、BOM三大系列 client系列 offset系列 scroll系列、懒加载10
day10 BOM1.回顾1.1 数组迭代方法every()：对数组进行判断，所有结果都为true，最后结果才为truesome():对数组进行判断，只要有一个为true，结果就为truefilter():对数组进行判断，满足条件的组成一个新的数组返回map():循环数组，返回的值会组成一个新的数组返回forEach():循环数组1.2 DOM获取通过选择器document.querySelector（）：选择器选中的标签中的第一个document.querySelecto
2020-12-26 20:15:20
155
1
原创 数组迭代方法 every some filter map forEach 、DOM获取元素 子节点 父元素 兄弟节点、 创建节点、添加节点、删除节点、复制与替换、操作属性节点09
day09 DOM1.回顾1.1 字符串方法charAt()charCodeAt()indexOf()lastIndexOf()截取substring()slice()substr()split()分割replace()toUpperCase(),toLowerCase()trim()1.2 数组数组栈方法push，popunshift，shiftsplice(start，deleteCount，items)indexOf()sort(
2020-12-26 19:45:11
203
原创 数组对象、push，pop在数组的末尾添加或删除元素、unshift，shift：在数组的头部添加或删除元素、选择排序、冒泡排序、快速排序、排序方法sort()、 随机排序 08
day08 数组方法1.字符串方法通过下标获取charAt(下标)：获取对应下标的字符charCodeAt(下标)：获取对应下标的字符编码 “0”–48 “a”–97 “A”–65检索位置，查找是否存在indexOf(searchValue,start):查询某个字符在另一个字符串中首次出现的位置，出现返回对应的下标，没有出现返回-1； 作用：判断字符串中是否某个特定字符的存在lastIndexOf(searchValue,start):查询某个字符在另一个字符串中最后一次
2020-12-23 21:58:53
505
原创 Math对象、取整、 数学公式、随机数、Date对象、 获取固定格式时间对象、获取单个时间、倒计时、 字符串方法String对象07
day07 时间对象与字符串对象1.回顾定时器分类setTimeout语法：setTimeout(函数，时间ms)使用场景：广告弹窗setInterval语法：setInterval(函数，时间ms)使用场景：轮播图，倒计时，抽奖停止定时器clearInterval(intervalId)clearTimeout()封装实现功能声明一个函数，把主要代码放入到函数中找参数调用调试----- 来回目标值问题----&& 步长正
2020-12-22 22:47:39
159
原创 轮播图js封装
轮播图/* *作用：轮播图*@parent1 {object} elem：标签 轮播图可视区*@parent2 {object} elem：标签 圆点父元素*/function changeimg(parent1, parent2) { var oUl = parent1.getElementsByTagName("ul")[0]; var oLi = oUl.getElementsByTagName("li"); var oSpan = parent2.getEleme
2020-12-21 22:34:08
173
原创 定时器setTimeout setInterval、运动函数封装06
day06 定时器1.定时器1.1 定时器的分类setTimeout：延迟定时器使用场景：广告弹窗语法：setTimeout(函数,时间ms) 延迟某个时间执行函数一次setInterval：间歇执行定时器使用场景:轮播图，倒计时，抽奖语法：setInterval(函数，时间) 间隔某个时间就执行函数一次1.2 定时器使用setTimeout<div>广告</div><script> var oDiv = docum
2020-12-21 22:16:50
295
原创 函数的声明和使用、函数参数、作用域、预解析05
day05 函数1.回顾for-in作用：用于循环对象语法：for（var 变量 in 需要循环的对象）{}this概念：当前调用函数的对象，所处环境不同，代表的值不一样，取决于函数被调用时所处的环境在事件处理函数中，this指向触发事件的对象【点谁是谁】//1.点击li，打印被点击li的内容var oLi = document.getElementsByTagName("li");//2.循环添加点击事件for(var i = 0;i<oLi.length;i
2020-12-21 22:04:55
171
原创 for循环嵌套、 while、do-while、跳出循环 break continue、for-in、this、自定义属性04
day04 this与自定义属性1.回顾document.write和innerHTML的区别？共同点：都可以识别标签，都可以改变body标签的内容区别：innerHTML会覆盖document.write：写入的时候文档已经加载完成，会重绘文档-- 覆盖之前的内容。写入的时候文档没有加载完，不会覆盖原有的内容for循环：可以让特定代码执行指定的次数语法：for(初始化循环变量;循环条件;更新循环变量){ 循环体 }2.循环2.1 for循环嵌套图形/
2020-12-17 21:57:02
457
原创 流程控制语句、分支结构if switch、DOM获取元素、循环结构for03
day03 流程控制语句1.回顾1.1.数据类型要求：能区分js数据类型的种类、不同数据类型的不同表现形式，不同数据类型之间的转换(转number、转string)js的数据类型number数字、进制、NaN（不能正确运算的时候）、infinityNaN == NaN ： false0.1+0.3 小数计算会出现偏差，不能使用小数作为判断条件string引号引起来的 “” ‘’str.length :获取字符串的长度str.charAt(下标)/str[下标]
2020-12-16 22:00:05
820
原创 数据类型分类 转换、复杂类型(复合、引用、对象类型)、ypeof的返回值、运算符02
day02 数据类型1.回顾什么叫js？基于对象和事件驱动的解释性脚本语言js的组成ECMAScript：JavaScript的标准DOM：Document Object Model 文档对象模型BOM：Browser Object Model 浏览器对象模型JavaScript和ECMAScript的关系？前者是后者的具体实现后者是前者的标准引入方式变量存储数据的容器声明变量：var 变量名var a; //undefined命名规则：1
2020-12-15 21:40:46
78
原创 js初识、JavaScript组成 引用、window.onload、常用的鼠标事件、变量与调试命令、操作标签01
day01 js初识课程安排：第一阶段：20天 html+css 静态布局第二阶段：25天 网页交互 15天：原生js 5天基础语法： 变量 if else for循环 函数 5天webapi：方法 5天高级 4天项目：优学 1天touchjs：移动端手势 4天：jquery 1天:答辩第三阶段：es6+nodejs 15天
2020-12-14 22:00:34
408
原创 响应式布局、 用户界面、文本多列布局、响应式布局之grid网格布局18-19
day18自适应 :随着屏幕发生宽高 大小变化响应式布局响应式：随着屏幕发生宽高 大小变化 + 盒子布局发生变化需要技术点：媒体查询 + 流式布局(phone端)用户界面鼠标样式cursor盒子变大小属性resize:none不可变/both水平垂直尺寸可变/vertical垂直可变大小/horizatail水平方向可变大小文本多列布局排列多行文字 大量文字19讲:响应式布局之grid网格布局二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)[外链图片转
2020-12-10 21:39:44
292
原创 视口布局16
day16视口布局vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh100vw : viewport width 视口宽度，浏览器可视区域的宽度100vh : viewport height 视口高度，浏览器可视区域的高度750px 100vw 1vw = 7.5px;375px 100vw 1vw = 3.75px以设计稿为准:假设还是750px设计稿 750px=100vw 1px=0.13333vw;预设字体基础值 100p
2020-12-10 21:33:09
84
原创 移动端布局、视口设置、h5媒体查询、流式布局、 rem布局、媒体查询+ rem单位、 js查询屏幕 + rem单位15
day15LESS变量类混入导入.css--->.css .less --->.less 导入@import "文件路径";嵌套父子 嵌套 .a>.b .a { .b { }}兄弟平行 .a +.b .a { }.b { }如果想加伪类 ；.a{ //&代指上一级选择器 &:hover { }}编译后效果:.a:hovr
2020-12-10 21:30:50
205
原创 弹性盒布局css3(伸缩盒布局)、 LESS语言、css的动态的扩展语言14
day14弹性盒布局css3(伸缩盒布局)传统布局的局限性清除浮动影响很难实现居中结构不灵活 不能随时添加盒子弹性盒布局你想摆哪些元素，就给它的父元素写display:flex;记得写一个私有属性+标准属性设置主轴方向：row /column设置主轴方向的排列方式设置交叉轴排列方式最好写换行属性子项宽度和高度flex:n；非常灵活 提供一套浏览器内置布局 特点：一维布局 固定的css属性[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(im
2020-12-10 21:20:50
153
原创 过渡、变形 transform、3d变形、关键帧动画13
day13动画： 过渡， 变形， 关键帧动画过渡从一个状态到另外一个状态 （两个状态的连接 最初，最终）的变化 ，并且时间的持续transition: 要过渡的属性 持续时间s/ms 运动的曲线 延时的时间s/ms;transition: width 2s linear 0s; transition: all 1s linear 2s; transition:width 2s linear 0s ,height 1s linear 0s ,background-colo
2020-12-10 20:56:42
381
原创 表单选择器、 结构伪类选择器、css3私有前缀、 新盒模型、 css3新增的背景属性、css3新增的盒子阴影12
day12css3 就是css第3个版本 增加了一些选择器，布局，动画，背景，新盒模型，私有前缀;选择器表单选择器:focus 聚焦选择器 选择的是当下被聚焦的表单元素input:focus {}:checked 勾选 选择的是当下被勾选的复选框或单选框input:checked {}:disabled 选择的是当前被禁用的元素:enabled 选择的是当前没有被禁用的元素::placeholder 选择的是文本框里提示的文字案例：修改单选框和复选框的默认样式基本
2020-12-10 20:27:48
100
原创 新增语义化布局标签、新增表单控件属性、音视频标签11
day11语义化标签解决语义化兼容性问题表单控件类型表单控件属性音视频标签css3新增选择器新增语义化布局标签header.footer,nav ,aside, article>section, figure （推荐在移动端使用）ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题**解决兼容性问题 **ie8- 不认识标记 那我们让它认识即可手动去创建这些标记document.createElem
2020-12-10 20:14:25
87
原创 BFC规则、 经典的多列布局、图片优化技巧10
day10BFC规则1. 什么是BFC规则？Block Formatting Context 块级格式化上下文块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部2. 哪些属性可以触发BFC规则？ 1. float不为none 2. position属性为absolute或fixed 3. oveflow不为visiable 4. html 根标签 3. BFC有哪些规则 1. BFC盒子内部的子标签按照垂直从上到下排 2.
2020-12-08 22:21:56
257
原创 表单控件、兼容性问题、常见问题（所有浏览器）09
day09表单结构作用：收集用户信息表单： 作用： 用来收集用户信息；也叫 表单框（表单域form）<form method=""></form> action: 传给后端的地址 method: 传给后端的方法 GET： 从后端获取数据，数据量比较小，安全性比较低，速度较快 POST： 向后端发送数据，数据量大，安全性高，速度较慢 name: 表单的标识表单控件:
2020-12-08 22:14:30
1068
原创 文件创建、文件命名规范、图片命名规范、鼠标样式属性、实现箭头、精灵图技术、文本溢出处理08
day08文件创建文件命名规范统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。原则： 1）方便理解，见名之意2）方面查找例如：首页—index产品列表—prolist产品详细页面—pro_detail新闻列表—newslist新闻详细页面—news_detail发展历史—history关于我们—aboutus联系我们—linkus，contactus信息反馈—feedback留言—leavewords图片命名规范图片的名称分为头尾两部分，用下划线隔
2020-12-08 22:02:41
268
原创 微信滑动门技术、 ps操作基础07
day07微信滑动门技术特殊背景图技术（背景图颜色单一，对称的，阴影，边框）原理：是一张宽度大小固定的图片铺到宽度不确定的盒子里，需要父子关系的两个盒子，内部盒子（子元素span）铺图片的右上角位置（background-position:100% 0%；）,外侧盒子（父元素a）铺图片左上角位置（background-position:0% 0%；） <style> * { padding: 0; margin: 0;
2020-12-08 21:31:05
101
原创 浮动属性、 清除浮动带来的影响、 伪元素、浮动对于元素类型的影响05
day05布局第二大块 盒模型 行内块行内块并排缺点：中间有间距文本内容行数 多少不一样的时候 会出现对不齐现象浮动属性作用： 专业解决并排float: left左侧浮动/right右侧浮动/none不浮动;float:none;默认值 标准状态标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距浮动特点：浮动只有水平移动 在父盒子区域内部进行左右移动float:left 靠近父盒子左侧边界 right 靠近父盒子右侧边界浮
2020-12-07 22:30:38
236
原创 边框border、 外边距塌陷、背景属性、选择器优先级、 语义化标签04
day04盒模型 组成以及用法背景属性语义化理解选择器进阶 ，优先级计算外边距margin使用： 上外边距可以使盒子向下移动 左外边距可以使盒子向右移动 右下外边距不能使盒子发生移动 只能将这个盒子与其他盒子的距离拉开 外边距可以设置负值margin:10px;margin: 0 auto ;水平居中（1.块类型 2.明确可以计算的宽度）内边距padding使用：上下左右内边距全部有用 移动内容位置加了内边距必定会增大盒模型 做内减计算 减在有效内容宽高
2020-12-07 22:25:13
105
原创 浏览器及其内核、文本相关的标记、布局标签01
day01前端开发用前端技术实现用户界面前端技术：基础三大要素 html5 css3 javascript+js衍#用户界面：pc端+移动端app（页面+交互+数据渲染）发展史web1.0阶段 蒂姆·伯纳斯·李 [1] （Tim Berners-Lee） 界面：只能读 不能写web2.0阶段 布兰登·艾奇（Brendan Eich，1961年～） JS 有了交互 能读还能写 建设者web3.0阶段（大前端） 09年 Ryan Dahl浏览器及其内核浏览器+外壳+内核五大浏览器：
2020-12-07 22:12:21
173
原创 文本相关的css属性、字体属性 类型 家族、 单位尺寸、文字大小写、文本修饰属性、元素的分类与转换、布局核心---盒模型03
day03文本相关的css属性元素的分类与转换布局核心—》盒模型在线的css手册网址:http://css.cuishifeng.cn/text-decoration-line.html文本相关的css属性字体大小 颜色 字体粗细 字体斜体正体 字体类型 行高 （行间距） 水平对齐方式 垂直对齐方式 字符间距词间距 文本格式化输出 首字母操作 缩进 文本修饰字体属性font:字体是否是斜体 字体粗细 字体大小/行高 字体类型;字体
2020-12-07 22:09:23
106
原创 超链接、列表系列、表格结构、引入CSS、三个方法的区别、CSS选择器、CSS文本属性02
day02&&&1.超链接2.列表系列3.表格结构4.引入CSS5.三个方法的区别6.CSS选择器7.CSS文本属性超链接链接 anchor 锚点<a href='跳转的地址'>文本or img or div</a>属性：herf:跳转地址target：设置打开方式target:_self本页/_blank空白页，新页base标记<head> <meta charset="UTF-8">
2020-12-07 20:31:59
126
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人