手把手教你使用jQuery操作元素的属性与样式(1)
一. ?区分DOM属性和元素属性
一个img标签:
名称说明举例attr( name )取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。返回文档中第一个图像的src属性值:
$("img").attr("src");attr( properties )将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
为所有图像设置src和alt属性:
$("img").attr({ src: "test.jpg", alt: "Test Image" });attr( key, value )为所有匹配的元素设置一个属性值为所有图像设置src属性:
$("img").attr("src","test.jpg");attr( key, fn )为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。
把src属性的值设置为title属性的值:
$("img").attr("title", function() { return this.src });removeAttr( name )从每一个匹配的元素中删除一个属性将文档中图像的src属性删除:
$("img").removeAttr("src");当使用id选择器时常常返回只有一个对象的jQuery包装集, 这个时侯常使用attr(name)函数获得它的元素属性:
名称说明实例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类, 用空格分割,比如:
名称说明实例css( name )访问第一个匹配元素的样式属性。取得第一个段落的color样式属性的值:
$("p").css("color");css( properties )把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
将所有段落的字体颜色设为红色并且背景为蓝色:
$("p").css({ color: "#ff0011", background: "blue" });css( name, value )在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值
将所有段落字体设为红色:
$("p").css("color","red");?
提示： 不管css样式属性的名字里有多少个连字符，DOM一律采用“Camel记号”（驼峰）来表示它们。于是，css属性background-color将对应于DOM属性backgroundColor,DOM属性marginTopWidth将对应于css属性margin-top-width，等等，类似于java里的变量命名习惯。
DOM style属性不能用来检索在外部css文件里声明的样式信息。尽量用jquery的方法吧。
