小管打天下的博客

一、innerHTML（1）注意事项（2）实体字符转换pre标签可以把实体字符转换成标签（3）执行过程（4）安全问题HTML5和现代的新的浏览器都会阻止这种通过innerHTML嵌入script脚本的程序执行在dom节点的基础上去追加html字符串，会破坏原来的dom节点的引用，但是追加了以后再重新获取节点就不会被破坏插入纯文本的时候，就不要使用innerHTML（5）优化方案这样就只是把一个字符串放进了一个dom节点里，这个节点是在内存里面的，并没有在document文档

一、从事件冒泡到事件代理机制（1）在ul里面动态生成50个li，并且给li添加删除功能，考虑性能1、生成50个li方法一： 创建元素缺点：要多创建一个文档碎片方法二： 字符串方法三：模板2、删除功能（2）事件代理定义： 借用父级来进行代理，通过父级的事件源对象找到当前点击的元素，然后进行判断，通过冒泡触发相应的程序作用： 用来解决多次重复的绑定事件处理函数（3）冒泡行为点击内部元素的同时它会向父级元素传递，并触发事件处理函数（4）事件对象和事件源对象（事件代理背心）（

一、开发贪吃蛇游戏（1）贪吃蛇游戏二、备注

一、键盘事件（1）keydown & keyup定义： 按下按键和抬起按键执行顺序： keydown > keypress > keyupkeydown和keypress的区别：1、keydown没有charCode2、keypress按住可以一直触发3、keypress可以区分字母大小写document.onkeypress = function (e) { var str = String.fromCharCode(e.charCode); conso

一、电商网站商品图片放大镜效果二、备注（1）为什么这里在mouseover里面写mousemoveaddEvent(oImgWrap, 'mouseover', function (e) { addEvent(document, 'mousemove', mouseMove);})因为因为要鼠标进去了再触发鼠标移动事件（2）为什么会一跳一跳的？因为mouseover只会触发一次，所以等你离开了小盒子进入大盒子会再次触发触发过程：1、鼠标进入大盒子触发一次，显示小盒子2、鼠标出现

二、备注（1）模块化要点1、立即执行函数有返回值的就执行，没有返回值的就不执行（因为你return了变量才接收的到）① 没有返回值window.onload = function () { init();}function init() { initMenu();}var initMenu = (function () { return function () { console.log(1) }})();② 没有返回值window.onload =

一、鼠标行为预测技术（1）判断点是否在一个三角形内思路： 判断P点是否存在ABC构成的三角形内，如果在那就是斜着滑的，如果不在就是竖着滑的（2）用户预测tab栏切换点击查看源代码（3）总结鼠标移入主菜单绑定mousemove事件，鼠标移出时解绑，主要用于记录鼠标轨迹上的点，取其2~3个点存入一个数组，倒数第一个点是鼠标所在的点，倒数第二个点是三角形的顶点，倒数的目的就是准确的找到鼠标最后的一个位置拿到四个点以后用pointInTriangle函数来判断点P是否处在三角形内，如果在就返回t

一、鼠标的滑入滑出（1）mouseover & mouseout定义： 绑定的父元素及其所有的子元素都生效特点： 存在冒泡行为（取消冒泡）（2）mouseenter & mouseleave定义： 哪个元素被绑定就对哪个元素生效特点： 不存在冒泡，只是鼠标放入或离开就会触发，而触发的顺序就是从外到内二、鼠标移入移出案例（1）鼠标移入移出案例点击查看源代码（2）备注1、函数内部取到document：;(function (doc) {})(document);/

一、输入及状态改变事件二、京东搜索框

一、鼠标事件深入（1）模块的两种写法等待执行的模块var dragNclick = (function (a, b) { console.log(a, b);})dragNclick(1, 2)立即执行的模块init();function init() { dragNclick;}var dragNclick = (function (a, b) { console.log(a, b);})(1, 2);（2）模块拖动案例业务需求：点击的时候跳

一、鼠标行为坐标系（1）e.clientX/Y鼠标相对于当前可视区域的坐标（不包括滚动条的距离）（2）e.x/y（老版FF不支持）同clientX/Y相同（3）e.pageX/Y（IE9以下不支持）鼠标位置相对于当前文档的坐标（包含滚动条的距离）（4）e.layerX/Y（IE11以下同clientX/Y）同pageX/Y相同（5 ）e.screenX/Y鼠标位置相对于屏幕的坐标（包含工具栏，浏览器以外的距离）（6）offsetX/Y鼠标位置相对于块元素的坐标（包含边框，Safari

一、插件配置方法（1）opt对象配置; (function () { var Test = function (opt) { } Test.prototype = { } window.Test = Test;})<script type="text/javascript"> var test = new Test({ a: '1', b: '2'})</script>

一、HTML/CSS部分（1）类命名wrap、wrapper包裹一个特定的区域j-show-input在企业级开发里面有一个原则：就是能不用id就不用id，因为id在前端开发中在进行模块化重组的时候是提供给后端用，而不是给前端进行交互用的。写这个类名的目的不是为了写样式的，而是为了在后端去调取这个dom对象，所以在前面加个j或J（2）生态每一门编程语言或对应的框架、库，都涉及到一个生态的东西，就是跟这门语言相关的一些资料、信息、社区、讨论组有多少，问题、回答、解答有多少，我能在互联网上能找到

一、HTML、CSS部分（1）标签命名不能直接写用一个单词名称，而是有结构化的命名（比如：list-hd，就指list的header）（2）标签样式初始化文件命名：reset.csscommon.cssnormalize.css（3）写级联样式的目的为了更好的维护css样式代码，才会写级联样式（4）a标签和li标签如果a在列表li里边，最好占满整个li（5）两栏布局方案一：float如果浮动的盒子宽度大于了视口宽度，就会被挤下去，所以这种方法并不好方案二：li里面两个盒

一、冒泡捕获流（1）事件流描述从页面中接收事件的顺序，和冒泡捕获有关IE提出的事件冒泡流（Event Bubbling）Netscape提出的事件捕获流（Event Capturing）（2）执行顺序事件捕获阶段处于目标阶段事件冒泡阶段（3）DOM级别DOM0：onXXX = “”elem.onXXX = function(){}DOM1：没有定义事件模型DOM2：addEventListener(三个参数) => W3C规范removeEventListenerD

一、事件处理函数（1）事件处理函数的定义通过某一个事件而产生某一个效果，就叫做绑定事件处理程序/函数元素是本身就具备事件的，绑定事件不是绑定事件本身，而是绑定事件的处理函数，也叫事件的反馈事件 + 事件的反馈 = 前端交互/交互体验（前端核心）交互是用户通过某一个事件操作而得到了一个什么样的效果反馈（2）事件绑定的方法句柄绑定为某一个元素指定了一个事件句柄，某一个句柄等于一个处理函数，就是这个元素的句柄句柄：就是事件事件句柄：事件发生时要进行的操作事件源：事件作用在哪个元素身上，哪个

一、读写样式属性（1）DOM间接操作CSS要点elem.style.xxx 是可读可写的小驼峰写值是字符串复合值一定拆解赋值保留字前面加css（比如cssFloat）（2）查看CSS属性的方法方法一：元素.style返回元素可设置样式的集合所有可以设置的样式都在CSSStyleDecalaration(CSS样式声明)里面方法二：window.getComputedStyle(div, null)获取当前元素所有样式的显示值与默认值（设置了就是显示值，没设置的就是默认值），而

一、滚动距离与高度（1）查看滚动条的距离常规window.pageXOffset/pageYOffsetIE9/IE8及一下document.body.scrollLeft/scrollTopdocument.documentElement.scrollLeft/scrollTop不常见window.scrollX/scrollY二、兼容模式三、可视尺寸...

一、日期对象与计时器练习（1）原形上编程，写一个数组时钟（2）原形上编程，写一个倒计时二、数学取整方法（1）round()四舍五入，-5.5是特殊（2）ceil()向上取整（3）floor()向下取整...

一、日期对象（1）实例化日期对象返回当前日期与时间date.toString() 等于 Date()（2）获取日期1.getDate()返回当前是一个月的第几天（1~31）2.getDay()返回当前是星期几（0~6），外国人认为星期天是第一天，所以0是星期天在原形上封装中国星期的方法：3.getMonth()返回当前是第几个月（0~11）要获取月份的时候记住+14.getFullYear() & getYear()都是返回当前年份不用getYear的原

一、节点创建删除（1）creatElement()创建元素节点（2）creatTextNode()创建文本节点（3）creatComment()创建注释节点（4）appendChild()功能一： 增加子节点总是在父级元素最后一个追加，类似数组的pushdocument节点和元素节点都可以使用这个方法，因为它是存在Node.prototype上面功能二： 剪切子节点dom树中不能出现同一个引用的节点，如果同一个节点引用会先剪切再插入（5）insertBefore()插入

一、节点属性（1）节点及对应节点号元素节点 > 1属性节点 > 2文本节点 > 3注释节点 > 8doucument > 9DocumentFragment > 11（2）nodeName属性<div class="box" id="box" style="background-color:green;"> 我是文本节点 <!--我是注释节点--> <h1> 我是标题标签</h1&g

一、document对象在dom的概念里面，document是整个html文档的最上层，html是document的下一级console.log(document)结果：二、获取元素document.getElementById()在IE8及以下是不分大小写的，而且name值也能匹配上document.getElementsByClassName()IE8及以下是用不了的document.getElementsByTagName()都兼容document.getEl

一、DOM初探（1）DOM的概念DOM(Document Object Model)： 文档对象模型DOM是一个宿主对象（宿主对象：就比如寄宿在一家酒店，酒店给你提供的生活用品）（2）DOM模型模型： 是一个封装好了的有结构的一套方法，能够去处理相对应的事情dom无非就是操作html和xml，dom模型建立了一套完整的方法集合，这一套方法集合就是模型（3）DOM的作用通过浏览器提供的这一套方法表示或者操作HTML和XML（4）操作XML（5）操作内联样式CSS复合属性用小驼峰，比如