如初的博客🥝

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

Sass简介大家都知道，js 中可以自定义发量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义发量、不可以引用等等。面对返些问题，我们现在来引入 Sass，简单的说，他是 css 的升级版，可以自定义发量，可以有 if 语句，还可以嵌套等等，很神奇吧！那下面我们就来介绍返个神奇的 Sass。 Sass比Less的功能更强大，也更复杂。 Sass 的定义 Sass：英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。官网是：https://sass-lang.com/ Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。 Sass专注的是怎样创建优雅的样式表，而不是内容。 Sass、Compass与CSS 关系： Less/Sass是语法、Compass是框架、CSS是目标。 Sass&Compass的好处：写出更优秀的CSS。解决CSS编写过程中的痛点问题，比如精灵图 ...

12-对象的创建&构造函数

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

在看本文之前，可以先复习前面的一篇文章：《03-JavaScript基础/07-对象简介和对象的基本操作.md》创建自定义对象的几种方法方式一：对象字面量对象的字面量就是一个{}。里面的属性和方法均是键值对。例如： 12345678910var o = { name: "生命壹号", age: 26, isBoy: true, sayHi: function() { console.log(this.name); } };console.log(o); 控制台输出：方式二：工厂模式通过该方法可以大批量的创建对象。 123456789101112131415161718192021/* * 使用工厂方法创建对象 * 通过该方法可以大批量的创建对象 */function createPerson(name, age, gender) { //创 ...

13-原型对象

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

在看本文之前，我们可以先复习上一篇文章：《03-JavaScript基础/12-对象的创建&构造函数.md》原型对象原型的引入 1234567891011121314151617function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.name); }}//创建一个Person的实例var per = new Person("孙悟空", 18, "男");var per2 = new Person("猪八戒", 28, "男");per.sayName();per2.sayName();console.log(per.sayNa ...

14-数组简介

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

之前学习的数据类型，只能存储一个值（字符串为一个值）。如果我们想存储多个值，就可以使用数组。数组简介数组（Array）是属于内置对象，我们可以在MDN网站上查询各种方法。数组和普通对象的功能类似，也是用来存储一些值的。不同的是：普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引来操作元素。索引：从0开始的整数就是索引。数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据，使用频率非常高。数组的基本操作数组的元素可以是任意的数据类型，也可以是对象，也可以是函数，也可以是数组。数组的元素中，如果存放的是数组，我们就称这种数组为二维数组。创建数组对象方式一：字面量定义。举例： 1var arr = [1,2,3]; 方式二：对象定义（数组的构造函数）。语法： 1var arr = new Array(参数); 如果参数为空，则表示创建一个空数组；参数位置是一个数值时，表示数组长度；参数位置是多个数值时，表示数组中的元素。上面的两种方式，我来举个例子： 1234567891011121314// 方式一var arr1 = [11, ...

15-数组的四个基本方法&数组的遍历

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

前言数组的四个基本方法如下：方法描述备注 push() 向数组的最后面插入一个或多个元素，返回结果为该数组新的长度会改变原数组 pop() 删除数组中的最后一个元素，返回结果为被删除的元素会改变原数组 unshift() 在数组最前面插入一个或多个元素，返回结果为该数组新的长度会改变原数组 shift() 删除数组中的第一个元素，返回结果为被删除的元素会改变原数组遍历数组的方法如下：数组的四个基本方法（数组元素的添加和删除） push() push()：向数组的最后面插入一个或多个元素，返回结果为该数组新的长度。语法： 1数组的新长度 = 数组.push(元素); 代码举例： 123456789var arr = ["王一", "王二", "王三"];var result1 = arr.push("王四"); // 末尾插入一个元素var result2 = arr.push("王五", "王六"); // 末尾插 ...

17-数组的其他方法

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

