JS脚本的基础应用

1、<td id=“aa”><span id="bb">Shang</span></td>改变span的值，为“Shang0109”

function ChangeSpanText()

{

　　var aa=document.getElementById('aa').getElementsByTagName("span")[0].innerText;

　　//getElementsByTagName 获取的是数组,此为获取 <td>中所有的<span>
      var xh='0109';
      if(aa.indexOf(aa)!=-1)//先判断是否已包含"0109"
      {
          document.getElementById('aa').getElementsByTagName("span")[0].innerText+="0109";
      }

}

2、CheckBox被选中，则span显示，否则不显示（常用作关联功能的使用）

<tr>

<td><asp:CheckBox ID="aa" runat="server"  Checked="false" onclick="CBChecked()"/></td>

<td><span id="bb"><asp:TextBox ID="cc" runat="server" ></asp:TextBox></span></td>

</tr>

function CBChecked()

{

　　 if(document.getElementById('aa').checked==false)//未被选中
        {

            document.getElementById('bb').style.display='none';//不显示
        }
        else
        {

            document.getElementById('bb').style.display='';//显示
        }

}

3、通过一个下拉列表选择种类，一个文本框填写数量，一个“添加”的按钮，并在ListBox中显示明细记录，以供总提交。

页面的html代码：

<tr>
                <td class='td_table_1' >
                    <span>选择设备</span>
                </td>
                <td class='td_table_2' >
                    <asp:DropDownList ID="ddlDevList" runat="server" class="input_select"></asp:DropDownList>
                </td>
                <td class='td_table_1' ><span>数量（个）</span></td>
                <td class='td_table_2'>
                    <asp:TextBox ID="txtDevNum" runat="server" CssClass="input_150"></asp:TextBox>&nbsp;
                    <input id="btnAdd" type="button" value="添 加" class="unnamed_anliu" onclick="return btnAdd_onclick()" />
                </td>
            </tr>
            <tr>
            <td class='td_table_1' >
                <span>添加明细</span>
            </td>
            <td class='td_table_2' colspan='3'>
                <asp:ListBox ID="ltbDevDetials" runat="server" Width="400px" Height="100px">
                </asp:ListBox>
            </td>
        </tr>

参考JS代码：

//添加入库设备信息到ListBox 中，并初始化数量 空；
        function btnAdd_onclick() 
        {
            var ddl=document.getElementById('ddlDevList');
            var index=ddl.selectedIndex;
            var devName=ddl.options[index].text;//设备名称
            //alert(DevName);
            //var dd=ddl.options[index].value;
            //alert(dd);//同上 两个都可以
            
            var devNum=document.getElementById('txtDevNum').value;//设备数量
           
            if(Number(devNum)==0|| isNaN(devNum)==true)//如果数量为空，或者输入的非数字，则提示错误！（包括为空的情况）
            {
                alert("请正确输入设备数量！");
                document.getElementById('txtDevNum').value="";
                return;
            }
            
            //将设备名称和数量添加 到 ListBox当中，已存在的设备 则改变其数量 
            var ltbDevDetials=document.getElementById('ltbDevDetials');
            var ltbCount=ltbDevDetials.options.length;//ListBox 元素的长度
           
            if(ltbCount<=0)
            {
                //添加一个ListBox元素
                var option=document.createElement("option");
                option.value=devNum;
                option.text=devName +" : "+option.value+" 个";
                ltbDevDetials.add(option);
                document.getElementById('txtDevNum').value="";
                return;
            }
            else //遍历ListBox中的每一个元素，并与新添加的元素比较，如果该元素设备名已存在，则两者数量相加，否则添加新元素
            {
                var i,j;
                for(i=0; i<ltbDevDetials.options.length;i++)
                {
                  j=ltbDevDetials.options[i].text.indexOf(devName);//判断是否添加过该编号的设备
                  if(Number(j)==0)//ListBox已添加该设备
                  {
                    var num=Number(ltbDevDetials.options[i].value)+Number(devNum);
                    ltbDevDetials.options[i].value=num;//要更新该条设备的数据
                    if(num<=0)
                    {
                        ltbDevDetials.remove(i);
                        document.getElementById('txtDevNum').value="";
                        return;
                    }
                    ltbDevDetials.options[i].text=devName+" : "+num+" 个";
                    document.getElementById('txtDevNum').value="";
                    return;
                  }
                    
                }
            }
            if(ltbDevDetials.options.length==i)//说明新添加的设备之前没有被添加过
            {
                //添加一个ListBox元素
                var option=document.createElement("option");
                option.value=devNum;
                option.text=devName +" : "+option.value+" 个";
                ltbDevDetials.add(option);
                document.getElementById('txtDevNum').value="";
                return;
            }
        }

