JS常用

[一篮饭特稀原创，转载请注明出处http://www.cnblogs.com/wanghafan/archive/2012/02/15/2352126.html]

--Jquery Ajax 传输 特殊字符

Jquery $.Ajax 传输包含<>之类的html特殊字符时是无法进入请求页面的，解决方法入下：tempStr是一个"<table>...</table>"的串。

  $.ajax({
                type: "POST",
                url: "../Control/Ajax_Excel.aspx",
                data: {htmlStr:escape(tempStr)},
                success: function(data)
                {  
                }
          });
public partial class Control_Ajax_Excel : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {        
        string HtmlStr = Request.Params["htmlStr"] == null ? string.Empty : Server.UrlDecode(Request.Params["htmlStr"].ToString());
    ...
    }

}

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

经过尝试，发现未设置$.ajax的type="Post"，而默认ajax的type="Get"这就导致旧数据被缓存起来，从而需要清空IE缓存后再ajax页面设置断点才能进入的原因！因此，在使用$.ajax时务必设置type="POST"
附上<Jquery AJAX POST和GET区别>http://fengyan0124.blog.163.com/blog/static/11733439120104151238789/

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

--Table2Json 和 DataTable2Json 

function Table2Json(tableid) {

    var txt = "[";
    var table = document.getElementById(tableid);
    var row = table.getElementsByTagName("tr");
    var col = row[0].getElementsByTagName("td");
    for(var j = 1; j < row.length; j++) {
        var r = "{";
        for(var i = 0; i < col.length; i++) {
            var tds = row[j].getElementsByTagName("td");
            r += "\""+ col[i].innerHTML + "\"\:\""+ tds[i].innerHTML + "\",";
        }
        r = r.substring(0, r.length - 1)
        r += "},";
        txt += r;
    }
    txt = txt.substring(0, txt.length - 1);
    txt += "]";
    returntxt; 
}
 
public static string DataTable2Json(DataTable dt)
{
 StringBuilder JsonString = new StringBuilder();              
 if (dt != null && dt.Rows.Count > 0)
 {
  JsonString.Append("[ ");
  for (int i = 0; i < dt.Rows.Count; i++)
  {
   JsonString.Append("{ ");
   for (int j = 0; j < dt.Columns.Count; j++)
   {
    if (j < dt.Columns.Count - 1)
    {
     JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
    }
    else if (j == dt.Columns.Count - 1)
    {
     JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
    }
   }
   if (i == dt.Rows.Count - 1)
   {
    JsonString.Append("} ");
   }
   else
   {
    JsonString.Append("}, ");
   }
  }
  JsonString.Append("]");
  return JsonString.ToString();
 }
 else
 {
  return null;
 }
}

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

 //#region 单元格改变输入
     function tabin()
      {       
        $.each($('#tab_Single  tr:gt(0)'),function(){
            $(this).children().eq(8).click(function(){               
                if($(this).find('input')!=null & $(this).children().attr("tagName")!='INPUT'){
                    $(this).html('<input type=\'text\' value=\''+$(this).html()+'\' onfocusout=\'tabout(this);\' style=\''+($(this).width()-10)+'px;text-align:center\'/>');                                        
                    $(this).find('input').focus();//加上这句防止在不同单元格切换中出现移开无法复原的bug
                }
            }); 
        });
     }      
     //#endregion


     //#region 离开单元格
    function tabout(obj){
        var reg = new RegExp("^([+-]?)\\d*\\.?\\d+$");
        if($(obj).attr("tagName")=='INPUT')
        {               
            var val=$(obj).val();
            if(!reg.test(val)) 
            {
                val=0;
            }
            $(obj).parent().html(val);
        }
     }
     //#endregion

--JQuery2DOM DOM2JQuery 

1、DOM对象转jQuery对象 
普通的Dom对象一般可以通过$()转换成jQuery对象。 

如：$(document.getElementById("msg")) 
返回的就是jQuery对象，可以使用jQuery的方法。 

