js随笔小记

来源:互联网 发布:战舰世界b系闪电数据 编辑:程序博客网 时间:2024/05/10 11:27
一、IE右浮动换行的解决
1、最简单的方法就是调换顺序,将需要右浮动的元素写在前面。写成这样:<h2><a href="#">更多&gt;&gt;</a>小标题</h2> 。但是我们觉得这样排列顺序的写法有违背html文档语义化的嫌疑,因此,不建议大量使用这种写法。
2、父标签使用相对定位,子元素使用绝对定位。由于IE里元素右浮动会影响到它的兄弟元素,所以为了避开有浮动,可以采用position定位,达到同样的显示效果。代码这里从略。


3.浮动一左一右,元素块清晰区分开。<h2><span>小标题</span><a href="#">更多&gt;&gt;</a></h2> 这里对 h2 span{float:left;} 对h2 a{float:right;}。如果是新闻列表<li><a href="#">新闻标题一</a> <span>2012-05-03</span></li>则css可以定义为ul li a{float:left;},ul li span{float:right;}。
二、select 的设置高度问题
select 在火狐、谷歌、 IE10中可以设置style="height:100px;"但在ie7中部行。
[注:line-height的设定对select标签在各浏览器中也是无效的]
三、float时应设置高度,否则float找不到参照物
四、省略号的css样式  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
五、ie下newDate  不识别"2014-05-05",格式为"2014/05/05"
六、div居中显示。需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。
七、ul  list-style-type:属性设置列表项标记的类型。
八、下面介绍全页面刷新方法:有时候可能会用到
window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象(用于框架)
opener.location.reload()刷新父窗口对象(用于单开窗口)
top.location.reload()刷新最顶端对象(用于多开窗口)
九、去掉数组中相同的项
Array.prototype.del = function(info) {   
       var a = {}, c = [], l = this.length;   
       for (var i = 0; i < l; i++) {   
           var b = this[i]; 
             var d = (typeof b) + b; 
           if (a[d] === undefined) {  
               c.push(b);   
               a[d] = 1;   
           }
       }
       return c;   
   } 
十、查找两个数组中相同的项
var arr1=["1","2","3"];
var arr2=[1,"f","g",3];
var arr3=[];
for(var s in arr1){
    for(var x in arr2){
        if(arr1[s]==arr2[x]){
            arr3.push(arr1[s]);
        }
    }
}
alert("相同的元素有"+arr3);
十一、/* 检查数组是否存在的公共函数,可以移植到PUBLIC做为公用*/
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e) {
   var r = new RegExp(this.S + e + this.S);
   return (r.test(this.S + this.join(this.S) + this.S));
};
var arr = new Array(1, 3, 5, 6);//预设一个没有奖励的数组
for (var i = 1; i < 8; i++) {
            alert((arr.in_array(i) ? i : '')) 
        }
十二、
3.  让IE兼容forEach方法
既然IE的Array 没哟forEach方法, 我们就给它手动添加这个原型方法。
[javascript] view plaincopy
//Array.forEach implementation for IE support..  
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach  
if (!Array.prototype.forEach) {  
    Array.prototype.forEach = function(callback, thisArg) {  
        var T, k;  
        if (this == null) {  
            throw new TypeError(" this is null or not defined");  
        }  
        var O = Object(this);  
        var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
        if ({}.toString.call(callback) != "[object Function]") {  
            throw new TypeError(callback + " is not a function");  
        }  
        if (thisArg) {  
            T = thisArg;  
        }  
        k = 0;  
        while (k < len) {  
            var kValue;  
            if (k in O) {  
                kValue = O[k];  
                callback.call(T, kValue, k, O);  
            }  
            k++;  
        }  
    };  
}
十三、event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 
event对象只在事件发生的过程中才有效。 
event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 
十四、JQuery以JSON方式提交数据到服务端示例代码  
$("#btnSend").click(function() { 
$("#request-process-patent").html("正在提交数据,请勿关闭当前窗口..."); 
$.ajax({ 
type: "POST", 
url: "RequestData.ashx", 
contentType: "application/json; charset=utf-8", 
data: JSON.stringify(GetJsonData()), 
dataType: "json", 
success: function (message) { 
if (message > 0) { 
alert("请求已提交!我们会尽快与您取得联系"); 

}, 
error: function (message) { 
$("#request-process-patent").html("提交数据失败!"); 

}); 
}); 


function GetJsonData() { 
var json = { 
"classid": 2, 
"name": $("#tb_name").val(), 
"zlclass": "测试类型1,测试类型2,测试类型3", 
"pname": $("#tb_contact_people").val(), 
"tel": $("#tb_contact_phone").val() 
}; 
return json; 

十四、js trim()
//优化trim正则表达式  
var rtrim = /^[\s\u3000\uFEFF\xA0]+|[\s\u3000\uFEFF\xA0]+$/g;
console.log( "普通空格测试:" );
console.log( "'" + " 普通空格 ".replace(rtrim, "") + "'" );
console.log( "'" + " 普通空格 ".trim() + "'" );


console.log( "实体空格测试:" );
console.log( "'" + " \u00a0 实体空格 \u00a0 ".replace(rtrim, "") + "'" );
console.log( "'" + " \u00a0 实体空格 \u00a0 ".trim() + "'" );


console.log( "中文空格测试:" );
console.log( "'" + "   中文空格   \u3000".replace(rtrim, "") + "'" );
console.log( "'" + "   中文空格   \u3000".trim() + "'" );
十五、bind() delegate() live()
为什么选择.live()或.delegate()而不是.bind()
毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:
1. 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
2. 如果你运行了$('a').bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
3. 或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。
十六、时间转换  2014-05-06  -> 2014/05/06
"2014-05-06".replace(/-|\./g,"/");
0 0
原创粉丝点击