div li隔行变色 鼠标悬浮高亮显示 jquery控制css样式

来源:互联网 发布:ar软件下载苹果 编辑:程序博客网 时间:2024/06/06 01:02
$("table tr").eq(1).remove();              //删除第一行数据$("#tbl1").find("tr").eq(0).remove();  //删除第一行数据,eq的下标是从0开始。$("#tblContent tr:even").css("background-color", "#333");   //奇数行$("#tblContent tr:odd").css("background-color", "blue");//偶数行

div li隔行变色:

<style type="text/css">      .bcloer{background-color: Red;}  </style>  <script type="text/javascript">      $(document).ready(function () {          //$("#UL_id li:even").addClass("bcloer");         //方式一          $("#UL_id li:even").attr("className", "bcloer");  //方式二      })  </script>  <div>      <ul id="UL_id">          <li>单数</li>          <li>双数</li>          <li>双数</li>          <li>单数</li>          <li>双数</li>          <li>双数</li>      </ul>  </div>

div li鼠标悬浮高亮显示:

    <style type="text/css">          .blue{background: #bcd4ec;}      </style>      <script type="text/javascript">          $(document).ready(function () {              $("#orderedlist li").hover(function () {                  $(this).addClass("blue");              }, function () {                  $(this).removeClass("blue");              });          });      </script>      <div>          <ul id="orderedlist">              <li>11111111111111111111111111111111</li>              <li>22222222222222222222222222222222</li>              <li>33333333333333333333333333333333</li>              <li>44444444444444444444444444444444</li>              <li>55555555555555555555555555555555</li>              <li>66666666666666666666666666666666</li>              <li>77777777777777777777777777777777</li>          </ul>      </div>  

div li隔行变色,鼠标悬浮高亮显示:

    <style type="text/css">          /*.hover的样式是必须得,具体样式效果自行设置*/          .hover{ background-color:#222C35; color:#FFF;}          .hover,.hover a{color:#FFF;}      </style>      <script type="text/javascript">          $(document).ready(function () {              jQuery.hoverPlugin = {                  hover: function (hoverid) {                      $(hoverid).hover(function () {                          $(this).addClass("hover")                      }, function () {                          $(this).removeClass("hover")                      })                  }              };              $.hoverPlugin.hover('#hoverul li');              $.hoverPlugin.hover('#hoverdiv a')          });      </script>      <div>          <ul id="hoverul">              <li>jquery图片左右来回循环飘动</li>              <li>jquery图片左右来回循环飘动</li>              <li>jquery图片左右来回循环飘动</li>              <li>jquery图片左右来回循环飘动</li>              <li><a href="#">jquery 特效</a></li>              <li><a href="#">jquery 特效</a></li>              <li><a href="#">jquery 特效</a></li>              <li><a href="#">jquery 特效</a></li>          </ul>      </div>  
0 0