2、jQuery对象转DOM对象 
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。 
如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 

这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。 

以下几种写法都是正确的： 
$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;  

--Json 使用 

$.getJSON("url，{url参数1：url参数1值，url参数2：url参数2值,...}，载入成功时执行的回调函数")

url："GISQueryControl.aspx"

data：{action:'ClickQuery',pegcode:strPegCode,ShowDiv:strDivId}

function OnClickQueryCallBack(data,textStatus)
{
if(textStatus=="success")
{ 
   var htmlStr ; 
   if(typeof(data)!="undefined"&&data!=null&&data.length>0)
   {        
       htmlStr="<table>";
       for(i=0;i<data.length;i++)
       { 
       htmlStr+= "<tr class=\"TR_BG\"><td>"+data[i].PegPipCode+"</td></tr>";
       }
       htmlStr += "</table></div>";
       document.getElementById("TipdivCtrl").innerHTML = htmlStr;
   }
}
}

运行过程：

传给页面：$.getJSON
   处理的是一个对象{XX:xx,YY:yy,ZZ:zz}

页面获取传来的对象：
   string XX=Request[XX].ToString();
   string YY=Request[YY].ToString();
   string ZZ=Request[ZZ].ToString();

页面处理过程：
   处理和拼接content="....";  

页面处理完结果content:
   1.可能是一个对象(简单的数据)
      content="{AA:aa,BB:bb,CC:cc}";
   2.也可能是一个数组(复杂的数据)
      content="[{AA:aa,BB:bb},{AA:cc,BB:dd}]"; 
    Response.Write(content);

回调的时候：CallBack(data,textStatus)函数
   1.如果是对象
     var AA=data.AA;
     var BB=data.BB;
     var CC=data.CC;
   2.如果是数组   
     var AA="";
     var BB="";
     for(i=0;i<data.length;i++)
     {
       AA+=data[i].AA;
       BB+=data[i].BB;
     }

e.g.大坝系统Json
单桩单管：data.length=1
{ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-2)',LastDate:'2010-03-03',LastData:'5.864',BaseData:'',PipeCode:'CY-2',MPCD:'2006'}

单桩多管：data.length=2
[
{ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-1)',LastDate:'2010-03-03',LastData:'6.923',BaseData:'',PipeCode:'CY-1',MPCD:'2005'},
{ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-2)',LastDate:'2010-03-03',LastData:'5.864',BaseData:'',PipeCode:'CY-2',MPCD:'2006'}
]

多桩多管:data.length=5
[
{ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-1)',LastDate:'2010-03-03',LastData:'6.923',BaseData:'',PipeCode:'CY-1',MPCD:'2005'},
{ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-2)',LastDate:'2010-03-03',LastData:'5.864',BaseData:'',PipeCode:'CY-2',MPCD:'2006'},
{ShowDivID:'divTipContent',PegCode:'2+350',MapX:'218',MapY:'130',PegPipCode:'2+350(CY-1)',LastDate:'2010-03-03',LastData:'6.582',BaseData:'',PipeCode:'CY-1',MPCD:'2009'},
{ShowDivID:'divTipContent',PegCode:'2+350',MapX:'218',MapY:'130',PegPipCode:'2+350(CY-2)',LastDate:'2010-03-03',LastData:'5.606',BaseData:'',PipeCode:'CY-2',MPCD:'2010'},
{ShowDivID:'divTipContent',PegCode:'2+350',MapX:'218',MapY:'130',PegPipCode:'2+350(CY-3)',LastDate:'2010-03-03',LastData:'4.824',BaseData:'',PipeCode:'CY-3',MPCD:'2011'}
]

--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(“<div class=’aa’></div >”);
原代码:<p>测试</p>
运行后效果: <div class=’aa’><p>测试</p></div >
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 

