jQuery獲取、設(shè)置和刪除屬性的方法

  獲取和設(shè)置屬性

要獲取小圖片的src屬性，設(shè)置大圖片的src屬性值，使大圖片不斷切換，必須掌握jQuery獲取和設(shè)置屬性的方法。

例如：某幅圖片的id為"pto"，在JavaScript中可以用以下方式獲取src屬性值。

var img=document.getElementById("pto");
var path=img.src;                    //獲取屬性
img.src="路徑";                      //設(shè)置屬性值
img.getAttribute("src");            //獲取屬性
img.getAttribute("src","路徑");    //獲取屬性值

在jQuery中使用attr()方法來(lái)獲取和設(shè)置元素屬性。

要獲取圖片的src屬性，只需給attr()方法傳遞一個(gè)參數(shù)，即屬性名稱。

var $img=$("#pto");            //獲取圖片<img>元素
var path=$img.attr("src");     //獲取圖片<img>元素節(jié)點(diǎn)src屬性

如果要設(shè)置圖片的src屬性值，繼續(xù)使用attr()方法，不同的是，要傳遞兩個(gè)參數(shù)，即屬性名和對(duì)應(yīng)的值。

$img.attr("src","路徑");        //設(shè)置圖片<img>元素節(jié)點(diǎn)src屬性值

如果需要一次性為同一個(gè)元素設(shè)置多個(gè)屬性：

$img.attr({"src":"路徑","title":"圖片提示文字"});   //同時(shí)設(shè)置同一個(gè)元素多個(gè)屬性

刪除屬性

刪除文檔中某元素的特定屬性，可以使用removeAttr()方法來(lái)實(shí)現(xiàn)。

$("#pto").removeAttr("title")；

實(shí)現(xiàn)結(jié)果：

舊：<img src="01.jpg" title="123">   新：<img src="01.jpg">

掌握了attr()和removeAttr()方法之后，可以實(shí)現(xiàn)一個(gè)鼠標(biāo)移到某元素上改變屬性值。

注：一定要引入jQuery文件才可以應(yīng)用

/*html內(nèi)容*/
<img src="img/img1/fw1.jpg" id="test" title="test"/><br />  /*大圖*/
<div>  /*小圖*/
    <img src="img/img1/22.jpg" />
    <img src="img/img1/33.jpg" />
    <img src="img/img1/44.jpg" />
</div>

//jQuery內(nèi)容
$(function(){
    $("div img").mouseover(function(){
	var big_src=$(this).attr("src");    //獲取小圖的src屬性
	$("#test").attr("src",big_src);     //設(shè)置大圖的src屬性
    });
});

此時(shí)運(yùn)行程序會(huì)發(fā)現(xiàn)，光標(biāo)移入某幅小圖時(shí)，大圖顯示區(qū)域?qū)?huì)顯示小圖。

總結(jié)：

設(shè)置或獲取屬性及屬性值使用attr()。

如果想要在同一個(gè)元素內(nèi)設(shè)置多個(gè)屬性需要給一個(gè)大括號(hào)里面放屬性及屬性值，屬性與屬性值之間用冒號(hào)，屬性與屬性之間用逗號(hào)。

刪除屬性直接用removeAttr("屬性名")。

以上就是如何使用jQuery對(duì)屬性進(jìn)行獲取、設(shè)置和刪除的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！