- 博客(43)
- 收藏
- 关注
RSS订阅原创 学习前端的第四十三天
正则概念和意义概念：正则表达式，正则对象，正确的规则，描述字符串的规则正则一般都是配合字符串使用可以对字符串进行：验证，替换，查询意义：快速的验证，查询，替换字符除非极端情况，正则既可以节省操作，又可以节省性能如何创建正则字面量var reg1 = /正则的内容/;构造函数var reg2 = new RegExp();字面量正则中不允许出现变量，构造函数可以，但是使用都是一致的如何使用验证，替换，查询正则的方法验证：reg.tes
2020-05-15 22:16:20
101
原创 学习前端的第四十二天
事件-下默认事件没有主动写，但是系统默认有可选，可不选如果不要，阻止通过事件对象身上的e.returnValue = falsee.preventDefault()事件委托将多个子元素的相同事件利用事件冒泡委托给共同的页面现存的父元素，通过事件目标找到真正触发事件的子元素，完成事件处理的过程，叫事件委托事件委托的好处：节省内存给页面上暂时不存在的元素绑定事件（给动态的html绑定事件）事件源和事件目标事件源：绑定事件的元素必然可以通过t
2020-05-14 23:09:09
100
原创 学习前端的第四十一天
事件一、事件的介绍1. 事件的组成事件源：obox，绑定事件的元素。注意：事件目标，不是任何时候都等同于事件源。一般情况下是一个。绑定事件的方式：on，赋值式绑定事件类型：click，行为方式赋值：= ，赋值式绑定事件的标志之一事件处理函数：function(){console.log(“点了一下”)}，触发指定行为时，要做的事情隐藏的部分：事件对象2. 事件对象的介绍事件发生时产生的对象，用来记录事件发生时产生的信息默认隐藏，需要主动获取事件对象的获取兼容obox.o
2020-05-13 23:04:32
112
原创 学习前端的第四十天
DOM-下一、操作属性操作样式操作设置什么时候会通过js设置样式？默认样式都在css中写了必然是和用户产生和交互的时候什么时候会和用户产生交互？在项目写完了，上线之后，即css也写完了为了保证js（用户控制）的样式能够生效，所以js设置的样式，权重高一些至少，是内联样式综上所述，在js中设置的样式，都是行内样式！方式可见的内置属性（html的属性）：style注意// 1.不允许出现中划线，改成小驼峰式obox.style.fontSize = "1
2020-05-12 23:36:52
98
原创 学习前端的第三十九天
一、DOMjs的三大组成部分的关系ECMAScript规定，如何在BOM中操作DOM1. 介绍DOM文档对象模型，对象：documentDOM（W3C机构）不属于BOM（浏览器厂商）window对象身上有提供document对象DOM，主要控制页面（html文件），所有的页面操作都需要通过DOMDOM的结构：html的结构：树形结构，包含结构，家族结构（父子级，兄弟级）html根元素：head，bodyDOM树形结构，的每个组成部分，都叫节点（元素，属性，注释，文本）所有节
2020-05-11 21:57:01
88
1
原创 学习前端的第三十八天
一、BOM复习js的三大组成部分BOM（浏览器），DOM（页面），ECMAScript（语法）关系ECMAScript（语法）规定，在 BOM（浏览器）中，如何操作 DOM（页面），做什么交互1.什么是BOM概念BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象）作用：提供了ES和页面的运行环境浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主浏览器的规范没有涉及到的范围，使用ES的规范兼容:不是
2020-05-09 21:18:15
86
原创 学习前端的第三十七天
一、对象js的对象的分类内置对象：ES提供可以直接被使用的对象，已经是一个具体的实例了，不需要创建Math对象，数学对象本地对象：其实只是ES提供的一种类方法，需要被实例化之后，才能使用需要被new执行之后，才能使用String，Object，Array，Number，Boolean，RegExp，Date宿主对象：由浏览器或W3C提供的运行ES的环境，所带的对象BOM：window，DOM：document所有的自定义对象注：实例化：转化成实际的案例
2020-05-08 21:50:05
89
原创 学习前端的第三十六天
一、ES5的新增ES5即ECMAScript5ES的版本更新，向下兼容，老版本并没有全部废弃，新版本只是在老版本的基础上新增1. 严格模式严格模式：更严格的开发模式js的代码规范非常不严格，所以严格模式的意义是：消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来...
2020-05-07 21:36:04
85
原创 学习前端的第三十五天
一、对象的补充-栈堆内存用来运行数据的控件，内部有区分了的不同的存储方式栈：一般用来存储变量名和地址，空间小，稳定，不可修改堆：一般用来存储数据，空间大，可被修改关系：一一对应，多对一，不能一对多存取规则：栈：先进后出堆：先进先出数据类型的分类基本类型（值传递）数据就在栈中不存在深浅拷贝，默认就是深拷贝引用类型（引用传递的数据）栈中只保存了...
2020-05-06 22:34:32
71
原创 学习前端的第三十四天
一、对象的操作1.点语法.用于确定的属性名2.中括号语法[]用于不确定的属性名，当属性名是变量时二、对象的遍历方式for-infor(var i in obj){ console.log(obj[i]);}三、字符串只要被引号包括起来就是字符串，所有数据都可以转成字符串，只要被引号包裹即可引号：单引号’，双引号",反引号`1.如果创建字符字...
2020-04-30 21:28:24
139
原创 学习前端的第三十三天
一、数组数组的操作索引（编号，序号，从 0 开始）var arr = ["hello", 3, 4, 5, "world"];数组是一个有序数据的集合有序的序号，索引从 0 开始到哪结束根据长度，得出，到 length-1数组的第一个：数组[0]数组的最后一个：数组[数组.length-1]增增加数组的长度给不存在的位置赋值arr[arr.leng...
2020-04-29 22:53:50
85
原创 学习前端的第三十二天
一、JS的编译和执行js是一门解释性语言预先编译，再执行先通读全文，在解释含义找到var和function，做出对应提升编译时提升执行时按照逻辑，结构正常执行变量和函数的提升var的提升提前声明，=号的位置赋值console.log(a); // undefinedvar a = 10;console.log(a); // ...
2020-04-28 21:30:07
84
原创 学习前端的第三十一天
一、函数6.函数的返回值返回值概念函数自身的处理数据或执行结果，需要被二次使用或其他程序调用时，需要将数据返回出来如何拿到返回值关键字：return 要返回的数据return的功能可以让函数返回指定的值可以立即结束当前函数一个函数中可以写无数个，但是只能执行一次return，一次只能返回一个数据，不允许返回多个数据返回到哪返回到函数的执行语句函...
2020-04-27 22:49:05
85
原创 学习前端的第三十天
函数1.函数的概念函数：由用户或自身控制，可以实现某个功能的 代码段（很多代码）函数的特点：忽略细节：在使用过程中，只需要关注其实现的功能，而不需要关注其内部原理重复使用：多次使用选择使用：按需使用2.创建函数函数从哪来内置（系统提供）例：parseInt()parseFloat()alert()自定义（自己写）声明式创建函数需要配合...
2020-04-26 21:12:10
128
原创 学习前端的第二十九天
一、补充循环语句 - forfor语法for(var i=0;i<=10;i++){ console.log(i);}特点三要素，更集中，无需考虑计数器改变位置影响程序结果顺序不能变（计数器的初始值; 条件; 计数器的改变）执行顺序1：初始化计数器2：条件，4：循环体，3：改变，2，4，3，…二、循环中的控制关键字break立即...
2020-04-25 12:38:20
86
原创 学习前端的第二十八天
一、小数小数经常出现特别长的原因计算机最终执行或识别的符号只有0和1，二进制计算机中有一套完善的转换机制，所有内容，不管是文字，字符，任何数据，图片，声音，视频，最终都会被解析成二进制计算机对于小数的计算，会产生误差解决方法主动保留n为小数，得到数据类型是字符num = num.toFixed(n);转成数值num = Number(num);二...
2020-04-23 21:54:24
116
原创 学习前端的第二十七天
一、undefined，null，NaNNaN：非法的数值运算得到的结果特殊之处：是一个数值型的数据，但不是数字NaN和任何数据都不相等，NaN也不等于NaN检测方法：isNaN(要检测的数据)true：检测结果为 NaN 或能转成 NaNfalse：检测结果不是 NaN 或不能转成 NaNundefined：未赋值，类型是undefined；null：空，类...
2020-04-22 22:12:45
80
原创 学习前端的第二十六天
一、数据类型的转换原因给的数据不是需要的类型，此时需要转成当前程序所需的数据类型，再进行运算方法强制转换（显式转换，主动转换）字符转数值parseInt(要转换的数据或变量)从左向右依次检测，遇到第一个非数字的字符，停止转换忽略小数点后所有的内容，原理是将小数点识别为了非数字的字符如果检测的第一位就是非数字，NaNNaN：是数值型数据，但是不是数字，意思...
2020-04-21 22:38:18
79
原创 学习前端的第二十五天
一、js的书写位置1.行内式属性形式：行内触发。类似css样式表中的内联。例：<input type="button" onclick="alert('hello world')" value="hello world">这种书写方法并不建议使用，因为结构和行为没有分离，不便优化项目，不便管理。2.内嵌式script双标签，包裹js代码。类似css样式表中的内部样式表例：...
2020-04-20 20:15:18
89
原创 学习前端的第二十四天
grid网格布局一、grid布局 针对的是子元素布局。1.形成一个网格结构(父元素添加)：display:grid;2.划分行和列grid-template-columns:grid-template-rows:如果是3个值 代表3行或3列 能接受具体的px 也能是百分比划分行和列的时候的关键字 和 方法:a: repeat(重复的次数,重复的值)b: auto-f...
2020-04-16 21:52:08
75
原创 学习前端的第二十三天
媒体查询一、媒体查询1.媒体查询：由设备类型、监测设备特性表达式构成。2.语法：@media 设备类型[all\screen] and (条件表达式){css样式}注：and两侧必须有空格not放在设备类型的前面（反向选择【排除某个范围】）3.媒体查询：做样式微小调整例如：浮动显示隐藏文本大小宽高移动端布局一、meta标签的设置：视口1：1比例、禁止用户缩放二...
2020-04-15 21:31:30
66
原创 学习前端的第二十二天
CSS3弹性盒一、怪异盒模型box-sizing: content-box; 常规盒模型box-sizing: border-box; 怪异盒模型怪异盒模型特点：padding和border都会显示在元素的内部二、弹性盒1.弹性盒子介绍弹性盒子：布局方案。作用：控制离它最近的一层子元素,是一种布局方式。特点：a：弹性盒子里面的离它最近的一层子元素都可以添加大小。b: 如果...
2020-04-14 21:44:22
94
原创 学习前端的第二十一天
css属性一、文本阴影：text-shadow: x轴位置 Y轴位置 阴影大小 阴影颜色注：如果想添加多个阴影 每一组阴影以逗号分隔。二、盒子阴影：box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)添加多阴影：以逗号分隔的形式添加多阴影三、文本换行英文或者数字默认显示：如果没有换行的情况下：尝试把下一个长单词放在下一行显示。...
2020-04-13 21:13:31
54
原创 学习前端的第二十天
CSS3一、css属性选择器css属性选择器: 通过html属性选择对应的标签1. 选择符[属性名]{ } 当一个元素有当前html属性值名称则匹配成功.2. 选择符[属性名=“属性值”] 属性和属性名都匹配成功才做选中3. 选择符[属性~=“属性值”] 当前属性的属性值为一个词列表(多个单词以空格隔开) , 只要有当前指定的词就能匹配.4. 选择符[属性^=“字符”...
2020-04-10 21:23:59
113
原创 学习前端的第十九天
HTML5一、语义化结构标签section 更偏于划分区域。（网页的外围结构…更类似与div）article 更偏向于内容的展示aside 侧边栏（在一旁的）header 网页头部或者是内容块头部footer 网页的顶部或者内容快的底部nav 导航区域。figure 代表一个独立的区域figcaption figure区域的标题ma...
2020-04-09 21:32:16
63
原创 学习前端的第十八天
3D一、触发3D空间transform-style:preserve-3d二、功能函数1.位移简写模式：translate3d(x,y,z)分写：translateX()translateY()translateZ()2.旋转分写多了个rorateZ（）简写：rotate3d(x,y,z,度数)注：x y z 一个矢量值 0 不旋转 1 旋转eg:rotate...
2020-04-08 21:31:39
81
原创 学习前端的第十七天
2D一、简介2D：平面空间元素的变形属性:transform:; 属性值：位移translate（x,y）；缩放scale（x,y）;旋转：rorate（度数）；倾斜：skew（度数）改变变形原点：transform-origin:x y;属性值：left top10px 20px10% 20%center二、2D的位移transform:translate(x,y);...
2020-04-07 22:08:01
72
原创 学习前端的第十六天
CSS3一、浏览器前缀很多css3属性 最初的预览版没有形成最终的正式版，但是浏览器为了对这些新属性形成支持，主流浏览器提供属于自己的语法规则 “浏览器前缀”-webkit- 谷歌、苹果 浏览器前缀-moz- 火狐浏览器前缀-ms- IE浏览器前缀-o- 欧鹏浏览器注：添加浏览器前缀 -> 兼容模式不添加浏览器前...
2020-04-03 20:41:40
96
原创 学习前端的第14天
表格补充一、表格的作用：显示数据。二、表格标签补充:1.表格的数据行分组 表头 表体 表尾注：一个表格有一个表头和表尾 ，但是可以包含多个表体2.列标题标签默认的样式：左右居中 文本加粗3.表格标题标题的位置：css属性： caption-side:left/right/top/bottom注：left/right 有兼容问题：火狐能...
2020-04-01 21:26:54
107
原创 学习前端的第十三天
高度自适应一、高度自适应1.高度不去设置，或者高度设置auto 内容撑开父元素的高度。2.内容撑开父元素的高度 最小高度的设置 min-height3.浮动元素添加高度自适应 添加浮动元素的父元素没有高度，会出现高度塌陷二、高度塌陷1.形成原因当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷注：浮动的子元素不会撑开父元素的 height 或者是 ...
2020-03-31 21:12:56
72
原创 学习前端的第十二天
定位一、固定定位1.position:fixed;a.参照物：浏览器窗口。b.不占据空间，脱离布局流。2.让元素在浏览器中左右上下居中a. position:fixed;left:50%;top:50%;margin-left:-元素宽度一半;margin-top:-元素高度的一半;b. position:fixed;left:0;right:0;top:0;bottom:...
2020-03-30 20:39:32
77
原创 学习前端的第十一天
定位一、定位流程1.给元素添加position属性；2.根据属性值确定参照物；3.固定坐标(left/right/top/bottom)二、position的属性值1.position:static;(静态定位，是position的默认值，一般不用)2.position:absolute;(绝对定位);a.参照物：有定位的父元素，如果没有父元素，或者父元素没有定位，则整个文档为参照...
2020-03-28 16:12:39
70
原创 学习前端的第十天
一、元素类型的转换大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)内联元素里面特殊的一个：行内块元素（内联块元素）特点：1、可以设置宽高2、在一行内逐个显示3、当前元素的display的值为inlin-block 能支持...
2020-03-27 21:22:54
67
原创 学习前端的第九天
一、元素类型分类块状元素，内联元素，可变元素二、元素特点1、块状元素a.在页面区域内以矩形区域显示；b.自下而上排列，独占一行；c.可以直接添加宽高;d.一般情况下，作为其他元素的或内容的容器.2、内联元素a.在页面内最小单位也是矩形显示;b.在一行内逐个排列，不换行；c.不可以直接添加宽高，大小是由内容撑开的；d.也遵循盒模型的规则，但是个别属性会出现问题；e.在排列时...
2020-03-26 20:09:06
87
原创 学习前端的第八天
一、控制单行文本，溢出 省略号显示1:空白空间的处理white-space:;prepre-wrappre-lineinherit 继承！nowrap 不让文本换行2:溢出属性（控制内容溢出时候的显示方式）：overflow属性：auto 当内容超出的时候有滚动条，没有超出的时候没有滚动条scroll 添加滚动条hidden 溢出隐藏！inhe...
2020-03-25 20:29:54
75
原创 学习前端的第七天
盒模型一、padding1、padding是长在内容和盒子之间的，在盒子内部。2、padding是为了调整 子元素 在 父元素里面位置关系。3、padding的特点：padding值会把盒子撑大。4、如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。5、给单一方向设置padding值：padding-left/right/top/bottom:;6、padding ...
2020-03-24 20:58:35
66
原创 学习前端的第六天
一、浮动补充1.添加浮动的元素不占据空间。2.只要子元素有浮动，父元素必须添加高度。二、页面布局补充1.设计图版式宽度：1920px，1680px…网页的版心一般为960px-1200px2.结构规划：id名称：网页外围结构pc端：版心宽度不能使用百分比。3.让版心左右居中：margin：0 auto；三、CSS的列表属性1.列表符号（了解）list-style-type...
2020-03-23 21:03:13
75
原创 学习前端的第五天
一、选择符的权重选择符的权重：id>class>标签。如果用数字代表权重：内联样式表 1000;id 100;class 10;标签 1;伪类选择符 10;通配符 0;其中,包含选择符的权重为权重之和，例#box div{} 权重为100+1=101;.warp .con p{} 权重为10+10+1=21群组选择符的权重是不会变...
2020-03-20 20:03:43
79
原创 学习前端的第四天
一、样式表的权重样式表的权重关系：内联样式表的权重最大，内部样式表和外部样式表的权重和书写的前后顺序有关，放在后面的会把前面的样式覆盖掉，覆盖的只是相同属性的样式。但是有一个具有最高权重，即!important,语法例background:red!important;二、CSS选择符1.CSS的语法为选择符｛属性:属性值;｝2.选择符选择符就是给标签起名字,共有七类选择符, 类型选择...
2020-03-19 20:07:32
70
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人