ASP.NET jQuery 实例10 动态修改hyperlink的URL值

  1.先准备界面代码:

  

复制代码 代码如下:

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

  <div align="left">

  <fieldset style="width: 300px; height: 200px;">

  <table cellpadding="0" cellspacing="0" border="0">

  <tr>

  <td style="width: 10px">

  </td>

  <td>

  <p>

  更新网址:</p>

  <asp:RadioButtonList ID="rblUrl" runat="server">

  <asp:ListItem Text="新浪" Value="http://www.sina.com.cn"></asp:ListItem>

  <asp:ListItem Text="百度" Value="http://www.baidu.com"></asp:ListItem>

  <asp:ListItem Text="网易" Value="http://www.163.com"></asp:ListItem>

  </asp:RadioButtonList>

  <br />

  <asp:HyperLink ID="hyperLink" runat="server">点击这儿</asp:HyperLink>

  </td>

  </tr>

  </table>

  </fieldset>

  </div>

  </form>

  2.RadioButtonList转换成<table/>,其成员转换为<input type="radio"/>,下面是实现改变URL值的脚本代码:

  

复制代码 代码如下:

  <head runat="server">

  <title>Recipe10</title>

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

  <script type="text/javascript">

  $(document).ready(function () {

  $("input[type=radio]").bind("change", function () {

  $("#<%=hyperLink.ClientID %>").attr("href", $(this).val());

  });

  });

  </script>

  </head>

  3.实现界面效果:

  

ASP.NET jQuery 实例10 动态修改hyperlink的URL值

4.另外我们可以通过下面的代码实现绑定change事件:

  

复制代码 代码如下:

  $("input=[type=radio]").live("change", function(){

  $("a").attr("href", $(this).val());

  });

  5.live()和bind()函数的区别:

  live()函数可以附加事件到现在的和将来的页面元素上。然而,bind()函数只能把事件附加到已经加载过的页面元素上。

  也就是说bind()适合页面静态元素而live()适合页面静态和动态元素。