jQuery学习教程（六）：属性操作与CSS操作

一、属性操作

1、获取属性和设置属性

$(selector).attr(attribute);
$(selector).attr(attribute,value)

例，<a href="http://www.51obj.cn/" title="_blank"></a>使用$("a").attr("href")来获取其 href属性。这种方式十分的“优雅”，即使用不带参数(或一个参数)的函数表示获取，带多个参数的函数来设置相关值。

2、删除属性

$(selector).removeAttr(attribute)

二、StyleSheet操作

1、获取样式及设置样式，使用$(selector).attr(css-selecotr)可获取相应css取值，使用$(selector).attr(css-selector,value)可设置其 值。

$(selector).addClass(css-class);//添加class
相信CSSer还记得class可以使用叠加方式，如<div class="page centerTd"></div>，这样可对div设置多种样式（而且居然ie6也支持！）。使用attr("class",value) 方式较繁琐且添加效果是“覆盖”而addClass是“追加”

２、移除样式

$(selector).removeClass(css-class)

另jQuery还提供了一个切换两个元素css类的函数toggleClass()，使用方法$(selector1).toggleClass(selector2)

判断是否含有某个样式

$(selector).hasClass(css-class)

示例

<style type="text/css"> 
	.err{ border:solid 1px #d00; background:#fcc; font-size:12px; padding:10px;}  
</style>
<script type="text/javascript"> 
	$(function(){  
		$('#btnAddClass').click(function(){  
			$('p').addClass('err');  
		});  
		$('#btnRemoveClass').click(function(){  
			$('p').removeClass('err');  
		});  
		$('#btnSetStyle').click(function(){  
			alert("设置前：\ncolor:" + $('p').css('color'));  
			$('p').css('color','#f00');  
			alert("设置后：\ncolor:" + $('p').css('color'));  
		}); 
	});  
</script>