jQuery总结样式操作动画（via 代码）

1，操作样式

 $(function () {
            //获取按钮,点击按钮,为div添加一个类样式
            $("#btn").click(function () {
                //$("#dv").addClass("cls");//在addClass方法中类样式的名字前面没有点(.)
                //$("#dv").addClass("cls").addClass("cls2");

                //另一种写法,addClass添加样式的时候.多个类样式的名字中间用空格隔开
                $("#dv").addClass("cls cls2");
            });

            $("#btn2").click(function () {
                //移除一个元素的类样式
                //$("#dv").removeClass("cls");
                //移除div的所有的类样式,removeClass方法中什么也不写移除的是当前元素的所有的类样式
                $("#dv").removeClass();
            });
        });

.addClass 添加样式   .removeClass移除样式

2，查询样式

        $(function () {
            //点击第一个按钮为div添加类样式
            $("#btn1").click(function () {
                $("#dv").addClass("cls");
            });
            //点击第二个按钮查询这个div是否应用了cls类样式
            $("#btn2").click(function () {
                var result=$("#dv").hasClass("cls");
                console.log(result);//返回true
            });
        });

hasClass是否使用了某个样式

3，切换类样式

//页面加载后点击按钮实现开关灯的效果
        $(function () {
//            $("#btn").click(function () {
//                //先判断body是否应用了某个类样式,如果应用了就移除,如果没有应用就让body应用这个类样式
//                if($("body").hasClass("cls")){
//                    //应用了--移除该类样式
//                    $("body").removeClass("cls");
//                    $(this).val("关灯");
//
//                }else{
//                    //没有应用--让body添加这个类样式
//                    $("body").addClass("cls");
//                    $(this).val("开灯");
//                }
//            });

            //更简单的代码
            $("#btn").click(function () {
                $("body").toggleClass("cls");//切换类样式
            });

        });

toggleClass 切换类样式，触发后可以实现样式的切换，更简洁的实现功能。

 4，css相关方法的总结

/*
      *
      * .css()
      * .css("属性","属性值");
      * .css("属性","属性值").css("属性","属性值");
      * .css({"属性":"属性值","属性":"属性值"});
      * addClass()
      * addClass("类样式名字");添加一个类样式
      * addClass("类样式名字1 类样式名字2");
      * removeClass()
      * removeClass("类样式名字");移除类样式
      * removeClass();移除的是当前元素中所有的类样式
      * hasClass();判断当前元素是否应用了某个类样式
      * toggleClass();切换元素的类样式的
      *
      *
      *
      * */

5，获取兄弟元素的方法

  //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
        $(function () {
            //获取ul->li
            $("ul>li").mouseenter(function () {
//鼠标进入，当前元素的背景颜色变红，其他兄弟元素的背景颜色去除
                $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
            }).mouseleave(function () {
//鼠标离开后，去除当前和兄弟元素的背景颜色样式
                $(this).css("backgroundColor","").siblings().css("backgroundColor","");
            }).click(function () {
                //当前元素前面的所有兄弟元素背景颜色为黄色
                //$(this).prevAll().css("backgroundColor","yellow");
                //当前元素后面的所有兄弟元素背景颜色为蓝色
                //$(this).nextAll().css("backgroundColor","blue");

                //链式编程代码
                //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
                //解决断链--->恢复到断链之前的一个效果--修复断链
                //.end()方法恢复到断链之前的效果
                $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
            });
        });

mouseenter：鼠标进入的事件

mouseleave：鼠标离开的事件

siblings(): 当前元素的兄弟元素

prevAll()：当前元素的前面所有兄弟元素

nextAll()：当前元素的后面所有兄弟元素

end()：恢复短链前的元素对象

6，元素的显示和隐藏动画

$(function () {
            //点击按钮 隐藏div
            $("#btnHide").click(function () {
                //$("#dv").hide();//隐藏
                //hide方法中可以写参数:参数类型:1.数字类型,2字符串类型
                //1数字类型:1000表示的是毫秒  ---1秒
                //2字符串类型: "slow"  "normal"  "fast"
                $("#dv").hide(1000);
                //$("#dv").hide("normal");
            });
            $("#btnShow").click(function () {
                //$("#dv").show();//显示
                //show方法中可以写参数:参数类型:1.数字类型,2字符串类型
                //1数字类型:1000表示的是毫秒  ---1秒
                //2字符串类型: "slow"  "normal"  "fast"
                //$("#dv").show(1000);
                $("#dv").show("fast");
            });
        });

 hide方法中可以写参数:参数类型:1.数字类型,2字符串类型，1数字类型:1000表示的是毫秒  ---1秒，2字符串类型: "slow"  "normal"  "fast"

show方法同理

7，动画滑入滑出效果

 $(function () {
            //slideUp和slideDown和slideToggle方法中都可以写参数
            //参数:可以写数字类型  1000毫秒---1秒
            //参数:字符串:  slow   normal  fast
            //点击第一个按钮
            $("#btn1").click(function () {
                $("#dv").slideUp(1000);
            });
            //点击第二个按钮
            $("#btn2").click(function () {
                $("#dv").slideDown(1000);
            });
            //点击第三个按钮
            $("#btn3").click(function () {
                $("#dv").slideToggle(1000);
            });

        });

slideUp滑入  slideDown滑出 类似拉窗帘的动画

