1. 程式人生 > >17. jQuery-使用attr方法設定元素的屬性

17. jQuery-使用attr方法設定元素的屬性

1. 效果圖

在這裡插入圖片描述

2. html程式碼

<!DOCTYPE html>
<html>
<head>
    <title>使用attr方法設定元素的屬性</title>
        <style type="text/css">
           body{font-size:12px}
           .clsSpn{float:left;padding-top:10px;padding-left:10px}
           .clsImg{border:solid 1px #ccc;padding:3px;float:left}
    	</style>
</head>
<body>
      <img alt="" style="float:left" width="70px;" height="70px;"/>
      <span class="clsSpn">正在載入圖片...</span>
      
<script src="../jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		//設定src屬性
		//$("img").attr("src", "../img/pig.jpg");
		
		//設定title標題
		//$("img").attr("title", "這是一隻奔跑的小豬");

		//同時設定兩個屬性
		$("img").attr({"src":"../img/pig.jpg", "title":"這是一隻奔跑的小豬"});
		//增加樣式
		$("img").addClass("clsImg");
		//顯示載入狀態
		$("span").html("載入完畢");
	})
</script>
</body>
</html>