attr() 方法可以动态的改变html各种元素的属性，今天我们由于要动态修改a标签的连接，所以就深入的了解了attr()方法，下面我给大家整理一下，希望给各位有所帮助。
先看最基本的关于attr()方法
attr() 方法设置或返回被选元素的属性值。
根据该方法不同的参数，其工作方式也有所差异。
返回属性值 $(selector).attr(attribute)
设置属性/值 $(selector).attr(attribute,value)
attribute 规定属性的名称。
value 规定属性的值。
实例
改变图像的 width 属性：
| 代码如下 | 复制代码 |
$("button").click(function(){
$("img").attr("width","180");
});
|
复杂例子
| 代码如下 | 复制代码 |
<script language="javascript">
$(function(){
//全局变量
var strType;
//初始化变量
strType = $(".so-tit ul li:first").attr("desc")
//为第一个so-tit ul li添加当前效果样式
$(".so-tit ul li:first").addClass("so-current");
$(".so-tit ul li").click(function() {
//去掉所有.so-tit ul li的样式
$(".so-tit ul li").removeClass("so-current");
//当前.so-tit ul li的样式
$(this).addClass("so-current");
//当前desc属性值
strType = $(this).attr("desc")
});
$("#so").click(function() {
var Url = window.location.href;
alert(strType);
});
});
</script>
<div id="top">
<div class="logo fl"><img src="/Images/bcl-logo.gif" alt="" /></div>
<div class="so fl">
<div class="so-tit">
<ul>
<li desc="product">找产品</li>
<li desc="shopping">找商家</li>
<li desc="news">找资讯</li>
<li desc="job">找人才</li>
</ul>
</div>
<div class="so-index">
<input type="text" class="txt" />
<select id="product">
<option selected="selected">所有产品</option>
</select>
<img src="/Images/so-but.gif" id="so" alt="搜索" align="absmiddle" /> </div>
</div>
</div> |
动态修改连接
| 代码如下 | 复制代码 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 动态修改连接</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<!--上面更换您的jquery 路径-->
</head>
<style>
span{display:block; width:100px; margin:0 20px 15px 0; text-align:center; height:20px; line-height:20px; display:block; float:left; background:#CCC;}
div{border:#000 solid 1px; height:30px; clear:left; width:300px; line-height:30px; text-align:center;}
</style>
<script>
var link1 = "<a href='http://www.baidu.com' target='_blank'>";//声明一个变量
var link2 = "<a href='http://www.qq.com' target='_blank'>";
var link3 = "<a href='http://www.sina.com.cn' target='_blank'>";
var linkR = "</a>";//连接结束
$(function(){
$("#link1").hover(function(){
$("#test").html(link1+"连接文字"+linkR);//修改指向时的连接
})
$("#link2").hover(function(){
$("#test").html(link2+"连接文字2"+linkR);
})
$("#link3").hover(function(){
$("#test").html(link3+"连接文字3"+linkR);
})
})
</script>
<body>
<span id="link1">1</span> <span id="link2">2</span> <span id="link3">3</span> <div id="test"></div>
</body>
</html> |
结过上面的方法之后发现有点复杂，后来发现可直接这样操作
html
| 代码如下 | 复制代码 |
<a href="javascript：void(0);" target="_blank" id="title">xxxxx</a> |
jquery
| 代码如下 | 复制代码 |
$('#sy').click(function(){
$('#title').attr('','http://www.php100.com');
}) |