<html>
<head>
<title> 根据span value的值，排序li </title>
<script type="text/javascript">
//冒泡排序
function sortList(){
 var lis=document.getElementById("oList").childNodes;
 for (var i = 0; i < lis.length - 1; i++) {

        for (var j = 0; j < lis.length - 1; j++) {

               if(parseInt(lis[j].childNodes[0].value)>parseInt(lis[j+1].childNodes[0].value)){

              lis[j].swapNode(lis[j+1]); //交换元素
              lis=document.getElementById("oList").childNodes; //需要重新绑定对象

   }
  }
 }
}
</script>
</head>

<body>
<ul id="oList"> 
 <li><span value="3">三</span></li>
 <li><span value="8">八</span></li>
 <li><span value="2">二</span></li>
 <li><span value="5">五</span></li> 
 <li><span value="7">七</span></li> 
 <li><span value="9">九</span></li> 
 <li><span value="4">四</span></li> 
 <li><span value="6">六</span></li>
 <li><span value="1">一</span></li> 
 <li><span value="10">十</span></li> 
</ul>
<INPUT TYPE = button VALUE = "Swap List" onclick = "sortList()">
</body>
</html>

--JS 向服务端提交数据 

1.少量数据（编号之类）--- Ajax提交

<!--准备提交页面-->

          $.ajax({

                type: "POST",

                url: "../Control/Ajax_Excel.aspx",

                data: {htmlStr:escape(tempStr)},

                success: function(data)

                {  

                }

          });

2.大量数据（表格之类）---Form提交

<!--准备提交页面-->

<form id="form1" runat="server" method="post">

      <asp:HiddenField ID="hid_tempStr" runat="server" />     <!--用一个隐藏域来存储复杂大量的HTML表格数据-->

</form>

<script type="text/javascript">

$(function () {

      $('#btn_Excel').click(function () {    

           $('#hid_tempStr').val(‘大量数据Html表格之类’);

          document.form1.action="../Control/Ajax_Excel.aspx";//指定提交到其他页面

          document.form1.submit(); 

          document.form1.action="../StaAnalyse/ProjManage.aspx";//提交完需要反馈本身，否则action变化，这样可以使得其他的服务端控件继续可用

      });

 });

</script>

<!--Web.config-->

<system.web>

    <httpRuntime requestValidationMode="2.0" />  <!--防止报错-->

    <pages validateRequest="false"/>  <!--防止报错-->

</system.web>

<!--提交到的页面-->

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Excel.aspx.cs" Inherits="Control_Ajax_Excel"  EnableViewStateMac="false"  %> <!--防止报错-->

<!--提交到的页面后台代码-->


 public partial class Control_Ajax_Excel : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    { 

        string HtmlStr=Request.Params["hid_tempStr"]==null?string.Empty:Server.UrlDecode(Request.Params["hid_tempStr"].ToString()); 

        ......

    }

}

--JS 导出 Excel 

