CSS和javascript+jQuery技巧小结

一、使用jQuery设置和改变CSS透明度 ：

直接使用jQuery设置CSS透明度更直观更容易实现，因为你不需要考虑浏览器的兼容性，在IE下元素是否“haslayout”

$(".dropzone .dz-default.dz-message").css({ opacity: 0.5 }); // 所有浏览器有效
您也可以使用下面的jQuery代码使一个元素动画透明： 

代码:

$(".dropzone .dz-default.dz-message").animate({ opacity: 0.5 }, 1000, function() { // 动画完成，所有浏览器下有效  });

不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“0.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

如果该元素的透明度在CSS中已经设定为“0.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

二、表格单元格宽度的设定和强制折行规定

有时候报表的字段包含文字比较多，如果使用自动布局，表格会有滚动条，对宏观查看整表的数据不是很方便。这时候改用固定布局，强制折行可以解决问题。

所有浏览器都支持 table-layout 属性。该属性有三种取值：

auto	默认。列宽度由单元格内容设定。
fixed	按照你设定的表格宽度或列宽显示数据，不受内容本身宽度影响。
inherit	规定应该从父元素继承 table-layout 属性的值。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

解决方式：CSS代码：

.table { table-layout: fixed; word-wrap: break-word;  }

三、PHP去除数组重复元素

PHP数组去除重复内置函数有array_unique和array_flip。传统使用array_unique函数的效率较低。而array_flip函数比较快，速度提高五倍以上，因为该函数是将每个数组元素的key-value值交换，然后自动覆盖重复的键，再切换回来。

所以建议使用array_flip函数去重。写法：$arr = array_flip(array_flip($arr)); //经过两次可以删除重复元素。

四、jQuery Ajax数据格式json注意事项

Jquery1.4版本以后对json格式要求更加严格，如果设定dataType为json，一定要保证json格式符合json.org网站定义的格式才能执行success回调函数，否则执行onerror异常处理函数。跨域调用时，服务端会接收到一段$_GET['callback']的字符串。你需要在服务端将这段字符串拼接在需要返回的数据的前共同返回。例如在控制器函数中最后这样输出：echo $_GET['callback'] . '(' . json_encode($data) . ')';

JSON格式的大概注意点列一下：
1）键名称：用双引号括起
2）字符串：使用双引号括起
3）数字、布尔类型：不需要使用双引号括起 

援引jQuery API 说明原文："json": Evaluates the response as JSON and returns a JavaScript object. In jQuery 1.4 the JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. (See json.org for more information on proper JSON formatting.) 

目前有许多免费的json在线验证器，如果不确定自己写的json格式是否标准，可以利用诸如JSONLint等在线校验工具，对json进行检验。一个不错的验证网站奉上：http://www.bejson.com/Go.php?u=http://www.bejson.com/index.php

如果ajax使用默认格式不强制定义json格式，则服务端echo内容不需要拼接$_GET['callback']的字符串，但是在回调函数中需要通过eval()函数将json字符串转换为js对象，这样返回的data才能以类似data.res的方式调用。eval加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为 语句（statement）来执行。举一个例子，例如对象{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结 束标记，那么{}将会被认为是执行了一句空语句。如：对json：{"sex":["man"],"address":["zjningbo"],"name":["cssrain"]} 执行eval函数： var jsObject=eval("("+json+")");得到的jsObject是({"sex":["man"],"address":["zjningbo"],"name":["cssrain"]}) 。

列出项目中的代码：

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.   
3.       
4. $(function(){  
5.     $posarea = $(".posarea");  
6.     $postit = $(".posarea .ptit span");  
7.     $(".setpos").click(function(){  
8.         var rid = $(this).parent().siblings('td').eq(0).text();  
9.         var titt = $(this).parent().siblings('td').eq(1).text();  
10.         var tname = $.trim($(this).parent().siblings('td').eq(2).text());  
11.         var typelv;  
12.         var os = $("#resos").val();  
13.         $("#resid").val(rid);  
14.         $postit.text(titt);  
15.         get_pos_data(rid,os);  
16.         if(tname == '文章'){  
17.             typelv = 1;  
18.         }else if(tname == '资源专题'){  
19.             typelv = 3;  
20.         }else if(tname == 'PK'){  
21.             typelv = 4;  
22.         }  
23.         if(typelv){  
24.             $("#restype").val(typelv);  
25.         }else{  
26.             alert("未获取到类型(a_type),请重试");  
27.         }  
28.         $posarea.fadeIn(100);  
29.     });  
30.     $(".closepos").click(function(){  
31.         $posarea.fadeOut();  
32.     });  
33.     $("#ajaxbtn").click(function(){  
34.         var rid = $("#resid").val();  
35.         var os = $("#resos").val();  
36.         var a_type = $("#restype").val();  
37.         update_pos_data(rid,os,a_type);  
38.         $posarea.fadeOut(100);  
39.     });  
40.     //查询状态信息  
41.     function get_pos_data(id,os){  
42.   
43.         var str = "";  
44.         $.ajax({  
45.             type : "post",  
46.             url : "http://pmtest.feiliu.com/?c=wansha&a=get_pos&callback=?",  
47.             //dataType : "json",  
48.             data : {"id":id, "os":os},  
49.             success : function(msg) {  
50.                 msg = eval('(' + msg + ')');  
51.                 if(msg.res === 1){  
52.                     $.each(msg.data, function(i,record){  
53.                         str += "<li class='positem' id='" +record.id + "'><input type='checkbox' ";  
54.                         if(record.status == 1){  
55.                             str += " checked='checked' ";  
56.                         }  
57.                         str += "  /><span>" + record.title + "</span></li>";  
58.                     })  
59.                     $(".poscontent ul").html(str);  
60.                 }  
61.   
62.             }     
63.         });  
64.     }  
65.     //更新状态信息  
66.     function update_pos_data(id, os, a_type){  
67.         var str = "";  
68.         var arr = [], currid, currval;  
69.         $(".poscontent ul li").each(function(i,val){  
70.             var obj = new Object();  
71.             currid = val.id;  
72.             if($(this).children("input:checkbox").attr("checked")){  
73.                 currval = 1;  
74.             }else{  
75.                 currval = 0;  
76.             }  
77.             obj['posid'] = currid;  
78.             obj['posstatus'] = currval;  
79.             arr.push(obj);  
80.         });  
81.         arr = JSON.stringify(arr);//序列化：将一个js对象或数组转换为一个包含 JSON 文本的字符串。  
82.         $.ajax({  
83.             type : "post",  
84.             url : "http://pmtest.feiliu.com/?c=wansha&a=update_pos&callback=?",  
85.             dataType : "json",  
86.             data : {"id":id, "os":os,"status":arr,"a_type":a_type},  
87.             success : function(sucmsg) {  
88.             if(sucmsg.res==1){  
89.                 alert("保存成功");  
90.                 //window.location.href="?c=wansha&a=list_article_test";  
91.             } else {  
92.                 alert("数据未更新或更新失败！");  
93.             }     
94.             }     
95.         });  
96.     }     
97.       
98. });  
99.   
100. </script>  

如果js 中将提交的数据进行了序列化（如通过JSON.stringify()），通过Ajax提交后，有时，浏览器自动转义json数据内部的双引号,加了反斜杠，这里需要接收后PHP过滤去掉，否则会影响PHP识别json格式，致使json_decode不能进行反序列化。

PHP对json格式要求比较严格，最好按照json规定标准化。

下面列出我的控制器controller文件对json的处理代码：

[php]  view plain  copy

1. public function get_pos(){  
2.     $a_id = $_POST['id'] ? $_POST['id'] : '';  
3.     $os = $_POST['os'] ? $_POST['os'] : 'android';  
4.     if($a_id && $os){  
5.         $data = array();  
6.         $data['res'] = 0;  
7.         if($os == 'android'){  
8.             $data['data'] = array(  
9.                 0 => array(    
10.                     'title' => '玩啥首页',  
11.                     'status' => 0,  
12.                     'id' => 115610000  
13.                     ),  
14.                 1 => array(    
15.                     'title' => '玩啥广告位',  
16.                     'status' => 0,  
17.                     'id' => 115610001  
18.                     ),  
19.                 2 => array(    
20.                     'title' => '游戏中心专题列表',  
21.                     'status' => 0,  
22.                     'id' => 114510002  
23.                     ),    
24.                 3 => array(    
25.                     'title' => '游戏中心文章列表',  
26.                     'status' => 0,  
27.                     'id' => 114510003  
28.                     )  
29.             );            
30.           
31.         }elseif($os == 'ios'){  
32.             $data['data'] = array(  
33.             0 => array(    
34.                 'title' => '玩啥首页',  
35.                 'status' => 0,  
36.                 'id' => 115710000  
37.                 ),  
38.             1 => array(    
39.                 'title' => '玩啥广告位',  
40.                 'status' => 0,  
41.                 'id' => 115710001  
42.                 ),  
43.             2 => array(    
44.                 'title' => '游戏中心专题列表',  
45.                 'status' => 0,  
46.                 'id' => 113310002  
47.                 ),    
48.             3 => array(    
49.                 'title' => '游戏中心文章列表',  
50.                 'status' => 0,  
51.                 'id' => 113310003  
52.                 )  
53.             );  
54.         }  
55.         if($os == 'android'){  
56.             if(mod_wansha :: selecthomepage($a_id)){  
57.                 $data['data'][0]['status'] = 1;  
58.             }  
59.             if(mod_wansha :: selectadv($a_id)){  
60.                 $data['data'][1]['status'] = 1;  
61.             }     
62.   
63.             if(mod_wansha :: select_imgp($a_id, $pid = substr($data['data'][2]['id'],0,-5))){  
64.                 $data['data'][2]['status'] = 1;  
65.             }  
66.   
67.             if(mod_wansha :: select_ap($a_id, $pid = substr($data['data'][3]['id'],0,-5))){  
68.                 $data['data'][3]['status'] = 1;  
69.             }     
70.   
71.             $data['res'] = 1;  
72.         }elseif($os == 'ios'){  
73.             if(mod_wansha :: selecthomepage1157($a_id)){  
74.                 $data['data'][0]['status'] = 1;  
75.             }  
76.             if(mod_wansha :: selectadv1157($a_id)){  
77.                 $data['data'][1]['status'] = 1;  
78.             }     
79.             if(mod_wansha :: select_imgp($a_id, $pid = substr($data['data'][2]['id'],0,-5))){  
80.                 $data['data'][2]['status'] = 1;  
81.             }  
82.   
83.             if(mod_wansha :: select_ap($a_id, $pid = substr($data['data'][3]['id'],0,-5))){  
84.                 $data['data'][3]['status'] = 1;  
85.             }  
86.             $data['res'] = 1;  
87.         }  
88.   
89.     }  
90.     //echo $_GET['callback'] . '(' . json_encode($data) . ')';  
91.     echo json_encode($data);  
92. }  
93.   
94.   
95. public function update_pos(){  
96.     $a_id = $_POST['id'] ? $_POST['id'] : '';  
97.     $os = $_POST['os'] ? $_POST['os'] : 'android';  
98.     $a_type = $_GET['a_type'] ? $_GET['a_type'] : 0;  
99.     $newdata['a_id'] = $a_id;  
100.     $newdata['adv_type'] = $a_type;  
101.     $newdata['adv_a_id'] = $a_id;  
102.     $newdata['adv_isexists'] = 0;  
103.     $newdata['adv_sort'] = 0;  
104.     $newdata['ap_sort'] = 0;  
105.     $newdata['ip_sort'] = 0;  
106.     if($a_id){  
107.         $data = array();  
108.         $flag = array();  
109.         $data['data'] = array();  
110.         if($_POST['status']){  
111.             $str = $_POST['status'];  
112.             //为标准化，可给int型/布尔型正则匹配加上双引号  
113.             //$tmpstr = preg_replace('/:(\w+)/is', ':"$1"', $str);  
114.             //浏览器自动转义内部的双引号,加了反斜杠，这里需要PHP过滤去掉，否则会影响PHP识别json格式，json_decode不能进行反序列化。  
115.             $tmpstr = preg_replace('/\\\/', '', $str);  
116.             $tmpstr = trim($tmpstr);    //去除字符串首尾处的空白字符（或者其他字符）  
117.             $data['data'] = json_decode($tmpstr);  
118.             //debug($data['data']);  
119.         }  
120.           
121.         for($i = 0, $len = count($data['data']); $i < $len; $i++){  
122.             $optionid = substr($data["data"][$i]->posid,-5,5);  
123.             $productid = substr($data['data'][$i]->posid,0,-5);  
124.             $statuscode = $data['data'][$i]->posstatus;  
125.             switch($optionid){  
126.                 case 10000:  
127.                     if($productid == 1156 && $statuscode == 1 && $os == 'android' && !mod_wansha :: selecthomepage($a_id) ){  
128.                         $ret = mod_wansha :: insert_homepage($newdata);  
129.                         $flag[$i] = 1;  
130.                     }elseif($productid == 1157 && $statuscode == 1 && $os == 'ios' && !mod_wansha :: selecthomepage1157($a_id)){  
131.                         $ret = mod_wansha :: insert_homepage1157($newdata);  
132.                         $flag[$i] = 1;  
133.                     }  
134.                     break;  
135.                 case 10001:  
136.                     if($productid == 1156 && $statuscode == 1 && $os == 'android' && !mod_wansha :: selectadv($a_id) ){  
137.                         $ret = mod_wansha :: insert_adv($newdata);  
138.                         $flag[$i] = 1;  
139.                     }elseif($productid == 1157 && $statuscode == 1 && $os == 'ios' && !mod_wansha :: selectadv1157($a_id)){  
140.                         $ret = mod_wansha :: insert_adv1157($newdata);  
141.                         $flag[$i] = 1;  
142.                     }  
143.                     break;  
144.                 case 10002:  
145.                     if(!mod_wansha :: select_imgp($a_id,$productid) && $statuscode == 1){  
146.                         mod_wansha :: insert_imgp($newdata,$productid);  
147.                         $flag[$i] = 1;  
148.                     }  
149.                 case 10003:  
150.                     if(!mod_wansha :: select_ap($a_id,$productid) && $statuscode == 1){  
151.                         mod_wansha :: insert_ap($newdata,$productid);  
152.                         $flag[$i] = 1;  
153.                     }  
154.                       
155.                       
156.             }  
157.         }  
158.         if(in_array(1,$flag)){  
159.             $data['res'] = 1;  
160.         }  
161.           
162.     }  
163.     /*跨域调用的时候，服务端会接收到一段$_GET['callback']的字符串，你需要在服务端将这段字符串拼接在需要返回的数据的前面共同返回*/  
164.     echo $_GET['callback'] . '(' . json_encode($data) . ')';  
165. }  

五、html中表单input元素size属性与maxlength的区别

设定文本框的宽度（size）和最大输入文本长度（maxlength）的关系

size的值小于maxlength的值时，当内容超过输入窗口的长度时会自动滚动；

反之，size的值大于maxlength的值，超过maxlength长度的内容无法输入。

设定文本框的宽度（size）对该文本框的输入限制没有作用，它只是在网页上显示了改文本框 的长度

最大输入文本长度（maxlength）则可以完全的限制输入长度，超过后就不会显示输入的字符

当然，如果再CSS style中定义了input文本框的宽度像素，CSS宽度的优先级要高一些，size的效果在此就不起作用了。

六、Oracle中NULL和空字符串

空值没有大小，自然不能进行大于、小于、等于运算。而只能进行is null，is not null的判定。在Oracle中，0长度字符串等同于null，不能直接用等号判断，要用is null判断

七、 文章中富文本内容，移动端对图片进行处理，最好用CSS百分比限制宽度。

项目中，是将pc端的程序移植到了移动段，给安卓客户端程序webView调用。结果安卓程序取文章内容高度怎么都取不到准确的高度，下边总是多出一块空白。后来发现是由于一段图片处理的js造成的。由于图片加载处理完之前，WebView已经发出了取高度请求，此时取到的当然就不准确了。鉴于此，将js处理去掉，改为CSS控制，将内容区域图片都限定为百分比，即可解决webview取不到准确高度的问题。当然了，这样只是适用于移动端，如果pc端和移动端都通用此解决方案的话，PC端图片显示是要失真的，放大的比例太大，用户体验就会下降。

文章来源-http://blog.csdn.net/freshlover/article/details/9097131?locationNum=9&fps=1