1.获取元素的属性
当谈到 DOM 元素时,我们可以操作的一些最基本的组件是属性以及分配给这些元素的属性。大部分属性可以作为 DOM 节点属性在 JavaScript 中时可用的。一些比较常见的属性是
类名、标签名、id、超链接、标题、rel、src
注意:除了这几个属性外,不能保证使用attr方法设置属性成功,例如:
$("div").attr("text","对所有的匹配的div设置值");
则设置失败,原因是text属性并不在上述列表中。
<img id="imageid" src="image.gif" alt="Image"class="myclass" title="This is an image"/>在这个元素的标记中,标签名是 img,并且为 id,src,alt,类以及标题的标记代表了元素的属性,每一个都包含一个名称和一个值。
<div> <emtitle="Bold andbrave1">这是第一段</em> <emtitle="Bold andbrave2">这是第二段</em> <emtitle="Bold andbrave3">这是第三段</em> <pid="myid">这是第二段</p> <divid="divfirst"></div> </div>
attr() 方法可以用来获取与设置匹配的第一个元素的一个属性的值或对所有匹配的元素设置属性值。
1.1获取第一个元素的属性值
$(function(){ var title=$("em").attr("title");//title为取到的第一个匹配的em元素的title值,即为Bold and brave1 console.warn(title); $('#divfirst').text(title); });
$(function(){ var title=$("em").attr("title");//title为取到的第一个匹配的em元素的title值,即为Bold and brave1 console.warn(title); $('#divfirst').text(title); });
1.2 对所有匹配的元素设置属性值
<div> <divid="divFirst"></div> <divid="divSecond"></div> <divid="divThird"></div> <br> <imgid="myImg1" src="pic/1.jpg" alt="Sample image" /> <br> <imgid="myImg2" src="pic/1.jpg" alt="Sample image" /> <br> <imgid="myImg3" src="pic/1.jpg" alt="Sample image" /> </div>
js页面:
$(function(){ $("div").attr("text","对所有的匹配的div设置值"); //设置失败,原因是text并不在属性列表(类名、标签名、id、超链接、标题、rel、src)中 $("img").attr("src","pic/2.jpg");//设置成功 });