[一篮饭特稀原创，转载请注明出处]

--Jquery Ajax 传输 特殊字符

1 Jquery $.Ajax 传输包含<>之类的html特殊字符时是无法进入请求页面的，解决方法入下：tempStr是一个"
      
       ...
"的串。  2  3   $.ajax({
     4                 type: "POST",  5                 url: "../Control/Ajax_Excel.aspx",  6                 data: {htmlStr:escape(tempStr)},  7                 success: function(data)  8                 {   9                 } 10           }); 11 public partial class Control_Ajax_Excel : System.Web.UI.Page 12 {
    13     protected void Page_Load(object sender, EventArgs e) 14     {        15         string HtmlStr = Request.Params["htmlStr"] == null ? string.Empty : Server.UrlDecode(Request.Params["htmlStr"].ToString()); 16     ... 17     } 18 19 }

--Jquery Ajax 被 缓存 导致无法进入$.ajax的url页面断点问题的研究和解决方法 

1 经过尝试，发现未设置$.ajax的type="Post"，而默认ajax的type="Get"这就导致旧数据被缓存起来，从而需要清空IE缓存后再ajax页面设置断点才能进入的原因！因此，在使用$.ajax时务必设置type="POST"  2 附上
      
       http://fengyan0124.blog.163.com/blog/static/11733439120104151238789/  3  4 1:GET访问 浏览器 认为 是等幂的  5 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]  6 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果  7 POST则 认为是一个 变动性 访问 （浏览器 认为 POST的提交 必定是 有改变的）  8 防止 GET 的 等幂 访问 就在URL后面加上 ？+new Date();，[总之就是使每次访问的URL字符串不一样的]  9 设计WEB页面的时候 也应该遵守这个原则 10 2:一.谈Ajax的Get和Post的区别 11 Get方式: 12 用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。 13 Post方式: 14 当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。 15 总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。 16 使用get方式需要注意： 17 1 对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经encodeURIComponent方法处理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent 18 (content)+"&id=1" ; 19 使用Post方式需注意： 20 1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量. 通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。例： 21 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 22 2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18，注意var name=update.php? 23 abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的; 24 3.参数在Send(参数)方法中发送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null); 25 4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"];
      

--Table2Json 和 DataTable2Json 

1 function Table2Json(tableid) {
     2  3     var txt = "[";  4     var table = document.getElementById(tableid);  5     var row = table.getElementsByTagName("tr");  6     var col = row[0].getElementsByTagName("td");  7     for(var j = 1; j < row.length; j++) {
     8         var r = "{";  9         for(var i = 0; i < col.length; i++) {
    10             var tds = row[j].getElementsByTagName("td"); 11             r += "\""+ col[i].innerHTML + "\"\:\""+ tds[i].innerHTML + "\","; 12         } 13         r = r.substring(0, r.length - 1) 14         r += "},"; 15         txt += r; 16     } 17     txt = txt.substring(0, txt.length - 1); 18     txt += "]"; 19     returntxt; 20 } 21  22 public static string DataTable2Json(DataTable dt) 23 {
    24  StringBuilder JsonString = new StringBuilder();              25  if (dt != null && dt.Rows.Count > 0) 26  {
    27   JsonString.Append("[ "); 28   for (int i = 0; i < dt.Rows.Count; i++) 29   {
    30    JsonString.Append("{ "); 31    for (int j = 0; j < dt.Columns.Count; j++) 32    {
    33     if (j < dt.Columns.Count - 1) 34     {
    35      JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\","); 36     } 37     else if (j == dt.Columns.Count - 1) 38     {
    39      JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\""); 40     } 41    } 42    if (i == dt.Rows.Count - 1) 43    {
    44     JsonString.Append("} "); 45    } 46    else 47    {
    48     JsonString.Append("}, "); 49    } 50   } 51   JsonString.Append("]"); 52   return JsonString.ToString(); 53  } 54  else 55  {
    56   return null; 57  } 58 }

--JS 双击 单元格 改变 控件 

