qq_45264394的博客

原创 vue中跳转携带参数并打开新的窗口

vue中跳转携带参数并打开新的窗口 // An highlighted block let routeUrl = this.$router.resolve({ path:'/OrderReport', name:'OrderReport', query:{ orderNo: e.no } }) window.open(routeUrl.href, '_blank'); ...

原创 原型 构造函数 实例的关系

原创 继承实现拖拽实例

一个页面有两个元素，都有拖拽，一个有边界限定，一个没有边界限定 // 注意： // 因为利用事件监听绑定和删除事件 // 所以得有事件处理函数的名字 // 因为需要给事件处理函数加名字 // 所以要将事件处理函数单独封装 // 因为单独封装 // 所以导致事件处理函数中的this不再指向实例 // 因为时间处理函数中的this不再指向实例 /...

原创 继承-class继承

// ES6继承（class继承）混合继承 // 具有改变this指向的特性 // 原型链继承 // 常用继承方式之一 class Parent{ constructor(n){ this.num = n; } init(){ console.log(this.num) } } class Child extends Parent...

原创 继承-混合继承

混合继承： // 构造函数 // 原型对象 // 常用的继承方式之一： function Parent(n){ this.num = n; } Parent.prototype.init = function(){ console.log("hello") } function Child(n){ Parent.call(this,n) } for(v...

原创 继承-原型链继承

// 原型链继承： // 既能继承原型身上的属性和方法，又能继承构造函数中的this的属性和方法 // 不方便传参 function Parent(n){ this.num = n; } Parent.prototype.init = function(){ console.log("hello") } function Child(n){} Child.p...

原创 继承-原型继承

// 原型对象继承： // 只能继承原型身上的属性和方法，不能继承构造函数中this的属性和方法 function Parent(n){ this.num = 123; } Parent.prototype.init = function(){ console.log("hello") } function Child(n){} // 原型是不是一个对象 // 直接将原型作为一个...

原创 继承-改变this指向继承

继承： 只要某个对象使用了另一个对象具有，而自身不具有的功能，就叫继承 继承，是面向对象的三大特点。 封装，继承，多态 f.proto === Fn.prototype 原型，是父级 读取规则：当对象在找方法或属性时，自己没有，会找父级，父级也没有，继续向上找父级，直到找到顶层对象，还没有，抛出undefined；如果有一层找到了，就停止向上，同时执行；多层同时存在，就近原则。 function ...

原创 封装事件委托

// 封装事件委托 var oul = document.querySelector("ul"); var ali = document.querySelectorAll("li"); var ap = document.querySelectorAll("p"); // oul.onclick = entrust(ali); oul.addEventListener("click",entr...

原创 闭包的定义和应用

闭包 局部变量的生命周期：作用域的开始到结束，结束后，变量呢？被销毁，没了，不能使用 闭包：将局部变量进化成私有变量的环境，叫闭包 这个环境一般是作用域的嵌套 将原本要删除的变量，不删除，继续使用 计算机的垃圾回收机制：不立即删，先放在临时空间内，可以二次或继续使用 闭包的应用： 循环中的事件，获取计数器的值 var ali = document.querySelectorAll(“li”); f...

原创 storage事件的拖拽应用

实现在两个页面中的方块拖拽其中一块另一个方块的移动 一个方块移动产生的实时的定位值放到本地存储中，另一个方块获取本地存储的值，作为自己的定位 html1中： <div class="box"></div> <script> var obox=document.querySelector(".box"); //初始值 红色的最后存的位置 var ...

原创 storage事件

html1中： 本地存储的数字为随机数： document.onclick = function(){ localStorage.num = Math.random(); } html2中： 在一个浏览器中本地存储相同 检测storage的变化 // 只能检测到除了自身页面之外页面的storage变化 window.onstorage = function(eve){ // console.log...

原创 本地存储localstorage的使用

