$("img").attr({title:"修改后的title", alt: "同时修改alt属性"});
另外虽然我们可以使用 removeAttr( name ) 删除元素属性, 但是对应的DOM属性是不会被删除的, 只会影响DOM属性的值.
比如将一个input元素的readonly元素属性去掉,会导致对应的DOM属性变成false(即input变成可编辑状态):
$("#inputTest").removeAttr("readonly");
六,修改CSS样式
修改元素的样式, 我们可以修改元素CSS类或者直接修改元素的样式.
一个元素可以应用多个css类, 但是不幸的是在DOM属性中是用一个以空格分割的字符串存储的, 而不是数组. 所以如果在原始javascript时代我们想对元素添加或者删除多个属性时, 都要自己操作字符串.
jQuery让这一切变得异常简单. 我们再也不用做那些无聊的工作了.
1. 修改CSS类
下表是修改CSS类相关的jQuery方法:
名称 说明 实例
为每个匹配的元素添加指定的类名。 为匹配的元素加上 'selected' 类:
$("p").addClass("selected");
判断包装集中是否至少有一个元素应用了指定的CSS类
$("p").hasClass("selected");
从所有匹配的元素中删除全部或者指定的类。 从匹配的元素中删除 'selected' 类:
$("p").removeClass("selected");
如果存在（不存在）就删除（添加）一个类。 为匹配的元素切换 'selected' 类:
$("p").toggleClass("selected");
当switch是true时添加类,
当switch是false时删除类
每三次点击切换高亮样式:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
使用上面的方法, 我们可以将元素的CSS类像集合一样修改, 再也不必手工解析字符串.
注意 和 的参数可以一次传入多个css类, 用空格分割,比如:
$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });
removeClass方法的参数可选, 如果不传入参数则移除全部CSS类:
同样当我们想要修改元素的具体某一个CSS样式,即修改元素属性"style"时, jQuery也提供了相应的方法:
名称 说明 实例访问第一个匹配元素的样式属性。 取得第一个段落的color样式属性的值:
$("p").css("color");
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
将所有段落的字体颜色设为红色并且背景为蓝色:$("p").css({ color: "#ff0011", background: "blue" });
在所有匹配的元素中，设置一个样式属性的值。
数字将自动转化为像素值
将所有段落字体设为红色:$("p").css("color","red");
七.获取常用属性
虽然我们可以通过获取属性,特性以及CSS样式来取得元素的几乎所有信息, 但是注意下面的实验:
<!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> <title>获取对象宽度</title> <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript"> $(function() { alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff) alert("width():" + $("#testDiv").width()); //正确的数值1264 alert("style.width:" + $("#testDiv")[0].style.width ); //空值 }) </script> </head> <body> <div id="testDiv"> 测试文本</div> </body> </html>