JQuery(三)

关于属性

1．attr(key,fn) 为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。key (String)是属性名称，fn (Function)返回值的函数

范围:当前元素

参数: 当前元素的索引值

示例：把src属性的值设置为title属性的值。

Html代码:<img src="test.jpg"/>

$("img").attr("title", function() { return this.src });

结果：<img src="test.jpg" title="test.jpg" />

2．attr(key,value) 为所有匹配的元素设置一个属性值。key (String) 属性名称，value (Object)属性值，

示例：为所有图像设置src属性。

Html代码: <img/>
<img/> ...

$("img").attr("src","test.jpg");

结果：[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

3．attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。name (String)属性名称

示例：返回文档中第一个图像的src属性值。

Html代码：<img src="test.jpg"/>

$("img").attr("src");

结果：test.jpg

4．attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ). properties (Map) 作为属性的“名/值对”对象

示例：为所有图像设置src和alt属性。

Html代码：<img />

$("img").attr({ src: "test.jpg", alt: "Test Image" });

结果：<img src= "test.jpg" alt:="Test Image" />

5．removeAttr(name) 从每一个匹配的元素中删除一个属性，name (String) :要删除的属性名

示例：将文档中图像的src属性删除

Html代码：<img src="test.jpg"/>

$("img").removeAttr("src");

操作案例：

<script type="text/javascript">

$(function(){

/*添加属性及属性值 函数计算出属性的值 并赋值给属性 */

$(".ipt").attr("value",function(){

return "zhang san san";

});

/*添加属性及属性值 直接定义属性并附属性值*/

$("#nam").attr("value",function(){

return "066823aa"

});

/*获取属性值 */

var $name=$("#attr>input");

for(var i=0;i<$name.length;i++){

alert($($name[i]).attr("name"));

}

//匹配元素中批量设置很多属性的最佳方式

$(".ipt").attr({

value:"zhang xiao san ",

disabled:"disabled"

});

/**移除某个属性*/

$("#attr>input").removeAttr("disabled");

/**添加一个类名*/

$("#nam").addClass("pass");

$(".pass").css("background-color","pink");

alert("----分界线-----");

/*如果是type =checkbox,radio,select val值代表的是checked,selected

type="text" val("")代表的是value的值*/

$("#nam").val("HelloWorld");

});

</script>

Html代码省略...

四．类

1. addClass(class) 为每个匹配的元素添加指定的类名。class (String)一个或多个要添加到元素中的CSS类名，请用空格分开

示例：为匹配的元素加上 'selected' 类

Html代码：<p>Hello</p>

$("p").addClass("selected");

2．removeClass(class) 从所有匹配的元素中删除全部或者指定的类。class (String)(可选) 一个或多个要删除的CSS类名，请用空格分开

示例1：从匹配的元素中删除 'selected' 类

Html代码：<p class="selected first">Hello</p>

$("p").removeClass("selected");

示例2：删除匹配元素的所有类

$("p").removeClass();

3．toggleClass(class) 如果存在（不存在）就删除（添加）一个类。class (String)CSS类名

示例：为匹配的元素切换 'selected' 类

Html代码：<p>Hello</p><p class="selected">Hello Again</p>

$("p").toggleClass("selected");

结果：<p class="selected">Hello</p>, <p>Hello Again</p>