本地存储的介绍 将数据存储在本地，非内存，非服务器，存储在本地的好处，可以长时间保存，可以不用连接服务器，可以实现跨页面存储数据 localStorage：字符，5M，永久，不允许跨域（服务器，浏览器），不会随着http发给服务器，不需要在服务器环境下使用 localstory的使用： localStorage是window身上的一个子对象 console.log(window.localStor...

原创 通信协议 cookie的介绍和使用

本地存储技术 通信协议的介绍： 人类的语言语法 两个主体通信过程中所需要遵循的规则 有哪些： IP：身份证号 TCP：面向连接的协议，可靠的协议，三次握手协议 UDP：面向数据包的协议，不可靠的协议 http：超文本传输协议，网页协议，无状态协议 每次传输数据之后，会立即断开 记不住状态：登录，书签，购物车，浏览记录，查询记录 cookie：...

原创 插件 库 框架

插件： 一个完善的功能的封装。功能比较单一。 ajax插件 库： 同类功能的集合，相对于插件来说，功能比较丰富。 bootatrap，animate，swiper js常见功能公共库 框架： 提供了更加完整或丰富的项目功能，及处理方案，周边库和插件 VUE，react，angular，jquery bootstrap库，UI库，布局样式 ...

原创 百度的搜索下拉菜单数据接口

function Search(){ this.txt = document.getElementById(“txt”); this.list = document.getElementById(“list”); // 百度的搜索下拉菜单数据接口 this.url = “https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su”; // 1....

原创 eval

// eval不是专门用来解析json // 功能：将字符作为js代码执行 res = eval(res); console.log(res); // res = JSON.parse(res); }) } // var str = "1 + 1"; // console.log(eval(str)); // console.log(eval("hello")); // 在js中对象不允许直...

原创 接口的介绍 跨域其他解决方法服务器代理

接口 ：做数据传输 请求的url就是接口 接口： 自己写的： 别人给的： 能用即用，不能用就换 跨域的解决方法: <?php header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方...

原创 jsonp

jsonp的原理 jsonp可以解决跨域问题 // 浏览器阻止的ajax的跨域，但是没有阻止html标签请求外部资源的跨域 // fn(); document.onclick = function(){ var url = “http://localhost/1910-server/jsonp/data/jsonp3.php”; jsonp(url,function(res){ alert(re...

原创 跨域问题

// 要请求的资源上，没有访问控制允许源 // 所以，报错 // 当前发起请求的页面 // 要请求的资源 // 不是一个服务器标志 127.0.0.1与localhost var url = “http://127.0.0.1/1910-server/jsonp/data/data.php”; document.onclick = function(){ ajaxGet(url,function...

原创 ajax实现登陆

function Login(){ this.user = document.getElementById(“user”); this.pass = document.getElementById(“pass”); this.login = document.getElementById(“login”); this.span = document.querySelector(“span”); t...

原创 ajax的介绍，实现过程 封装函数

介绍 js交互： 人机：行为，事件 数据：前后端，ajax ajax:前后端交互的重要手段或桥梁 ajax不是一个技术，一组技术的组合 ajax：a：异步，j：js，a：和，x：服务端的数据 异步的js和服务端的数据 特点：无刷新加载页面，破坏了历史记录，网络优化（SEO） ajax的组成： 异步的js（事件） 其他js（处理解析数据） XHR（XMLHttpReques...

原创 异步同步程序介绍

// 程序中： // 同步：按顺序依次执行 //同步 按顺序 // alert(1); // alert(2); // alert(3); // 异步：同时执行 // var a = 10; // setTimeout(()=>{ // a++; // },100) // console.log(a); // 问题？单线程 var a = 10; setTimeout(()=&gt...

原创 php，mysql的介绍 php链接数据库

php编程语言，服务器编程语言（后台语言） php与js最大的区别，工作环境 php:文件结构 php的执行：服务器 浏览器没有解析php文件的功能 php文件被服务器执行之后，显示在浏览器 php的标识符 标识符：其实标识符就是变量的名称，函数与类的名称也是标识符。PHP中标识符的规则： 1.标识符可以是任意长度的字母、数字、下划线，且不得以数字开头。 2.PHP中标识符是区分大小写的，但...