JS脚本的基础应用

1、Shang改变span的值&＃xff0c;为“Shang0109”

function ChangeSpanText()

{

　　var aa&＃61;document.getElementById(&＃39;aa&＃39;).getElementsByTagName("span")[0].innerText;

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

}

2、CheckBox被选中&＃xff0c;则span显示&＃xff0c;否则不显示&＃xff08;常用作关联功能的使用&＃xff09;

function CBChecked()

{

　　 if(document.getElementById(&＃39;aa&＃39;).checked&＃61;&＃61;false)//未被选中
        {

            document.getElementById(&＃39;bb&＃39;).style.display&＃61;&＃39;none&＃39;;//不显示
        }
        else
        {

            document.getElementById(&＃39;bb&＃39;).style.display&＃61;&＃39;&＃39;;//显示
        }

}

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

页面的html代码&＃xff1a;

参考JS代码&＃xff1a;

另一个思路&＃xff0c;解决&＃xff1a;将添加部分&＃xff08;上图所示&＃xff09;更换为一个的框架可以绑定一个新的页面&＃xff0c;在新“添加”的时候&＃xff0c;可以通过提交Session&＃xff0c;再由当前页面从Session中获取后实现“总提交”到数据库中。

4、通过链接跳转到新页面&＃xff0c;并控制新页面的属性&＃xff0c;使新页面处于屏幕中间&＃xff1a;

)">查看明细

绑定了该条记录的id&＃xff1b;

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

Window.Open跳转新页面命令。新页面属性&＃xff08; &＃39;devDetialsLook.aspx?id&＃61;&＃39;&＃43;id&＃xff1a;是要弹出的页面&＃xff0c;也可是html页面&＃xff0c;newWindow&＃xff1a;新页面的名字&＃xff0c;可使用“”代替&＃xff0c;

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

left&＃xff1a;窗口距离屏幕左边的像素&＃xff0c;top窗口距离屏幕顶端的像素&＃xff09;

window.location.href(&＃39;Default.aspx&＃39;);//替换当前页面&＃xff0c;跳转到指定页面&＃xff0c;同时页面也可以添加参数如&＃xff1a;“Default.aspx?id&＃61;1”

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

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

 autocomplete&＃61;"off" οnblur&＃61;"IfNumber();">

autocomplete&＃61;"off"&＃xff1a;清除文本框中的痕迹

6、页面中提示窗体的实现
public class Utility
    {
        #region 脚本相关
        ///

        /// 向页面中增加onload事件方法
        /// attachEvent,可以在onload中绑定多个&＃xff0c;
        ///

        ///
        ///
        public static void JSAttachEventOnload(string key, string fun)
        {
            Page page &＃61; HttpContext.Current.Handler as Page;
            page.ClientScript.RegisterStartupScript(page.GetType(), key, "if

(window.attachEvent)window.attachEvent(\"onload\", function() { " &＃43; fun &＃43; " });  

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

码如&＃xff1a;Utility.JSAttachEventOnload("submitFail","alert(&＃39;提交失败&＃xff01;&＃39;)");
Utility.JSAttachEventOnload("aaa","a()");//a()为js方法

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

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

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

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

 &＃xff08;1&＃xff09;&＃xff1a;ClientScript.RegisterStartupScript(Page.GetType(), "", "");

&＃xff08;2&＃xff09;&＃xff1a;ClientScript.RegisterStartupScript(Page.GetType(), "", "");

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

&＃xff08;3&＃xff09;&＃xff1a;关闭当前页面弹出的提示窗口&＃xff0c;并在关闭后刷新页面

Response.write ""

8、删除链接加提示框。

 

 

 

)" >删 除

该链接中的code是Repeater中绑定的code&＃xff0c;此处可以自行使用。

9、实现全选的功能

function  SelectAll()//全选         
        {  
            var checkbox &＃61; document.getElementsByTagName("input"); 
            if (checkbox[0].checked &＃61;&＃61; true) { 
                for (var i &＃61; 0; i                     checkbox[i].checked &＃61; false;
                    if(checkbox[i].type&＃61;&＃61;"text")
                    {
                        checkbox[i].style.display&＃61;&＃39;none&＃39;;
                    }
                    }
            } 
            else { 
                for (var i &＃61; 0; i                 {
                    checkbox[i].checked &＃61; true;
                    if(checkbox[i].type&＃61;&＃61;"text")
                    {
                        checkbox[i].style.display&＃61;&＃39;&＃39;;
                    }
                 }
            } 
        }

10&＃xff1a;window.attachEvent

通过监听加载js方法

后台&＃xff1a;

 ///

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

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

       Page page &＃61; HttpContext.Current.Handler as Page;
       page.ClientScript.RegisterStartupScript(page.GetType(), key, "window.attachEvent(&＃39;onload&＃39;,initHMenus);",true);

}

11、JS获取地址中的参数

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

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

 var tbID &＃61; document.getElementById(&＃39;tbID&＃39;);

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

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

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

 

14、js调用后台的事件

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

   

后台&＃xff1a;

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

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

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

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

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

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

表示当前iframe调用同级的id为“frm_top”的ccc&＃xff08;&＃xff09;方法