- 博客(54)
- 收藏
- 关注
RSS订阅
1原创 解决：vue-router Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current
router配置文件中 重写我是3.5版本 跳转时候引入了 promise我们看报错可以看到 缺少错误回调1.直接push/replace 时候添加回调 但是每个路由跳转的地方都要在push/replace中写回调 不如直接原型重写2.重写push/replace 如下//存储pushlet originPush=VueRouter.prototype.pushlet originReplace=VueRouter.prototype.replace//重写VueRouter.p
2022-01-24 11:03:09
982
原创 ES6 JavaScript 元素添加自定义迭代器
迭代器迭代器工作原理创建一个指针对象 指向当前数据机构起始位置第一次调用对象的next()方法 指针自动指向数据结构的第一个成员接下来不断调用 next()方法,指针一直往后移动,直到只想对后一个成员每次调用next()方法 都会返回一个包含Value 和 done 属性一个对象原理1.先查看迭代器对象属性 let sum = ['野猪', '佩奇', '身上', '纹'] for (let i of sum) { console.log(i) }consol
2021-10-13 21:00:21
337
原创 ES6 形参初始值
形参初始值形参初始值就是在函数形参地方赋值一个值##1.未定义初始值 let fn=function (a,b,c){ return a+b+c } var res=fn(10,10) //此时 传入的没有第三个值 结果就为undefined 最后的返回值就是NaN此时传入的没有第三个值 结果就为undefined 最后的返回值就是NaN2.定义初始值 let fn=function (a,b,c=10){ return a+b+c } v
2021-10-12 22:05:15
185
原创 ES6 箭头函数
箭头函数1.ES6允许使用 箭头 (=>)来定义函数//常规声明let fn=function(){函数体}//简化声明 let fn = (X, Y) => { return X + Y } let sum = fn(1, 2) console.log(sum)//此时结果是 32.箭头函数this // this是静态的 this时钟指向函数声明时所在作用域下this的值 function GRTs(){ console.log(th
2021-10-12 22:04:24
95
原创 ES6 简化对象写法
#简化对象写法1. 常规书写var eleAll={ name:'', age:'', fn:function(){ console.log('我是方法') }} eleAll.name='野猪' eleAll.age=18 console.log(eleAll)2. ES6语法书写 //ES6语法书写 let name='野猪' let fnct=function(){ console.log('我是方法1') } const school={ name
2021-10-12 22:03:42
98
原创 ES6 拼接字符串
字符串拼接声明 //1.声明 // let str =`我是字符串` // console.log(str)1.拼接一个标签序列// let str = `<ul> // <li>灰太狼</li> // <li>大灰狼</li> // <li>狮子王</li> // <li>野猪佩奇</li> // <li>小猪佩奇</li>// <
2021-10-12 22:02:35
274
原创 ES6 -解构赋值
解构赋值 ES6中按照一定模式从数组和对象中提取值 对变量进行赋值 这被称为解构赋值##数组和对象解构//此时 会按照一定模式从数组和对象中提取值 对变量进行赋值//这被称为解构赋值//1.数组解构const F4=['1','2','3','4','5','6']let [ele1, ele2, ele3, ele4, ele5,ele6] =F4console.log(ele,ele2)//结果为 1 2//2.对象解构const zhao ={ name:'
2021-10-12 22:01:37
43
原创 ES6 var let const
let与constlet : es6新增,用于声明变量,有块级作用域const: es6新增 用于声明一个只能读取的 常量(指引的地址)var 与 let 区别var//预解析console.log(sum) //输出结果为未定义var sum=10//变量覆盖var num=15var num=20console.log(num)//此时打印出来的结果是 20// 作用域function fn2(){ for(var i=0;i<10;i++){
2021-10-12 22:00:08
43
原创 JS事件冒泡与捕获 学习笔记
冒泡和捕获机制描述冒泡从目标对象往父元素依次触发父元素的绑定事件捕获从父元素往目标对象依次捕获 触发绑定事件事件冒泡捕获函数描述e.addEventListener(事件, 方法, 是否捕获或冒泡)捕获冒泡取决于true(捕获)还是false(冒泡)阻止冒泡函数描述兼容性e.stopPropagation()执行到本次冒泡不再往上冒泡IE兼容差event.cancelBubble()执行到本次冒泡
2021-09-15 20:15:09
49
原创 事件对象笔记
事件事件对象事件对象描述兼容性function(e){}此时的e就是事件对象IE不兼容 标准浏览器window.event此时event是事件对象IE兼容兼容性处理 var event=window.event|e事件对象的常见属性属性描述altKey事件发生的时候是否同时按下了Alt按键ctrlKey事件发生的时候是否同时按下了Ctrl按键clientX事件发生时 鼠标指针 离浏览器窗口左侧的距离，等价于xc
2021-09-15 20:12:45
51
原创 浏览器元素定位笔记
浏览器元素定位名称描述document.documentElement.clientWidth元素内容区宽度加上左右内边距宽度。 视图窗口document.documentElement.clientHeight元素内容区高度加上上下内边距高度。 视图窗口document.body.offsetWidth获取网页文档完整宽度document.body.offsetHeight获取网页文档的完整高度ele.offsetTop元素的上外边框至包含元素的上内
2021-09-15 20:11:31
77
原创 JS 增删留言案例
HTML部分<body> <div id="box"> <input type="text" name="" id="inpu" value="" /> <button type="button">发送</button> <ul id="leave"> </ul> </div> </body>JS部分<script type="text/javascr
2021-09-13 19:18:16
114
原创 JS 获取操作删除节点
获取节点查询节点方法名方法含义document.getElementById()根据id属性查询单个标签document.getElementsByClassName()根据class属性查询多个标签(ie8)：HTMLCollectiondocument.getElementsByName()根据name属性查询多个标签：HTMLCollectiondocument.getElementsByTagName()根据tab标签名称查询多个标签：HTMLCol
2021-09-13 19:04:05
484
原创 jquery 元素 筛选选择器
元素筛选选择器方法名方法含义.children()查找元素就近一级元素.find()查找当前元素下所有匹配元素.parent()查找当前元素上一级父元素.siblings()查找当前元素的所有同级元素.nextAll()查找当前元素之后的同辈元素.prevAll()查找当前元素之前的所有同辈元素.hasClass()检查当前元素是否含有某个类名 如果有 返回true 如果没有 返回false（“父元素>子元素”）层级选择器
2021-09-13 08:55:25
83
原创 jquery 获取元素内容
获取元素内容元素内容元素文本值元素值html()text()val()获取元素内容<div id="">1111</div>console.log($('div').html())//结果为 <span>1111</span>// 与原生JS innerHtml类似获取元素文本内容<div id="">1111</div>console.log($('div').html())//
2021-09-13 08:54:14
1959
原创 Jquery 获取元素属性值
获取属性获取内置属性获取自定义属性prop( ‘value name’,‘value’)attr(‘value name’,‘value’)jquery中内置属性只能用来获取内置 自定义只能用来获取内置内置属性$('.checkall ').prop('checked')//获取值$('.checkall ').prop('checked',true)//修改值自定义属性$('.checkall ').attr('indexx')//获取值$('.checkall
2021-09-13 08:52:48
8033
原创 JS 数组2-3 高级
every()查询数组中每个是否符合条件var arr = ['admin', 'admin', 'adminsss'] var flag = arr.every(function(value, index, array) { return (value.length >= 6 && value.length <= 10) }) console.log(flag) //返回false 因为有其中一个或多个 不满足>=6s...
2021-09-10 13:03:19
112
原创 JS 2-2数组常用的方法 学习笔记
定义数组var arr=[1,2,3]遍历数组for(var i=0;i<=all.length;i++){ console.log(all[i])}增加数组元素两种方法all.push(15)//结果 [1, 2, 3, 4, 15] "末尾添加"all.unshift(15)//结果 [15,1, 2, 3, 4] "开头添加"删除数组元素两种方法arr.pop() //末尾删除数组元素//结果 [1,2]arr.shift()//开头.
2021-09-09 20:13:51
71
原创 JS 冒泡排序
冒泡就是从小到大每次循环确定一个最大值也就是循环次数外层循环确定循环次数外部循环为什么要-1?因为判断数组长度-1次就能把最大值判断出来了内部循环为什么要同时-i并且-1?因为每次外部循环都确定了一次最大值就不用在比这个最大值 减少一次比较 -1就是因为数组是0开始比length少 1所以要-1 预防(a[10]去比a[11])var a = [35,10,15,20,1,26,80,11,0,1,25] ...
2021-09-09 19:31:45
96
原创 JS 2-3 date对象
常用的时间对象New Date() //获取当前时间getDate()//根据本地时间返回指定日期对象中的天getHours()//根据本地时间返回指定日期对象中的小时getFullYear()//根据本地时间返回指定日期中的年份GetMonth()//根据本地时间返回指定日期对象年份 (从0开始 0就是一月)GetSeconds()//根据本地时间返回秒...
2021-09-09 09:21:47
51
原创 2-1 jquery 获取元素属性
prop获取修改多个属性$('a').prop('property')//获取值$('a').prop('property','value')//设置值 //多个属性值写法$('a').prop({ property1:value, property2:value, ........})attr获取修改多个属性$('a').attr('property')//获取值$('a').attr('property','value')//设置值 //多个属性值写法...
2021-09-08 22:17:16
153
原创 JS 倒计时案例笔记
HTML部分JS部分//获取对象var year=document.querySelector('.year')var montn=document.querySelector('.month')var day=document.querySelector('.day')var ul=document.querySelector('ul')var lis=ul.querySelectorAll('li')var p=document.querySelector('p')//单击.
2021-09-08 19:14:14
64
原创 JS 1-10 Math 常用的对象
向上取整Math.ceil()向下取整Math.floor()四舍五入Math.round(5/2)返回绝对值Math.abs()返回 0 ~ 1 之间的随机数:Math.random()返回最小值Math.min()返回最大值Math.max()返回幂次值Math.pow()返回平方根Math.sqrt()...
2021-09-08 11:55:42
48
原创 JS 简单购物车全选 单选 结算案例 笔记
效果图HTML部分<div id="box"> <ul class="tab"> <li><input type="checkbox" name="" id="" value="" class="checkall" />全选</li> <li>商品</li> <li>单价</li> <li>数量</li> <li
2021-09-07 09:35:44
603
原创 JS this指向问题
全局函数 this指向window对象对象绑定的函数this指向对象本身//全局函数指向 window对象 function th(){ console.log(this) } th() var but=document.querySelectorAll('button') for(var i=0;i<but.length;i++){ but[i].addEventListener('click',function(){ this.style.ba.
2021-09-06 13:56:22
44
原创 1-10 jquery 手风琴
HTML部分 <ul> <li class="box"> <a href="#"> <img src="./img/c.png" alt="" class="big"> <img src="./img/c1.jpg" alt="" class="small"> </a> </li> <li> <a href="#"> &
2021-09-05 20:01:59
57
原创 1-9 jquery fadeTo不透明度
结构<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>JS $(function(){ $('ul li').hover(function(){ $(thi.
2021-09-05 17:27:59
65
原创 jquery 1-8 淡入淡出
HTML部分<body> <button type="button">淡出</button> <button type="button">淡入</button> <button type="button">切换</button> <div></div> </body>JS部分<script type="text/javascript"> $
2021-09-05 17:03:27
46
原创 jquery 1-7停止排队
当一个对象反复触发动画时候会不断的累计执行次数这时候就需要阻止上一次动画$('.nav>li').hover(function() { $(this).children('ul').stop().slideToggle(1000) }) })stop() 写在前面写在后面会直接停止...
2021-09-05 16:51:48
39
原创 1-6 jquery 显示 隐藏
显示$('button').eq(0).click(function() { $('#box').show(1000, function() { console.log(1) }) })隐藏$('button').eq(1).click(function() { $('#box').hide(1000, function() { console.log(2) }) })切换显示隐藏$('button'.
2021-09-05 14:32:32
58
原创 jquery 1-6 jquery 排他思想 增删类名
CSS代码 .item { display: none; } .disb{ display: block; }JS代码 $(function() { $('ul li').mouseover(function(){ var index=$(this).index() //获取下标 方便对应元素显示隐藏 // tab栏切换 排他思想 $(this).css({
2021-09-05 12:45:23
182
原创 jquery 1-5 类名 添加删除
$(function(){ $('#box').click(function(){ $(this).addClass('back') //添加类名 $(this).removeClass('back') //删除类名 $(this).toggleClass("back"); //如果有 则删除 如果无 则添加 } ) })注意:如果元素为ID添加class类时 需要考虑样式优先级手动提高...
2021-09-04 20:42:01
204
原创 jquery 1-4 CSS样式 笔记
$(function(){ $('div').click(function(){ $(this).css('width')//只写一个值时候是获取属性值 $(this).css('width','10px')//写两个时候是修改属性值 console.log($(this).css('width')) })})注意:如果属性值是数字 比如100px 直接写100也是可以的...
2021-09-04 20:15:59
57
原创 jquery和JS排他思想
<body> <button></button> <button></button> <button></button> <button></button> </body> <script type="text/javascript"> $(function() { $('button').click(function() { .
2021-09-04 16:53:51
119
原创 jquery 1-3 扩展
//获取元素 $('ul:odd').css('background', '#e3e3e3') //获取就近子元素 $('.nav').children('p') //获取父元素下所有匹配元素 $('.nav').find('p') //获取子元素的父元素 $('.navp').parent() //获取元素的兄弟元素 不判断标签 只要有同级标签就算兄弟 $('p').siblings() // console.log($...
2021-09-04 16:07:56
63
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人