- 博客(36)
- 收藏
- 关注
RSS订阅
原创 javaScript之ES6
定义变量新增的let和const let num1 = 10 console.log(num1) //10 const num2 = 10 console.log(num2) //10let const声明变量和 var声明变量的区别：用let 和const 声明的变量不会进行预解析，只能先声明后使用用let 和const 不能重复声明同一个变量用let 和const声明 变量在{}都属于 局部作用域的变量let const声明变量的区别：
2020-06-30 21:47:35
221
原创 数组方法的返回值使用
计算两个数组的交集<script> var arr1 = [1, 2, 2, 3, 4, 5]; var arr2 = [2, 2, 3, 4, , 6, 7, 8]; // 输出的内容 [2,3,4] // 循环拿出arr1数组中的每一个数据 /* 第一次调用 item = 1 arr2.indexOf(item) !== -1 === arr2.indexOf(1) !== -1 条件不成立 不会把item返回到新的
2020-06-21 22:48:51
2223
1
原创 琢磨不透的JS原型相关
JS原型相关构造函数原型(proto) 和 prototype原型链 (JS原型与原型链继承)内部原型(proto) 和 构造器的原型(prototype)。浅谈constructor函数和对象关系原型prototype的用法prototype与__proto__的关系经典练习题面向对象阅读前提：概念太多，理解最好，但是后面代码必须懂构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值。它总与 new 一起使用，可以把对象中的一些公共的属性和方法抽出来，然后封装到这个函数里面。n
2020-06-14 22:46:36
199
原创 那些年的跨域问题
跨域跨域（非同源策略请求）同源策略请求 ajax/fetch跨域传输早期前部署到web服务器上：同源策略1、xampp假如本地服务地址是 http://127.0.0.1:8080/index.html服务端请求数据的地址 http://api.xxxx.com/getData协议是一样的，但是域名不一样，端口也不一样，这样就导致访问不到数据了之前的解决方法是：修改本地的...
2020-06-02 13:18:15
308
原创 ES6中for...of的使用（遍历数据）
先说说以下循环遍历的对比for 循环 ES3 的方法需要知道遍历的次数 ， 注意：可以随时终止循环forEach ES5 的方法不需要知道循环的次数， 注意：不能随时终止循环for...of ES6 的方法综合了 for 和 forEach循环不需要知道循环的次数 ，注意：可以随时终止循环说明： var arr = ['a', 2, 3, 4, 5]; //【1】for循环遍历数组 for (let i = 0; i < arr.length; i
2020-06-30 21:55:27
2590
1
原创 ES6中Set和Map的使用（数组字符串去重）
Set对象Set概念：Set 集合，类似于数组，但是成员的值都是唯一的，可自动去重Set创建：new Set(值) 但是得出来的不是一个数组，Set使用： let set = new Set（值）Set方法：add(value) 往Set创建的变量中添加成员delete(value) 删除某一个值has(value) 判断一个值存不存在，返回布尔值clear() 清除所有的成员<script> // 数组去重 // var arr = [1, 2, 3
2020-06-30 21:54:57
759
原创 this指向和bind—call—apply
this和bind&&call&&applythis 关键字call 和 apply 和 bindcallapplybindthis 关键字每一个函数内部都有一个关键字是 this可以让我们直接使用的重点： 函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系函数内部的 this 指向谁，取决于函数的调用方式全局定义的函数直接调用，this => windowfunction fn() { console.log
2020-06-30 21:54:20
151
原创 04-DOM和事件案例分析
DOM和事件案例分析可编辑表格事件委托实现表格的复制和删除右键菜单事件发送信息案例根据数据生成表单可编辑表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态生成表格</title> <style> table { margin-top: 20px; width: 800px;
2020-06-28 23:10:44
451
原创 JavaScript之BOM
BOMBOMBOM是什么BOMBOM是什么BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape浏览器标准的一部分。...
2020-06-24 23:57:46
694
原创 JavaScript之键盘相关信息
键盘相关信息键盘事件(一般只给可以输入内容的元素绑定 或者 window绑定)1、onkeydown （按下键盘键的时候触发）2、onkeyup （松开键盘键的时候触发）3、onkeypress （按下字符键的时候触发，不包括Ctrl和shift等） <input type="text" id="btn"> <script> var btn = document.querySelector('#btn'); //当input有输入内容时，触发按键按下事
2020-06-24 22:39:28
166
原创 封装获取非行内样式函数
获取非行内样式操作1、 window.getComputedStyle(dom元素).属性注意：在IE中，只有在ie9及以上才能获取写法： var style = window.getComputedStyle(dom元素).height;2、dom元素.currentStyle.属性注意：只有在ie8及以下才能获取样式，在其他浏览器会报错写法：var style = dom元素.currentStyle.height // 获取非行内的样式 // getComputedStyl
2020-06-24 15:40:11
556
原创 窗口的属性和方法——事件对象中光标位置
窗口的属性和方法&&事件对象中光标位置和元素尺寸窗口的主要属性和方法1、获取浏览器窗口的尺寸2、浏览器常用事件3、获取浏览器卷去的高度获取滚动条属性和方法事件对象中光标位置获取元素的尺寸窗口的主要属性和方法1、获取浏览器窗口的尺寸在这里需要说的一个概念是 页面视图容器页面视图容器： 称之为浏览器的视口（viewpoint），相比窗口本身来说，它不包含工具栏和滚动条innerHeight 获取页面视图的高度（不包括滚动条）innerWidth 获取页面视图的高度（不包括滚动
2020-06-24 15:38:38
398
原创 短路表达式小技巧
短路表达式||：当前面的值为真 后面得值就不会 被执行，前面的为假，后面的才会被执行&&：当前面的值为真的时候，才会执行后面的值，当前面的值为假的时候，后面的值不会被执行 var num = 10; // num= 11 ，因为 || 前面为假，后面才会执行 // false || num++ // num= 10 ，因为 || 前面为真，后面的不会执行 true || num++ // 最后打印num = 10，因为&&
2020-06-23 19:01:22
394
原创 获取url参数转为对象
获取到的url参数转为对象把字符串转为对象 // 把字符串转化为对象 var str = 'id=1&name=zhangsan&age=18&className=2003' // {id:1,name:zhangsan,age:18,className:2003} // 先把字符串转化为 数组 var arr = str.split('&'); // arr = ['id=1','name=zhangsan','age=1
2020-06-22 21:22:13
2162
2
原创 03-定时器分析
动态进度条案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 8
2020-06-21 23:07:51
358
原创 02-渲染数据分析
数组和对象的结合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { display:
2020-06-21 23:07:31
146
原创 01-事件案例分析
事件案例分析任意表格案例反选和全选和不选点击按钮实现选项卡不同随机给body生成背景色任意表格案例<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 100
2020-06-21 23:07:08
411
原创 说点js平易算数题
js算法题：求三个数的大小，并按从小到大输出 var min = Number(prompt('请输入三个值的第一个值：')) var center = Number(prompt('请输入三个值的第二个值：')) var max = Number(prompt('请输入三个值的第三个值：')) function sort() { // 定义三个变量来接收相应的值 // 假设第一个值为最小值 var min = arguments[0]
2020-06-21 22:53:30
456
原创 js判断对象是否存在某个属性
判断对象是否存在某个属性 // 判断对象中是否存在某个属性 var obj = { name: 'fqniu', age: 18 } // js中为false的 null ,'',undefined,0,NaN // 如果 obj.aa 对象中不存在aa这个属性 obj.fqniu 为undefined // if (obj.name) { // console.log(obj.name); // } //
2020-06-21 22:51:13
469
原创 系统弹窗
系统弹窗alert（）prompt（）comfirm（）open（）close（）1、alert（） <script> alert('我只是一个弹窗') </script>2、prompt（） <script> var ret = prompt('看看这个弹窗是什么样的？') console.log(ret) </script>注意：返回值：当输入内容时，点击确定，返回值是输入的内容当不输入内
2020-06-21 22:46:18
304
原创 冒泡排序和选择排序
冒泡排序 <script> /* 冒泡排序 找到最大的数据 放在数组的最后面 【1】相邻的两个数据进行比较 【2】如果前面的数据 比后面的数据大，这两个数据就交换 */ // var num1 = 10; // var num2 = 20; // num1 =20 num2 =10 // var num3 = num1; // num1 = num2; // num2 = num3;
2020-06-17 16:56:44
102
原创 js判断比较字符串大小的几种情况
JS常用来比较的几种情况 <script> // var num1 = 'b'; // var num2 = 'a'; /* 【1】当纯数字 与 纯数字比较 直接比较数字的大小 【2】当纯数字 与 数字的字符串比较，先把字符串转成数值 在进行大小的比较 【3】当两个值都是 数字的字符串，使用两个字符串的ASCII码值比较大小 【4】当纯数字 与 非数字的字符串比较 会把字符串转换成 NaN（不是一个数字），
2020-06-17 16:55:42
2124
原创 Math对象随机数方法—random（）
随机数random（）1、Math对象里面随机数方法，random（）返回一个随机的小数 0 <= x < 1；2、这个方法里面不跟参数；3、验证代码： console.log(Math.random())4、如果得到随机整数，并且包含这2个整数： Math.floor(Math.random()*(max - min + 1)) + min;例： function getRandom(min, max) { return Math.floor
2020-06-13 21:37:32
10084
原创 css文本两端对齐
文本两端对齐text-align: justify;/* 规定如何对齐文本的最后一行 */text-align-last: justify; .text { width: 100px; margin: 10px 20px; border: 1px solid #000; text-align: justify; /* 规定如何对齐文本的最后一行 */ text-align-last: justify; }
2020-06-13 20:02:08
183
原创 JavaScript之DOM
DOM篇DOM是什么？文档对象模型（Document Object Model ，DOM），是W3C组织推荐处理可扩展标记语言（HTML和XML）的标准编程接口。1、HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。2、XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。HTML DOM 树形结构:...
2020-06-13 15:46:53
1424
原创 Gitee—值得拥有
码云入门什么是码云码云 Gitee - 开源中国Git代码托管平台码云的详细介绍前期的准备安装 git 客户端git下载地址注意：安装采用傻瓜式安装，一直点下一步，全部使用默认选项(安装软件的路径除外)，安装路径不要包含中文文件夹。码云的注册码云注册地址注意：注册时名字尽量简单好记，不要忘记注册时的密码了！！！码云的使用基本概念仓库: 用于存储代码的地方版本: 每次从本地提交一次代码到码云为一个版本新建仓库鼠标移入右上
2020-06-09 13:27:21
1814
原创 移动端纯概念
移动端概念移动端概念meta标签的设置重点设置分辨率，PPi,DPI,DPR,物理像素，逻辑像素区别常见单位再补充解释：移动端单位换算推荐：移动端概念注：以下需要知道，可能与开发并不直接相关，但能帮助你了解移动端；meta标签的设置H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,us
2020-06-07 17:30:01
185
原创 node核心模块
nodenode.js是什么？(1)Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.node不是一门语言，不是库，不是框架nodejs是一个JavaScript运行时环境简单点来讲就是nodejs可以解析和执行JavaScript代码以前只有浏览器可以解析执行JavaScript代码nodejs可以使JavaScript完全脱离浏览器来运行浏览器中的JavaScriptECMAscript
2020-06-07 12:46:01
381
原创 移动端几种布局总结
移动端布局方法移动端布局方法1、使用 媒体查询+rem单位2、使用vw单位 + rem单位布局3、使用rem.js + rem单位布局4、使用sass + vw单位布局下面具体说下2、3、4布局2：VW和rem布局总结如下计算：3、使用rem.js + rem单位布局4、使用sass + vw单位布局移动端布局方法1、使用 媒体查询+rem单位（1）使用媒体查询更改HTML的font-size值（2）页面中所有布局使用rem单位布局缺点：不能精细的适配到每一个设备，代码量较大原理：媒
2020-06-06 14:53:46
1529
2
原创 弹性盒模型和案例布局
弹性盒模型怪异盒模型：box-sizing：属性值：content-box；（标准盒模型）border-box；（怪异盒模型）怪异盒模型特点：padding和border不会对盒子大小产生影响所添加padding和border在宽高内部。弹性盒：布局方法；作用：弹性盒控制子元素(不包括孙子辈元素)的布局方法。特点：a: 弹性盒默认情况下，子元素沿着“主轴”排列，默认情况下X轴为主轴b: 弹性盒的子元素称作“灵活元素”，所有的子元素都能设置宽高c: 如果一个子元素在弹性盒
2020-06-06 13:36:38
668
原创 杂记—JavaScript梳理（2）
事件事件JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器发生的一些特定的交互瞬间。事件流：事件流描述的是从页面中接收事件的顺序。但有意思的是，IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕获流。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即是DOM事件流事件冒泡IE 的事件流叫做事件冒泡（event bubbling），即
2020-06-03 15:11:59
165
原创 nodejs杂记
node// 表示引入http模块const http = require('http');/* request 获取URL传给来的信息 response 给浏览器响应信息*/ http.createServer(function(req,res) { console.log(req.url);//获取URL //200表示成功,设置http 响应头 文件类型为...
2020-06-02 19:28:46
163
原创 NPM部分
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入"npm -v"来测试是否成功安装。NPM：node package managerpackage.json
2020-06-02 17:29:01
285
原创 HTML常用技巧
HTML常用代码之：你不一定知道的技巧将彻底屏蔽鼠标右键 ncontextmenu="window.event.returnValue=false" 可用于Table<table borderncontextmenu=return(false)><td>no</table>取消选取、防止复制<body nselectstart="retur...
2020-06-02 13:10:56
164
原创 说说ES6的Promise
问：Promise是什么？答：简单说就是异步编程的一种解决方案Promise 对象语法：new Promise( function(resolve, reject) {…} /* executor */ );
2020-06-01 17:44:08
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人