随笔分类 - JS基础
摘要：DOM2级事件兼容处理 THIS问题 bindDOM2（）： 在IE6~8中使用attachEvent绑定事件的时候，因为不支持bind方法，所以不能用bind方法解决。 var tempFn = function () { eventFn.call(curEle); }; 通过在外层包括一个化妆函
阅读全文
摘要：DOM2级事件基础 DOM0级事件绑定：只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉 DOM2事件绑定，其实是让元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的 DOM2：DOM0中的行为类型，用DOM2一样可以绑定；而
阅读全文
摘要：事件基础 1.什么是事件 事件分为两部分： 行为本身： 浏览器天生就赋予其的行为， onclick、onmouseover（onmouseenter）、onmouseout（onmouseleave）、onmousemove、onmousedown、onmouseup、onmousewheel（鼠标
阅读全文
摘要：动画优化 匀速运动 将box匀速移动到屏幕右边界， box的右边框 边界处理问题 每次移动之前都判定，这次移动是否碰撞到边界， 如果碰撞到就将它的位置设置为边界.client - 盒子.offsetWidth； 否则移动一个步长 代码 <!DOCTYPE html> <html lang="en">
阅读全文
摘要：图片延迟加载/懒加载 作用: 保证页面打开的速度(1s之内如果首页打不开就已经算是死亡页面了) 原理: 1.对于首屏内容中的图片: 首先给对应的区域一张默认图片占着位置(默认图需要非常的小, 一般可以维持在5kb以内, 1kb是最好的), 当首屏内容都加载完成后(或者也可以给一个延迟的时间), 我在
阅读全文
摘要：JS同步与异步编程 JS是单线程的, js就是个傻子, 脑子一根筋, 做着当前的这件事情, 没有完成之前绝不会做下一件事情 JS中的两种编程思想 同步 上一件事情没有完成, 继续处理上一件事情, 只有上一件事情完成了, 才会做另一件事情(JS中大部分都是同步编程的) for(var i = 0; i
阅读全文
摘要：无缝跑马灯 把内容复制一份一模一样的放在后面 当conEnd的开头运动到外层盒子开头的时候, 让scrollLeft瞬间设置为0, 即scrollLeft的值为 conBegin的盒子宽度 代码 <!-- * @Author: lemon * @Date: 2020-09-13 18:39:32 *
阅读全文
摘要：浏览器滚动条卷去的高度(scrollTop) JS盒子模型中: client系列/ offset系列/ scrollWidth/ crollHeight, 都是只读属性, 不能通过属性修改元素的样式 scrollTop/ scrollLeft: 滚动条卷去的高度/ 宽度, 是可读写属性. 直接回到顶
阅读全文
摘要：获取元素的偏移量 获取父级节点 curEle.parentNode document.parentNode → null 父级参照物 offsetParent: 父级参照物 在同一个平面中, 最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系) 一般来说一个页面中所有的父级参照
阅读全文
摘要：CSS伪类 ::before/ after 在一个元素标签的前面或者后面, 创建一个新的虚拟的标签, 我们可以给这个虚拟的标签增加样式, 也可以增加内容等... .box p::before { display: block; height: 30px; line-height: 30px; tex
阅读全文
摘要：盒子模型 内容的宽度和高度: 我们设置的width/ height这两个样式就是内容的高和宽, 如果没有设置height, 容器的高度会根据里面内容自己进行适应, 这样获取的值就是真实的内容; 如果设置固定的高度了, 不管内容是多了还是少了, 其实我们内容的高度指的都是设定的那个值; 真实内容的宽度
阅读全文
摘要：获取元素的具体样式信息 如果我想获取某一个具体的样式属性值 元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) 真是项目中, 这种方法不常用, 因为不能为了获取值而把所有的样式都写在行内(无法实现CSS和HTML的分离) window.getCompute
阅读全文
摘要：正则 正则: 一个规则, 用来处理字符串的一个规则 处理: 处理 reg.test(str) 判断一个字符串是否复合我们的制定的规则 var reg = /\d/; console.log(reg.test("lemon22")); // true console.log(reg.test("lem
阅读全文
摘要：数据绑定及DOM回流 <html lang="zh-CN"> <head></head> <body></body> </html> 利用动态创建元素节点 利用动态创建元素节点, 并把它追加到页面中的方式实现数据绑定 for(var i =0; i < ary.length; i++){ var c
阅读全文
摘要：JSON及操作 把JSON格式的对象转化为字符串 var jsonObj = { "name": "lemon", "age": "22" } var jsonStr = JSON.stringify(jsonObj); console.log(jsonStr) 把字符串转化为JSON consol
阅读全文
摘要：类数组转换为数组 var utils = { listToArray: function (likeAry){ var ary = []; try { ary = Array.prototype.slice.call(likeAry) } catch(e) { for(var i=0; i<like
阅读全文
摘要：call和apply和bind区别 var obj = {name: 'lemon'}; function fn(num1, num2){ console.log(num1, num2); console.log(this); } fn.call(100, 200) → NaN → 100 我想让f
阅读全文
摘要：Function.call深入 var ary = [12, 23, 34] ary.slice ary这个实例通过原型链的查找机制找到Array.prototype上的slice方法 ary.slice() 让找的slice方法执行, 在执行slice方法的过程中, 才把ary数组进行了截取 Fu
阅读全文
摘要：函数的三种角色 普通函数 类 普通对象 所有函数数据类型都是Function类的一个实例 所有函数本身也是一个对象, _ protp _ 指向Function的原型 函数本身也会有一些自己的属性 length: 形参的个数 name: 函数名 prototype: 类的原型, 在原型上定义的方法都死
阅读全文
摘要：原型链模式 实例识别: 构造函数模式中拥有了类和实例的概念,并且实例和实例之间是相互独立开的 function CreateJsPerson(name, age){ this.name = name; this.age = age; } CreateJsPerson.prototype.writeJ
阅读全文
浙公网安备 33010602011771号