The use of jQuery Attributes (1. Attributes)

This article explains: the usage of attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name).
If you have any suggestions or comments about this series of articles, please send them to email: sjzlgt@qq.com
You can go to the jQuery official website to learn more about jQuery.
The following code needs to be refreshed after running.

<title>jQuery-Attributes-1</title>
<style type="text/css"> 
.div 
{ 
    width:95%; 
    margin-left:15px; 
    margin-top:15px; 
    margin-right:15px; 
    padding-left:5px; 
    padding-top:5px; 
    padding-bottom:5px; 
    background-color:#ccc; 
    border:#999 1px solid; 
    line-height:30px; 
    font-size:13px; 
    font-family:微软雅黑; 
} 
.blue{color:Blue;} 
.green{color:Green;} 
.button{border:green 1px solid;width:100px;} 
.xiaobiao{ font-weight:bold;} 
.red_test{background-color:red; color:White; width:300px; height:30px;} 
.li_test{border:#000 1px solid;} 
</style>

<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">
</div>The use of jQuery-Attributes (1. Attributes)<br>
This series of articles mainly talks about how to use the attributes (Attributes) of the jQuery framework. I will explain it with examples, based on simplicity and comprehensiveness, and will not go into depth. The articles are divided into: attributes, classes, Html code & There are 4 articles in total including text and value articles. <br>
This article explains: the usage of attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name). <br>
If you have any suggestions or comments about this series of articles, please send them to email: sjzlgt@qq.com <a href="http://jquery.com/" target="_blank">
You can go to </a>jQuery official website<br> to learn more about jQuery. <span style="color:Red;">
<strong><a href="http://www.cnblogs.com/bynet/" target="_blank">Copyright: code-cat Blog:</a>http://www.cnblogs.com/bynet</strong> Please retain the original author, source and copyright information when reprinting! </span>
</div>
<div class="div">

</div>Tested under IE6/7/8 and Firefox, the effect is achieved. <div class="div">

<span class="xiaobiao">
</span>1. Usage of attr(name)<br><br>
Definition: Get the attribute value of the first matching element. This method makes it easy to get the value of an attribute from the first matching element. If the element has no corresponding attribute, undefined is returned. <br>
Return value: Object<br>
Parameters: name (String): attribute name<br>
Example: Output the path, ID, Name, width, Alt, and Value attributes of the first image in the DIV with the ID "div_a1" to the DIV with the ID "div_a1_1". <div style="border:blue 1px solid;">
<br>
Code: <br>
$("#div_a1_1").append('<span style="color:Red;"><strong>Picture quantity: $("#div_a1 img") gets' $("#div_a1 img"). size() 'Pictures</strong></span><br>');<br>
$("#div_a1_1").append('First image path:' $("#div_a1 img").attr("src") '<br>');<br>
$("#div_a1_1").append('First picture ID:' $("#div_a1 img").attr("id") '<br>');<br>
$("#div_a1_1").append('First picture Name:' $("#div_a1 img").attr("name") '<br>');<br>
$("#div_a1_1").append('First picture frame width:' $("#div_a1 img").attr("width") '<br>');<br>
$("#div_a1_1").append('First picture box alt:' $("#div_a1 img").attr("alt") '<br>');<span style="color:green;">
$("#div_a1_1").append('<span style="color:Red;"><strong>Value of the first picture box:' $("#div_a1 img").attr("Value" ) '</strong></span><br>');
</span> //Click the button to see the effect</div>
<br><div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;">
<br>
DIV ID="div_a1"<img id="img_1" name="img_bky" src="http://files.jb51.net/upload/2009-12/20091214233425668.gif"    style="max-width:90%"  style="max-width:90%" alt="The use of jQuery Attributes (1. Attributes)_jquery" border="0">
<img id="img_2" name="img_yh" src="http://files.jb51.net/upload/2009-12/20091214233425172.gif"    style="max-width:90%"  style="max-width:90%" alt="The use of jQuery Attributes (1. Attributes)_jquery" border="0">
<input type="text" id="txt_1" name="txt_bky" style="width:150px;" value="input text 博客园">
<br>
<div id="div_a1_1" style="width:400px; border:#000 1px solid;">
<br>
id="div_a1_1"</div>
<input type="button" id="btn_1" value="按钮一" class="button">
<br>
</div>
You can try to output the attribute value of the text box above
<span style="color:Red;">
<strong>
</strong></span>Note: The selector $("#div_a1 img") obtains 2 images, while att(name) only obtains the attribute value of the first image. The img element has no value attribute, so 'undefined' is output in the end. </div>
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$("#btn_1").click(function(){ 
$("#div_a1_1").append('<span style="color:Red;"><strong>图片数量：$("#div_a1 img")获取到'+$("#div_a1 img").size()+'张图片<br>'); 
$("#div_a1_1").append('第一张图片路径：'+$("#div_a1 img").attr("src")+'<br>'); 
$("#div_a1_1").append('第一张图片ID：'+$("#div_a1 img").attr("id")+'<br>'); 
$("#div_a1_1").append('第一张图片Name：'+$("#div_a1 img").attr("name")+'<br>'); 
$("#div_a1_1").append('第一张图片框宽度：'+$("#div_a1 img").attr("width")+'<br>'); 
$("#div_a1_1").append('第一张图片框alt：'+$("#div_a1 img").attr("alt")+'<br>'); 
$("#div_a1_1").append('<span style="color:Red;"><strong>第一个图片框Value值：'+$("#div_a1 img").attr("Value")+'<br>'); 
}); 
</script>

