|
元素屬性在我們平時(shí)寫(xiě)的代碼中會(huì)經(jīng)常用到比如img標(biāo)簽中的src這個(gè)屬性，當(dāng)然還有很多，那么下面我們就來(lái)說(shuō)下怎么來(lái)操作這些屬性 jQuery中，用attr()方法來(lái)獲取和設(shè)置元素屬性，對(duì)應(yīng)地，removeAttr()方法是用來(lái)刪除元素屬性。 【1】attr()這個(gè)函數(shù)有4個(gè)用法
【2】removeAttr()只有一個(gè) $("Element").removeAttr(name)：移除某一個(gè)屬性 這個(gè)方法必須接受一個(gè)參數(shù)（屬性名稱(chēng)），不然會(huì)報(bào)錯(cuò)，另外屬性名稱(chēng)必須是正確的，不然在火狐下也會(huì)報(bào)錯(cuò)。
這里是范例：用到的圖片自己可以在網(wǎng)上隨便找?guī)讉€(gè)小圖片就好了。 這里用到了一個(gè)原生是js函數(shù)toLowerCase：將字符串轉(zhuǎn)換成小寫(xiě)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>attr實(shí)例</title>
<style type="text/css">
*{margin:0; padding:5px;}
body{margin:0 auto; width:810px;}
input{width:800px; height:22px; line-height:22px; font-size:12px;}
</style>
<script language="javascript" src="http://ajax./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
alert("例題說(shuō)明：body中的標(biāo)簽效果，要當(dāng)所有的彈出框均彈出完畢才能在最下面的【文本域】中顯示出效果。");
alert("取得第一個(gè)匹配屬性值是src的元素，此元素方法為：\n\n\t$(\"*\").attr(\"src\")\n\n\t此元素的src為："+$("img").attr("src"));
alert("為第一個(gè)DIV標(biāo)簽一次性設(shè)置 ID,Name,以及style");
$("div:first").attr({ID:"div1",Name:"div",style:"color:#f00;"});
alert("設(shè)置完畢，設(shè)置方法為：\n\n$(\"div:first\").attr({ID:\"div1\",Name:\"div\",style:\"color:#f00;\"})\n\n\t請(qǐng)查看文本框");
$("input").eq(0).val($("#a").html().toLowerCase());
alert("如果1+1=2，那么為#h img標(biāo)簽中src設(shè)置一張圖片");
$("#h img").attr("src",function(){if(1+1==2){return "images/5.png";}else{return ""}})
alert("設(shè)置完畢，設(shè)置方法為：\n\n$(\"#h img\").attr(\"src\",function(){if(1+1==2){return \"images/5.png\";}else{return \"\"}})\n\n\t請(qǐng)查看文本框");
$("input").eq(1).val($("#h").html().toLowerCase());
alert("移除#h img標(biāo)簽中alt屬性,方法如下:\n\n\t$(\"#h img\").removeAttr(\"alt\");");
$("#h img").removeAttr("alt");
$("input").eq(2).val($("#h").html().toLowerCase());
})
</script>
<body>
<span id="a"><div>我是div1</div></span>
<span id="b"><div>我是div2</div></span>
<span id="c"><div>我是div3</div></span>
<span id="d"><img src="images/1.png"/></span>
<span id="e"><img src="images/2.png"/></span>
<span id="f"><img src="images/3.png"/></span>
<span id="g"><img src="images/4.png"/></span>
<span id="h"><img src="" alt="I have alt attributes!"/></span>
<br/>
<input type="text" />
<br/><br/><br/>
<input type="text" />
<br/><br/><br/>
<input type="text" />
<br/><br/><br/>
<textarea name="" cols="80" rows="9">
<span id="a"><div>我是div1</div></span>
<span id="b"><div>我是div2</div></span>
<span id="c"><div>我是div3</div></span>
<span id="d"><img src="images/1.png"/></span>
<span id="e"><img src="images/2.png"/></span>
<span id="f"><img src="images/3.png"/></span>
<span id="g"><img src="images/4.png"/></span>
<span id="h"><img src="images/5.png"/></span>
</textarea>
</body>
</html>
|
|
|