另一个思路，解决：将添加部分（上图所示）更换为一个<iframe></iframe>的框架可以绑定一个新的页面，在新“添加”的时候，可以通过提交Session，再由当前页面从Session中获取后实现“总提交”到数据库中。

4、通过链接跳转到新页面，并控制新页面的属性，使新页面处于屏幕中间：

<a href="#" onclick="JumpOutWeb(<%# DataBinder.Eval(Container.DataItem, "id", null) %>)">查看明细</a>

绑定了该条记录的id；

 function JumpOutWeb(id)//屏幕中间弹出一个web窗体         {
            var left=Math.round((window.screen.width-600)/2);
            var top=Math.round((window.screen.height-200)/2);
            window.open('devDetialsLook.aspx?id='+id, 'newwindow', 'height=200, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,target=_blank'+',left='+left+',top='+top)
        }

Window.Open跳转新页面命令。新页面属性（ 'devDetialsLook.aspx?id='+id：是要弹出的页面，也可是html页面，newWindow：新页面的名字，可使用“”代替，

height：页面高度，width：页面宽度，toolbar：是否显示工具栏，menubar：是否显示：菜单栏， scrollbars：是否显示滚动条，resizable：是否允许改变窗口的大小，location：是否显示地址栏，status：是否显示状态栏内的信息，

left：窗口距离屏幕左边的像素，top窗口距离屏幕顶端的像素）

window.location.href('Default.aspx');//替换当前页面，跳转到指定页面，同时页面也可以添加参数如：“Default.aspx?id=1”

5、判断输入文本框的值是否是数字，不是则提示。

function IfNumber()
        {
            var tel=document.getElementById("txtTel");
            if(isNaN(tel.value)==true)
            {
                alert("请输入数字！");
                tel.focus();//聚焦到该文本框中
                return false;
            }
            return true;
        }

 <asp:TextBox ID="txtTel" runat="server"  autocomplete="off" onblur="IfNumber();"></asp:TextBox>

autocomplete="off"：清除文本框中的痕迹

