随笔分类 - js
摘要：键盘事件知识点：1、如果用户按键事件足够长，在keyup事件触发之前，会触发多次keydown事件2、通过keyCode（charCode firefox）指定按下的是哪个键，采用unicode编码，全是大写。3、altKey、ctrlKey、metaKey、shiftKey。当按下时为true，否则为false4、3级DOM并没有标准化keyCode，而是定义了新属性key，因此如果考虑后续符合规范，需要同时考虑使用key属性。key和keyCode的区别是，key不是unicode编码，而是直接的字符。
阅读全文
摘要：鼠标事件对象几个重要的属性：clientX 窗口坐标，加上垂直滚动可以得到文档纵坐标clientY 窗口坐标，加上水平滚动可以得到文档横坐标altKey boolean值，点击时是否按下了alt键ctrlKey boolean值，点击时是否按下了ctrl键metaKey boolean值，点击时是否按下了meta键shiftKey boolean值，点击时是否按下了shift键button 点击时按下的是鼠标的哪个键（不同浏览器的赋值不同，不易使用）收录拖动文档元素的js/*** 拖动绝对定位的HTML元素* 该方法依赖之前收集的getScrollOffset方法*/function drag
阅读全文
摘要：onload触发时机：文档和所有的图片都加载完毕DOMContentLoaded触发时机：文档加载并解析完毕，所有deferred脚本执行完毕。但此时图片和async脚本可能依旧在加载。readystatechange触发时机： document.readyState属性包含多个状态，当值为“complete”时表明文档加载并执行完毕。将事件绑定到DOMReady上的方法封装： var whenReady = ( function(){ var funcs = []; var ready = false; function handler( e ){ ...
阅读全文
摘要：add 代表addEventListener， att代表attachEvent（IE8-）1、add接受三个参数，att接受两个参数（根本原因是IE不支持事件捕获）2、add的第一个参数（事件类型），不需要前缀"on"，att需要3、add不支持相同的事件处理程序注册多次，不管注册几次，都只执行一次。att支持同一个事件处理程序绑定并执行多次4、add的事件对象（event）通过参数传给事件处理程序，att需要到window.event中获取5、add的this指向事件目标，att的this指向全局window
阅读全文
摘要：1、表单事件：submit事件reset事件click事件change事件focus事件（不冒泡） （IE和ES5支持冒泡的focusin）blur事件（不冒泡） （IE和ES5支持冒泡的focusout）input事件（ES5 textinput提供更方便的获取输入文字的方案）2、Window事件load事件DOMContentLoaded事件readyStatechage事件unload事件 beforeunload事件resize事件scroll事件3、鼠标事件click事件dbclick事件mouseover事件（冒泡）mouseout事件（冒泡）mousedown事件mouseup事
阅读全文
摘要：阅读了《javascript权威指南》P396-P409。一、表单和表单元素的选取1、选取表单（包含name=“address”属性的form表单） document.querySelectorAll( form[name="address"] ) // ES5标准接口。低版本浏览器未实现 window.address // 不可靠，不要使用 document.address document.forms.address // 常用 document.form[n] // n为表单的序号。不实用2、选取表单的元素（上述表单的第一个元素，有name=“street”属性） d
阅读全文
摘要：判断元素尺寸和位置的方法：elem.getBoundingClientRect() // 已验证IE7+、firefox、chrome均支持此方法该方法返回一个对象（坐标值为视口坐标，不是文档坐标）：{ left : 16,(左上角X轴坐标) // IE7返回值有差异 right : 16,(右下角X轴坐标)// IE7返回值有差异 top : 16,(左上角Y轴坐标)// IE7返回值有差异 bottom : 16,(右下角Y轴坐标)// IE7返回值有差异 width : 16,(元素宽度) // IE8及其以下版本无此属性 height : 16(元素高度)// IE8及其以...
阅读全文
摘要：各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的API，以下是对其封装，解决兼容性问题/*** 获取浏览器视口的大小（显示文档的部分）* */function getViewPortSize(){ // 除IE8及更早的版本以外的浏览器 if( window.innerWidth != null ){ return { w : window.innerWidth, h : window.innerHeight } } // 标准模式下的IE if( document.compatMode == "css1Compat" ){ return { w : docume
阅读全文
摘要：insertAdjacentHTML是IE浏览器提供向DOM中插入html字符串的方法，字符串会自动生成在DOM树中。其调用方式为elem.insertAdjacentHTML( position, htmlStr )elem 向哪个DOM的标签出插入字符串position 有四个选项 "beforeBegin" "afterEnd" "afterBegin" "beforeEnd"分别指在elem的开始标签之前、结束标签之后、开始标签之后、结束标签之前插入htmlStrhtmlStr 字符串（不是DOM元素）以下
阅读全文
摘要：客户端js的时间线：1、web浏览器创建Document对象，开始解析html和文本、生成Element对象和Text节点添加到文档中。这个阶段的document.readystate=="loading"2、当遇到没有async和defer的script标签时，停止文档的解析，开始请求并执行js3、当遇到有async或defer时，会先下载js，但不执行，等到文档解析完毕之后才执行4、当文档解析完成时，document.readyState=="interactive"5、开始执行defer或async的脚本6、浏览器在Document对象上触发DOM
阅读全文
摘要：js的同步、异步和延迟1、默认情况下，js是同步和阻塞DOM解析的。在解析DOM的过程中，当遇到script时，会暂停DOM解析，开始请求script并执行js，执行完成之后再接着解析DOM树。2、之前一直不知道DOMReady是在什么时候，也从来没在书上看到对这个时间点的解释。现在感觉，DOMReady是解析完body的结束标签之后。所以所有的js的应该绑定在body标签之前。否则其中的DOMReady所触发的回调可能无法执行。3、想要js不阻塞DOM解析的方法有： 将js写在body的结束标签之前，其它所有的html之后 为script添加defer和async属性。添加了这两个属性是..
阅读全文
摘要：Element对象有以下重要属性：1、style。 a)Element的css样式 b) 可以通过elem.style.backgroundColor = "red"的形式才动态的修改css样式2、className。 elem.className = "highlight"; // 修改elem的classHTML文档中嵌入js的四种方法：1、内联，js内容放到script标签中间2、由scirpt标签的src属性引入 // 最常用的方式，也是最推荐的一种3、通过html的onclick、onmouseover这样的属性指定// 取消元素的默认行为时常
阅读全文
摘要：通过这几天对Sizzle源码的阅读，发现想要读懂Sizzle，需要良好的原生js基础。否则基本没有可能了解其中的很多处理的含义。基于对业务是否有帮助的考虑，想要放弃Sizzle的阅读，开始阅读jQuery UI的源码。但通过阅读发现，jQuery UI的源码是在jQuery的基础上进行的。很多功能都是需要基于jQuery代码来扩展的。所以如果jQuery源码没有理解好，就去阅读jQuery UI的源码的话，将会事倍功半。因此，通过这几天的考虑，还是决定从基础的基础开始入手：补充原生js的知识。学习计划：两个月内了解原生js所提供的api。1、准备资料。两天（原生js书籍）1、基础部分。由于业务
阅读全文
摘要：在Sizzle的入口方法Sizzle()中看到的一个根据浏览器来初始化document各个方法的函数setDocument()，接下来主要看一下这个方法都做了什么。但之前有必要看一下它用到的一些Sizzle内部使用的方法：// 通过创建一个div元素，检测被传入的fn是否被当前浏览器支持function assert( fn ) { var div = document.createElement("div"); //此处用try-catch的原因是：被传入的fn很有可能是会报错的。因为fn中用的方法或属性很可能不被当前浏览器所支持。 try { // 尝试执行被传入的方.
阅读全文
摘要：自己开始尝试读Sizzle源码。1、Sizzle同过自执行函数的方式为自己创建了一个独立的作用域，它可以不依赖于jQuery的大环境而独立存在。因此它可以被应用到其它js库中。实现如下：(function(window, undefined){})(window, undefined);2、Sizzle中最头疼的就是一大片的复杂正则表达式： // 为正则准备的字符串。匹配选择器中的布尔值，例如 $( "input:checked" ); booleans = "checked|selected|async|autofocus|autoplay|controls|d
阅读全文
摘要：今天还是主要看别人对Sizzle的分析。1、Sizzle拿到css选择器，通过tokenize方法，将选择器转化成一个数组，数组内部使用下面格式的对象存储分解后的选择器 { "type" : "CLASS", "value" : ".red", "matchs" : " " }2、开始从右向左，也就是从第一步生成的数组的最后开始扫描。由于性能的需要，Sizzle优先使用浏览器自带的api： getElementById，getElementsByName，getElement
阅读全文
摘要：1、浏览器对css选择器采取逆向（从右向左）解析的原因： 如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。找到所有的em之后，再通过查找他的父元素是不是p来进行过滤。2、Sizzle如果分解用户传入的css选择器字符串以”div > d
阅读全文
摘要：通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks，发现jQuery在属性操作方面并没有做过多的设计，只是处理一下兼容性问题，然后调用基础的DOM操作方法。以下是对JQuery提供的基础方法的阅读：jQuery.fn.extend({ // 调用access方法进行参数整理之后调用$.attr方法 attr: function( name, value ) { return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 ); }, // 遍历jQuery对象中的所有元素，
阅读全文
摘要：在阅读attr、remove方法时，看到一些对浏览器兼容性做处理的hooks。接下来看一下这些hooks都做了哪些兼容性处理1、attrHooks。主要处理IE6-9 input的type属性无法写入的问题。 attrHooks: { type: { set: function( elem, value ) { // 如果value是radio，并且elem是input if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "in.
阅读全文
摘要：挂载到$上的几个属性操作方法分析，发现属性操作用到了sizzle封装的方法attr: function( elem, name, value ) { var hooks, ret, nType = elem.nodeType; // 如果elem不存在，或者是文本节点、注释或者是属性节点，直接返回。 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } // 当不支持getAtrribute方法时（估计是处理浏览器兼容问题） if ( typeof elem.getAttribute ==...
阅读全文