- 博客(24)
- 收藏
- 关注
原创 谈谈跨域、同源策略、以及常见跨域解决方案
谈谈跨域、同源策略、以及常见跨域解决方案跨域:是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对js实施的安全限制。同源策略同源策略是一个安全策略。所谓的同源,指的是协议,域名、端口号相同。限制了一下行为:Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 JS 对象无法获取Ajax请求发送不出去解决方案 :当然了,我梳理了几个我觉得工作中常用的,其他的自行去了解。jsonp跨域利用script标签没有跨域限制的漏洞,网
2020-09-19 15:36:04
253
原创 jsvascript之promise
为什么会有Promise?我们通常都会说为了解决回调地狱。那好,什么是回调地狱:多层嵌套的问题。 每种任务的处理结果存在两种可能性(成功或失败),那么需要在每种任务执行结束后分别处理这两种可能性。怎么实现一个Promise?智者见者,仁者见仁,不同的人就会有不同的Promise实现,但是大家都必须遵循promise a+ 规范 ,那符合规范的一个Promise到底是长什么样的?Promise是一个类, 类中需要传入一个executor执行器, 默认会立即执行,就像下面这样会立即打印出1ne
2020-09-19 14:53:04
145
原创 HTML DOM 树
HTML DOM 树什么是 DOM?DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分:1. 核心 DOM - 针对任何结构化文档的标准模型2. XML DOM - 针对 XML 文档的标准模型3. HTML DOM - 针对 HTML 文档的标准模型什么是 HTML DOM?HTML DOM 定义了所有 HTML
2020-09-12 11:47:00
867
原创 ES6 之 Set和Map
ES6 之 Set和Map一、Set基础用法一种新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值。let s1 = new Set();s1.add(9);let arr = [1, 2, 3, 4, 4, '4', NaN, NaN, {}, {}];let s2 = new Set(arr);console.log(s1); // Set { 9 }console.log(s2); // Set { 1, 2, 3, 4, '4', NaN, {}, {} }c
2020-09-12 11:31:21
180
原创 ES6 - 数组属性
4-1.扩展运算符扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1,2,3,4,5]); // 1 2 3 4 5console.log(1,...[2,3,4],5); // 1 2 3 4 5如果扩展运算符后面是一个空数组,则不产生任何效果。console.log(...[]); // 输出空4-2.代替函数的 apply 方法由于扩展运算符可以展开数组,所以不再需要apply
2020-09-02 20:07:00
502
原创 JavaScript(ES6)- 函数 & 箭头函数
箭头函数注意点1. 函数体内的`this`对象,就是定义时所在的对象,而不是使用时所在的对象。2. 不可以当作构造函数,也就是说,不可以使用`new`命令,否则会抛出一个错误。3. 不可以使用`arguments`对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。4. 不可以使用`yield`命令,因此箭头函数不能用作 Generator 函数。上面四点中,第一点尤其值得注意。`this`对象的指向是可变的,但是在箭头函数中,它是固定的。
2020-09-01 19:53:27
188
原创 JavaScript(ES6)-let & const & 解构化赋值
JavaScript(ES6)1.let & const1-1. let命令基本语法:ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ let a = 10; var b =1;}console.log(a);// 报错console.log(b);// 1let特点:不存在变量提升。暂时性死区,只要快级作用域内存在let命令,它所声明的变量的区域,不再受外部的影响。不允许重复声明,在同一个作用域
2020-08-29 12:36:23
284
原创 Bootstrap-栅格系统
Boostrap简介:Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。栅格系统简介:栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(pa.
2020-08-18 19:13:24
279
原创 如何使用CSS画三角形
使用border的特性来完成 三角形1.一个border是由四个三角(上右下左)生成的一个像素<style> div{ width: 0; height: 0; border-top: 100px solid orange; border-right: 100px solid orchid; border-bottom: 100px solid oran.
2020-08-18 18:55:02
94
原创 JS-ES5中常用的数组方法
forEach简介:从头到尾遍历数组,为每个元素调皮制定的函数。参数:1. element(数组元素) 2. index(数组下标) 3. self(整个数组)语法:arr.forEach(callback,[object]),回调函数、this指向 <script> var arr = [1,2,3,4,5]; arr.forEach(function(element,index,self){ console.log.
2020-08-12 18:59:23
234
原创 Echarts-百家姓-饼状图
最近学习了 Echarts 可视化数据很有意思,于是写了一个百家姓的饼状图,今天就给大家分享一下因为姓氏比较多,显示出来的为想个姓氏拼接一起的主要思路:随机生成两个下标(并不重复)四个数组分别用来存放(姓名、不重复的数组、存储所有的数据、存储放在页面上的数据)<div class="demo"></div><script src="js/echarts.js"></script><script src="js/jquery.js"&.
2020-08-05 19:07:23
548
原创 JQuery-中的基本筛选器
1. first()描述:获取匹配的第一个元素使用方法: ① $(“ul li”).first(); ② $(‘ul li:first’)<ul> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> <li>第六个</li></ul>
2020-07-29 19:05:20
152
原创 NodeJS-查询数据库并渲染到HTML Demo
Node js 获取数据库中的数据,并渲染页面。使用工具: Vscode , MySQL , Google Chrome(谷歌浏览器) , Navicat Premium(MySQL可视化软件)Demo目录介绍:客户端(client)目录:服务端(server)目录:客户端 (client)HTML 结构 因为几乎没有写样式,这里css的样式就不做展示了<!DOCTYPE html><html lang="en"><head&g
2020-07-20 17:25:23
8678
2
原创 JS -获取浏览器的 URL 地址栏
URL即:统一资源定位符 (Uniform Resource Locator, URL)完整的URL由这几个部分构成:通信协议:常用的http,ftp,maito等host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。port:端口号 整数,可选,省略时使用方案的默认端口,如http的默认端口为80。path:路径 由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。query:查询 可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/
2020-07-20 12:35:03
1962
原创 JavaScript-数组中常用的API
1. join() 方法可以将数组转换为字符串输出,并可以指定一个可选的符号来分割数组中的各个元素。var arr = ['1','2','3'];arr.join() // 默认情况 1,2,3arr.join('') // 123arr.join(' ') // 1 2 3arr.join('-') // 1-2-32. reverse() 方法reverse() 方法可以把数组中元素的顺序颠倒,返回逆序的数组。var arr = ['1','2','3']arr.
2020-07-09 19:53:54
268
原创 JS笔试题合集(包含少量的HTML & CSS)-日常笔记
1.JS随机生成N个长度的字符1.随机数2.N个长度,需要用到循环3.字符:随机数生成后需要拼接,可用到数组。function aa(N){ var arr =[];//定义一个数组,用来拼接字符 for(var i=0;i<N;i++){//N个长度 var ran = Math.foor(Math.random()*10);//生成随机数 arr.push(ran);//在数组最后添加生成的随机数 } console.log(arr.join(""));//使用join
2020-07-08 19:28:35
1222
1
原创 CSS3-弹性盒子的运用
CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2020-07-06 20:04:10
306
原创 JS-闭包是啥
1.说明函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起构成闭包(closure)。在 JavaScript 中,每当函数被创建,就会在函数生成时,同时自动生成闭包。也就是说只要有函数的地方,都有闭包。2.词法作用域第一种写法function init() { var name = "chrome"; // name 是一个被 init 创建的局部变量 function displayName() { // di
2020-06-07 12:50:50
220
原创 简易的 iPhone 计算器-JS、CSS、HTML
HTML+CSS 布局 如下图:最外层使用div然后margin:auto;水平居中显示用户框我用的也是一个div 属性:text-align:right;文本右对齐table表格:5行4列 加上 border-radius圆角属性 <style> .panel { width: 270px; height: 400px; margin: auto; backgro.
2020-06-02 21:17:41
857
原创 JS Date对象计算100天以后的时间
核心:setDate();由此可见我们就可以直接: <script> // 获取 当前时间 var date = new Date(); date.setDate(date.getDate()+100); document.write("100天后"+date.toLocaleString()); </script>...
2020-06-02 20:40:03
2109
原创 网站左上角小图标 favicon 问题
作为一名小白,在昨天就遇到一个小问题:网站左上角的图标怎么显示出来如图:通过百度发现了在网站域名后加上 favicon.ico 就可以下载图片啦如图:就可以下载百度的favicon的图片,当热下载之后还需要注意:下载后的图片是一个favicon.ico文件,要放在项目的最外层,与html并列然后在<head> </head>中间引入favic...
2019-11-14 13:55:02
524
原创 关于鼠标放在 li 标签上会使标签放大!
.The_four_ul li:hover { transform: scale(1.2,1.1); -webkit-transform: scale(1.2,1.1); -moz-transform: scale(1.2,1.1); -o-transform: scale(1.2,1.1); -ms-transform: scale(1.2,1.1)}...
2019-11-05 15:24:06
855
原创 JS 倒计时怎么做的
JS-倒计时HTML代码:<body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div></body>CSS代码: <style> div { ...
2019-10-27 14:36:07
184
原创 JS 设置网页下滑时出现的显示、隐藏div事件
1.HTML:设置body 的 onscroll事件(在元素滚动时执行)<body onscroll="get()"> <div id="Slide_downward"></div></body>2.JS代码function get (){ //滚动条距离顶部的距离 var topverb1 = document.doc...
2019-10-27 14:32:19
3001
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人