随笔分类 - js
摘要：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
阅读全文
摘要：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）异步加载代码并注入页面
阅读全文
摘要：在联系notepad的开发过程中，采用了localstorage，存储以对象的形式进行（后来觉得采用无顺序的对象并不合适），因此涉及到删除的操作。1、将所存储的对象的value设置为null，但这种方式仍然会保留对象的key，在使用过程中会增加额外的判断。2、delete操作符，var obj1 = {"a" : "test"}, obj2 = {}; obj2.b = obj1.a; delete obj1.a; alert(obj2.b);测试发现，delete操作符的方法会清除key，保留value。
阅读全文
摘要：{width: 150px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}1、之前在考虑如果进行字符串截断时，一直在思考如何用js来完成而忽略了css的text-overflow属性； 通过设置white-space:nowrap使字符串不换行，然后设置text-overflow:ellipsis，显示省略标记（如果不想显示省略标记，将text-overflow设为clip）；2、缺点在于只能在只显示一行时使用。3、white-space: nowrap; 强制不换行 word-wrap:break-word..
阅读全文
摘要：(1)append()&appendTo()&prepend()$prependTo()(2)after()&before()&insertAfter()&insertBefore()1、第(1)组方法插入到目标元素内部，第二组方法插入到元素外部2、append()&appendTo()插入到元素内部的最后面，prepend()&prependTo()插入到元素内部的最前面3、append()&prepend()属于目标元素调用的方法，被插入的值以参数传入，appendTo()&prependTo()属于被插入的值调用的方
阅读全文
摘要：1、var tmp = [1,3,5,3,7,10,9,-111]; biggest = Math.max.apply(null,tmp); //根源是？ alert(biggest); //10 success！但如果数组中出现undefined则会失败。出现null不会失败2、var tmp = [1,3,5,3,null,10,9,-111];var biggest; //= tmp.toString().split(",").sort().pop();for(var i=0; i 0 ? biggest : thisNum;} //成功3、尝试先sort()排序再p
阅读全文
摘要：1、$(div + p) & $(div ~ p) & $(div p) & $(div > p)$(div + p)选择紧挨在div后面的P元素$(div ~ p)选择div后面的所有同级P元素$(div p)选择div的后代元素中的所有的P元素，不仅仅是子元素$(div > p)选择div的子元素中的所有P元素2、text() & html() &val()text()获取所有选中元素中的文本的合并结果，但不能使用到input、textarea等表单元素和script标签上，如果带有参数则为所有选中的元素赋值val()主要用户获取inpu
阅读全文
摘要：原因:当定位元素的 'z-index' 未设置时（默认为 auto），设置 opacity 属性将会创建一个新的局部层叠上下文(z-index)。解决方案:1. 既然 z-index 未设置触发, 那么就在用 opacity 属性时对元素进行 position + z-index 的设置2. 既然用 opacity 会触发bug, 那么迂回一下, 避免用这个属性, 换成类似的, 比如 rgba(100,100,100, .5)相关阅读:可视化格式模型( visual formatting model )http://www.w3.org/TR/CSS21/visuren.htm
阅读全文
摘要：//为url添加时间戳//time 为多长时间改变一次时间戳,以小时为单位function setTimeStamp(url, time){ var time = time || 4, timeStamp = "timeStamp=" + Math.floor(new Date()/(time * 36e5)); return url.indexOf("?") < 0 ? (url + "?" + timeStamp) : (url + "&" + timeStamp);}
阅读全文
摘要：1、被定位（相对的，绝对的）的元素会在未定位的元素前面显示2、同一被定为父级元素的两个元素，z-index值高的显示在前面（只对被定位元素起作用）3、不同被定位父级元素的两个元素，前后顺序跟父级元素的的z-index值高低有关，父级高则高。4、opacity影响元素的先后顺序，试验确实如此：将原本显示在前面的元素的opacity值设置为小于1的数之后，该元素会显示在最后面？原因尚不清楚。例子： Red Green Blue
阅读全文
摘要：1、将字符串设置为自动折行，设置容器的宽高并设置overflow为hidden。2、先将容器的宽高设置好，同时写一个和容器同宽，但高度不固定的容器设置为visibility=hidden放在容器下方，每次向高度不固定的容易中插入一个字符，从字符串的第一个开始，当容器的高度大于想要的高度时，记下该字符在字符串中的位置并截取出来插入容器，并设置为显示（操作精细但成本太高，需要多次操作DOM）。
阅读全文