前言数组的其他方法如下：方法描述备注 indexOf(value) 从前往后索引，获取 value 在数组中的第一个下标 lastIndexOf(value) 从后往前索引，获取 value 在数组中的最后一个下标 find(function()) 找出第一个满足「指定条件返回true」的元素。 findIndex(function()) 找出第一个满足「指定条件返回true」的元素的index Array.from(arrayLike) 将伪数组转化为真数组 Array.of(value1, value2, value3) 将一系列值转换成数组。数组的其他方法 indexOf() 和 lastIndexOf()：获取数据的索引语法： 123索引值 = 数组.indexOf(value);索引值 = 数组.lastIndexOf(value); 解释： indexOf(value)：从前往后索引，获取 value 在数组中的第一个下标。 lastIndexOf(value) ：从后往前索引，获取 value 在数组 ...

18-内置对象：Date

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

内置对象简介内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。 JavaScript的内置对象：内置对象对象说明 Arguments 函数参数集合 Array 数组 Boolean 布尔对象 Date 日期时间 Error 异常对象 Function 函数构造器 Math 数学对象 Number 数值对象 Object 基础对象 RegExp 正则表达式对象 String 字符串对象前面的几篇文章中，我们专门讲到了数组 Array。今天这篇文章，我们来讲一下其他的内置对象。内置对象：Date Date对象的创建写法一：表示的是当前代码执行的时间 12var date1 = new Date();console.log(date1); 写法二：在参数中传递一个表示时间的字符串（兼容性最强） 12var date2 = new Date("2017/09/06 09:00:00");console.log(date2); 写法三：（不常用） 12va ...

16-数组的常见方法

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

前言数组的常见方法如下：方法描述备注 slice() 从数组中提取指定的一个或多个元素，返回结果为新的数组不会改变原数组 splice() 从数组中删除指定的一个或多个元素，返回结果为新的数组会改变原数组 concat() 连接两个或多个数组，返回结果为新的数组不会改变原数组 join() 将数组转换为字符串，返回结果为转换后的字符串不会改变原数组 reverse() 反转数组，返回结果为反转后的数组会改变原数组 sort() 对数组的元素,默认按照Unicode编码，从小到大进行排序会改变原数组数组的常见方法 slice() slice()：从数组中提取指定的一个或者多个元素，返回结果为新的数组（不会改变原来的数组）。备注：该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。语法： 1新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意：包含开始索引，不包含结束索引举例： 12345678910111213var arr = ["a", "b& ...

20-内置对象(其他)

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

内置对象String 简单数据类型、复杂数据类型 1、简单数据类型：注意，之前学习的简单数据类型string是无法绑定属性和方法的。比如说： 12345var str = "smyhvae";str.aaa = 12;console.log(typeof str); //打印结果为：stringconsole.log(str.aaa); //打印结果为：undefined 上方代码中，当我们尝试打印str.aaa的时候，会发现打印结果为：undefined。当然，我们可以打印str.length、srt.indexOf(“m”)等等。因为这两个方法的底层做了数据类型转换。 2、复杂数据类型：复杂数据类型String是可以绑定属性和方法的。如下： 12345var strObj = new String("smyhvae");strObj.aaa = 123;console.log(strObj);console.log(typeof strObj); //打印结果：Objectconsole.log(strObj.aaa); 打 ...

22-事件对象Event和冒泡

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

绑定事件的两种方式/DOM事件的级别我们在上一篇文章 DOM操作详解中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。 DOM0的写法：onclick 123element.onclick = function () {} 举例： 1234567891011121314151617<body><button>点我</button><script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () { console.log("事件1"); } btn.onclick = function () { console.log("事件2"); }</script></ ...

23-事件委托

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

事件委托

21-DOM操作

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

前言 JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。事件 JS是以事件驱动为核心的一门语言。事件的三要素事件的三要素：事件源、事件、事件驱动程序。比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。于是我们可以总结出：谁引发的后续事件，谁就是事件源。总结如下：事件源：引发后续事件的html标签。事件：js已经定义好了（见下图）。事件驱动程序：对样式和html的操作。也就是DOM。代码书写步骤如下：（重要）（1）获取事件源：document.getEleme ...