js代码 | 易学教程

前端常见跨域解决方案（全）

阅读更多关于前端常见跨域解决方案（全）

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送常见跨域场景 URL 说明是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路径允许 http://www.domain.com/lab/c

js网络请求的点点滴滴(axios、fetch、ajax)

阅读更多关于 js网络请求的点点滴滴(axios、fetch、ajax)

一、什么是网络请求,网路请求的类型 1.1 什么是网路请求,网路请求关心哪些内容传入基本参数（url，请求方式）请求参数、请求参数类型设置请求头获取响应的方式获取响应头、响应状态、响应结果异常处理携带cookie设置跨域请求 1.2网路请求的类型同步请求异步请求二、同步请求的模式三、异步请求的模式四、当前流行的异步请求方案 axios、fetch、ajax 问题一：axios、fetch与ajax有什么区别？主要区别是 axios、fetch请求后都支持 Promise对象API ，ajax只能用回调函数。 Ajax Ajax被认为是（Asynchronous JavaScript and XML）的缩写。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。依赖的传输对象： XMLHttpRequest ajax无需多言，如果想要更多了解，参考以下链接： ajax详解 axios：代码示例 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function

JS事件模型小结

阅读更多关于 JS事件模型小结

三种事件模型：原始事件模型（DOM0），DOM2事件模型，IE事件模型；不同点：　　事件程序的注册（给HTML元素所对应的JS对象绑定事件）　　事件传播的过程事件模型的注册：　　一、原始事件模型（没有兼容性问题）原始事件模型的特点：事件类型上面有ON（onclick）没有事件的传播(事件一旦发生就立刻调用事件句柄) 一个DOM对象只能注册一个类型的事件，如果注册了两个，则会发生覆盖，只执行后一个事件；注册：　1、将JS代码作为HTML的性质（也就是直接在标签中将HTML元素的性质设置为一段代码） <input type="button" value="Press me" onclick="alert('thanks');" 　2、将事件处理程序作为js对象的属性 <form name="f1"> <input name="b1" type="button" value="Press Me"/> </form> document.f1.b1.onclick=function() { alert('thanks'); }; 或者 function plead() { window.status="Please Press Me!"; } document.f1.bi.onmouseover=plead; （注意没有括号）或者显示调用：document

css加载会造成阻塞吗

阅读更多关于 css加载会造成阻塞吗

本文由云+社区发表作者：嘿嘿嘿可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度 \1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 \2. 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 \3. 这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗？用代码说话： <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function

9.3题解

阅读更多关于 9.3题解

T1 大家考场上都想到了暴搜，并且暴搜可以过，但是为什么还是有一大半的人$WA0$了呢，因为这题细节巨多，考场上我调了到快9点，才过了大样例，结果还是逃脱不了$WA0$的命运，我太难了其实思路上没有什么，你就枚举循环节的长度，把后面位置上有数字的对回来，看能不能合法就行了，记得疯狂调试 1 #include<algorithm> 2 #include<iostream> 3 #include<cstring> 4 #include<cstdio> 5 #include<vector> 6 #define inf 2139062143 7 #define maxm 10010 8 #define maxp 100100 9 using namespace std; 10 struct node{ 11 int p,x; 12 }a[maxm]; 13 int t,c,m,js,tail,len,pd; 14 int b[maxp],lon[5],ma[5],st[5],mi[5],stt[5]; 15 vector <int> chan; 16 bool cmp(const node &a,const node &b) 17 { 18 return a.p<b.p; 19 } 20 int main() 21 { 22 // freopen("1.in","r",stdin);

js验证身份证号码

阅读更多关于 js验证身份证号码

