jQuery 常用代码

作者: 愿你如夏日清凉的风 | 来源:发表于2017-05-02 19:41 被阅读13次

    js选项卡切换

     $(this).addClass('active').siblings('li').removeClass('active');
    
    $(document).ready(function(){
        $("#hide").click(function(){
            $("p").hide(1000);
        });
        $("#show").click(function(){
            $("p").show(1000);
        });
        $("#toggle").click(function(){
            $("p").toggle(1000);
        });
    })
    
    $(document).ready(function(){
        $("#in").on("click",function(){
            $("#div1").fadeIn(1000);
            $("#div2").fadeIn(1000);
            $("#div3").fadeIn(1000);
        });
        $("#out").on("click",function(){
            $("#div1").fadeOut(1000);
            $("#div2").fadeOut(1000);
            $("#div3").fadeOut(1000);
        });
        $("#toggle").on("click",function(){
            $("#div1").fadeToggle(1000);
            $("#div2").fadeToggle(1000);
            $("#div3").fadeToggle(1000);
        });
       $("#to").on("click",function(){
            $("#div1").fadeTo(1000);
            $("#div2").fadeTo(1000);
            $("#div3").fadeTo(1000);
        });
    })
    
    $(document).ready(function(){
        $("div").css("width","100px");
        $("div").css("height","100px");
        $("div").css("background","#ff0000");
        $("div").css({ width:"100px",height:"100px",backgroundColor:"#ff0000"});
        $("div").addClass("style1");
        $("div").click(function(){
            $(this).addClass("style2");
            $(this).removeClass("style1");
            $(this).toggleClass("style2");
        })
    });
    
    $(document).ready(function(){
        $("#flipshow").click(function(){
            $("#content").slideDown(1000);
        });
        $("#fliphide").click(function(){
            $("#content").slideUp(500);
        });
        $("#fliptoggle").click(function(){
            $("#content").slideToggle(500);
        })
    });
    

    相关文章

      网友评论

        本文标题:jQuery 常用代码

        本文链接:https://www.haomeiwen.com/subject/yhlhtxtx.html