8，动画淡入，淡出，透明度

 $(function () {
            //slow  normal  fast
            $("#btn1").click(function () {
                $("#dv").fadeIn(1000);
            });
            //点击第二个按钮
            $("#btn2").click(function () {
                $("#dv").fadeOut(1000);
            });
            //点击第三个按钮
            $("#btn3").click(function () {
                $("#dv").fadeToggle(1000);
            });

            $("#btn4").click(function () {
                //一秒钟 透明度达到0.3
                $("#dv").fadeTo(1000,0);
            });
        });

9，动画效果animate

 $(function () {
            $("#btn").click(function () {
                //获取div,产生动画效果
                //animate方法；
                /*
                * 参数:
                * 1.是键值对---对象
                * 2.时间---1000毫秒---1秒
                * 3.匿名函数---回调函数
                *
                * */
                $("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
                    $("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
                });
            });
        });

在执行完变大，向右移动后，在回调函数中再执行接下来的动画

10，创建元素

 //需求:点击按钮,在div中创建一个超链接
        $(function () {
            var i=0;
            $("#btn").click(function () {
                i++;
                //创建元素
                var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
                //把元素添加到div中
               // $("#dv").append(aObj);//把超链接追加到div中

                //把元素插入到某个元素的前面
                //$("#dv").prepend(aObj);
                //把元素添加到当前元素的后面(兄弟元素来添加)
                //$("#dv").after(aObj);
                //把元素添加到当前元素的前面(兄弟元素来添加)
                //$("#dv").before(aObj);

            });
        });

 

•                把元素添加到div中
•                $("#dv").append(aObj);//把超链接追加到div中
•                 把元素插入到某个元素的前面
•                 $("#dv").prepend(aObj);
•                 把元素添加到当前元素的后面(兄弟元素来添加)
•                 $("#dv").after(aObj);
•                 把元素添加到当前元素的前面(兄弟元素来添加)
•                 $("#dv").before(aObj)

11，创建元素的各种方式

//需求:点击按钮把一个p标签添加到一个div中
        $(function () {
            $("#btn").click(function () {
                //创建p标签
                var pObj= $("<p></p>");
                pObj.text("哈哈哈,我又变帅了");
                //$("#dv").append(pObj);
                //把pObj对象主动的加到div中
                pObj.appendTo($("#dv"));
            });
        });

12，动态创建表格

  $(function () {
            $("#btnCreate").click(function () {
                var arr=[];
                //遍历数组
                for(var i=0;i<datas.length;i++){
                    var obj=datas[i];//数组中的每一个对象
                    //创建行和列,加入到tbody中
                    arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>      <td>"+obj.type+"</td></tr>");
                }
                $("#tbd").html(arr);
            });
        });

用数组存储拼接好的字符串，并使用html（）方法渲染 他

13，克隆和清空元素

$(function () {
            //点击按钮清空div中内容
            $("#btn").click(function () {
                //$("#dv").html("");//清空元素中的内容
                //$("#dv").empty();//清空元素中的内容
                //$("#dv").remove();//移除元素自身---自杀
            });
            $("#btn2").click(function () {
                var spanObj=$("#dv>span").clone();//克隆,复制了这个元素
                spanObj.css("fontSize","50px");
                $("#dv2").append(spanObj);
            });
        });

14，自定义属性

  $(function () {
            //点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
            $("#btn").click(function () {
                //获取div,创建超链接
                var aObj=$("<a></a>");
                //attr();可以写两个参数:1参数；属性,2属性值
                //attr();只写了一个参数,获取该元素的这个属性的值
                aObj.attr("title","百度一下");
                aObj.attr("href","http://www.baidu.com");
                aObj.text("百度");
                $("#dv").append(aObj);
                console.log(aObj.attr("href"));

            });
        });

15，控制复选框选中

//点击按钮显示复选框的选中状态
        $(function () {
            $("#btn").click(function () {
               // console.log($("#ck").attr("checked"));
                //prop()可以真正的获取元素是否选中的状态
                //console.log($("#ck").prop("checked"));
                //点击按钮让复选框选中,再点按钮让复选框不选中
                var flag=$("#ck").prop("checked");//获取选中状态
                if(flag){
                    //选中了
                    $("#ck").prop("checked",false);
                }else{
                    //没有选中
                    $("#ck").prop("checked",true);
                }
            });
        });

16，设置宽高

  //点击按钮,获取当前元素的宽和高,再次设置元素的宽和高,设置后元素的宽和高分别是原来的宽和高2倍
        $(function () {
            $("#btn").click(function () {
                //获取元素的宽和高
//                var width=parseInt($("#dv").css("width"))*2;
//                var height=parseInt($("#dv").css("height"))*2;
//                //设置样式
//                $("#dv").css("width",width+"px");
//                $("#dv").css("height",height+"px");
                //通过元素的css()方法可以获取元素的宽和高,但是都是字符串类型


                //获取宽和高的属性值---->数字类型
                var width=$("#dv").width()*2;
                var height=$("#dv").height()*2;
                //设置元素的宽和高--->参数可以是数字也可以是字符串
                $("#dv").width(width);
                $("#dv").height(height);

            })
        });

17，元素的移动

 $(function () {
            $("#btn").click(function () {
                //获取left和top的值--->都是数字类型
                //console.log($("#dv").offset().left);
                //console.log($("#dv").offset().top);
                $("#dv").offset({"left":200,"top":200});
            });
        });

18，获取滚动条滚动距离

  $(function () {
            $(document).click(function () {
                //获取的卷曲出去的距离----->数字类型
                console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
            });
        });