代码 1、简单的正则表达式：（1）preg_match("/^(\d{18,18}|\d{15,15}|\d{17,17}x)$/",$id_card) （2）preg_match("/^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X)?$/",$id_card) （3）preg_match("/(^\d{15}$/)|(\d{17}(?:\d|x|X)$/),$id_card)2、复杂并且严格一些的验证：//这个可以验证15位和18位的身份证，并且包含生日和校验位的验证。 //如果有兴趣，还可以加上身份证所在地的验证，就是前6位有些数字合法有些数字不合法。 function isIdCardNo(num) { num = num.toUpperCase(); //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。 if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) { alert('输入的身份证号长度不对，或者号码不符合规定！\n15位号码应全为数字，18位号码末位可以为数字或X。'); return false; } //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。

JS实战 · 表单验证

阅读更多关于 JS实战 · 表单验证

思路： 1、定义页面通过表格格式化表单；表格行都有自己的背景颜色；单元格中的数据(文本等)用div进行封装，好操作； 2、定义样式表格的样式； div的样式； 3、动态效果页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；进行内容校验，不正确时显示警告信息。代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>表单验证</title>  <style type="text/css"> table{ border: #A50DFA 1px solid; width: 500px; border-collapse: collapse; } table th, table td{ border: #A50DFA 1px solid; padding:10px; } table th{ } table td{ }

面试题目整理

阅读更多关于面试题目整理

HTML&CSS 1、常用哪几种浏览器测试？有哪些内核（Layout Engine）？（Q1）浏览器：IE，Chrome，Firefox，Safari，Opera （Q2）内核：Trident，Gecko，Presto，Webkit 2、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8以下）（Q1）行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效（可以设置line-height）,margin上下无效 padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行（Q2）兼容性：display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式？比较好的方式是哪一种（Q1）（1）父级div定义height （2）结尾处加空div标签clear：both （3）父级div定义伪类：after和zoom （4）父级div定义overflow：hidden （5）父级div定义overflow：auto （6）父级div也浮动，需要定义宽度 (7)父级div定义display：table （8）结尾处加br标签clear：both （Q2）比较好的是第3种方式，好多网站都这么用 1、box-sizing 常用的属性有哪些？分别有什么作用？（Q1）box

js 复制文本的四种方式

阅读更多关于 js 复制文本的四种方式

js 复制文本的四种方式一、总结一句话总结：js文本复制主流方法：document的execCommand方法二、js 复制文本的四种方式纯转载复制，非原创原地址：http://www.cnblogs.com/xhyu/p/5370111.html 目前copy主流有四种方式： ZeroClipboard ， Clipboard.js ， execCommand ，setData，再就是其他只支持IE的鸡肋法了不在此讨论。。概况： ZeroClipboard 就是常说的Flash法，通过加载一个Flash，让其访问系统剪贴板来绕过绝大多数系统的权限限制，然而体积稍微庞大些 Clipboard.js 近几年使用较多，体积相对小，兼容性可以接受，使用还比较方便。 execCommand 新兴势力，safari等主流正在努力兼容，是个好东西。 setData 太老。。一般不太用，基本只适合IE 兼容性： ZeroClipboard 兼容性最好，能全面兼容chrome/ FireFox/ IE/ 甚至Safari 这种“友好”的浏览器 Clipboard.js和execCommand兼容性相似，兼容chrome/ FF/ IE>9/ Safari新版（不太懂Safari版本号如何算。。感觉15年以后的都可以） setData 仅IE 体积： ZeroClipboard

js 闭包原理

阅读更多关于 js 闭包原理

闭包的定义：闭包是指有权访问另一个函数作用域中的变量的函数 -- 《JavaScript 高级程序设计》。如何理解这句话：其实就是指在函数a外面能够访问函数a里面的函数b 。例如： 1 function a () { 2 var v = 123; 3 function b() { 4 console.log(v); 5 } 6 return b; 7 } 8 9 var b = a(); 10 b(); // 123 执行函数a时把函数b返回，此时函数b就保存到了a的外面，这时候就可以在a函数的外部对b进行访问。相关知识点： js作用域链执行原理： 1、首先在预编译全局代码时，生成GO 　　GO { 　　　　a: function a() {...}, 　　　　b: undefined 　　} 2、执行 var b = a(); 此时对a函数进行预编译并创建a 函数的AO 　　AO { 　　　　v: undefined, 　　　　a: undefined, 　　　　b: function b() {...} 　　} 3、创建a函数的作用域链　　a.[[Scopes]] = [AO, GO]; 4、由于函数的提升，会在a函数进行预编译的时候创建b函数的AO 　　b AO {} 　　b.[[Scopes]] = [AO(b), AO(a), GO] 5、执行 var v

订阅 js代码