<div class="div"> 
<span class="xiaobiao">2. attr(properties)用法</span><br> 
定义：将一个"名/值"形式的对象设置为所有匹配元素的属性。<br> 
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。 
或者你可以直接使用.addClass( class ) 和 .removeClass( class ). 
<br> 
返回值：jQuery<br> 
参数：properties (Map) : 作为属性的"名/值对"对象<br> 
实例：将ID为"div_b1"的DIV中为所有图像设置src和alt属性。<br> 
<div style="border:blue 1px solid;"> 
代码：<br> 
$("#div_b1 img:eq(0)").attr({ src: "/upload/2009-12/20091214233425668.gif", alt: "The use of jQuery Attributes (1. Attributes)_jquery" }); <br> 
$("#div_b1 img:eq(1)").attr({ src: "/upload/2009-12/20091214233425172.gif", alt: "The use of jQuery Attributes (1. Attributes)_jquery" });<span style="color:green;"> //点击按钮二看效果</span> 
</div>
<br> 
<div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_b1"<br> 
<img  id="img1" name="img_bky"    style="max-width:90%"  style="max-width:90%" border="0" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<img  id="img2" name="img_yh"    style="max-width:90%"  style="max-width:90%" border="0" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<br> 
<input type="button" id="btn_2" value="按钮二" class="button"> 
<script type="text/javascript"> 
$("#btn_2").click(function(){ 
$("#div_b1 img:eq(0)").attr({ src: "/upload/2009-12/20091214233425668.gif", alt: "The use of jQuery Attributes (1. Attributes)_jquery" }); 
$("#div_b1 img:eq(1)").attr({ src: "/upload/2009-12/20091214233425172.gif", alt: "The use of jQuery Attributes (1. Attributes)_jquery" }); 
}); 
</script> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">3. attr(key,value)用法</span><br> 
定义：为所有匹配的元素设置一个属性值。<br> 
返回值：jQuery<br> 
参数：key (String) : 属性名称 value (Object) : 属性值<br> 
实例：将ID为"div_c1"的DIV中为所有图像设置src属性。<br> 
<div style="border:blue 1px solid;"> 
代码：<br> 
$("#div_c1 img:eq(0)").attr("src","/upload/2009-12/20091214233425668.gif"); <br> 
$("#div_c1 img:eq(1)").attr("src","/upload/2009-12/20091214233425172.gif"); <span style="color:green;"> //点击按钮三看效果</span> 
</div>
<br> 
<div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_c1"<br> 
<img  id="img3" name="img_bky"    style="max-width:90%"  style="max-width:90%" border="0" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<img  id="img4" name="img_yh"    style="max-width:90%"  style="max-width:90%" border="0" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<br> 
<input type="button" id="btn_3" value="按钮三" class="button"> 
<script type="text/javascript"> 
$("#btn_3").click(function(){ 
$("#div_c1 img:eq(0)").attr("src","/upload/2009-12/20091214233425668.gif"); 
$("#div_c1 img:eq(1)").attr("src","/upload/2009-12/20091214233425172.gif"); 
}); 
</script> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">4. attr(key,fn)用法</span><br> 
定义：为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。<br> 
返回值：jQuery<br> 
参数：key (String) : 属性名称 fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值<br> 
实例：将ID为"div_d1"的DIV中为所有图像把title属性的值设置为src属性的值。 <br> 
<span style="border:blue 1px solid;">代码：$("#div_d1 img").attr("src", function() { return this.title;}); <span style="color:green;"> //点击按钮四看效果</span></span> 
<div id="div_d1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_d1"<br> 
<img  id="img5" name="img_bky"    style="max-width:90%"  style="max-width:90%" border="0" title="/upload/2009-12/20091214233425668.gif" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<img  id="img6" name="img_yh"    style="max-width:90%"  style="max-width:90%" border="0" title="/upload/2009-12/20091214233425172.gif" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<br> 
<input type="button" id="btn_4" value="按钮四" class="button"><br> 
<script type="text/javascript"> 
$("#btn_4").click(function(){ 
$("#div_d1 img").attr("src", function() { return this.title;}); 
}); 
</script> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">5. removeAttr(name)用法</span><br> 
定义：从每一个匹配的元素中删除一个属性。<br> 
返回值：jQuery<br> 
参数：name (String) : 要删除的属性名<br> 
实例：将ID为"div_e1"的DIV中为把所有图像src属性删除 。 <br> 
<span style="border:blue 1px solid;">代码：$("#div_e1 img").removeAttr("src"); <span style="color:green;"> //点击按钮五看效果</span></span> 
<div id="div_e1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_e1"<br> 
<img  id="img7" name="img_bky"    style="max-width:90%"  style="max-width:90%" border="0" src="http://files.jb51.net/upload/2009-12/20091214233425668.gif" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<img  id="img8" name="img_yh"    style="max-width:90%"  style="max-width:90%" border="0" src="http://files.jb51.net/upload/2009-12/20091214233425172.gif" alt="The use of jQuery Attributes (1. Attributes)_jquery" > 
<br> 
<input type="button" id="btn_5" value="按钮五" class="button"><br> 
<script type="text/javascript"> 
$("#btn_5").click(function(){ 
$("#div_e1 img").removeAttr("src"); 
}); 
</script> 
</div> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

完整代码打包下载