js
教练我真的想敲代码
这个作者很懒,什么都没留下…
展开
-
122Ajax-Ajax请求限制、同源非同源、JSONP封装是【同步】可以放在html最前面判断是否登陆、ajax是【异步请求】
Ajax请求限制Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站,A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求,B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求,但是 A 网站是不能向 B 网站发送 Ajax请求的,同理,B 网站也不能向 A 网站发送 Ajax请求。同源JSONP解决同源限制<!-- 使用 JSONP 解决同源限制问题jsonp 是 json with padding 的缩写,它不属于 Ajax 请求原创 2020-08-02 14:39:55 · 358 阅读 · 0 评论 -
120Ajax-模板引擎客户端ajax请求拼接数据+template.render
模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和 HTML 拼接起来。官方地址: https://aui.github.io/art-template/zh-cn/index.html安装 npm install art-template --save (这是用在服务器端的)而在浏览器中实时编译需要下载:template-web.js(gzip: 6kb)...原创 2020-08-01 23:29:55 · 199 阅读 · 0 评论 -
116JS-文件读取显示预览图片FileReader=121
文件读取 FileReadervar reader = new FileReader();//异步方法 reader.readAsDataURL('文件'); reader.onload = function () { console.log(reader.result); }实例// 选择文件上传控件 var file = document.querySelector('#file'); var preview =document.querySelector('原创 2020-07-31 23:00:52 · 161 阅读 · 0 评论 -
115file-form表单提交二进制文件上传
enctype属性 enctype 指定表单数据的编码类型 默认是application/x-www-form-urlencoded name=zhangsan&age=22 改成二进制(涉及文件上传必须二进制) enctype="multipart/form-data"<form class="form-container" action="/admin/article-add" method="post" enctype="multipart/f原创 2020-07-31 21:48:40 · 579 阅读 · 0 评论 -
082JS-正则表达式+替换replace
Regular Expression 正则表达式 也是对象匹配字符串字符组合 1验证表单 <!-- --> <script> // 通过调用RegExp对象的构造函数创建 var regexp=new RegExp(/123/); // 利用字面量创建 正则表达式 var regexp2=/表达式/; // 测试正.原创 2020-07-26 22:45:39 · 325 阅读 · 0 评论 -
080JS-闭包
通过index索引添加获取闭包第二个小括号相当于调用立即执行函数,可以传参数i<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib原创 2020-07-26 21:31:53 · 92 阅读 · 0 评论 -
079JS-this指向=74、44
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> this的指向,是当我原创 2020-07-26 15:40:29 · 101 阅读 · 0 评论 -
078JS-ES5新增或者修改属性Object.defineProperty
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&原创 2020-07-26 15:06:35 · 139 阅读 · 0 评论 -
077JS-ES5Object.keys获取对象自身所有的属性类似for...in
Object.keys()用于获取对象自身所有的属性 Object.keys(obj); 效果类似 for.. in 返回一个由属性名组成的数组 <script> var obj = { id: 1, pname: 'dasd', price: 111 } var arr = Object.keys(obj); console..原创 2020-07-26 14:53:38 · 311 阅读 · 0 评论 -
076JS-ES5数组迭代forEach() map() filter() some() every()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> 数组迭代方法:forE原创 2020-07-26 14:43:24 · 120 阅读 · 0 评论 -
074JS-ES5继承
通过call改变this指向 // ES6之前没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承 // call() 可以调用这个函数,并且修改函数运行时this的指向 // fun.call(thisArg,arg1,arg2...) // thisArg当前调用函数this的指向对象 // arg12传递的其他参数 function fn(x,y) { console.log("苏大强");原创 2020-07-26 14:33:38 · 77 阅读 · 0 评论 -
075JS-ES6继承
<script>class Father { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } class Son extends Fathe..原创 2020-07-26 14:15:07 · 74 阅读 · 0 评论 -
073JS-利用构造函数创建对象+缺陷占内存解决方法对象原型原型对象
适用于创建多个对象时候原创 2020-07-26 13:56:17 · 252 阅读 · 0 评论 -
072-JQ-理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
转自https://www.cnblogs.com/deerfig/p/6432683.htmlevent.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。event.offs转载 2020-07-26 11:16:13 · 230 阅读 · 0 评论 -
070JQ-电梯导航!
js$(function () { // 互斥锁节流阀 var flag = true; var pos = $(".two").offset().top; toggleTool(); // 到第一个高度显示nav $(window).scroll(function () { toggleTool(); if (flag) { // 页面滚动到某个区域,对应的li添加和删除current原创 2020-07-24 20:56:52 · 124 阅读 · 0 评论 -
068JQ-拷贝对象JS\JQ\浅拷贝深拷贝+lodash
JS<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原创 2020-07-24 19:12:21 · 210 阅读 · 0 评论 -
062JS-文档完全加载完后执行函数 $(document).ready(function(){})
window.onload = function () { // 页面都加在完了在调用这个js 是当文档内容完全加载完成后会触发的事件,就调用的处理函数 !!!!!这种传统的注册方式只能有一个,如果有多个会以最后一个为准 } window.addEventListener("load",function(){}); 没有个数限制 等页面内容全部加载完包含dom图片flash css window.addEventListene原创 2020-07-24 15:40:16 · 628 阅读 · 0 评论 -
061JS-js对象与字符串相互转换JSON.stringify、JSON.parse
js对象与字符串相互转换对象转为字符串JSON.stringify(obj)json字符串转为对象JSON.parse(str)原创 2020-08-12 23:07:47 · 93 阅读 · 0 评论 -
060JS-本地存储localStorage
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-07-24 14:54:54 · 73 阅读 · 0 评论 -
059JS-本地存储sessionStorage
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-07-24 14:47:53 · 388 阅读 · 0 评论 -
057JS-轮播图插件
轮播图插件https://www.swiper.com.cn/http://www.superslide2.comhttps://github.com/cubiq/iscroll原创 2020-07-24 13:04:27 · 87 阅读 · 0 评论 -
056JS-移动端click延迟问题
解决方法1、禁止双击缩放 <meta name="viewport" content="user-scalable=no"> (不推荐)2、或者封装touch150ms内判断 这个函数一次只能解决一个元素的延迟问题(不推荐)<script src="fastclick.js"></script><script> if ('addEventListener' in document) { document.ad.原创 2020-07-24 12:58:59 · 165 阅读 · 0 评论 -
055JS-classList返回元素的类名
.classList.add(‘类名’).classList.remove(‘类名’)切换类名 .classList.toggle(‘类名’)classList 属性返回元素的类名,作为 DOMTokenList 对象。该属性用于在元素中添加,移除及切换 CSS 类。classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。...原创 2020-07-24 12:44:36 · 197 阅读 · 0 评论 -
054JS-transitionend监听过度完成的事件
transitionend 事件在 CSS 完成过渡后触发// 等待过度完成之后再去判断监听过度完成的世间transitionend ul.addEventListener('transitionend', function () {原创 2020-07-24 12:41:45 · 227 阅读 · 0 评论 -
053JS-水平垂直移动动画animate.js+animatey.js
animate// 1、让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。// 2、核心算法:(目标值-现在的位置)/10作为每次移动的距离 步长// 停止的条件是:让当前盒子位置等于目标位置停止定时器// obj动画对象和target移动到的距离 function animate(obj,target,callback){// 先清除以前的定时器,只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer=setInterval(function(){原创 2020-07-24 11:29:57 · 259 阅读 · 0 评论 -
050JS-移动端触屏事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-07-24 10:38:21 · 83 阅读 · 0 评论 -
049JS-P98offset元素偏移量+client可视区+scroll元素滚动
offsetclientelement.clientTop 返回元素上边框的大小element.clientLeft 返回元素左边框的大小element.clientWidth 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位element.clientHeight 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位scrollelement.scrollTop 返回被卷去的上侧距离返回值不带单位element.scrollLeft 返回被卷去的左侧原创 2020-07-23 18:33:22 · 85 阅读 · 0 评论 -
048JS-立即执行函数
立即执行函数 主要作用创建一个独立的作用域 不需要调用立马自己执行 (function(){})()<script> // 写法1 // (function(){})() // 或者 // (function(){}()); (function () { console.log(2); })(); (function (a, b) {原创 2020-07-23 15:33:39 · 78 阅读 · 0 评论 -
047JS-淘宝商品放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { p原创 2020-07-23 15:30:03 · 66 阅读 · 0 评论 -
046JS-拖动的模态框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-07-23 14:58:23 · 98 阅读 · 0 评论 -
045JS-location.href
可设置或返回当前显示的文档的完整 URL 用于获取或者设置窗体的url并解析url返回的是一个对象也成为location对象 location 对象属性 返回值 .href 获取或设置url .host 返回域名 .port 返回端口号 .pathname 返回路径 .search 返回参数 .hash 返回锚点 <button>点击</button> <script> var btn =原创 2020-07-23 14:06:21 · 224 阅读 · 1 评论 -
043JS-setTimeout定时器+vue移除定时器
setTimeout 只能调用一次setInterval 可以调用很多次语法window.setTimeout(调用函数,[延迟的毫秒数]); 也称为callback回调函数window可以省略 、可以直接写函数名停止计时器<script> // window.setTimeout(调用函数,[延迟的毫秒数]); 也成为callback回调函数 // window可以省略 、可以直接写函数名 function callback原创 2020-07-23 13:43:13 · 150 阅读 · 0 评论 -
042JS-鼠标键盘事件
鼠标事件禁止右键菜单+禁止选中 <script> // 禁止鼠标右键菜单 // contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单 document.addEventListener('contextmenu', function (e) { e.preventDefault(); }) // 禁止鼠标选中(selectstart开始选中) document.addEv原创 2020-07-23 13:07:56 · 137 阅读 · 0 评论 -
041JS-阻止冒泡阻止默认行为+e.target返回的触发事件的对象
div.onclick = function (e) {}//阻止默认行为连接跳转 阻止e.preventDefault()// 阻止冒泡e.stopPropagation();e.target等事件对象属性 返回的触发事件的对象e.target 可以获取到触发事件的DOM元素 后续可以.出来很多方法e.target.getAttribute(‘data-id’) 获取触发元素的自定义属性的值this 返回的绑定的对象...原创 2020-07-23 12:26:22 · 353 阅读 · 0 评论 -
040JS-监听方式注册=71
1、传统方式 都是on开头的事件,注册事件的唯一性只能设置一个处理函数 后注册的处理函数会覆盖前面的函数2、监听方式注册 特点同一个事件可以注册多个监听器function 第三天-29 // 移除 divs[1].addEventListener('click', fn) function fn() { alert(2); divs[1].removeEventListener('click', fn); } 监听方式 a原创 2020-07-23 12:05:25 · 111 阅读 · 0 评论 -
039JS-创建删除节点=67
document.createElement(‘tagName’)创建有tagname指定的html元素。因为这些元素原先不存在,是根据我们需求动态生成的,所以称为动态创建元素节点<script> // 创建节点元素节点 var li = document.createElement('li'); // 添加节点,放到哪里去 // node.appendChild(child) 将一个节点添加到指定父节点的子节点的列表末尾 var ul = docum原创 2020-07-23 10:55:41 · 88 阅读 · 0 评论 -
038JS-父子兄弟节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-07-23 10:35:17 · 134 阅读 · 0 评论 -
037JS-Tab栏切换双重for循环+排他思想
display: none;隐藏对象 【不保留位置】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge.原创 2020-07-23 10:18:38 · 381 阅读 · 0 评论 -
036JS-getAttribute、setAttribute获取设置属性值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-07-22 22:22:17 · 129 阅读 · 0 评论 -
034JS-this.className类名改样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-07-22 20:06:13 · 401 阅读 · 0 评论