- 博客(43)
- 收藏
- 关注
RSS订阅原创 JS / 事件基础知识
事件委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。使用对象.事件=函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果同一个元素绑定了多个相同的事件，后面的会覆盖前面的，只有最后一个生效。所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，开发中大部分情况冒泡是有用的，如果不希望事件冒泡，则可以通过事件对象来。
2022-09-14 15:59:57
221
1
原创 JS / 字符串的方法
目录str.lengthstr.charAt(5)str.charCodeAt(0)String.formCharCode()str.concat()str.indexOf(“h”) str.lastIndexOf()str.slice(1，2)str.substring()str.substr()str.split(",") 常用str.toLowerCase()str.toUpperCase()var str = "hello hello"在底层字符串是以字符数组的形式保存的可以用索引的形式调用str[
2022-07-13 18:03:06
201
原创 JS / 包装类 String()Number()Boolean()
在JS中为我们提供了三个包装类，这三个包装类可以将基本数据类型的数据转换为对象String() - 可以将基本数据类型字符串转换为String对象Number() - 可以将基本数据类型的数值转换为Number对象Boolean() - 可以将基本数据类型的布尔值转换为Boolean对象var num = new Number(3) //Number类型的对象var bool1= new Boolean(true)var bool2= new Boolean
2022-07-13 17:07:41
79
原创 JS / Math
Math和其他的对象不同，不是一个构造函数属于一个工具类，不用创建对象，封装了数学运算相关的属性和方法Math.PI表示圆周率Math.abs() 返回绝对值Math.ceil(1.4) 输出2 向上取整Math.floor(1.7)输出1 向下取整Math.round(1.6)输出2 四舍五入取整Math.random() 可以用来生成一个0-1之间的随机数 [0,1) - Math.round(Math.random()*10) 输出0-10 - Math.round(Mat
2022-07-11 15:30:39
54
原创 JS / call +apply+arguments+Date对象
目录call()和apply()argumentsDate对象创建一个指定的时间对象getDate()getDay()getMonth()getFullYear()getHours()getMinutes()getSeconds()getTime()获取当前时间的时间戳这两个方法都是函数对象的方法，需要通过函数对象来调用function fun(){alert("hi")}fun.call()fun.apply()fun()都会调用该函数执行在调用call和apply方法时可以将一个对象指定为第一个参数此时
2022-07-11 11:06:10
106
原创 JS / 数组
目录数组Array创建数组对象向数组中添加元素读取数组中的元素获取数组的长度修改length向数组的最后一个位置添加元素数组的字面量使用字面量来创建数组数组的四个方法push()pop()unshift()shift()数组的遍历forEachslice()splice()concat()join()reverse()sort()数组也是一个对象，他和普通的对象功能类似，用来存储值，不同的是普通对象用字符串作为属性名，数组使用数字作为索引来操作元素。索引：从0开始的整数数组的存储性能比普通对象好，在开发中经
2022-07-11 09:43:37
371
原创 JS / toString()+垃圾回收
当我们在页面中打印一个对象时，实际上是输出的对象的toString()方法的返回值因为对象的toString方法的返回值是[object Object]toString方法在Object的原型中如果我们希望在输出对象时不输出[object Object]，可以为为对象添加一个toString方法a.toString=function(){return “Person["name"+this.name+",age="+this.age+.............]”}想要给所有实例对象添加toString方法
2022-06-30 17:04:43
108
原创 JS / 原型对象
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype、 - 每个函数的原型对象prototype是不相等的 - 如果函数作为普通函数调用prototype没有任何作用 - 当函数作为构造函数调用prototype：通过构造函数创建的对象有一个隐含属性指向构造函数的prototype原型对象。prototype无法轻易访问访问方法：function MyClass(){}var mc=new MyClass()console.log(mc.__pr
2022-06-30 14:30:37
55
原创 JS / 工厂方法创建对象+构造函数
通过该方法可以大批量地创建对象使用工厂方法创建的对象，使用的构造函数都是Object。所以创建的对象都是object这个类型，导致我们无法区分出多种不同类型的对象创建一个构造函数专门用来创建person对象，构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写 - 构造函数和普通函数的区别就是调用方式的不同 - 普通函数是直接调用，而构造函数需要使用new关键字来调用执行流程: - 立即创建一个新的对象 - 将新建
2022-06-28 10:03:16
134
原创 JS / this
解析器在调用函数时每次都会向函数内部传递一个隐含的参数即this，this指向的时对象，这个对象称为函数执行的上下文对象根据函数的调用方式不同，this指向不同的对象和创建方式无关 - 以函数形式调用时，this永远是window - 以方法调用时，this就是调用方法的对象，谁调用 this就是谁function fun(){ console.log(this)}this是window对象var obj={ name:"a", sayN
2022-06-27 17:05:31
59
原创 JS / 作用域
函数作用域指一个变量的作用的范围分为：全局作用域和函数（局部）作用域- 直接编写在script标签中的js代码都在全局作用域- 全局作用域在页面打开时创建，在页面关闭时销毁- 在全局作用域中有一个全局对象window，我们可以直接使用，代表的是浏览器的窗口，由浏览器创建- 在全局作用域中，创建的变量都会作为window对象的属性保存输出：10- 创建的函数都会作为window对象的方法保存使用var关键字声明变量，会在所有代码执行之前......
2022-06-27 16:09:13
237
原创 JS / 函数
目录函数创建函数对象调用函数对象函数的参数函数的返回值立即执行函数方法函数也是一个对象，函数中可以封装一些功能，在需要时可以调用来执行这些函数var fun = new Function();可以将要封装的代码以字符串的形式传递给构造函数 实际开发中很少使用构造函数创建函数对象var fun = new Function("console.log('hello world');");封装到函数中的代码不会立即执行，函数中的代码会在函数调用时按顺序执行一般使用函数声明来创建一个函数function 函数名([
2022-06-27 14:26:32
58
原创 JS / 对象
目录对象的分类内建对象宿主对象自定义对象创建对象属性名和属性值属性名属性值in 运算符基本数据类型和引用数据类型对象字面量由ES标准中定义的对象，在任何ES的实现中都可以使用，如Math String Number Boolean Function Object由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象如 BOM DOM console document由开发人员自己创建的对象var obj = new Object();var obj={};使用new关键字调用的函数，是构造函数cons
2022-06-27 09:14:29
141
原创 解决 / 大屏显示日期时间星期天气空气质量
<template> <div> <div class="nowTime">{{nowTime}}</div> <div class="nowWeather">{{nowWeather}}</div> <div class="NowAir">{{nowAir}}</div> </div></template><script>export def.
2022-05-16 14:44:45
376
原创 解决 / el-image src属性使用相对路径时图片无法加载
使用绝对路径时 src引用可以正常显示图片 <el-image style=" margin-top:10px; float:left; height: 60px"; src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="contain"
2022-04-07 14:26:40
1677
原创 VUE / 插值语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初.
2022-03-29 17:22:54
76
原创 JS / 运算符
目录逻辑运算符赋值运算符关系运算符Unicode相等运算符条件运算符，运算符运算符优先级逻辑运算符! 非两次取反不会变如果对布尔值进行运算，则会将其转换为布尔值，然后再取反如果对非布尔值进行运算，则将其转换为布尔值，然后再取反利用该特点可以将其他的数据类型两次取反转换为布尔值&& 与 全真才真 第一个值为false不会看第二个|| 或 一真即真与或对非布尔值进行运算时会将其先转换为布尔值然后再运算与运
2022-03-23 09:17:00
280
原创 JS / 标识符+数据类型+类型转换+算术运算符+一元运算符+自增自减
目录标识符数据类型字符串 String数字 Number布尔值 Boolean空值 Null未定义 Undefined强制类型转换将其他数据类型转换为String将其他数据类型转换为Number将其他数据类型转换为Boolean算术运算符一元运算符自增和自减标识符所有可以由我们自主命名的 如变量名、函数名、属性名遵守如下规则：标识符中可以含有字母、数字、下划线、$ 标识符不能以数字开头 标识符不能是ES中的关键字或保
2022-03-16 17:19:04
640
原创 JS / 基本语法+字面量与变量
目录学习内容笔记JS代码编写位置基本语法注释代码编写字面量和变量学习内容Javascript：ECMAScript+DOM+BOM特点：解释型语言（不用编译，写完直接运行） 类似于C和JAVA的语法结构 动态语言 基于原型的面向对象笔记JS代码需要编写到script标签中三条输出语句：document.write（）的作用是在body中写一个内容 console.log（）向控制台输出一个内容 alert（）在浏览器窗口弹出一个警告
2022-03-11 17:20:37
1305
原创 HTML+CSS / 综合项目笔记
文件夹：css fonts images upload（产品图） js 页面初始化 base.css 模块化，公共css样式common.css 如版心、清除浮动、页面文字颜色等favicon.ico1.制作图标，切成png图片 用比特虫转换成ico图标2.放到网站根目录3.引入 在head中引入 <link rel="shortcut icon" href="favicon.ico">网站TDK三大标签SEO优化seo优化search engine optimizat
2022-03-08 13:52:25
214
原创 DAY16 / CSS / CSS3新特性-盒子模型+图片模糊+calc函数+动画过渡
目录盒子模型滤镜filter-图片模糊处理calc函数-计算过渡盒子模型box-sizing：content-box / border-box默认为content-box 盒子大小为width+padding+borderborder-box 盒子大小为width（padding+border不能超过width）滤镜filter-图片模糊处理滤镜filter 将模糊或颜色偏移等效果应用于元素filter：blur（5px）； 数值越大越模糊
2022-02-25 10:42:35
197
原创 CSS / CSS3新特性-新增的选择器
目录CSS3的现状新增的选择器属性选择器结构伪类选择器伪元素选择器CSS3的现状新增的css3特性有兼容性问题，ie9+才支持移动端的支持优于PC端新增的选择器属性选择器可以根据元素特定的属性来选择元素用[]来选择input[value] {} ，选中包含value属性的input元素input[value="aaa"] {} ，选中包含value属性且value值为aaa的input元素input[value^="bbb"] {} ，
2022-02-24 17:18:48
439
原创 CSS / H5新增特性
目录新增的语义化标签新增的多媒体标签音频视频新增input表单新增的表单属性新特性都有兼容性问题 基本上是ie9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用新增的语义化标签以前布局基本用div来做，对于搜索引擎没有语义新增：<header> 头部标签<nav>导航标签<article>内容标签<section>定义文档某个区域<aside>侧边栏标签<fo
2022-02-18 17:14:43
98
原创 CSS / 三角+界面样式+vertical-align+溢出文字省略号显示+布局技巧+CSS初始化
目录CSS三角界面样式鼠标 cursor轮廓线 outline防止拖拽文本域 resize行内及行内块元素垂直对齐vertical-align图片底侧空白缝隙溢出文字省略号显示单行溢出文字省略号显示布局技巧margin负值的巧妙运用文字围绕浮动元素行内块的巧妙运用CSS三角强化用三角做价格标签CSS初始化CSS三角给宽高为0的盒子设置边框，并将不需要的三边设置成透明色<!DOCTYPE html>
2022-02-17 17:31:26
267
原创 CSS / 精灵图+字体图标
目录精灵图字体图标字体图标的使用字体图标的追加字体图标加载的原理精灵图当网页中的图像过多，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，大大降低页面的加载速度为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术也称 CSS Sprites CSS 雪碧核心原理：将网页中的一些小背景图像集合在大图中，这样服务器只需要请求一次就可以核心：精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中 大图片也
2022-02-16 17:31:12
311
原创 CSS / 定位拓展+轮播图案例+元素的显示隐藏
目录定位的拓展定位叠放次序绝对定位的盒子居中算法定位特殊特性绝对定位固定定位会完全压住盒子元素的显示隐藏display（重要）visibilityoverflow 溢出定位的拓展定位叠放次序z-index 来控制盒子的前后次序 （z轴）数值可以是正整数负整数或0 默认是auto 数值越大越靠上 如果属性值相同，则按照书写的顺序后来者居上 数字后面不能加单位 只有定位的盒子才有z-index绝对定位的盒子居中算法加了绝对定位的盒子
2022-02-15 17:19:53
607
原创 CSS / 定位
定位定位的作用可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子定位组成将盒子定在某一个位置，所以定位也就是在摆盒子，按照定位的方式移动盒子定位=定位模式+边偏移定位模式用于指定元素在文档中的定位方式，边偏移决定该元素的最终位置定位模式：position属性static 静态relative 相对absolute 绝对fixed 固定sticky 粘性边偏移：top bottom left right 四个属性
2022-02-14 17:25:50
262
原创 CSS / 网页案例笔记
导航栏实际开发中，不会直接用a链接，而是用li，包含链接 （li+a）的做法，语义更清晰。直接用a，有堆砌关键字嫌疑，导致降权影响网站排名。 input输入框点击时有黑色边框，在该类样式里添加outline:none;就可以去掉。 浮动的盒子不会有外边距塌陷问题。......
2022-02-11 17:32:20
42
原创 CSS / 清除浮动+切图+属性书写顺序+页面布局思路
目录清除浮动为什么要清除浮动本质清除浮动的方法切图清除浮动浮动后元素不占空间，如果父元素没有高度，高度就会变成0为什么要清除浮动因为父盒子很多情况下不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以他会对后面的元素排版产生影响本质清除浮动的本质是清除浮动元素造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了
2022-02-09 11:13:23
316
原创 CSS / 圆角边框+阴影+浮动
目录圆角边框盒子阴影文字阴影传统网页布局的三种方式浮动浮动特性浮动元素经常和标准流父级搭配使用常见的网页布局案例浮动布局注意点圆角边框语法：border-radius: 半径;radius是圆的半径参数值可以是精确数值或百分比 50%为宽度和高度的一半可以设置不同的圆角border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下 顺时针两个值 是对角线 10px 20px 左上右下是10 右上左下是20
2022-02-08 17:18:21
1467
原创 CSS / 产品模块+快报模块综合案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2022-02-08 10:51:25
492
原创 CSS / 三大特性+盒子模型+PS基础
目录CSS的三大特性层叠性继承性优先级盒子模型边框 border内边距 padding外边距 marginPS测量CSS的三大特性层叠性后来居上，相同选择器设置相同样式时，一个样式会覆盖（层叠）另一个样式就近原则，样式冲突，哪个样式离结构近，就选择哪个样式。层叠的意思就相当于覆盖。样式不冲突，不会层叠。继承性子标签会继承父标签的某些样式，如文本颜色和字号可以简化代码，降低CSS样式的复杂性color、text- 、font-
2022-02-07 17:30:50
229
原创 CSS / 背景
目录背景样式背景颜色背景图片背景平铺背景位置(重要)背景固定背景复合写法背景透明度背景样式背景颜色backgroung-color: 颜色或transparenttransparent：背景透明一般情况下默认为透明色背景图片background-image : none或 url(url);比插入图片更容易控制位置实际开发中常见于logo或一些装饰性的小图片或超大的背景图片，有利于控制位置背景平铺backgroung-r
2022-02-03 11:01:22
324
原创 CSS / Emmet+复合选择器+显示模式+案例
Emmet输入标签名直接按tab键即可生成标签 生成多个标签 用*再按tab，如 div*10 生成10个div ， 父子级关系 用> 如ul>li 兄弟关系 用+ 如div+p 带类名或id .类名 或 #id名 默认是div标签 输入点前输入标签名可以指定标签类型如p.one 类名有顺序 .demo$*5 输出类名为demo1到5的五个div......
2022-01-30 17:04:15
578
原创 CSS / 选择器+字体+文本+引入方式+调试
目录选择器基础选择器字体字体系列字体大小字体粗细文字样式字体复合属性文本文本颜色对齐文本装饰文本文本缩进行间距CSS引入方式行内样式表 行内式内部样式表 嵌入式外部样式表 链接式Chrome调试工具选择器基础选择器：标签选择器、类选择器、id选择器、通配符选择器 复合选择器基础选择器标签选择器：标签名作为选择器，某一类标签指定样式，不能差异化设置 类选择器：用 .类名 来定义类，在标签中需要class...
2022-01-29 17:10:41
588
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人