jQuery之css

jQuery W3C文档
[url]http://www.w3school.com.cn/jquery/index.asp[/url]
从零开始学习jQuery(4)-使用jQuery操作元素的属性与样式
[url]http://www.cnblogs.com/tinawan/archive/2010/11/10/1874065.html[/url]
从零开始学习jQuery(3)-jQuery包装集
[url]http://www.cnblogs.com/tinawan/archive/2010/11/10/1873837.html[/url]
[i]jQuery 拥有三种用于 CSS 操作的重要函数：
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)[/i]
具体代码如下：
CSS

<style type="text/css">
		.panel {
			margin-left:25%;
			margin-top:5%;
		    padding: 60px;
		    background-color: red;
		    color: #FFFFFF;
		    font-size:50px;
		    font-weight: bold;
		    width: 600px;
		    text-align:center;
		}

		.foo{
			background-color:lime;
			border: 13px solid #345355;
		}
		.divClick{
			margin-left:25%;
			margin-top:5%;
		    padding: 60px;
		    background-color: green;
		    color: #000000;
		    font-size:50px;
		    font-weight: bold;
		    width: 600px;
		    text-align:left;
		}
		input{
			margin-left:25%;
			margin-top:10px;			
		}
		</style>

jQuery

<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script type="text/javascript" >
		$(function(){
			//如有多个可:eq(1)...
		   //元素选择器
		   /*
		   $("input:button").eq(0).bind("click",function(){
		   	   $(".panel").addClass("divClick");
		   });		   
		   $("input:button").eq(1).bind("click",function(){
		   	   $(".panel").toggleClass("divClick");
		   });
		   $("input:button").eq(2).bind("click",function(){
		   	   $(".panel").removeClass("divClick");
		   });
		   */

		   $("input:button").eq(0).bind("click",function(){
		   	   //加上div提高访问速度
		   	   $("div.panel").addClass("divClick");
		   	  //$(".panel").addClass("divClick");
		   }).end()//返回所有按钮
		   .eq(1).click(function(){//绑定第一个按钮事件
		   	   $("div.panel").toggleClass("divClick");
		   }).end().eq(2).click(function(){
		   	   $("div.panel").removeClass("divClick");
		   }).end().eq(3).click(function(){
		   	  $("div.panel").removeClass();
		   }).end().eq(4).click(function(){
		   	   $("div").eq(0).addClass("panel");
		   }).end().eq(5).click(function (){
		   	  $("div.panel").css("display","none");
		   }).end().eq(6).click(function(){
		   	   $("div.panel").css("display","");
		   	  // $("div.panel").css("display","block");
		   }).end().eq(7).click(function(){
		   	   $("div.panel").addClass("foo");
		   }).end().eq(8).click(function(){
		   	  $("div.panel").append("是否有clsass属性(foo): " + $("div.panel").hasClass('foo'));
		   }).end().eq(9).click(function(){
		   	   $("div.panel").css({"background-color":"#546456","font-size":"200%"});
		   }).end().eq(10).click(function(){
		   	   alert($("div.panel").css("background-color"));
		   });		   

		});
		</script>

HTML

 <div class="panel">welcome to jQuery!</div>
        <input type="button" value="改变div的样式" /><br>
        <input type="button" value="切换div的样式" /><br>
        <input type="button" value="删除div的样式(divClick)" /><br>
        <input type="button" value="删除div的所有样式" /><br>
        <input type="button" value="添加div的样式(panel)" /><br>
        <input type="button" value="设置div的css的隐藏" /><br>
        <input type="button" value="设置div的css的显示" /><br>
        <input type="button" value="添加div的第二个Class属性(foo)" /><br>
        <input type="button" value="检查div的是否有Class属性(foo)" /><br>
        <input type="button" value="设置div的css属性:json方式" /><br>
        <input type="button" value="获取div的css属性:$(selector).css(name)方式" /><br>