jQuery 7 关于css操作

jQuery 7 关于css操作

 

jQuery的css增加修改操作与js的style原理上相同，都是在html文档中添加style=""属性。

由于style的优先级大于外部样式表.css，会优先执行。

 

下面是一个例子

实现功能：

点击之后border变色，同辈元素保持a:link a:visited a:hover a:active状态。

HTML代码：<div class="buy">  <ul>    <li class="size"><a href="####">M</a></li>    <li class="size"><a href="####">L</a></li>    <li class="size"><a href="####">XL</a></li>    <li class="size"><a href="####">XXL</a></li>    <li class="size"><a href="####">XXXL</a></li>    <li class="size"><a href="####">4XL</a></li>    <li class="size"><a href="####">5XL</a></li>  </ul></div>CSS代码：.buy ul{  list-style-type: none;  overflow: hidden;} .buyr ul li{  float: left;  font-size: 1em;} .buy ul li a{  display: inline-block;  padding: 4px 5px;  margin-right: 4px;} .buy a:link,.buy a:visited{  border: 2px solid #DDD;}.buy a:hover,.buy a:active{  border: 2px solid #F40;}JS代码：$(document).ready(function(){  $(".buy ul li").click(function(){  $(this).children("a").css("border","2px solid #F40");  $(this).siblings().each(function(){    $(this).children("a").removeAttr("style");  });});});