jq第三讲

一、设置元素样式

    1、添加、删除CSS类别

        $("div").addClass("myClass1 myClass2");         给元素添加一个类样式，或多个类样式，每个样式间以空格分割

        $("div").removeClass("myClass1");                  删除元素的类样式

    2、类别间动态切换

        $(function(){

            $("p").click(function({

                 $(this).toggleClass("mycss");          每次点击时对指定的样式反复加载或移除的操作，即样式交替执行。

            }););                                                  这里的this是指包含它的函数作为方法被调用时所属的对象：p

        });                                             　　　　toggleClass只能设置一种Class不能设置多个。

    3、鼠标感应

       $(".d1").mouseover(function () {                 mouseover：鼠标移上去之后的事件

           $(this).hide(1000);                          　　 把产生事件的元素1秒内隐藏

       });                                              　　　　   这里的this是指包含它的函数作为方法被调用时所属的对象：div

       $(".d1").mouseout(function () {                   mouseout：鼠标移走之后的事件

           $(this).show(1000); 　　　　　　　　　　　把产生事件的元素1秒内显示

       });

       $(".d1").hover(function () {                     　 hover：合并了上两种事件，他直接带两个函数分别执行mouseover和

           $(this).hide(1000);                          　　 mouseout对应的事件

       }, function () {                                 　　    hide：隐藏元素

           $(this).show(1000);                          　　show：显示元素

       });

    4、toggle方法

       $("#btn").click(function () {                        每点击一次按钮时指定元素交替完成显示、隐藏的动作

           $(".d1").toggle(1000);                       　  指定元素在1秒内显示或隐藏

       });

    ** toggle方法的低版本写法                           　 jquery-1.8.2.min.js下可以正常执行，不兼容高版本

       $("#btn").toggle(function () {                     这种写法直接有两个函数指定交替执行的函数体。

           $(".d1").slideUp();                          　　 下边缘开始收起，全部收完的效果呈现隐藏。

       }, function () {

           $(".d1").slideDown();                            下边缘开始拉开，全部拉开的效果呈现显示

       });

    5、某个元素中是否含有某个class类别的样式，返回值为布尔型

       $("d1").hasClass("myClass")                      如果d1元素中有myClass的类样式的话返回真，否则返回假。