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


Posted in Javascript onFebruary 03, 2012

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()适合页面静态和动态元素。
Javascript 相关文章推荐
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 #Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 #Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 #Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 #Javascript
jQuery.extend 函数详解
Feb 03 #Javascript
jquery插件开发方法(初学者)
Feb 03 #Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
You might like
从刷票了解获得客户端IP的方法
2015/09/21 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
详解Django框架中用context来解析模板的方法
2015/07/20 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
一些PHP的面试题
2015/05/06 面试题
师范应届生求职信
2013/11/15 职场文书
个人股份合作协议书
2014/10/24 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书