2010-10-08在浏览器中兼容+jQuery3

一．实现背景图片铺满（兼容各种浏览器）

    <script type="text/javascript">

       $(document).ready(function() {

         $("body").ezBgResize({

                   img     : "image/bg.jpg",   //图片路径

                   opacity : 1,

                   center  : true

         });

      });

</script>

二．使div实现半透明

1. 子元素也透明：opacity：0.5
2. 子元素不透明：background:rgba(0,0, 0, 0.4);

          另：为了使其在较低版本也能显示，即实现浏览器的兼容性，可写为：

               background:rgba(0,0, 0, 0.4)!important;
               filter:Alpha(opacity=40);

 

                                                                           jQuery（3） 

九.设置元素样式

  1. 添加、删除CSS类别

      $("div").addClass("myClass1 myclass2")     //如果两个样式设置了相同的属性，以后面的（myClass2）属性值为准.

      $("div").removeClass("myClass1")             //移除样式

  2.样式交替执行

      1.$(function(){

              $("#btn").click(function({

              $(this).toggleClass(“d2”);               //点击时不断切换

       }););

});

       注意：toggleClass只能设置一种Class不能设置多个

      2. $(".d1").toggle(1000)                               //点击之后，显示和隐藏交替执行，设置时间1秒

      3. $(".d1").toggle(function(){                        //点击之后，交替执行，只支持版本比较低的jQuery类库文件

          $(".d1").hide(1000);

},function(){

          $(".d1").show(1000);

});  

 3.直接获取、设置样式

     mouseover：鼠标移上去之后

     mouseout： 鼠标移走之后

     

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

                 $(this).css(“color”,”red”);
 });

     $(".di").mouseout(function(){

                 $(this).hide(1000);

});

     也可以是两种样式合在一起：

     $(".d1").hover(function(){

     $(".d1").hide(1000);     //鼠标移上去之后，一秒内隐藏

},function(){

     $(".di").show(1000);    //鼠标移走之后，一秒内显示

})