先看最基本的關於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.111cn.net');
}) |