6、页面中提示窗体的实现
public class Utility
    {
        #region 脚本相关
        /// <summary>
        /// 向页面中增加onload事件方法
        /// attachEvent,可以在onload中绑定多个，
        /// </summary>
        /// <param name="key"></param>
        /// <param name="fun"></param>
        public static void JSAttachEventOnload(string key, string fun)
        {
            Page page = HttpContext.Current.Handler as Page;
            page.ClientScript.RegisterStartupScript(page.GetType(), key, "if

(window.attachEvent)window.attachEvent(\"onload\", function() { " + fun + " });  

else   window.addEventListener(\"load\", function() { " + fun + " }, true);", true);
        }
        #endregion
    }
该方法在.NET中直接调用就可以了
Utility.JSAttachEventOnload("key","fun");//key自定义//fun 可以使方法名，也可以使js代

码如：Utility.JSAttachEventOnload("submitFail","alert('提交失败！')");
Utility.JSAttachEventOnload("aaa","a()");//a()为js方法

window.attachEvent方法是IE5.0以后提供的方法，该方法可以一个事件，绑定多个处理过程。
Mozilla/Firefox浏览器不支持该方法，而是使用addEventListener,事件也不以“on”开头，并

且addEventListener有三个参数。一般情况下，会同时使用这两个方法，以适用于不同的浏览器

。
if(document.all){window.attachEvent('onload',事件名);}
else{window.addEventListener('load',事件名,true/false);}

7、Web关闭当前页面，一般情况用于关闭弹出的web窗体。

 （1）：ClientScript.RegisterStartupScript(Page.GetType(), "", "<script language=javascript>window.opener=null;window.close();</script>");

（2）：ClientScript.RegisterStartupScript(Page.GetType(), "", "<script language=javascript>window.opener=null;window.open('','_self');window.close();</script>");

将window.opener=null 改为 window.opener.document.location.reload(); 页面在关闭之前会刷新主页面

（3）：关闭当前页面弹出的提示窗口，并在关闭后刷新页面

Response.write "<script language='javascript'>"& chr(13) &"alert('您已经成功登陆');opener.location.reload();window.close();"&"</script>"

8、删除链接加提示框。

 <script type="text/javascript" language="javascript">
        function DelWindowLink(code)
        {
            if(window.confirm("确定要删除吗？"))
            {
                window.location="DevDelete.aspx?Code="+code.toString();
            }
        }
    </script>

<a href="#" onclick="DelWindowLink(<%# DataBinder.Eval(Container.DataItem,"Code" ,null) %>)" >删 除</a>

该链接中的code是Repeater中绑定的code，此处可以自行使用。

9、实现全选的功能

function  SelectAll()//全选         
        {  
            var checkbox = document.getElementsByTagName("input"); 
            if (checkbox[0].checked == true) { 
                for (var i = 0; i < checkbox.length; i++){ 
                    checkbox[i].checked = false;
                    if(checkbox[i].type=="text")
                    {
                        checkbox[i].style.display='none';
                    }
                    }
            } 
            else { 
                for (var i = 0; i < checkbox.length; i++)
                {
                    checkbox[i].checked = true;
                    if(checkbox[i].type=="text")
                    {
                        checkbox[i].style.display='';
                    }
                 }
            } 
        }

10：window.attachEvent

通过监听加载js方法

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

　　function initHMenus()

　　{

　　alert("加载成功!");

　　}

</script>

后台：

 /// <summary>
/// 向页面中增加onload事件方法
/// attachEvent,可以在onload中绑定多个       

public static void JSAttachEventOnload(string key, string fun)
{   //(System.Web.UI)Page

       Page page = HttpContext.Current.Handler as Page;
       page.ClientScript.RegisterStartupScript(page.GetType(), key, "window.attachEvent('onload',initHMenus);",true);

}

11、JS获取地址中的参数

function RedirctNewPage()//获取地址当前页面地址栏中的参数，并附加到新地址实现页面跳转         {
            var gid='';
            var url=window.location.search;
            if(url.indexOf("?")!=-1)  
            {    
                var str=url.substr(1);    
                strs = str.split("&");    
                for(i=0;i<strs.length;i++)    
                {      
                    if([strs[i].split("=")[0]]=='gid')
                    {
                        gid=unescape(strs[i].split("=")[1]);break;
                     }
                }
            }
            window.location.href="TerminalExtAdd.aspx?gid="+gid.toString();
        }

12、获取表中某行某列的值

 var tbID = document.getElementById('tbID');

tbID.rows(1).cells(2).innerHTML//获取第二行第三列的值

tbID.deleteRow(1);//删除第二行

13、执行操作点击确定提示框，刷新主页面并关闭当前页面

<script src="../resources/script/jquery.js" type="text/javascript"></script>

 <script language="javascript" type="text/javascript">
        //删除知识库
        function DelConfirm(kid) {
            Confirm("确定要删除该条数据吗？", function() { AjaxDel(kid) });
        }
        function AjaxDel(kid) {
            $.ajax({
                type: "get",
                url: 'Del.aspx?kid=' + kid,   //后台处理程序  
                dataType: 'html',    //接受数据格式   
                data: {},    //要传递的数据
                success: function(msg) {
                    //执行删除操作后，刷新父页面 列表页面关闭当前页面
                    window.opener.document.location.reload();
                    window.close();//关闭当前页面
                },
                error: function() {
                    alert("error");
                }
                //               function(XMLHttpRequest, textStatus, errorThrown) {
                //                   alert(XMLHttpRequest.status);
                //                   alert(XMLHttpRequest.readyState);
                //                   alert(textStatus);
                //               }
            }
       );
        }
    </script>

14、js调用后台的事件

在上面的图片中，执行添加，修改，删除等操作后，并对列表页面进行更新，通常情况下，我们执行服务器控件的事件后，页面会被重新加载，如果使用js调用后台的事件，可实现不重新加载页面的效果。

<script type="text/javascript" language="javascript">
        function test() {
            document.getElementById("btnTest0").click();
        }
    </script>

<asp:Button ID="btnTest0" runat="server" Text="删 除" class="unnamed_anliu" OnClick="btnTest_Click" />
    <input  type="button" value="执行后台事件" id="btnTest1" onclick="test();"/>

后台：

 protected void btnTest_Click(object obj, EventArgs e)
        {
            JSAttachEventOnload("suc","alert('测试成功，该方法成功执行了后台的事件！');"); 
        }
        public static void JSAttachEventOnload(string key, string fun)
        {
            Page page = HttpContext.Current.Handler as Page;
            page.ClientScript.RegisterStartupScript(page.GetType(), key, "if (window.attachEvent)window.attachEvent(\"onload\", function() { " + fun + " });   else   window.addEventListener(\"load\", function() { " + fun + " }, true);", true);
        }

15、刷新父页面，一般用于子页面执行过操作后，刷新父列表页面，更新数据列表

window.opener.document.location.reload();

window.close();//关闭当前页面

16、同级iframe直接的方法调用

 window.parent.document.frames["frm_top"].ccc();

表示当前iframe调用同级的id为“frm_top”的ccc（）方法