$$('*').forEach(a=>{a.style.outline='1px solid red'}) // 控制台输入,查看布局小技巧
obg.hasOwnProperty('name') // true来自实例 false来自原型
btn.addEventListener('click', function aa(){}, false) // 处理事件名, 事件处理函数, 布尔值, true为捕获阶段调用事件函数, false为冒泡阶段调用事件处理函数
btn.removeEventListener('click', function aa(){}, false) // 移除事件
解决事件冒泡
bubbles // 表明事件是否冒泡 返回布尔值
event.stopPropagation() // 立即停止在DOM事件中的传播,即取消进一步的事件捕获冒泡,前提bubble为true
IE中解决 event.cancelBubble = true // 解决事件冒泡
var evt = evt || window.event; //获取event对象 if (evt.preventDefault) { evt.preventDefault(); //非IE浏览器 } else { evt.returnValue = false; //在早期的IE版本中 }event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //阻止事件冒泡
阻止默认事件
cancelable // 表明是否可以取消时间默认行为 返回 布尔值
event.preventDefault() // 阻止事件的默认行为,前提cancelable为true
IE中解决 event.returnVale= false // 解决默认事件
DOM
window. onresize = function(){} //浏览器改变大小触发
document.documentElement.scrollTop || scrollLeft //滚动条距离顶部 || 左侧距离
window. onclick = function(event){ event.pageX + event.pageY } //算上滚动条坐标位置
window. onclick = function(event){ event.clientX + event.clientY } //客户区(可视区)坐标位置
window. onclick = function(event){ event.screenX + event.screenY } //相对整个屏幕坐标位置
var p = document.createElement("p"); //创建元素
element.insertAdjacentHTML(position,text);
'beforebegin' 元素自身前面
'afterbegin' 插入元素内部的第一个字节点之前
'beforeend' 插入元素内部的最后一个子节点之后
'afterend' 元素自身的后面
body.appendChild(p); //它用于添加新元素到尾部
body.insertBefore(p1, p); //p1添加到了p之前
parent.removeChild(child); // 移除元素
element.remove(); //直接删除元素
child.parentNode.removeChild(child); //删除当前元素
parent.replaceChild(newChild, child); //替换元素
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go() 这个方法来实现向前，后退,刷新的功能。
var a = confirm("sometext"); //确认框返回 true， 如果点击 "取消", 确认框返回 false。
var a = prompt("sometext","defaultvalue"); // 提示框返回值为输入的值。如果用户点击取消，那么返回值为 null。
弹窗使用(\n) 来设置换行。alert("Hello\nHow are you?");
nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点
window.open(winUrl, "titleName " , '' width='300px,height=300px' ") <==> 打开新窗口
面向对象编程
class Father{ constructor(name,age){ this.name = name;this.age = age; this.init(); } init(){ } }; var son = new Father(); // constructor接收形参
function Father( name,age ){ this.name = name; this.age = age; }
原型对象的prototype.constructor <==> 指向是谁的构造函数
①构造函数有原型对象prototype
②构造函数原型对象prototype里面有constructor指向构造函数本身
③构造函数可以通过原型对象添加方法
④构造函数创建的实例对象有__proto__原型指向 构造函数的原型对象
类本质其实还是一个函数 我们也可以简单的认为 累就是 构造函数的另外一种写法( 构造函数另一种写法,es5的面向对象语法糖 )
①类有原型对象 prototype
②类原型对象 prototype 里面有constructor 指向类本身
③类可以通过原型对象添加方法
canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
找到 <canvas> 元素: var c=document.getElementById("myCanvas");
创建 context 对象： var ctx=c.getContext("2d");
网友评论