- 博客(50)
- 收藏
- 关注
RSS订阅原创 es6 promise对象
1.Promise 的含义Promise 是异步编程的一种解决方案，它相当于一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 从语法上来说是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。创建promise: { //Promise()函数接收的是一个匿名函数回调 //resolve:成功 //reject:失败
2021-04-03 00:36:18
178
原创 es6 Map
Map数据结构1.传统js对象的键值对只能用字符串当作键，而Map数据结构虽然也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。即：Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应。2.创建map结构（map是构造函数，传递参数只能是数组类型的键值形式） let so1 = [ ["name", "ali"], ["sex", "男"] ] let maparr = new Map(s
2021-04-02 18:30:57
205
原创 es6 Set 和 WeakSet
一.Set1.set数据结构类似于数组，内部值是唯一的不能重复。2.Set本身是一个构造函数，用来生成 Set 数据结构。使用set方法进行数组去重： let a = [1, 1, 2, 3, 3, 2, 5, 4, 6, 5, 4]; let arr = new Set(a); console.log(arr);//输出：1,2,3,4,5,6 let m = [11, 1, 1, 1, 2, 3, 2, 4]; let m1 = [...new Set(m)];
2021-04-02 15:56:10
187
原创 es6 Object.is()和Object.assign()方法
1.Object.is()方法ES5中 比较两个值是否相等有两种运算符：（1）相等运算符（= =）（2）和严格相等运算符（= = =）以上两种都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。所以es6引入Object.is()方法来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。 console.log(Object.is(10, '10'));//输出：false console.log(Object.is({}, {}));//输出：fa
2021-03-27 00:54:13
202
原创 es6 Symbol数据类型
1.es6引入Symbol数据类型的原因ES5 的对象属性名都是字符串，容易造成属性名的冲突。而es6引入的Symbol数据类型可以保证每个属性的名字都是独一无二的，这样就从根本上防止属性名的冲突。 let s5 = Symbol('abc'); let s6 = Symbol('abc'); console.log(s5 === s6);//输出：false，即独一无二 //创建两个空的symbol变量也不恒等 let k1=Symbol(); let k2=Symbol(
2021-03-27 00:30:09
91
原创 es6 对象的扩展
1.属性的简洁表示 let name = "小黑"; let stu = { name } console.log(stu);2.对象中函数的简写 let a = 0; let b = 10; let stus = { eat() { return { a, b } } }3.getter访问器和setter访问器getter访问器：针对属性获取setter访问器：针对属性设置 let
2021-03-26 23:56:07
61
原创 es6 数组的扩展
1.扩展运算符扩展运算符是三个点“…”,等价 于函数扩展上的reset参数的逆运算,即为将一个数组转为用逗号分隔的参数序列。 let a=[1，2,3,4]; let b=[...a]; console.log(b);//输出：1 2 3 4 let fun=(...values)=>{ console.log(values);//输出：[1,2,3,4,5] } fun(1,2,3,4,5);2.在类数组中使用扩展运算符 let btn =
2021-03-26 23:15:33
78
原创 es6 函数的扩展
1.ES6 允许使用“箭头”（=>）定义函数。2.箭头函数的特点：保持上下文this指针一致。3.箭头函数的写法： //一般函数写法 var a = function (b) { return c; }; //箭头函数写法 let a = b => c;4.如果箭头函数不需要参数或需要多个参数，用一个圆括号代表参数部分。 /*不带参函数*/ //一般函数写法 var f = function () { return 5 }; //箭头函数写法 var f
2021-03-16 16:55:21
106
原创 es6 变量的解构赋值
一.数组的解构赋值1.ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，也就是按照相同的结构对应给值，这被称为解构（Destructuring）。2.本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。3.解构赋值举例： let [a, b] = [2, 3]; console.log(a, b);//输出：2 3 let [a, b, c] = [2, 3]; console.log(a, b, c);//输出：2 3 undefined
2021-03-16 11:55:34
1441
原创 es6 let 和 const 命令
一.let命令1.ES6 新增了let命令，也是变量声明关键字，用来声明变量。 let a = 10; console.log(a);2.let命令的用法类似于var，但是所声明的变量，限制作用域只在当前的代码块作用域内部有效。{ let a = 10; var b = 1;}console.log(a);//报错: a is not definedconsole.log(b);//输出：13.let声明的变量不能被声明提前。{ console.log(a);//报错：a is
2021-03-16 10:19:12
146
原创 jQuery 操作 CSS
jQuery 操作 CSSjQuery 常用CSS操作方法：方法作用css()设置或返回样式属性addClass()向被选元素添加一个或多个类removeClass()从被选元素删除一个或多个类toggleClass()对被选元素进行添加或删除类的切换操作方法实例：1.css()返回某个属性：<script> $(document).ready(function(){ $("button").click(function(){
2021-03-12 15:01:59
226
原创 jQuery Callback 方法
jQuery Callback 方法1.为什么要使用callback回调函数JavaScript语句逐行执行,但由于jQuery效果需要一些时间才能完成，因此下一个代码行可能会在前一个效果仍在运行时执行从而产生错误。为了防止这种情况的发生，jQuery为每个效果方法提供了一个回调函数。2.怎么使用callback回调函数回调函数作为效果方法的参数传递，它们通常显示为方法的最后一个参数。3.callback回调函数的执行时间Callback 函数在当前动画 100% 完成之后执行。也就是当前效果完
2021-03-12 11:33:14
621
原创 jQuery AJAX的get()方法和post()方法
jQuery AJAX的get()方法和post()方法1.作用用于通过 HTTP GET 或 POST 请求从服务器请求数据2.特点get()：从指定的资源请求数据。①get请求可被缓存②get请求保留在浏览器历史记录中③get请求可被收藏为书签④get请求不应在处理敏感数据时使用⑤get请求有长度限制⑥get请求只应当用于取回数据 $.get(src, function (result) { console.log(result); });
2021-03-11 22:09:02
158
原创 jQuery AJAX
jQuery AJAX1.什么是AJAXAJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）2.AJAX的作用AJAX可以与服务器交换数据，它在不重载全部页面的情况下，通过后台加载数据，并在网页上进行显示，实现了对部分网页的更新。3.jQuery AJAXjQuery 提供了多个与 AJAX 有关的方法，可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON并且可以把这些外部数据
2021-03-11 21:01:08
68
原创 jQuery动画
jQuery动画1.显示隐藏动画（不带参数是直接效果）(1)speed：动画的时间(2)easing：动画的方式（可用linear，默认swing)(3)fn：动画完成执行的函数使用show()和hide(): var ishow = false; $('#btn').click(function () { if (!ishow) { $('.box').hide(); ishow = true; }
2021-03-11 19:41:47
61
原创 jQuery尺寸
jQuery尺寸处理尺寸的方法：方法描述width()设置或返回元素的宽度（不包括内边距、边框或外边距）height()设置或返回元素的高度（不包括内边距、边框或外边距）innerWidth()返回元素的宽度（包括内边距）innerHeight()返回元素的高度（包括内边距）outerWidth()返回元素的宽度（包括内边距和边框）outerHeight()返回元素的高度（包括内边距和边框）示例代码：输出结果：更多尺寸相关操作：
2021-03-11 19:14:01
67
原创 jQuery过滤
jQuery过滤jQuery常用过滤方法：方法作用eq()根据索引选择元素first()获取集合里面的第一个last()获取集合里面的最后一个hasClass()检测是否具有某个类is()检测是否存在某一样has()匹配具有某个被检测元素的元素filter()匹配出满足条件的元素map()将一个类数组转化为新的数组(类似映射)not()匹配除过被检测元素之外的元素slice()截取(类似原生js的slice)
2021-03-11 18:58:26
254
原创 jQuery 事件
jQuery 事件1.事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。2.jQuery 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。注意：1.把所有 jQuery 代码置于事件处理函数中;2.把所有事件处理函数置于文档就绪事件处理器中;3.把 jQuery 代码置于单独的 .js 文件中;4.如果存在名称冲突，则重命名 jQuery 库。jQuery常用事件方法示例代码：<!DOCTYPE html><html><he
2021-03-11 18:39:37
118
原创 jQyery选择器
jQuery选择器1.jQuery 元素选择器和属性选择器可以通过标签名、属性名或内容对 HTML 元素进行选择。2.选择器可以对 单个元素或者一组元素进行操作。例如：1.$(“p”) 选取p元素。2.$(“p.nav”) 选取所有 class=“nav” 的p元素。3.$(“p#demo”) 选取所有 id=“demo” 的p元素。常用选择器：选择器实例选取内容$("*")所有元素$("#main")id=“main” 的元素$(".menu")所有
2021-03-11 18:13:10
123
原创 JQueryDOM节点操作
一.插入操作1.内部插入（1）追加到内容之后 var str = 'abc'; $('.btn').append(str);//参数可以为字符串或者对象 $('<span>abc</span>').appendTo($('.btn')); var str = '<span>123</span>'; $(str).appendTo($('.btn'));//前面不能是字符串（2）追
2021-02-02 21:39:21
49
原创 html5缓存
一.LocalStorage1.用于永久性的进行本地缓存，不会自动清除、没有过期时间，直至手动清除数据。2.LocalStorage采用的是键值对的方式进行存储，存储方式只能是字符串。存储内容可以用图片、json、样式、脚本等。示例代码：<script> //通过localStorage直接引用key, 另一种写法，等价于： //localStorage.getItem("pageLoadCount"); //localStorage.setItem("pageLoadCou
2021-01-26 22:32:19
142
原创 JavaScript异常处理
一.处理异常的标准方式try{ //抓异常的代码 } catch(e) { throw e;//抛出异常 } finally { //最后的代码 }1.把有可能出的问题的代码放在 try 语句中，只要有一行代码出现问题，整个程序的执行流程就会立即调到catch语句中执行。2.一旦try中有一行代码发生异常，则这行出错代码的后面的try中的其他语句都不会再执行。3.在执行catch中的代码之前，js引擎
2021-01-26 22:14:39
170
原创 JavaScript严格模式
一.什么是严格模式JavaScript 严格模式（strict mode）即在严格的条件下运行。二.严格模式的优点1.减少js代码的不规范使用和不合理运行。2.提高编译器效率，提高运行速度。3.消除代码运行的一些不安全之处，保证代码运行的安全。4.为未来新版本的Javascript做好铺垫。三.严格模式的分类1.全局严格2.局部严格 （在方法内部使用严格）四.严格模式的限制1.不能使用未定义的变量 （输出：x is not defined）例如： b=20; conso
2021-01-26 22:01:34
68
原创 JavaScript cookie
一.什么是 cookie？cookie是用来缓存 web页面的信息的，记录web页面的用户信息，当用户下次访问该页面时，cookie 会直接从本地文件读取缓存。二.创建cookie例如：document.cookie = "user=rong";三.读取cookie例如：console.log(document.cookie);四.修改cookie例如：document.cookie = "_login=false;expires=Sun Jan 24 2021 10:40:37 G
2021-01-26 21:40:22
62
原创 JavaScript中return的作用
前言：return false 只在当前函数有效，不会影响其他外部函数的执行。一、返回控制与函数结果语句结束函数执行，返回调用函数，并且把表达式的值作为函数的结果。retrun true； 返回正确的处理结果。return false；返回错误的处理结果，终止处理。（在大多数情况下,为事件处理函数返回false,可以阻止事件的默认行为。）例如：默认情况下点击一个元素,页面会跳转到该元素href属性指定的页.。 return true 就相当于执行符，而return false 就相当于终止符。
2021-01-24 08:38:59
2373
原创 JavaScript继承的五种方式
一.原型链继承特点：1.子类的实例即是本身也是父类。2.父类新增的原型方法和属性，子类对象都可以访问。缺点：1.子类添加属性和方法必须写在new之后或者直接写在子类里面。2.不能实现多继承。3.子类的实例不能直接向父类传递参。示例代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title> <!--
2021-01-21 18:40:30
362
原创 JavaScript回调函数
1.什么是回调函数？回调函数是作为参数传给另一个函数的函数，将会在另一个函数完成执行后立即执行。2.为什么要使用回调函数？JavaScript 在浏览器中运行时，浏览器的主进程是单线程事件循环。如果我们尝试在单线程事件循环中执行长时间运行的操作，则会阻止该过程，因为在等待操作完成时会停止处理其他事件。3.如何使用回调函数？示例代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF
2021-01-20 00:07:02
111
原创 for循环中使用object[i].index=i的作用
在object[i].index=i中：object为当前的数组对象；index为给当前数组对象添加的属性，可以自定义名称，用来存放索引值。这样便可以使事件内部函数的索引位和for循环中i的值保持一致。1.当for循环内部不包含事件时，i的值即为数组的索引值。示例代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> &
2021-01-19 16:33:13
760
2
原创 JavaScript几种轮播图实例
一.无缝轮播图效果图：代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } /*显示图片的容器*/
2021-01-08 22:54:48
305
原创 JavaScript常见的四种内置对象
一.四种内置对象JS内置对象即为Javascript自带的对象，并且提供了一些常用的的功能。1.Array对象：提供一个数组的模型来存储大量有序的数据。2.Math对象：可以处理所有的数学运算 。3.Date对象：可以处理日期和时间的存储、转化和表达。4.String对象：可以处理所有的字符串的操作。数学对象示例代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">
2021-01-08 22:45:00
3494
原创 几道JavaScript算法题（数组）
数组相关算法题第一题： 找出给定数组中的最大值。var arr = [19,96,35,53,76]; var max =arr[0]; var maxIndex = 0; for(var i = 0;i<arr.length;i++){ if(arr[i]>max){ max = arr[i]; maxIndex = i; } max = arr[i]?arr[i]:ma
2020-12-25 22:28:33
366
原创 JavaScript数组去重方法
数组去重的四种方法方法一：在数组一中挨个拿元素去数组二里面找，如果找到相同的就删除数组二中相同的元素，最后拼接两个数组。示例代码一：var arr1 = [1, 2, 3, 4]; var arr2 = [1, 3, 5, 6]; //获取arr1的索引 for (var index in arr1) { //在arr2中找arr1中的元素并用变量接收 var common = arr2.indexOf(arr1[index]);
2020-12-25 21:01:44
93
原创 JavaScript Array（数组）对象常用方法
Array 对象方法方法描述map()将一个数组映射为另一个数组并返回处理后的数组reduce()将数组元素进行累计（从左到右）concat()将多个数组拼接并返回结果join()把数组的所有元素放入一个字符串reverse()翻转数组的元素顺序sort()对数组的元素进行排序push()对数组进行追加并返回新的长度pop()删除数组的最后一个元素并返回删除的元素shift()删除并返回数组的第一个元素every(
2020-12-17 23:31:03
560
1
原创 JavaScript条件语句
JavaScript条件语句条件语句用于基于不同的条件来执行不同的动作。类型描述if 语句只有当指定条件为 true 时，使用该语句来执行代码if…else 语句当条件为 true 时执行代码，当条件为 false 时执行其他代码if…else if…else 语句使用该语句来选择多个代码块之一来执行switch 语句使用该语句来选择多个代码块之一来执行1.if 语句代码举例:function addCount() { var count
2020-12-10 23:38:57
154
原创 js元素尺寸和位置，包含clientWidth、offsetWidth、scrollWidth等
一.clientWidth和clientHeight1.clientWidth：内容+左右内间距即：clientWidth = width+左右padding2.clientHeight：内容+上下内间距即： clientHeigh = height + 上下padding二.offsetWidth和offsetHeight1.offsetWidth：内容+内间距+左右边框即：offsetWidth = width + 左右padding + 左右boder2.offsetHeight：内容
2020-12-04 01:31:20
170
原创 js事件冒泡、事件捕获和事件委托
一.事件冒泡事件冒泡：从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。举例代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #listinfo { border: 10px solid
2020-12-04 01:05:08
105
原创 JavaScript声明提前问题
变量声明提前1.若为以下情况，则第一个console输出的结果为undefined,第二个console输出结果为小明。 <script> var stu_1; console.log(stu_1);//输出为undefined,因为变量声明提前 var stu_1='小明'; console.log(stu_1);//输出为小明 </script> 2.若为以下情况，则第一个console输出结
2020-11-27 00:59:33
220
原创 JavaScript打印直角三角形、等腰三角形和菱形
一.打印直角三角形js代码：<script> for(var i=0;i<4;i++) { var s=""; for(var k=0;k<2*i+1;k++) { s+="*"; } console.log(s); } </script>效果图：二.打印
2020-11-27 00:28:47
2315
原创 align-content、justify-content、align-items三个属性的作用和效果
一.align-content属性作用：设置同一列子元素在Y轴的对齐方式属性值描述flex-start排列在当前列的最上方flex-end排列在当前列的最下方center排列在当前列的中间位置space-between间距相等排列，上下不留白space-around间距相等排列，上下留白等于间距的一半二.justify-content属性作用：设置同一行子元素在X轴的对齐方式属性值描述flex-start排列在当前行的
2020-11-20 01:35:31
21316
原创 transform属性、transition属性和animation属性的介绍
transform属性的五个方法1. translate() 方法：可以按照设定的距离沿着坐标轴进行平移。（1）translateX(x)仅水平方向移动（X轴移动）；（2）translateY(y)仅垂直方向移动（Y轴移动）;（3）translate(x,y)水平方向和垂直方向同时移动（X轴和Y轴同时移动）。2. rotate() 方法：可以按照设定的角度绕着坐标轴进行旋转。如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。注：需定义transform-origin属性
2020-11-13 03:49:51
515
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人