DOM

$$('*').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");