10 2013 档案
摘要：jQuery实例化对象的方法相比于普通方法优势：1、不需要出现大量的new关键字。2、可实现链式写法。3、书写更方便实例化的原因：1、实例化有利于管理程序中不同的DOM选择和处理（不同的选择产生不同的jQuery对象）2、面向过程的书写方式并不适合库级别的程序，所以它采用面向对象的写法，而面向对象的优势在于可以针对不同的需要实例化不同的对象3、实例化使对象既能拥有自己特殊的属性，又能使用公共的方法。解决的问题：1、书写方面，不必每次都new对象并赋值给局部变量。2、分类管理。（理解的不深刻。。。等再看一段时间jQuery再思考一次。）
阅读全文
摘要：var div1 = $("div"), div2 = $("div"); 1、 div1.data("key", "1"); div2.data("key", "2"); alert($.data(div1,"key")); //2 alert($.data(div2,"key")); //2 2、 $.data(div1, "key", "1"); $.data(div2, "key
阅读全文
摘要：jQuery引入数据缓存机制的原因： 1、储存更DOM节点相关的数据、事件、动画等信息 2、用一种低耦合的方式让DOM节点和数据联系起来实现原理：1、jQuery内部创建cache对象2、为需要缓存的DOM创建expando属性，该属性是DOM与cache对象联系的桥梁，其值为一个自增的变量ID，该ID保持全局唯一性。3、使用DOM的expando属性的值作为cache的键来存储数据（未完待续。。。）
阅读全文
摘要：正常面向对象的写法： var cJquery = function(){ //构造函数体 }; cJquery.prototype = { name : function(alert("chenliang");) age : function(alert(27);) } var c = new cJquery(); c.name();使用jQuery时，并不会使用new来创建jQuery对象，而是类似一个工厂，不断的根据不同的需求产出不同的jQuery对象。例如： var cJquery = function(){ new cJquery(); } 因...
阅读全文
摘要：1、for(var i=0; i<10; i++){ if(i%2){ doSomething(); }else{ doSomething(); }}2、for(var i=0; i<10; i++){ if(i&2){ doSomething(); }else{ doSomething(); }}第二种写法要比第一种写法快大约50%（取决于浏览器）
阅读全文
摘要：1、发送请求时必须使用get方法。2、服务器端设置响应报文的Expires为希望浏览器缓存的时间如果这两个条件都不满足时，也就是说无法通过浏览器缓存来缓存文件时：在js中设置一个localCache数组，将ajax返回的报文以url为键储存在localCache中。var localCache = [], url = "http://www.....";if(localCache[url]){ doSomething(localCache[url]);}else{ $.ajax({url});}
阅读全文
摘要：项目中观察到，通过ajax的形式读取信息并展现在页面的实现中，有的服务器端拼装好html传送给浏览器，有的只将数据和模板传送给浏览器的。这两种方法的优缺点比较：服务器端拼装 优点 1、拼装速度快 2、无需浏览器端对数据进行解析 3、无需浏览器端操作字符串拼装（字符串拼装是js最慢的操作之一） 缺点 1、由于拼装好的html会包含大量的数据结构方面的信息和相关的class等属性，大小要比直传数据要大很多。浏览器端拼装页面的优缺点跟服务器端相反在这两种方式的选择中需要权衡的是用户cpu的影响大还是用户带宽的影响大。
阅读全文
摘要：实现思路：1、通过js创建Image对象2、将Image对象的src设置为服务器端的api3、将需要传送给服务器端进行处理的数据以src参数的形式追加到api的后面4、每次需要发送时都执行一次前三个步骤示例：var url = "/givemesomething.php";var params = ["one=1","two=2"];(new Image()).src = url + "?" + params.join("&");优点：1、开销小2、速度快3、服务器端错误不会影响客户端缺
阅读全文
摘要：工人线程和UI线程： 现在的浏览器统一在UI线程中处理UI更新和js执行，也就是说，UI更新时js无法执行，js执行时UI无法更新。 工人线程引入一个接口，使js代码运行而不占用UI线程的时间。原生实现工人线程的浏览器: firefox3.5+,chrome3+,safari4+由于现在尚没有看到有人使用，不做深入研究。
阅读全文
摘要：当需要对数组中的每一项进行操作，但数组的length很长，或者对每一项进行操作的过程特别复杂时，就会导致页面长时间等待js执行完成。如果该处理过程满足两个条件：1、不是必须同步处理。2、不是必须按顺序处理。示例：同步的处理方法for(var i=0,len=items.length;i0){ setTimeout(arguments.callee,25); }else{ callback(items); } },25);}该方法的缺点： 每处理一个项都要间隔25ms。解决办法：var start = +new Date();do { process(tod...
阅读全文
摘要：setTimeout有两个参数，第一个是需要执行的函数，第二个是将该函数推入UI队列的时间。需要注意的两点：1、第二个参数中设置的时间，是从执行setTimeout开始计算，而不是从整个函数执行完开始计算2、推入到UI队列中该函数也不是立即执行，而是要等到队列里的其它函数执行完成之后再执行。setTimeout的用途：1、复位所有的浏览器限制，如：长运行脚本时间；调用栈。可以作为长运行脚本时间和栈溢出的跨浏览器解决方案。2、由于UI更新和js执行只能交替进行，为了不阻碍用户操作，可以通过setTimeout让出js的执行而进行UI的更新。定时器的精度：1、定时器在浏览器中并不是精确计算的，会有
阅读全文
摘要：1、总是从ID选择器开始继承2、class选择器之前使用tag3、将jQuery对象缓存起来4、使用链式操作5、使用子查询6、对直接的DOM操作进行限制7、当需要对dom进行多次操作时，使用先clone，再替换。8、事件代理，通过冒泡机制，实现事件的祖先元素触发9、消除无效查询10、有些js推迟到$(window).on("load");时执行，减轻$(document).on("ready")时的压力。
阅读全文
摘要：浏览器对js的运行时间进行了限制1、调用栈尺寸限制 目前大部分的主流浏览器的调用栈尺寸都在10000以上。超过这个尺寸就会报栈溢出的错误2、长时间脚本限制 浏览器记录一个脚本的运行时间，一旦达到这个时间就终止它，并向用户展示一个提示框。 两种方法测量脚本的运行时间： a)语句数量 IE 500万条 b)脚本的总运行时间 FF 10s，safari 5s，chrome 通用崩溃检测系统但实际当中超过100ms的脚本，就会对用户体验产生不良影响。
阅读全文
摘要：1、当页面中的图片很多时，图片的加载可能会影响一些重要数据的加载。 图片按需加载的实现思路： 1、去掉img的src属性，代替以其它自定义属性存放图片的url。 2、判断该图片是否在首屏，如果在首屏，为图片添加src属性，并将自定义属性中的图片url赋值给src。 3、当滚动滚轮时，判断图片是否进入屏幕显示区，如果进入，为图片添加src属性，并将自定义属性中的图片url赋值给src。2、非当前显示的部分，比如当用户点击之后才显示的内容，无需事先浪费性能进行相应的解析和渲染。因为用户可能不会去点击。 内容按需加载的实现思路： 1、将非当前显示的部分放入到textarea标签中，并隐藏...
阅读全文
摘要：需要了解的概念 Content-Type：用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据 MIME：MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。text/html的意思是将文件的content-type设置为text/html的形式，浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。text/plain的意思是将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。
阅读全文
摘要：1、项目中，接触到gzip。未压缩的文件和压缩后的文件的比例可能达到：3:1。所以，gzip是网络中文件高速传输的很好方法。2、一般js、css、html文件都会在后端进行gzip。当浏览器请求这些数据时，直接传回gzip之后的文件。3、后端可以通过一定的设置（具体不了解）来开启对哪些文件进行gizp。4、项目中对Content-Type为"text/javascript", "text/xml", "text/plain"的文件默认进行压缩。5、但遇到的需求是对json文件也进行压缩。 方法为：后端将需要压缩的json文件的Cont
阅读全文
摘要：Object.create方法是ES5才引入的方法，目前尚不能在开发中应用。使用方法示例：var person = { name : "chen", sayName : function(){ alert(this.name); }}1.var myPerson = Object.create(person);myPerson.sayName() //chen2.var myPerson = Object.create(person, { name:{ value : "liang" }});myPerson.sayName(); //liang
阅读全文
摘要：在别人那里看到的，兼容IE8-的console.log的实现，以前没想过。if(typeof console == "undefinde"){ this.console = {log: function(msg){alert(msg);}}}这种方法在IE8-未开启调试模式的时候同样可以输出信息。不过IE8中开启调试模式是可以在控制台输出console.log信息的，所以这种方法的必要性有待验证。
阅读全文
摘要：在项目中，经常会看到为String、Array等对象添加方法的例子，这确实方面了使用。不过却存在潜在的危险。因为在现有的ES标准中没有的方法，可能会在之后的ES标准中出现。因此，如果之后在ES标准中出现了现在定义的方法，但实现方式或效果不同的话，将会陷入混乱。有一种防守型的用户，以定义getElementByClassName为例：if（！documnet.getElementByClassName）{ document.getElementByClassName = function(classes){ }}
阅读全文
摘要：今天第一次看到closest方法，以前也从来没用过。该方法从元素本身开始往上查找，返回最近的匹配的祖先元素。1、closest查找开始于自身，parents开始于元素父级2、closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合3、closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
阅读全文
摘要：typeof可以检测的类型有：string、number、boolean、undefined。不可以用typeof检测nulltypeof也可以用来检测function，但是在IE8及跟早的浏览器中使用typeof检测DOM节点中的方法时，返回的是object。instanceof可以检测对象是哪种类型，但是不能跨frame一种跨frame检测数组的方法是：return Object.prototype.toString.caa() === “[object Array]”，该方法在ES5引入js成为原生方法。in和hasOwnProperty都可以用来检测对象时候具有某个属性或方法。区别在于
阅读全文
摘要：项目中经常会涉及到在cms中配置数据，在js中进行操作的问题。但是什么样的数据需要抽离出来，原则是什么？以下是需要抽离的数据的例子：URL需要展现给用户的字符串重复的值设置，比如显示的数量任何可能发生变更的值
阅读全文
摘要：1、 全局变量带来的问题a) 命名冲突b) 代码脆弱c) 难以测试2、 意外的全局变量a) 当为没有定义的变量赋值时，该变量为全局变量var count = 10; name = “chen”;此时的nane为全局变量b) 使用jsLint或者JSHint进行代码检查使用严格模式进行代码编写”use strict”3、 使用单全局变量a) 为window添加一个代表整个页面或者整个模块的全局变量，并将变量和函数都绑定在该对象内。b) 将上面的单全局变量拆分为多个命名空间。
阅读全文
摘要：1、 没有很好的将事件处理程序和应用逻辑程序相分离。应当将事件的处理和逻辑过程分解成两个不同的部分。2、 对事件对象的分发传递。当事件对象传入事件处理函数之后，简单的将事件对象传入了应用逻辑处理函数。这样做的坏处是：很难让别人一眼就看出逻辑处理函数中具体需要什么。Var myapp = { handleClick : function( event ){ event.preventDefault(); event.stopPropagation(); this.showPopup( event.clientX, event.clientY );},showPopup : function( x
阅读全文
摘要：UI层的松耦合主要是指html、css、js的松耦合1、 将js代码从css中分离，即不使用expression2、 将css从js中分离，尽量不要在js中直接操作css。如果需要操作，可以使用添加或删除class的方法（class在css中定义好），避免在出现bug时，定位不到出错位置3、 将js从html中抽离4、 将html从js中抽离，当遇到需要在js中使用html模板时a) 从服务器加载b) 将模板储存于客户端，即html文档当中，以无法渲染的方式存储 i. 以注释的形式 ii. 以script的形式，将script的type设置为浏览器无法解读的形式，如：type=“text/my
阅读全文
摘要：分号结尾一定要加行长度最好不超过80个字符换行：a) 运算符后换行，防止分析器自动分号加入机制误加分号b) 长度达到单行最大限制换行时，运算符后换行并加入两个层级的缩进c) 赋值时，如果需要换行，第二行之后对其到“=”空行方法之间方法中的局部变量和第一条语句之间在多行或多行注释之前方法内的逻辑片段之间变量和函数驼峰命名，尽量简短，变量名词词义，函数动词词义，如can、has、is、get、set构造函数使用大驼峰表示，即从首字母就开始大写不要用null来检测一个未初始化的变量采用对象、数组直接量的方式创建对象或数组，而尽量不要使用new操作符创建。注释：a) 注释前加空行b) 可能会被认为是错
阅读全文
摘要：很多时候我们会通过记录cookie的方式来记录用户的最后一次行为，但是对cookie的处理是在js中进行的。但通常情况下，html、css都要早于js加载完成，并且可能在js生效之前就已经渲染完成了内容。可渲染完成的内容并不一定就是cookie中所记录的需要展现的内容，就会造成从一种内容跳转到另外一种内容的状况。解决方案： 1、在该模块解析之前发送一条同步请求，请求返回之后根据js中的cookie记录进行展示。 同步请求会阻塞页面的解析 2、将该模块的内容方式textarea，等待js加载之后判断展示textarea中的内容还是重新发异步请求去加载cookie中记录的相应数据。 不会阻...
阅读全文
摘要：1、缓存的处理方法： 为请求添加定时改变的时间戳2、快速请求到非实时数据的方法 数据静态化，而不是读接口，可以节省后端处理数据的时间。3、防止不同请求错乱的方法 为每个请求添加不同的ID4、css书写清晰化，减小维护的成本。5、js需要根据规范形成特定的团队风格，减少维护成本。如果大家都用统一的规范书写代码，别人理解自己代码的成本就会降低。
阅读全文
摘要：在使用a标签做切换tab或者其他功能时，经常使用javascript:;来作为a标签的href来使用。缺点： 1、在js尚未加载的情况下，点击该a标签会弹出新窗口。 2、会使gif动画失效（没经历过） 3、会使请求禁止（没经历过）改进： 1、增加onclick属性 onclick=“return false;” 2、href传入#和任意字符，这样会被默认成锚点。并且为该a标签设置target=“_self”，解决打开新窗口的问题。
阅读全文
摘要：在项目中发现，当设置 通过设置img的width属性和height属性在img未请求回来之前为其预留位置。浏览器在渲染时会为这张图片预留出100px*100px的的位置，等待图片的加载。这种方式可以避免图片错乱的问题，同时避免因为图片而造成的页面重排。但问题是在chrome浏览器中，这种策略并没有生效。其它主流浏览器均正常。解决hack方案是：为该图片包裹一层span并设置为inline-block。但这种方式增加了代码，并且破坏了html的结构化。
阅读全文
摘要：项目中，经常会用到line-height和vertical-algin来解决垂直居中的问题，但对其原理和应用限制却很少了解。因此做了一下总结： line-height具有继承性，对inline元素、textnode节点、inline-block、block都起作用。和很多网上的描述并不一致（已验证），当设置了line-height但是没有设置高度的情况下，高度由line-height决定。 vertical-algin不具有继承性。vertical-algin的实现基本上每个浏览器都不相同，但是它的middle值得实现却基本相同，因此用来实现垂直居中是可以的。默认是baseline居中。只..
阅读全文
摘要：背景：三个inline-block元素，其中两个内容为空，另外一个包含文字，设置文字的font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。原因： 当设置了font-size之后，改变了元素排列的基线。垂直方向的默认基线是是baseline。当文字设置font-size之后，会将inline-block元素的默认基线设置为文字的base-line，从而导致排列的问题。
阅读全文
摘要：实例： aaaa 当设置font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。解决方案： 1、span{display: inline-block;height: 15px; line-height: 15px; float:left;} 2、.span1{width: 3px;background-color: #ccc; vertical-align: middle;} .span2{background-color: #ccc; font-size: 12px; vertical-align: middl...
阅读全文
摘要：在解决search-box的bug时，由于IE8-的数组处理与其它浏览器的不同，而导致报错。示例：arr=[1,3,3,];当数组的最后是一个逗号时: IE9+默认 arr=[1,3,3];也就是arr.length=3; IE8(-)默认 arr=[1,3,3,null];也就是arr.length=4;因此在处理数组逻辑时需要注意。特别是使用数组存储对象，并操作对象时，很容易报undefined错误。
阅读全文
摘要：1、编译 当创建一个正则表达式之后，浏览器会对其进行一些列的操作（检测语法、转换成一个本机代码例程（嘿嘿，不明白））。因此在重复多次使用同一个正则表达式时，最好将其赋值给一个变量，从而跳过浏览器的这一系列重复操作。2、设置起始位置 字符串的起始位置，或者由正则表达式的lastIndex属性指定的位置。3、匹配每个正则表达式的字元 扫描目标文本和正则表达式模板，当一个特定的字元匹配失败时，回到起始位置尝试其它可能的路径 4、匹配成功或者失败示例： /h(ello|appy) hippo/.test("hello there, happy hippo"); 此正则表达式匹配he
阅读全文
摘要：str += "a" + "b"在浏览器中的执行过程： 1、创建临时字符串， 2、将临时字符串设置为“ab”， 3、将临时字符串和str进行连接， 4、将结果赋值给str。str = str + "a" + "b"在浏览器中的执行过程： 1、将"a"连接到str的后面， 2、将"b"连接到str后面。 等同于： str += "a"; str += "b";第二种方法不仅减少了执行的过程，而且避免了临时字符串的产生。在性能上要比第一种提
阅读全文
摘要：我们都知道jQuery为ajax请求封装了success和error两个回调方法，其实jQuery也实现了为非ajax请求的普通方法也设计了绑定回调函数的方法。当一个方法需要等待另一个耗时很长的方法完成之后才能执行的时候，我们非常希望可以监听这个耗时的方法。示例：var wait = function(){ var deferred = $.Deferred(); //在函数内部，新建一个Deferred对象 var tasks = function(){ alert("执行完毕！"); deferred.resolve(); // 改变Deferred对象的执...
阅读全文
摘要：ajax操作的传统写法： $.ajax({ url: url, success: function(){ doWhenSuccess(); }, error: function(){ doWhenError(); } });ajax的链式写法： $.ajax(url) .done(function(){ doWhenSuccess(); }) .fail(function(){ doWhenError(); }); 该写法允许添加多个回调函数：$.ajax(url).done().fail()...
阅读全文
摘要：1、控制元素显示和隐藏的方法： 设置元素的 display； 元素不再占据文档位置； 设置元素的visibility； 元素占据文档位置； 设置元素的opacity； 元素占据文档位置；2、关于display的方法： 使用jquery的show、hide方法控制元素的显示； 为元素添加class，并设置其display； 想知道show、hide方法是怎么实现元素的显示和隐藏的。 两个方法哪个性能会更好一点？
阅读全文
摘要：fis2.0改变了加载策略之后，首屏采用css内联进html的方式，因此首屏的样式会在html加载完成之后，不需要等待css就可以完成渲染。这导致其它部分的内容显示上会很奇怪。项目中出现的问题是： 页面加载时，tab会只展示html中的内容，需要等到css获取到之后才能显示正常。解决的方案是： 先使用行内css，设置style=“visibility：disable”。 在css中通过!important设置visibility：visible，覆盖行内的css。
阅读全文
摘要：图片、文字混排： 不管图片和文字的前后位置，都要给 图片 设置 vertical-algin，而不是谁在前面给谁设置。 此方法兼容IE7+ 和其它主流浏览器。IE7-没有测。inline-block块元素、行内元素混排： 同图片和文字的混排，测试IE7+ 和其它主流浏览器。IE7-没有测。两个行内元素： 设置vertical-algin并不会使元素在父元素中居中。vertical-algin: w3c:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 但是...
阅读全文
摘要：在项目中，遇到的问题是： 四个tab发送四个不同的请求，当用户连续在不同的按钮之间来回切换时，会出现不清楚那条数据是需要展示的的问题，和当连续点击同一个按钮时，基本同时返回的数据会全都展示出来的问题。解决的方法： 需要展示哪条的问题： 记录最后一次用户点击的tab，对请求回来的数据进行判断，找出与用户最后一次点击的tab相同的那条数据展示出来。 这样做仍然存在的问题是，可能两条以上相同的请求发出，得到两条以上相同的数据，这样就会重复展示出来。 禁止发出两条相同的请求： 通过为tab请求设置不同的标记位的方法，当请求正在进行时，将标记位设置为正在请求。在用户再次点击此tab时，判断该...
阅读全文
摘要：1、经测试 IE+和其它主流浏览器均支持min-height属性，已经满足目前的需求。2、当height和min-height同时设置时，浏览器自动选择数值更大的一个（测试IE7+及其他主流浏览器）。
阅读全文
摘要：1、将设置float的元素的父元素也设置float。 缺点：很有可能不符合情况要求2、设置父元素的position为absolute，前提是父元素的父元素并没有设置position：relative。 缺点：很有可能不符合情况要求3、设置父元素的overflow为hidden。 尚不知晓，猜测是只能清除浮动带来的父元素塌陷，但无法闭合浮动（待验证）4、设置父元素的display为inline-block。 缺点：可能不符合情况要求。5、设置父元素的zoom为1。 缺点：zoom为IE私有属性6、浮动元素的下方加入额外的元素 缺点：增加额外的标签使HTML结构看起来不够简洁7、使用a...
阅读全文
摘要：兼容性：IE6、IE7不识别inline-block但可以触发块元素。其它主流浏览器均支持inline-block。解决IE6、IE7兼容性的方法：1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。2、直接设置display:inline，使用zoom:1触发layout。兼容所有浏览器的方法是：display:inline-block;*display:inline;*zoom:1;
阅读全文
摘要：outline 和 border的区别： outline不占据文档空间，border占据文档空间。 outline无法单独设置上下左右，只要设置outline，必须所有的边都设置；border可以设置任意一个方向时候有border。outline的兼容性问题： IE8一下不支持outline。由于outline不占据文档空间的特性，在很多情况下很好用。但它最大的限制就是无法单独设置某个方向的边。并且存在兼容性问题。
阅读全文
摘要：var ajaxTimeoutTest = $.ajax({ url:'',//请求的URL timeout : 1000, //超时时间设置，单位毫秒 type : 'get',//请求方式，get或post data :{},//请求所传参数，json格式 dataType:'json',//返回的数据格式 success:function(data){ //请求成功的回调函数 alert("成功"); }, complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
阅读全文
摘要：当字体大小被设置小于12px时，IE、firefox可以起作用。但chrome中仍然显示为12px大小。解决方法为：html, body {-webkit-text-size-adjust: none;}（并不好）加入该段css后，可以在chrome中设置小于12px的字体。但同时引入的问题是，在缩放页面时，不能自动缩放字体的大小。所以尽量不要吧这句css写到html和body上，而是写到需要将字体设置到12px一下的元素上。（以上方法在网上查到，但实际却并没有-webkit-text-size-adjust属性，当然也没有起作用）
阅读全文
摘要：非绝对定位情况下，一般使用margin:0 auto的方法来进行居中，但在绝对定位情况下，margin:0 auto会失效。这时，进行水平垂直居中可以如下：position:absolute;left:50%; //left设置为50%，这时是以元素的左侧进行的水平居中，所以需要设置margin-left为元素宽度的一半。top:50%;//垂直居中原理同水平居中margin-top:-100px;margin-left:-100px;width:200px;height:200px;z-index:1;
阅读全文
摘要：1、link属于html标签，而import属于css范畴。2、link可以定义其它属性，import只能引入css3、link引入的css会在页面加载时同时加载，import引入的css在页面完全加载之后才加载（？）4、link无兼容性问题，import在css2.1之后提出，低版本不支持5、使用js控制css加载时，只能用link，不能用import。
阅读全文
摘要：性能排序：1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）在编写css时，应该首先考虑使用性能好的选择器。大家一般会关心js的性能，很少去考虑css对性能的影响，为什么？因为css对性能的影响可以忽略吗？
阅读全文
摘要：如果是实现链接，a标签中必须有href属性，并且属性值是合法的url如果实现锚点，a标签中必须有name属性，当点击该标签时，会跳转到id同该标签的name值相同的元素处。
阅读全文
摘要：1、cursor:hand & cursor:pointer都是将鼠标设置为手形。2、cursor:hand存在兼容性问题，firefox并不支持该属性值。但大部分主流浏览器支持cursor:pointer。因此在设置手形鼠标时使用pointer值。
阅读全文
摘要：属性选择器1、$("div[class|='test']")可以选择 class为test的div 和 class以“test-”开头的div。2、$("div[class*='test']")可以选择class中包含“test”的所有div。3、$("div[class$='test']")可以选择class以“test”结尾的div。4、$("div[class='test']")可以选择class是“test”的div。5、$("div
阅读全文
摘要：$("someElement").on("keydown", function(event){ var key = event.which; if(key == 13){ e.preventDefault(); doSomething(); }});IE使用event对象的keyCode属性储存被按下的键。而其它浏览器使用event的which属性。jquery封装后，统一使用which属性
阅读全文
摘要：1、getOwnPropertyNames方法可以获得对象的所有属性名，并储存于一个数组当中。 keys方法只能获取可遍历的属性名并储存于数组。2、在完成notepad模块模拟的过程中使用了getOwnPropertyNames方法，在IE8中报错， 查阅资料发现getOwnPropertyNames和keys方法都属于ES5标准实现的方法，因此很多浏览器没有实现这两个方法。还无法在程序中使用。
阅读全文
摘要：当input的value被修改时，在没有失去焦点的情况下，无法触发change事件，但是可以触发propertychange事件。但是propertychange事件存在兼容性问题：IE9以下支持propertychangeIE9及以上、chrome、firefox支持input事件。因此，在判断input是否内容改变时，需要绑定propertychange和input事件$("input").on("propertychange input", function(){});
阅读全文
摘要：1、document表示的是一个文档对象，window表示的是一个窗口对象，一个窗口下可以有多个文档对象。 所以一个窗口下只有一个window.location.href，但是可能有多个document.URL、document.location.href2、window.location.href和document.location.href可以被赋值，然后跳转到其它页面，document.URL只能读不能写
阅读全文
摘要：1、str = "a" + "b" + "c";2、str = "a"; str += "b"; str += "c";3、str = ["a", "b", "c"].join("");4、str = "a"; str = str.concat("b", "c");
阅读全文
摘要：1、var num = 1;function test(){ var num = 2; eval("num = 3"); return num;}alert(test()); //3alert(num); //12、function alertTest(){ alert(1);}function test(){ function alertTest(){ alert(2); } setTimeout("alertTest()",100);}test();只有当eval被直接调用时才会在局部环境中执行，其它情况eval都是在全局环境下执行尽量不要使用eva
阅读全文
摘要：造成DOM操作性能差的原因：1、DOM操作的实现和ECMAscript的实现是两个独立的部分，之间通过接口来完成相应的DOM操作。2、实时查询文档得到HTML集合，重复执行查询操作。特别是length属性，每次读取length属性都要查询文档，得到最新的length值。3、DOM操作可能影响页面的重绘和重排版
阅读全文
摘要：1、在局部变量中缓存多次使用到的全局变量，因为全局变量在作用域链中的最后一环。 function test(){ var doc = window.document; }2、尽量少的使用嵌套对象，使用局部变量缓存对此访问的对象成员，尽量减少.号。3、尽量不要使用with操作符4、局部变量的访问速度要远快于数组和对象，在数据的存储过程中，尽量使用局部变量。5、一定要使用局部变量缓存DOM集合中length的值6、将改变css的操作合并在一起执行（多次执行可能造成页面的多次重绘和重排）7、查询布局信息如偏移量、元素位置等信息时，浏览器会刷新队列别执行所有的修改操作以获取最新的数值，所以要...
阅读全文
摘要：当函数运行是，创建一个[[scope]]指向的被称为作用域链的可变对象集合，作用域链的最前端是一个包含所有的局部变量、参数、this等的被称为“激活对象”的对象。在标示符查找的过程中，从作用域的最前端开始查找，一直查找到全局环境，因此，第一个查找的就是“激活对象”。但是，如果使用with操作符，会为with中的对象临时创建一个可变对象，并推入到作用域链的最前端。也就是说，所有的局部变量被推入作用域链的第二层，从而增加了查找的代价。因此，程序中应该尽量不用with操作符。
阅读全文
摘要：1、将所有的script标签放在页面的底部，body的结束标签之前。2、将脚本打包，script标签越少，请求数就越少，加载速度加快，相应的响应时间变短。3、使用非阻塞的方式下载脚本： （1）为script标签添加defer属性，但此方法只适用于IE和firefox3.5以上 （2）动态创建script标签，用它下载并执行代码 （3）异步加载代码并注入页面
阅读全文