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完成电梯动画效果

阅读更多关于通过JS完成电梯动画效果

实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果用JS写了一个 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>电梯</title> <style> div.solid { border-style: solid; margin-top: 300px; width: 200px; } </style> </head> <body> <div style="height: 500px;"> <div class="solid" id='dianti'>😀 <span>当前所在楼层:</span><span id = 'diantival'></span></div> <div style="position: fixed; bottom: 300px;"> <div> <br/> <button onclick="rise()">冲！！！</button> <button onclick="full()">降！！！</button> </div> <div> <br/> <button onclick="change(1)">使电梯到1楼</button> <button onclick="change(2)">使电梯到2楼</button> <button onclick=

小程序-调用公共js对象方法/ app.js

阅读更多关于小程序-调用公共js对象方法/ app.js

在小程序中，如果在子页面想调用共公js的方法，需先在子页面js中先实例化app:具体过程如下子页面js: 1 2 3 4 5 6 7 8 //调用公共js对象以便调用其方法 var app = getApp(); //获取应用实例 // console.log(app)//可查看公共js（app.js）的方法 Page({ data: { "headtxt" :app.productshead() //调用公共appjs的方法 } }) 公共js定义的方法： 1 2 3 4 5 6 7 //app.js小程序公共入口文件 App({ // 自定义方法 productshead: function (){ return "公共js调用方法headertxt" } }) 来源： https://www.cnblogs.com/cqlb/p/9494067.html

js轮播图

阅读更多关于 js轮播图

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>原生js轮播图</title> <style type="text/css"> *{ padding: 0; margin: 0; list-style: none; border: 0; } .all{ width: 600px; height: 300px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen{ width: 600px; height: 300px; overflow: hidden; position: relative; } .screen li{ width: 600px; height: 300px; overflow: hidden; float: left; } .screen ul{ width: 3000px; position: absolute; left: 0px; top: 0px; } .all ol{ position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; }

js加密

阅读更多关于 js加密

<html> <head> <title>范例4-21</title> </head> <body> <script language="javascript">  </script> </body> </html> 来源： https://www.cnblogs.com/huodaihao/p/7309369.html

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.一致/严格相等 (===) 全等操作符比较两个值是否相等，两个被比较的值在比较前都不进行隐式转换。如果两个被比较的值具有不同的类型，这两个值是不全等的。否则，如果两个被比较的值类型相同，值也相同，并且都不是 number 类型时，两个值全等。最后，如果两个值都是 number 类型，当两个都不是 NaN，并且数值相同，或是两个值分别为 +0 和 -0 时，两个值被认为是全等的。当两个操作数都是对象时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。 2.相等（==）相等操作符比较两个值是否相等，在比较前将两个被比较的值转换为相同类型。在转换后（等式的一边或两边都可能被转换），最终的比较方式等同于全等操作符 === 的比较方式。相等操作符满足交换律。相等操作符对于不同类型的值，进行的比较如下图所示：注意字符串类型与布尔型变量比较时，会同时转换为number类型进行比较 2.不等 1.不相等 (!=) 不等操作符仅当操作数不相等时返回true，如果两操作数不是同一类型，JavaScript会尝试将其转为一个合适的类型，然后进行比较。如果两操作数为对象类型，JavaScript会比较其内部引用地址，仅当他们在内存中引用不同对象时不相等。 2.不一致/严格不相等 (!==)

订阅 js