ASP.NET jQuery 實(shí)例10 動(dòng)態(tài)修改hyperlink的URL值
更新時(shí)間：2012年02月03日 17:01:33 作者：
這節(jié)我們來看下如何實(shí)現(xiàn)通過選擇RadioButtonList值動(dòng)態(tài)改變hyperlink控件的URL值，并簡要介紹bind和live方法的區(qū)別
1.先準(zhǔn)備界面代碼：
<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>
更新網(wǎng)址:</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="網(wǎng)易" Value="http://www.163.com"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:HyperLink ID="hyperLink" runat="server">點(diǎn)擊這兒</asp:HyperLink>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
2.RadioButtonList轉(zhuǎn)換成<table/>，其成員轉(zhuǎn)換為<input type="radio"/>,下面是實(shí)現(xiàn)改變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.實(shí)現(xiàn)界面效果：
$("input=[type=radio]").live("change", function(){
$("a").attr("href", $(this).val());
});
5.live()和bind()函數(shù)的區(qū)別：
live()函數(shù)可以附加事件到現(xiàn)在的和將來的頁面元素上。然而，bind()函數(shù)只能把事件附加到已經(jīng)加載過的頁面元素上。
也就是說bind()適合頁面靜態(tài)元素而live()適合頁面靜態(tài)和動(dòng)態(tài)元素。
復(fù)制代碼 代碼如下:
<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>
更新網(wǎng)址:</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="網(wǎng)易" Value="http://www.163.com"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:HyperLink ID="hyperLink" runat="server">點(diǎn)擊這兒</asp:HyperLink>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
2.RadioButtonList轉(zhuǎn)換成<table/>，其成員轉(zhuǎn)換為<input type="radio"/>,下面是實(shí)現(xiàn)改變URL值的腳本代碼：
復(fù)制代碼 代碼如下:
<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.實(shí)現(xiàn)界面效果：
復(fù)制代碼 代碼如下:
$("input=[type=radio]").live("change", function(){
$("a").attr("href", $(this).val());
});
5.live()和bind()函數(shù)的區(qū)別：
live()函數(shù)可以附加事件到現(xiàn)在的和將來的頁面元素上。然而，bind()函數(shù)只能把事件附加到已經(jīng)加載過的頁面元素上。
也就是說bind()適合頁面靜態(tài)元素而live()適合頁面靜態(tài)和動(dòng)態(tài)元素。
您可能感興趣的文章:
- jQuery在頁面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法
- jQuery動(dòng)態(tài)修改超鏈接地址的方法
- jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼
- jquery實(shí)現(xiàn)實(shí)時(shí)改變網(wǎng)頁字體大小、字體背景色和顏色的方法
- jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法
- jQuery實(shí)現(xiàn)切換字體大小的方法
- jQuery之字體大小的設(shè)置方法
- jquery更換文章內(nèi)容與改變字體大小代碼
- JQuery 改變頁面字體大小的實(shí)現(xiàn)代碼(實(shí)時(shí)改變網(wǎng)頁字體大小)
- jQuery動(dòng)態(tài)修改字體大小的方法【測試可用】
相關(guān)文章
JQuery的Validation插件中Remote驗(yàn)證的中文問題
前段時(shí)間，再次出現(xiàn)AJAX中文編碼問題，導(dǎo)致會(huì)員名重復(fù)檢測失敗，不過這次出現(xiàn)問題的是Validation插件的remote驗(yàn)證。2010-07-07
jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦！實(shí)際對比同類的placeholder插件在ie等瀏覽器下效果要好很多！下面我們來具體探討下此插件的使用方法吧。2015-06-06
jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能,結(jié)合實(shí)例形式分析了jQuery的$.ajax方法與后臺(tái)php交互實(shí)現(xiàn)ajax調(diào)用功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法,涉及jQuery節(jié)點(diǎn)的遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-04-04
jquery ajax調(diào)用動(dòng)態(tài)網(wǎng)頁內(nèi)容的方法，其實(shí)下面的這個(gè)例子很簡單的返回?cái)?shù)據(jù)。2010-03-03
在逛博客中無意中看到這個(gè)插件，一下就吸引住了我，于是就自己在網(wǎng)上找了些資料實(shí)踐了一下2011-08-08
這篇文章主要介紹了jquery中one()方法的用法,實(shí)例分析了one()方法的功能及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jQuery創(chuàng)建平滑的頁面滾動(dòng)(頂部或底部)
如何創(chuàng)建一個(gè)平滑的滾動(dòng)效果是本文的目的使用jQuery讓您可以滾動(dòng)到你的網(wǎng)頁的頂部或底部,相當(dāng)不錯(cuò)的一個(gè)效果，感興趣的你可不要錯(cuò)過了哈2013-02-02
基于jQuery ligerUI實(shí)現(xiàn)分頁樣式
這篇文章主要為大家詳細(xì)介紹了基于jQuery ligerUI實(shí)現(xiàn)分頁樣式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09![jQuery中[attribute*=value]選擇器用法實(shí)例](http://img.jbzj.com/images/xgimg/bcimg9.png)
jQuery中[attribute*=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute*=value]選擇器用法,實(shí)例分析了[attribute*=value]選擇器的功能、定義及匹配給定的屬性包含某些值的元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12