1  //#region 单元格改变输入  2      function tabin()  3       {        4         $.each($('#tab_Single  tr:gt(0)'),function(){
     5             $(this).children().eq(8).click(function(){                6                 if($(this).find('input')!=null & $(this).children().attr("tagName")!='INPUT'){
     7                     $(this).html('');                                         8                     $(this).find('input').focus();//加上这句防止在不同单元格切换中出现移开无法复原的bug  9                 } 10             }); 11         }); 12      }      13      //#endregion 14 15 16      //#region 离开单元格 17     function tabout(obj){
    18         var reg = new RegExp("^([+-]?)\\d*\\.?\\d+$"); 19         if($(obj).attr("tagName")=='INPUT') 20         {               21             var val=$(obj).val(); 22             if(!reg.test(val)) 23             {
    24                 val=0; 25             } 26             $(obj).parent().html(val); 27         } 28      } 29      //#endregion

--JQuery2DOM DOM2JQuery 

1 1、DOM对象转jQuery对象  2 普通的Dom对象一般可以通过$()转换成jQuery对象。  3  4 如：$(document.getElementById("msg"))  5 返回的就是jQuery对象，可以使用jQuery的方法。  6  7 2、jQuery对象转DOM对象  8 由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。  9 如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 10 11 这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。 12 13 以下几种写法都是正确的： 14 $("#msg").html(); 15 $("#msg")[0].innerHTML; 16 $("#msg").eq(0)[0].innerHTML; 17 $("#msg").get(0).innerHTML;

--Json 使用 

1 $.getJSON("url，{url参数1：url参数1值，url参数2：url参数2值,...}，载入成功时执行的回调函数")  2  3 url："GISQueryControl.aspx"  4  5 data：{action:'ClickQuery',pegcode:strPegCode,ShowDiv:strDivId}  6  7 function OnClickQueryCallBack(data,textStatus)  8 {
     9 if(textStatus=="success") 10 { 11    var htmlStr ; 12    if(typeof(data)!="undefined"&&data!=null&&data.length>0) 13    {        14        htmlStr="
      
      
       "; 15        for(i=0;i
"; 18        } 19        htmlStr += "
"+data[i].PegPipCode+"
"; 20        document.getElementById("TipdivCtrl").innerHTML = htmlStr; 21    } 22 } 23 } 24 25 运行过程： 26 27 传给页面：$.getJSON 28    处理的是一个对象{XX:xx,YY:yy,ZZ:zz} 29 30 页面获取传来的对象： 31    string XX=Request[XX].ToString(); 32    string YY=Request[YY].ToString(); 33    string ZZ=Request[ZZ].ToString(); 34 35 页面处理过程： 36    处理和拼接content="....";  37 38 页面处理完结果content: 39    1.可能是一个对象(简单的数据) 40       content="{AA:aa,BB:bb,CC:cc}"; 41    2.也可能是一个数组(复杂的数据) 42       content="[{AA:aa,BB:bb},{AA:cc,BB:dd}]"; 43     Response.Write(content); 44 45 回调的时候：CallBack(data,textStatus)函数 46    1.如果是对象 47      var AA=data.AA; 48      var BB=data.BB; 49      var CC=data.CC; 50    2.如果是数组   51      var AA=""; 52      var BB=""; 53      for(i=0;i

--Jquery 常用方法

1.Window.onload 的JQuery方法 $(document).ready(function(){
    //The Code! }) 可以简写为: $(function(){
    //The Code! }) 2.添加和去除Css类 $(function(){
           $(“a.alink”).mouseover(function(){
    this.addClass(“over”); //添加样式        }).mouseout(function(){
    this.removeClass(“over”); //去除样式 }) }) 3.动态切换样式 $funciotn(){
           $(a.alink).click(function(){
                  This.toggleClass(“highline”); //动态切换,当有时去除,当没有时添加 }) } 4.给表格的偶数行添加样式 $(".mytable tr:even").addClass("tr1"); 5.在选中元素上添加内容 如: $("p ").wrap(“
      
”); 原代码:
测试
 运行后效果: 
      
       
测试
      
 6.直接获取、编辑内容 var sString = $(“p:frist”).text(); //获取第一个P标签的文本值 $(“p:last”).html(sString); //把值赋给最后一个P标签，以Html形式赋给，也就是说可以包含Html标签 7.页面元素有克隆 $(“img.eq(1)”).clone().appendTo($(“p”)); //将第一个图片克隆到所有的P标签中 8.事件的监听 $(“img”) .bind (“click”,fnMyfun1=function(){ //添加事件1        $(“#show”).append(“事件1”); //在id为show的标签中添加文本 }) .bind (“click”,fnMyfun2=function(){
    //添加事件2        $(“#show”).append(“事件2”); }) .bind (“click”,fnMyfun3=function(){
    //添加事件3        $(“#show”).append(“事件3”); }) //可以同时添加多个事件 9.移除监听的事件 $(“input(type=button)”).click(function(){
           $(“img”).unbind(“click”,” fnMyfun1”); //移除事件监听fnMyfun1 }) 10.JQuery制作动画与特效――元素的显示与隐藏效果 $(“img”).hide(); $(“img”).hide(3000); //设置渐隐的时间，单位毫秒 $(“img”).show (); $(“img”).show (3000); 还有更多特效如：fadeIn() fadeout() slideUp() slideDown()

--JS 根据 value 值 排序li 

1   2   3   4  22  23 24  25 
      
        26  
       
三
 27  
       
八
 28  
       
二
 29  
       
五
 30  
       
七
 31  
       
九
 32  
       
四
 33  
       
六
 34  
       
一
 35  
       
十
 36 
      
 37  38  39 

--JS 向服务端提交数据 

1 1.少量数据（编号之类）--- Ajax提交  2  3 
        4  5           $.ajax({
     6  7                 type: "POST",  8  9                 url: "../Control/Ajax_Excel.aspx", 10 11                 data: {htmlStr:escape(tempStr)}, 12 13                 success: function(data) 14 15                 {  16 17                 } 18 19           }); 20 21 2.大量数据（表格之类）---Form提交 22 23 
       24 25 
      
        26 27       
            
        28 29 
       30 31  50 51 
       52 53 
      
        54 55     
         
        56 57     
         
        58 59 
       60 61 
       62 63 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Excel.aspx.cs" Inherits="Control_Ajax_Excel"  EnableViewStateMac="false"  %> 
       64 65 
       66 67 68  public partial class Control_Ajax_Excel : System.Web.UI.Page 69 70 {
    71 72     protected void Page_Load(object sender, EventArgs e) 73 74     { 75 76         string HtmlStr=Request.Params["hid_tempStr"]==null?string.Empty:Server.UrlDecode(Request.Params["hid_tempStr"].ToString()); 77 78         ...... 79 80     } 81 82 }

--JS 导出 Excel 

1 tempStr是html的table，类似：
      
       ......
  2 方法一：  3  $('#btn_Excel').click(function () {
     4  5        var newWin = window.open();  6        newWin.document.write(tempStr);  7        newWin.document.close();  8        newWin.document.execCommand('saveas',true,'导出.xls');  9        newWin.window.close(); 10 11 ｝ 12        但是方法一会在过程中弹出新页面，很丑，于是我进行如下改进。在页面放一个0px的iframe即可解决。 13 方法二： 14  $('#btn_Excel').click(function () {
    15        ifra_Excel.document.body.innerHTML=tempStr;       16        ifra_Excel.document.write(tempStr);       17        ifra_Excel.document.execCommand('saveas',true,'导出.xls'); 18 19 ｝ 20 

--JS 合并制定列相同值单元格 

1 mergeRowsByColumn(document.getElementById('tabReport'),23);        // 表格ID='tabReport',需要合并的列=23列  2  3 function mergeRowsByColumn(tableObj,columnIndex)  4 {
     5  for(var i=0;i

--算术运算 计算 保留2位小数 

1  function cale() 2      {
    3         var EstimatedRatio=$('#tb_EstimatedRatio').val(); 4         var EstimatedMonney=$('#tb_EstimatedMonney').val(); 5         if(EstimatedRatio.replace(/(^\s*)|(\s*$)/g, "")=='') EstimatedRatio=0; 6         if(EstimatedMonney.replace(/(^\s*)|(\s*$)/g, "")=='') EstimatedMonney=0; 7         $('#tb_EstimatedCost').val((parseFloat(EstimatedRatio)*parseFloat(EstimatedMonney)).toFixed(2)); 8      }

--JS eval 

1 功能：把字符串解析为js可以辨认的代码  2  3 e.g.  4  5 前提：  6  7 data是一个Json: [{Key:1,TypeName:AA},{Key:2,TypeName:AA},{Key:3,TypeName:BB}]  8  9 //自定义剔除Json列col连续且重复数据 10 function getSingles(data,col) 11 {
    12     var tmp = "";    13     var arr=[]; 14     var single="data[i]."+col; 15     for(var i=0;i

--Json2Str Str2Json 

1 1、Str转Json  2 var str="[{key:1,value:1},{key:2,value:2}]";  3 state = eval(str);  4 for(i=0;i

--JS 获取鼠标位置 

1 //获取鼠标位置  2 function mousePosition(ev)  3 //#region  4 {      5     if(ev.pageX || ev.pageY)  6     {          7          return {x:ev.pageX, y:ev.pageY};  8     }      9     return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop}; 10 } 11 //#endregion 12 13 调用: 14     var ev = ev || window.event; 15     var mousePos = mousePosition(ev); 16     alert(mousePos.x+mousePos.y);

--JS 改变background

1 function changeBgImage(obj){ 2 obj.style.cssText="background:url('2.gif') no-repeat 2 3"; 3 }

--JS 字符串拼接效率

1    23    24       28   29 上面的代码分别在IE6和FireFox下执行结果如下： 30         CODE1    CODE2 31 IE6    1390    172 32 FF    4            7

--JS 控制textarea的maxLength 

1 textarea标签虽然有maxLength属性，但是它并不管用，所以只能自己控制，  2 下面的例子中我的思路是：  3 在textarea中输入内容后就判断是否超出了maxLength，如果超出就按照maxLength截取textare的值，有个问题，如果用鼠标来拷贝粘贴就没法调用判断maxLength的方法，解决办法就是当textarea获取焦点时把鼠标右键失效，失去焦点时再恢复鼠标右键  4  5 这个方法从功能上解决了textarea的maxLength问题，但还不是很完美，在输入超过maxLength的字符后光标会有闪烁，因为是截取回填，没有像input的maxLength那样真正不让输入，今天一时也想不到好办法，以后找到再补充进来。  6  7   8  9  10 11  12  33  34 35  36  41  42  43 44 

--JS DateDiff

1 function dateDiff(interval, date1, date2)  2 {
     3     var objInterval = {'D' : 1000 * 60 * 60 * 24, 'H' : 1000 * 60 * 60, 'M' : 1000 * 60, 'S' : 1000, 'T' : 1};  4     interval = interval.toUpperCase();  5     var dt1 = Date.parse(date1.replace(/-/g, '/'));  6     var dt2 = Date.parse(date2.replace(/-/g, '/'));  7     try  8     {
     9         return Math.round((dt2 - dt1) / eval('(objInterval.' + interval + ')')); 10     } 11     catch (e) 12     {
    13         return e.message; 14     } 15 }

--JS 横向滚动广告

1   2 
        3 
        4 
        5   6   7 
      
         8 
       
         11 
          12 
           13     
 14       
           
             15 
            
              16 
               17 
                18 
 34 
                
                  19 
                    20 
 21 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
                 
                  
                   
                    
                     1
                    
                   
                    
                      22 
                     
2
 23 
                    
                   
                    
                     3
                    
                   
                    
                     4
                    
                   
                    
                     5
                    
                   
                    
                     6
                    
                   
                    
                     7
                    
                   
                    
                     8
                    
                   
                    
                     9
                    
                   
                    
                     10
                    
                  
                 
                
           
 35        49     
 50 
       51 

--JS 遍历checkbox getElementsByTagName 

1  var chksStr="";  2    var inputs=document.getElementsByTagName("input");  3    var chkboxs;  4    for(var i=0;i

--JS 验证控件输入合法性

1 js部分：  2 function revMobilePhone(obj)  3 {
     4 var tt=/^\d{11}|\d{3,4}-\d{7,8}/;  5 if(!tt.exec(obj))  6 {
     7      alert("联系电话格式不正确");  8 }  9 } 10 页面部分： 11 
      
        12 
       
         13      
         14 
        15 
        16 
        17 
       
         18      
         19 
       
       20 代码部分： 21 22 protected void gvShow_RowUpdating(object sender, GridViewUpdateEventArgs e) 23 {
    24      ... 25      string mobilephone = ((HtmlInputText)(gvShow.Rows[e.RowIndex].Cells[0].FindControl("tbMobilePhone"))).Value.ToString().Trim(); 26      ... 27 }

--JS QueryString

1 function QueryString()  2 {
     3     //构造参数对象并初始化  4     var name,value,i;  5     var str=location.href;//获得浏览器地址栏URL串  6     var num=str.indexOf("?")  7     str=str.substr(num+1);//截取“?”后面的参数串  8     var arrtmp=str.split("&");//将各参数分离形成参数数组  9     for(i=0;i < arrtmp.length;i++) 10     { 11         num=arrtmp[i].indexOf("="); 12         if(num>0) 13         { 14             name=arrtmp[i].substring(0,num);//取得参数名称 15             value=arrtmp[i].substr(num+1);//取得参数值 16            this[name]=value;//定义对象属性并初始化 17        } 18     } 19 } 20 21 调用: 22 var abc = new QueryString(); 23 alert(abc.id);//id是假如参数名称中有这个变量名

--JS妙用iframe根据内容自动调节高度

1 //放在子页  2  3 var GLOB_CONST_extraHeight_IE = 4; //using default value 4 of IE  4 var GLOB_CONST_extraHeight_NOIE = 16 ; //using default value 16 of FF  5 function autosize() {
     6 try {                 7 var iframe = parent.document.getElementsByTagName('iframe');  8 var len = iframe.length;  9 if (len <= 0) {
    10    return; 11 } 12 var i; 13 if (iframe[0].contentDocument) { //for mozilla, firefox 14    for (i = 0; i < len; i ++) {
    15     if (iframe[i].contentDocument == document) {
    16      iframe[i].style.height=document.body.offsetHeight +GLOB_CONST_extraHeight_NOIE; 17      return; 18     } 19    } 20 } 21 else { // for IE 22    iframe = parent.document.frames; 23    len = iframe.length; 24    if (len <= 0) {
    25     return; 26    } 27    for (i = 0; i < len; i ++) {
    28     if (iframe[i].document == document) {
    29     iframe[i].frameElement.style.height=document.body.scrollHeight+ GLOB_CONST_extraHeight_IE; 30      return; 31     } 32    } 33 } 34 }catch(err) {
    35 alert(err.message); 36 } 37 } 38 39 //在子页的body添加onLoad="autosize()"即可

--JS图片预加载代码 显示loading

1   2   3   9  26  27  28  29 
      
 30 
 31  32  33 

--JS中substr和substring的区别

1 String.substr(N1,N2) 这个就是我们常用的从指定的位置(N1)截取指定长度(N2)的字符串; 2 String.substring(N1,N2) 这个就有点特别了，它是先从N1，N2里找出一个较小的值，然后从字符串的开始位置算起，截取较小值位置和较大值位置之间的字符串,截取出来的字符串的长度为较大值与较小值之间的差。

--判空 

1 if(typeof(obj)!="undefined"&&obj!=null) 2 {
    3      var aa=obj; 4      ... 5 }

--屏蔽右键

1  13 

--获取iframe的内容

1 document.frames['framX'].document.body.innerHTML

--JS处理中文url参数

1 window.location = encodeURI("FrmSearch.aspx?key=中文参数");

--控制CSS

1 document.getElementById('ServiceCnt').style.cssText='margin-top:15px;margin-left:15px;'

--JS过滤空格Trim

1 function trim(str) 2 {
    3      return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, ''); 4 }

--JS 文本框自动过滤空格

1 
      

--JS 非常好用的Display

1 style='display:<%Response.Write((UserType=="个人")?"inline":"none");%>'

--JS 屏蔽右键

1   13 

--window.onload的调用写法

1 function bbb() 2 {
    3     aaa(); 4 } 5 window.οnlοad=bbb;

--JS 时间

1 var now= new Date();  2 var month = now.getMonth()+1;  3 var day = now.getDate();  4 var hour = now.getHours();  5 var min = now.getMinutes();  6 if(month<10){month="0"+(now.getMonth()+1);}  7 if(day<10){day="0"+now.getDate();}  8 if(hour<10){hour="0"+now.getHours();}  9 if(min<10){min="0"+now.getMinutes();} 10 var nowTim = now.getFullYear()+"-"+month+"-"+day+" "+hour+":"+min+":00";

--JS窗口坐标