文档碎片,函数表达式，图片宽度问题

Written by serendipity On 五月 - 14 - 2012 0 Comment

一、今天因为要优化页面，所以复习了下文档碎片 经典插入法 for (var i = 0; i < 1000; i++) { var elem = document.createElement(‘p’); elem.innerHTML = i; document.body.appendChild(elem); } 1000个Reflow。。。伤不起。。 修改后 var cacheFrag = document.createDocumentFragment(); //重点 for (var i = 0; i < 1000; i++) { var elem = document.createElement(‘p’); elem.innerHTML = i; cacheFrag.appendChild(el);//重点 } document.body.appendChild(cacheFrag); 二、函数表达式问题 var a=function b(){}; alert(typeof b); http://www.w3help.org/zh-cn/causes/SJ9001 就是说根据 ECMA 规范中的规定，以上函数表达式中的标识符 b 将仅在该函数的内部可以被访问， 即 b 仅在该函数的作用域内有效，外部无法访问。但ie没听话。。 三、图片的宽高问题。 之前有个需求是一个裁剪图片的js，载入时会把图片改变大小。这时候如何获取到原图的地址呢？ var img=new Image() img.url=”图片地址”; 之后拿一下 img.width即可~ 另外还有问题，就是 直接获取这样的图像宽高，是获取不到的， 要把图片对象放到dom树中，并且display属性不等于none，才能取到offsetWidth和offsetHeight属性 即document.body.appendChild(img)

Read More

五月8日项目总结。。（小插件，小算法）

Written by serendipity On 五月 - 11 - 2012 0 Comment

