使用jQuery操作元素的属性与样式

在jQuery中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性:

当使用id选择器时常常返回只有一个对象的jQuery包装集, 这个时侯常使用attr(name)函数获得它的元素属性:

function testAttr1(event) {   alert($("#hibiscus").attr("class"));}

注意attr(name)函数只返回第一个匹配元素的特定元素属性值. 而attr(key, name)会设置所有包装集中的元素属性:

//修改所有img元素的alt属性$("img").attr("alt", "修改后的alt属性");

而 attr( properties ) 可以一次修改多个元素属性:

$("img").attr({title:"修改后的title", alt: "同时修改alt属性"});

另外虽然我们可以使用 removeAttr( name ) 删除元素属性, 但是对应的DOM属性是不会被删除的, 只会影响DOM属性的值.

比如将一个input元素的readonly元素属性去掉,会导致对应的DOM属性变成false(即input变成可编辑状态):

$("#inputTest").removeAttr("readonly");

 修改CSS类 
下表是修改CSS类相关的jQuery方法:名称说明实例
addClass( classes )为每个匹配的元素添加指定的类名。为匹配的元素加上 'selected' 类: 
$("p").addClass("selected");hasClass( class )判断包装集中是否至少有一个元素应用了指定的CSS类
$("p").hasClass("selected");removeClass( [classes] )从所有匹配的元素中删除全部或者指定的类。从匹配的元素中删除 'selected' 类: 
$("p").removeClass("selected");toggleClass( class )如果存在（不存在）就删除（添加）一个类。为匹配的元素切换 'selected' 类: 
$("p").toggleClass("selected");toggleClass( class, switch )当switch是true时添加类, 
当switch是false时删除类
每三次点击切换高亮样式: 
var count = 0; 
$("p").click(function(){ 
  $(this).toggleClass("highlight", count++ % 3 == 0); 
});
 
使用上面的方法, 我们可以将元素的CSS类像集合一样修改, 再也不必手工解析字符串.
注意  addClass( class ) 和removeClass( [classes] ) 的参数可以一次传入多个css类, 用空格分割,比如:$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });

removeClass方法的参数可选, 如果不传入参数则移除全部CSS类:

 $("p").removeClass()

修改CSS样式 
同样当我们想要修改元素的具体某一个CSS样式,即修改元素属性"style"时,  jQuery也提供了相应的方法:名称说明实例css( name )访问第一个匹配元素的样式属性。取得第一个段落的color样式属性的值: 

$("p").css("color"); css( properties )
把一个“名/值对”对象设置为所有匹配元素的样式属性。 
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。将所有段落的字体颜色设为红色并且背景为蓝色: 
$("p").css({ color: "#ff0011", background: "blue" }); 

 css( name, value )
在所有匹配的元素中，设置一个样式属性的值。 
数字将自动转化为像素值将所有段落字体设为红色: 

$("p").css("color","red");