Javascript知识【jQuery样式操作&案例：jQuery隔行换色】

    Title

    
        .blueDiv{

            background-color: #87CEFA;

            width:300px;

            height:300px;
        }

        $(function(){

            var d2 = $("#d2");

            //1、获取d2这个div，字体大小
            alert(d2.css("font-size"));

            //2、设置d2这个div，字体大小为30px
            d2.css("font-size","30px");
        });

   //1、页面加载完成时
   $(function () {

      //2、获取除了第一个tr外，指定奇偶数的tr
      //    对tr:gt(0)的集合进行筛选。 第一条数据1，索引0是偶数
      var arr = $("tr:gt(0):odd");

      /*arr.each(function () {
         alert(this.innerHTML);
      });*/
      //3、为指定这些tr添加蓝色样式
      arr.addClass("blue");

      //优化为：$("tr:gt(0):odd").addClass("blue");
   });

    Title

        #d1{

            width:100px;

            height:100px;

            background-color: skyblue;
        }

        $(function () {

            $("#d1").mouseover(function () {

                $(this).css("background-color","pink");
            }).mouseout(function () {

                $(this).css("background-color","skyblue");
            });
        });

   //1、页面加载完成时
   $(function () {

      $("tr:gt(0):odd").addClass("blue");

      //1、获取所有指定的tr
      var trs = $("tr:gt(0)");

      //2、绑定鼠标移入事件：事件中，进行变色逻辑
      trs.mouseover(function () {

         //保存原有色
         this["k1"] = $(this).css("background-color");

         //赋予新色
         $(this).css("background-color","pink");
      }).mouseout(function () {

         //3、绑定鼠标移出事件：事件中，进行还原逻辑
         $(this).css("background-color",this["k1"]);
      });
   });