[JQ权威指南]第六天:使用attr获取与设置元素的属性

获取:
在一个页面中,创建一个标记,通过JQUERY中的attr()方法获取标记的src和title属性值,并显示到页面中。

<!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>获取元素的属性</title>
    <script type="text/javascript" src="../jquery-2.1.4.js"></script>
    <style type="text/css"> body{ font-size:12px;} div{ float:left; padding-left:101px;} img{ border:solid 1px #ccc; padding:3px; float:left;} </style>
    <script type="text/javascript"> $(function(){ var strAlt=$("img").attr("src"); strAlt +="<br/><br/>"+$("img").attr("title"); $("#divAlt").html(strAlt); }) </script>
</head>
    <img alt="" title="这是一幅风景画" src="Images/img01.jpg" />
    <div id="divAlt"></div>
<body>
</body>
</html>

[JQ权威指南]第六天:使用attr获取与设置元素的属性_第1张图片

二:设置元素的属性
attr(name.value)
在页面中创建一个标记,在页面加载时,通过jquery中的attr()方法设置该标记的img和title属性值,并显示在页面中。

<!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>设置元素的属性</title>
    <script type="text/javascript" src="../jquery-2.1.4.js"></script>
    <style type="text/css"> body{ font-size:12px;} .clsSpan{ float:left; padding-top:10px; padding-left:10px;} .clsImg{ border:solid 1px #ccc; padding:5px; float:left;} </style>
    <script type="text/javascript"> $(function(){ // $("img").attr("src","Images/img01.jpg"); // $("img").attr("title","这是一幅风景画"); $("img").attr({src: "Images/img02.jpg",title: "这是一幅风景画"}); $("img").addClass("clsImg"); $("span").html("加载完毕"); }) </script>
</head>
<body>
    <img alt="" src="Images/img03.gif" style="float:left" />
    <span class="clsSpan">正在加载图片</span>
</body>
</html>

[JQ权威指南]第六天:使用attr获取与设置元素的属性_第2张图片

你可能感兴趣的:(标记)