qq_45264394的博客

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

vue中跳转携带参数并打开新的窗口// An highlighted blocklet 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，jquerybootstrap库，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与localhostvar 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交互：人机：行为，事件数据：前后端，ajaxajax:前后端交互的重要手段或桥梁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中标识符是区分大小写的，但...