一个月了，各种累啊。。木有人指导，只能自己研究。。。 1. jsdoc  造福后人，防止自己忘了。。 /** * @fileOverview 填充通讯录 * @author 99(Tianyi) * @version 0.1 * @description 使用AJAX返回数据填充通讯录 * @param {String} data json格式 */ 2.ajax 正确的处理ajax的方式是，在每个ajax请求前面加一个flag = true 当要发起时，检测此值。 在success中，把flag改变为false，即可避免用户心烦意乱的重复提交ajax请求~ 3.几个小东东 1.验证小插件，使用的时候new一下就行 var Validate = function(elem, type) { this.elem = elem; this.type = type; }; Validate.prototype = { valiType : { ‘isNull’ : { ‘filter’ : function (str) { var str = this.elem.value; var regu = “^[ ]+$”; var re =  [ Read More ]

Read More

循环&闭包存档

Written by serendipity On 四月 - 26 - 2012 0 Comment

<!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title></title> </head> <body> <ul> <li>11</li> <li>22</li> <li>33</li> </ul> <script type=”text/javascript”> var lis = document.getElementsByTagName(‘li’) var l = lis.length console.log(l) /* momo window.onload = function () { for (var i = 0; i < l; i++) { lis[i].index = i; lis[i].onclick = function () { alert(this.index) } } }*/ /*99 function each(a, f) { for (var i = 0; i < a.length; i++) f.call(a[i],  [ Read More ]

Read More

splice()方法ie与其他浏览器的区别

Written by serendipity On 四月 - 20 - 2012 0 Comment

splice()方法本来是用来在数组的任意位置进行添加,删除或者替换元素,直接修改数组对象的。splice()有三个参数或三个以上参数,前两个是必须的,后面参数是可选的。 添加:splice(起始项,0,添加项) 删除:splice(起始项,要删除的项个数) 替换:splice(起始项,替换个数,替换项) 这个其实是添加删除的共同结果 但是对于只有一个参数特殊的用法，firefox和IE的行为行为就不一样。 Js代码 var m=["a","b","c"]; m.splice(0); alert(m); 根据W3C的标准，firefox截去位置0以后的所有元素，而IE选择“视而不见”。因此ff中的结果是空列表，而IE中仍然是["a","b","c"]。

Read More

一串数字每三位用逗号分隔的面试题

Written by serendipity On 四月 - 19 - 2012 0 Comment

今天群里喊了个面试题：不需要正则表达式，10000231.22 如何分割为 10,000,231.22? 大体思路肯定是分割成数组，然后插入元素，然后再join.. 我的思路，从个位开始分割，肯定需要先reverse()拿到逆序的数组，之后再利用splice插入,即可 var str = ’10000231.22′ var str1 = str.split(‘.’)[0] var str2 = str.split(‘.’)[1] var arr = str1.split(”) var arr = arr.reverse(); var pos = [] for (var i = 0;i<arr.length;i++){ if((i+1)%3==0) pos.push(i)//这里是亮点~哈哈，记录下需要插入的地方 } for (var j = 0;j<pos.length;j++){ arr.splice(pos[j]+j+1,0,’,')//这里这么写是因为，插入后，数组的长度其实改变了，所以每次插入都要更改下插入点 } var arr = arr.reverse().join(”) arr = arr+’.'+str2 console.log(arr) 群里当然也给出了几个答案 var num = 5201314.55; var str = num.toString(); var num = str.split(“.”); var arr = num[0].split(“”); var  [ Read More ]

Read More

return false，each方法，console

Written by serendipity On 四月 - 16 - 2012 0 Comment

<script type=”text/javascript”> var toString = Object.prototype.toString, hasOwn = Object.prototype.hasOwnProperty; var each = function (obj, fn) { //+++++++++++答题区域+++++++++++ var hasFn = toString.call(fn) === ‘[object Function]‘, type = toString.call(obj); if (typeof obj === undefined || !hasFn) return false; if (type === ‘[object Object]‘) { for (var key in obj) { if (hasOwn.call(obj, key)) { if (!fn.call(obj[key], obj[key], key)) break; } } } else if (type === ‘[object Array]‘) { for (var i  [ Read More ]

Read More

使用jsonp及jquery的$.ajax解决跨域问题

Written by serendipity On 四月 - 15 - 2012 0 Comment

跨域是指代码获得或者更改从另一个域名下获得的文件或者信息。当执行这类操作时，一般会报“拒绝操作”，“无权限”等 一般我利用三种方法： 服务器后端处理，我直接发送把另一个域当做get/post参数过去，服务器再直接利用http请求得到返回值，输出给我，作为success iframe跨域，现在我已经不用了。。 jsonp。只是了解，最近通过项目加深了印象。 原理是页面中使用动态代码元素，代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候，就不会出现“禁止访问”的问题。 原生js的demo(参照网上)  <script type=”text/javascript”>        function showPrice(data){            alert(“Symbol:” + data.symbol + “, Price:” + data.price);        }                var url = “ticker.js”;       //Outer JS URL        var script = document.createElement(‘script’);        script.setAttribute(‘src’, url);                //load javascript        document.getElementsByTagName(‘head’)[0].appendChild(script);    </script> ticker.js中    var data = {symbol:’IBM’, price:100};    showPrice(data); 这样就可以通过执行ticker.js，得到data,而这个ticker.js，是没有啥限制的。  [ Read More ]

Read More

关于float,class,for及css(转载)

Written by serendipity On 四月 - 11 - 2012 0 Comment

转载自js8.in 1. CSS “float” 值 访问一个给定CSS 值的最基本句法是：object.style.property，使用驼峰写法来替换有连接符的值，例如，访问某个ID为”header”的<div>的 background-color值，我们使用如下句法： document.getElementById(“header”).style.backgroundColor= “#ccc”; 但由于”float“这个词是一个JavaScript保留字，因此我们不能用 object.style.float来访问，这里，我们可以在两种浏览器中这么做： 在IE中这样写： document.getElementById(“header”).style.styleFloat = “left”; 在Firefox中这样写： document.getElementById(“header”).style.cssFloat = “left”; 2. 元素的推算样式 JavaScript可以使用object.style.property句法，方便地在外部访问和修改某个CSS样式，但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的”推算”样式，我们可以使用下面的代码： 在IE中这样写： var myObject = document.getElementById(“header”); var myStyle = myObject.currentStyle.backgroundColor; 在Firefox中这样写： var myObject = document.getElementById(“header”); var myComputedStyle = document.defaultView.getComputedStyle(myObject, null); var myStyle = myComputedStyle.backgroundColor; 3. 访问元素的”class” 像”float“一样，”class“是JavaScript的一个保留字，在这两个浏览器中我们使用如下句法来访问”class”。 在IE中这样写： var myObject = document.getElementById(“header”); var myAttribute = myObject.getAttribute(“className”); 在Firefox中这样写： var myObject = document.getElementById(“header”); var myAttribute = myObject.getAttribute(“class”); This syntax would also  [ Read More ]

Read More

正则与sort的Function

Written by serendipity On 四月 - 8 - 2012 0 Comment

1.正则 需求： 文字：abc 替换后:97,98,99 ‘abc’.replace(/\w/g,function(a){return a.charCodeAt(0)+’,';}) 跟这个类似，之前看到了一个面试题，把 var arr = ['一', '二', 3, 4, '五']; 数字变成中文 我也用正则这么写： arreg = new Array(“零”, “一”, “二”, “三”, “四”, “五”, “六”, “七”, “八”, “九”); var reg = /\d/g; var arr = ['一', '二', 3, 4, '五']; var arr1 = arr.toString() for (var i = 0; i < arr1.length; i++) { document.write(arr1[i].replace(reg, function (i) { return arreg[i]; })); } 这样写一般用在把一些特定的字符替换成“某种东西”，比如编码化，比如变成汉字。。 2 sort方法的function JavaScript的数组排序函数 sort方法，默认是按照ASCII 字符顺序进行升序排列。  [ Read More ]

Read More

正则笔记

Written by serendipity On 三月 - 30 - 2012 0 Comment

今天有个需求是  [无限个字符除了中文]+[无限个字符除了中文]+[无限个字符除了中文]  于是我写了个 ^[[][^\u4e00-\u9fa5]*[]][+-*\/%][[][^\u4e00-\u9fa5]*[]][+-*\/%][[][^\u4e00-\u9fa5]*[]]$ 报错 invalid range in character class    先不说语法问题，光是这一大坨玩意就让人看着不爽啊。问了下/ka大神，于是写出了以下的东西： ^(?:\[\w*\][+-*\/%]?){3}$ 还是报错。。。但是这样写已经清晰很多了，首先解释下 ?:是不让()成为捕获组，这样性能就会提高。之后还是报错， 原因是 -在[]内是元字符，代表一个“范围”。如果单纯匹配-的话，必须使-在最前面。修改后如下： ^(?:\[[^\u4e00-\u9fa5][^\u4e00-\u9fa5]*][-+*\/%]){2}[[^\u4e00-\u9fa5][^\u4e00-\u9fa5]*]$ 解决问题。

Read More