【12】jQuery學習——入門jQuery屬性之元素屬性的設置與移除


元素屬性在我們平時寫的代碼中會經常用到比如img標簽中的src這個屬性,當然還有很多,那么下面我們就來說下怎么來操作這些屬性

jQuery中,用attr()方法來獲取和設置元素屬性,對應地,removeAttr()方法是用來刪除元素屬性。

【1】attr()這個函數有4個用法

用法 作用
$("Element").attr(name) 取得第一個匹配元素的屬性值,比如$("img").attr("src"),如果元素沒有相應屬性,則返回 undefined 。
$("Element").attr({key:value,key,value,....}) 表示為某一個元素一次性設置多個屬性
$("Element").attr(key,value) 為所有匹配的元素設置屬性值
$("Element").attr(key,function) 為所有匹配的元素設置一個計算的屬性值。

【2】removeAttr()只有一個

$("Element").removeAttr(name)移除某一個屬性

這個方法必須接受一個參數(屬性名稱),不然會報錯,另外屬性名稱必須是正確的,不然在火狐下也會報錯。

 

這里是范例:用到的圖片自己可以在網上隨便找幾個小圖片就好了。

這里用到了一個原生是js函數toLowerCase:將字符串轉換成小寫。

 

<!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>attr實例</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.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
        alert("例題說明:body中的標簽效果,要當所有的彈出框均彈出完畢才能在最下面的【文本域】中顯示出效果。");
		alert("取得第一個匹配屬性值是src的元素,此元素方法為:\n\n\t$(\"*\").attr(\"src\")\n\n\t此元素的src為:"+$("img").attr("src"));
		alert("為第一個DIV標簽一次性設置 ID,Name,以及style");
		$("div:first").attr({ID:"div1",Name:"div",style:"color:#f00;"});
		alert("設置完畢,設置方法為:\n\n$(\"div:first\").attr({ID:\"div1\",Name:\"div\",style:\"color:#f00;\"})\n\n\t請查看文本框");
		$("input").eq(0).val($("#a").html().toLowerCase());
		alert("如果1+1=2,那么為#h img標簽中src設置一張圖片");
		$("#h img").attr("src",function(){if(1+1==2){return "images/5.png";}else{return ""}})
		alert("設置完畢,設置方法為:\n\n$(\"#h img\").attr(\"src\",function(){if(1+1==2){return \"images/5.png\";}else{return \"\"}})\n\n\t請查看文本框");
		$("input").eq(1).val($("#h").html().toLowerCase());
		alert("移除#h img標簽中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>

 

 

ps。上面的文章來自夢三秋網站和w3cfuns網站


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM