jquery--DOM和动画操作

一.jquery的DOM操作
设置css样式

 //设置css样式，通过json格式来传递样式内容
        $("div").css(
            {
                "width":100,
                "height":100,
                "backgroundColor":"red"
            }
        )
        //通过eq(index)方法来查找第几个元素
         $("div").eq(1).css(
            {
                "width":100,
                "height":100,
                "backgroundColor":"red"
            }
        )

样式的操作：

        //$("div").addClass("base");-------添加class类，class属性名为base
        //$("div").removeClass("base");-------删除class类，class属性名为base
        //$("div").hasClass("base");---------判断是否存在这个类，返回boolean类型，true，false
        //$("div").toggleClass("base");-------如果有此base类名，则删除，没有此类名，则添加此base类名
        //隐式迭代：设置操作时，会给jq内部的所有的元素设置相同的样式，
          即相当于已经获取所有的元素，故获取时只会返回第一个元素的值

属性的操作

 属性操作:
        //设置属性，设置自定义属性
        //设置属性：如果为form表单中的属性：checked,selected,disabled等，使用prop()
            ----$("input").prop("checked",true);
        $("div").attr("title","认真听讲");
        //设置多个属性，属性名可用引号，可不用
        $("div").attr({
            alt:"hello",
            title:"123",
            score:"100"   //自定义属性
        })
        获取属性：
        $("div").attr("title");   //返回字符串

jq的动画

  jq动画：
        显示隐藏动画：hide(),show();
            默认元素为隐藏
            show():让指定的隐藏元素显示出来，通过display:block;实现
                    ---不传参数，并没有动画效果，只能实现元素显示
                    ---传递参数，show(2000),两秒后显示
                    ---参数：slow-----600ms
                            normal----400ms
                            fast------200ms
                    ---show(参数1，回调函数--动画执行完后的回调函数)
            hide():让指定的元素隐藏起来，通过display:none;实现
                    ---参数(执行时间，回调函数)
                    ---参数: slow-----600ms
                             normal----400ms
                             fast------200ms
        
        滑入滑出动画：slideDown()-滑出，卷出来,slideUp()-卷起来
            默认元素为隐藏
            slideDown(),slideUp()
                ----参数：执行时间，执行完后的回调函数
                ---参数: slow-----600ms
                        normal----400ms
                        fast------200ms
            slideToggle(),滑入滑出的切换，
                ---参数同上

        淡入淡出的效果;fadeIn()和fadeOut();
            默认元素为隐藏
            fadeIn():将隐藏的元素以渐渐出现的效果显现出来
            fadeOut():将元素以渐渐消失的效果隐藏起来

        自定义动画函数方法animate()
            ----参数:第一个：执行动画的css属性
            ----     第二个：执行的动画时长
            ----     第三个： 动画执行完成后，立即执行的回调函数
            ----     $("div").animate({left:400，width:100},4000,function(){
                            alert("动画执行完成")
                            //动画队列，
                             $("div").animate({left:200},4000)
                                     .animate({left:100},4000)
                                     .animate({width:100},4000)
                     })

        停止动画：stop();
                ----stop(无参数):停止当前正在执行的动画
                ----参数：第一个：
                     ----true:后续动画不执行
                     ----false：后续动画会执行，当前执行的停止
                ----参数：第二个：
                     ----true:立即执行完成当前动画,跳转最终的动画效果
                     ----false：立即停止当前动画，不跳转到最终的动画效果