tempStr是html的table，类似：<TABLE id=tabReport class=tb_Content border=1>......</TABLE>
方法一：
 $('#btn_Excel').click(function () {

       var newWin = window.open();
       newWin.document.write(tempStr);
       newWin.document.close();
       newWin.document.execCommand('saveas',true,'导出.xls');
       newWin.window.close();

｝
       但是方法一会在过程中弹出新页面，很丑，于是我进行如下改进。在页面放一个0px的iframe即可解决。
方法二：
 $('#btn_Excel').click(function () {
       ifra_Excel.document.body.innerHTML=tempStr;       
       ifra_Excel.document.write(tempStr);       
       ifra_Excel.document.execCommand('saveas',true,'导出.xls');

｝
<iframe id="ifra_Excel" style="0px;height:0px;border:0px"></iframe>

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

mergeRowsByColumn(document.getElementById('tabReport'),23);        // 表格ID='tabReport',需要合并的列=23列

function mergeRowsByColumn(tableObj,columnIndex)
{
 for(var i=0;i<tableObj.rows.length-1;i++) 
 {
  var td1=tableObj.rows[i].cells[columnIndex];
  for(var j=i+1;j<tableObj.rows.length;j++)
  {
   var td2=tableObj.rows[j].cells[columnIndex];
   if(td1.innerHTML==td2.innerHTML)
   {
    td1.rowSpan++;
    tableObj.rows[j].deleteCell(columnIndex);
    i++;
   }
   else
   {
    break;
   }
  }
 }
}

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

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

--JS eval 

功能：把字符串解析为js可以辨认的代码

e.g.

前提：

data是一个Json: [{Key:1,TypeName:AA},{Key:2,TypeName:AA},{Key:3,TypeName:BB}]

//自定义剔除Json列col连续且重复数据
function getSingles(data,col)
{
    var tmp = "";    
    var arr=[]; 
    var single="data[i]."+col; 
    for(var i=0;i<data.length;i++)
    {      
       if(i==0)
       {
        tmp = eval(single);
        arr.push(eval(single));
       }
       else
       {
         if(tmp!=eval(single))
         {
          tmp = eval(single);
          arr.push(eval(single));
         }
       }
    }
    return arr; 
}

调用：

getSingles(data,"TypeName");

结果：

返回一个数组[AA,BB]

--Json2Str Str2Json 

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

2、Json转Str
   function json2Str(o) {
       var arr = [];
       var fmt = function(s) {
           if (typeof s == 'object' && s != null) return json2str(s);
           return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
       }
       for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
       return '{' + arr.join(',') + '}';
   }

--JS 获取鼠标位置 

//获取鼠标位置 
function mousePosition(ev)
//#region
{     
    if(ev.pageX || ev.pageY)
    {         
         return {x:ev.pageX, y:ev.pageY};
    }     
    return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};
} 
//#endregion

调用:
    var ev = ev || window.event;
    var mousePos = mousePosition(ev);
    alert(mousePos.x+mousePos.y);

--JS 改变background

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

--JS 字符串拼接效率

<script>   
function code1(){   
    var str = '';   
    var startDate = new Date();   
   for(i=0;i<50000;i++){   
     str+='abc';   
    }   
    var endDate = new Date();   
    alert(endDate-startDate);   
}   
  
function code2(){   
    var startDate = new Date();   
    var arr = [];   
   for(i=0;i<50000;i++){   
     arr.push('abc');   
    }   
    var str = arr.join('');   
    var endDate = new Date();   
    alert(endDate-startDate);   
}   
</script>   
<BODY>   
   <script>   
   code1();   
   code2();   
   </script>   
</BODY>  
上面的代码分别在IE6和FireFox下执行结果如下：
        CODE1    CODE2
IE6    1390    172
FF    4            7

--JS 控制textarea的maxLength 

textarea标签虽然有maxLength属性，但是它并不管用，所以只能自己控制，
下面的例子中我的思路是：
在textarea中输入内容后就判断是否超出了maxLength，如果超出就按照maxLength截取textare的值，有个问题，如果用鼠标来拷贝粘贴就没法调用判断maxLength的方法，解决办法就是当textarea获取焦点时把鼠标右键失效，失去焦点时再恢复鼠标右键

这个方法从功能上解决了textarea的maxLength问题，但还不是很完美，在输入超过maxLength的字符后光标会有闪烁，因为是截取回填，没有像input的maxLength那样真正不让输入，今天一时也想不到好办法，以后找到再补充进来。

<html>

<head>

<title></title>
<script type="text/javascript">

var textarea_maxlen = {
   isMax : function (){
 var textarea = 
  document.getElementById("area");
 var max_length = textarea.maxLength;
 if(textarea.value.length > max_length){
    textarea.value = 
  textarea.value.substring(0, max_length);
 }
   },
   disabledRightMouse : function (){
 document.oncontextmenu = 
    function (){ return false; }
   },
   enabledRightMouse : function (){
 document.oncontextmenu = null;
   }
};
</script>
</head>

<body>
<textarea id="area" maxLength="10" 
   onkeyup="textarea_maxlen.isMax()" 
   onfocus="textarea_maxlen.disabledRightMouse()" 
   onblur="textarea_maxlen.enabledRightMouse()"
   rows="20" cols="100">
</textarea>
</body>

</html>

--JS DateDiff

function dateDiff(interval, date1, date2)
{
    var objInterval = {'D' : 1000 * 60 * 60 * 24, 'H' : 1000 * 60 * 60, 'M' : 1000 * 60, 'S' : 1000, 'T' : 1};
    interval = interval.toUpperCase();
    var dt1 = Date.parse(date1.replace(/-/g, '/'));
    var dt2 = Date.parse(date2.replace(/-/g, '/'));
    try
    {
        return Math.round((dt2 - dt1) / eval('(objInterval.' + interval + ')'));
    }
    catch (e)
    {
        return e.message;
    }
}

--JS 横向滚动广告

<HTML><HEAD><TITLE>无标题文档</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1264" name=GENERATOR>
<link href="css/css.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
<CENTER>
<TABLE 
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" 
cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
    <TD>
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">
                <p>2</p>
                </div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
              <td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top>&nbsp;</TD></TR></TBODY></TABLE></DIV>
      <SCRIPT>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
    </TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY></HTML>

--JS 遍历checkbox getElementsByTagName 

 var chksStr="";
   var inputs=document.getElementsByTagName("input");
   var chkboxs;
   for(var i=0;i<inputs.length;i++)
   {
        if(inputs[i].type == "checkbox")
        {   
            if(inputs[i].checked)
            { 
                chksStr+=","+inputs[i].id.substr(3,inputs[i].id.length);   
            }
        }   
    }
   chksStr =chksStr.substr(1,chksStr.length);
   alert(chksStr);

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

js部分：
function revMobilePhone(obj)
{
var tt=/^\d{11}|\d{3,4}-\d{7,8}/;
if(!tt.exec(obj))
{
     alert("联系电话格式不正确");
}
}
页面部分：
<asp:TemplateField HeaderText="联系电话?">
<EditItemTemplate>
     <input id="tbMobilePhone" value='<%# Bind("MobilePhone") %>' runat="server" type="text" onblur="revMobilePhone(this.value)" />
</EditItemTemplate>
<ControlStyle Width="120px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" Height="25px" />
<ItemTemplate>
     <asp:Label ID="lbMobilePhone" runat="server" Text='<%# Bind("MobilePhone") %>' Font-Size="13px"></asp:Label>
</ItemTemplate></asp:TemplateField>
代码部分：

protected void gvShow_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
     ...
     string mobilephone = ((HtmlInputText)(gvShow.Rows[e.RowIndex].Cells[0].FindControl("tbMobilePhone"))).Value.ToString().Trim();
     ...
}

--JS QueryString

function QueryString()
{
    //构造参数对象并初始化 
    var name,value,i; 
    var str=location.href;//获得浏览器地址栏URL串 
    var num=str.indexOf("?") 
    str=str.substr(num+1);//截取“?”后面的参数串 
    var arrtmp=str.split("&");//将各参数分离形成参数数组 
    for(i=0;i < arrtmp.length;i++)
    { 
        num=arrtmp[i].indexOf("="); 
        if(num>0)
        { 
            name=arrtmp[i].substring(0,num);//取得参数名称 
            value=arrtmp[i].substr(num+1);//取得参数值 
           this[name]=value;//定义对象属性并初始化 
       } 
    } 
}

调用:
var abc = new QueryString();
alert(abc.id);//id是假如参数名称中有这个变量名

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

//放在子页

var GLOB_CONST_extraHeight_IE = 4; //using default value 4 of IE
var GLOB_CONST_extraHeight_NOIE = 16 ; //using default value 16 of FF
function autosize() {
try {                
var iframe = parent.document.getElementsByTagName('iframe');
var len = iframe.length;
if (len <= 0) {
   return;
}
var i;
if (iframe[0].contentDocument) { //for mozilla, firefox
   for (i = 0; i < len; i ++) {
    if (iframe[i].contentDocument == document) {
     iframe[i].style.height=document.body.offsetHeight +GLOB_CONST_extraHeight_NOIE;
     return;
    }
   }
}
else { // for IE
   iframe = parent.document.frames;
   len = iframe.length;
   if (len <= 0) {
    return;
   }
   for (i = 0; i < len; i ++) {
    if (iframe[i].document == document) {
    iframe[i].frameElement.style.height=document.body.scrollHeight+ GLOB_CONST_extraHeight_IE;
     return;
    }
   }
}
}catch(err) {
alert(err.message);
}
}

//在子页的body添加onLoad="autosize()"即可

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

<html>
<head>
<style type="text/css">
div{border:#aaaaaa 3px solid;200px;padding:2px;margin:2px 9px;font-size:12px;line-height:22px;color:#999999;}
.ipt1{160px;font-size:12px;color:#1F6478;border:#999999 1px solid;margin-left:9px;}
.ipt2{border:#999999 1px solid;margin-left:6px;color:#666666}
p{margin:0px;padding:0px;background-image:url(http://www.codefans.net/jscss/demoimg/loading.gif);background-position:center;background-repeat:no-repeat;200px;height:200px;text-align:center;font-size:12px;color:#999999;line-height:26px;}
</style>
<script language="javascript" type="text/javascript">
function preloadimg(url,obj,ipt){
var img=new Image();
obj.innerHTML="<p>图片加载中...</p>";
img.onload=function(){obj.innerHTML="";obj.style.width=String(img.width)+"px";ipt.style.width=String(img.width-40)+"px";obj.appendChild(img);};
img.onerror=function(){obj.innerHTML="图片加载失败！"};
img.src=url; //img.src一定要写在img.onload之后，否则在IE中会出现问题
}
function show(){
var div=document.getElementsByTagName("div")[0];
var input=document.getElementsByTagName("input");
preloadimg("http://www.codefans.net/jscss/demoimg/wall8.jpg",div,input[0]);
input[0].onclick=function(){this.value=""};
input[1].onclick=function(){preloadimg(input[0].value,div,input[0]);}
}
window.onload=show;
</script>
<title>JavaScript图片预加载代码，显示loading</title>
</head>
<body>
<div></div>
<br />
<input type="text" value="将图片地址粘贴在这里" class="ipt1"/><input type="button" value="开始加载" class="ipt2"/>
</body>
</html>

--JS中substr和substring的区别

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

--判空 

if(typeof(obj)!="undefined"&&obj!=null)
{
     var aa=obj;
     ...
}

--屏蔽右键

<script type="text/javascript">
        function document.oncontextmenu() {
            return false;
        } 
        function nocontextmenu() {
            if (document.all) {
                event.cancelBubble = true;
                event.returnvalue = false;
                return false;
            } 
        }
    </script>
<body onload="document.oncontextmenu();">

--获取iframe的内容

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

--JS处理中文url参数

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

--控制CSS

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

--JS过滤空格Trim

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

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

<asp:TextBox ID="searchMobilePhone" runat="server" Width="80px" Text="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></asp:TextBox>

--JS 非常好用的Display

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

--JS 屏蔽右键

 <script type="text/javascript">
        function document.oncontextmenu() {
            return false;
        }
        function nocontextmenu() {
            if (document.all) {
                event.cancelBubble = true;
                event.returnvalue = false;
                return false;
            }
        }
    </script>
<body onload="document.oncontextmenu();">

--window.onload的调用写法

function bbb() 
{
    aaa();
}
window.onload=bbb;

--JS 时间

var now= new Date();
var month = now.getMonth()+1;
var day = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
if(month<10){month="0"+(now.getMonth()+1);}
if(day<10){day="0"+now.getDate();}
if(hour<10){hour="0"+now.getHours();}
if(min<10){min="0"+now.getMinutes();}
var nowTim = now.getFullYear()+"-"+month+"-"+day+" "+hour+":"+min+":00";

--JS窗口坐标