jQuery基础总结(二)

来源:互联网 发布:泰坦尼克号真相 知乎 编辑:程序博客网 时间:2024/06/05 16:17

1.1 复习

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            var $div=$("div").eq(0);            console.log($div);            var divDom=$("div").get(0);            console.log(divDom);        })    </script></head><body><div></div><div></div><div></div></body></html>

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            //.eq(index)获取到的是jquery对象            //.get(index)获取到的是DOM对象            //获取的是jquery对象            $("div").eq(0).css({                //这里面的键值对,键可以带双引号或者单引号,也可以不带引号                //一些不合法的变量名字,可以使用加引号的方式来声明                "font-size":"40px"            })            var $div=$("div").eq(0);            console.log($div);            //获取的是DOM            //下面这句是错误的,因为.get(index)方法获取的是DOM,DOM对象没有css方法            $("div").get(1).css("font-size","40px");            var divDom=$("div").get(0);            console.log(divDom);        })    </script></head><body>    <div>        我是div1    </div>    <div>        我是div2    </div>    <div></div></body></html>

这里写图片描述

1.2 动画

1.2.1 基本效果(显示和隐藏)

$("div").show(); //让div显示
$("div").hide(); //隐藏div

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            padding: 0;            margin: 0;        }        ul {            list-style: none;        }        .wrap {            width: 330px;            height: 30px;            margin: 100px auto 0;            background-image: url(imgs/bg.jpg);            padding-left: 10px;        }        .wrap li {            float: left;            width: 100px;            height: 30px;            margin-right: 10px;            position: relative;        }        .wrap a {            color: black;            text-decoration: none;            display: block;            width: 100px;            height: 30px;            text-align: center;            line-height: 30px;            background-image: url(imgs/libg.jpg);        }        .wrap li ul {            position: absolute;            display: none;        }    </style>    <script src="jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            //mouseenter事件是鼠标经过时触发的事件            $(".wrap li").mouseenter(function () {                //$(this)是将DOM的this对象转换成jquery对象                //children()方法:获取子元素                //参数为:jquery过滤器                $(this).children("ul").show();            });            //mouseleave事件是鼠标离开时触发的事件            $(".wrap li").mouseleave(function () {                $(this).children("ul").hide();            });        });    </script></head><body>    <div class="wrap">        <ul>            <li>                <a href="#">一级菜单1</a>                <ul>                    <li><a href="#">二级菜单1</a></li>                    <li><a href="#">二级菜单2</a></li>                    <li><a href="#">二级菜单3</a></li>                </ul>            </li>            <li>                <a href="#">一级菜单1</a>                <ul>                    <li><a href="#">二级菜单1</a></li>                    <li><a href="#">二级菜单2</a></li>                    <li><a href="#">二级菜单3</a></li>                </ul>            </li><li>            <a href="#">一级菜单1</a>            <ul>                <li><a href="#">二级菜单1</a></li>                <li><a href="#">二级菜单2</a></li>                <li><a href="#">二级菜单3</a></li>            </ul>        </li>        </ul>    </div></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            $("button").eq(0).click(function () {                $("div").css({                    "display":"none",                    "height":"200px",                    "width":"300px",                    "background":"gold"                });                //让div展示出来                //show()                //$("div").show(3000);//以毫秒为单位                //$("div").show("slow");                //$("div").show("fast");                //$("div").show("normal");                //第一个参数是动画时长,可以是数字或者字符串                //第二个参数是动画执行完成后,要执行的函数                $("div").show(2000,function () {                    //alert("show动画执行完毕");                    $("div").hide(1000);                })            });            $("button:last").click(function () {                //让div隐藏                $("div").hide();            });        });    </script></head><body>    <button>显示</button>    <button>隐藏</button>    <div></div></body></html>

1.2.2 滑动效果

$("div").slideDown(); //下拉显示
$("div").slideUp(); //上拉
$("div").slideToggle(); //切换

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            //设置div的默认样式            $("div").css({                "display":"none",                /*"float":"left",*/                "margin-bottom":"20px",                "height":"200px",                "width":"300px",                "background":"gold"            });            $("input[type='button']").click(function () {                //让div以下拉的方式展示出来                //$(".divItem").slideDown(3000);                //两个参数的时候                //第一个参数是:动画执行的时长                //第二个参数是:动画执行完毕后要执行的函数                $(".divItem:first").slideDown(3000,function () {                });                //三个参数的时候                //第一个参数是:动画执行的时长                //第二个参数是:动画效果                //第三个参数是:动画执行完毕后要执行的函数                /*$(".divItem:first").slideDown(2000,"linear",function () {                });                //swing是一个先慢后快的效果                $(".divItem:last").slideDown(2000,"swing",function () {                });*/                $("button:first").click(function () {                    $(".divItem").slideUp(3000);                });                $("button:eq(1)").click(function () {                    $(".divItem").slideToggle();                })            });        });    </script></head><body>    <!--<button>下拉</button>-->    <input type="button" value="下拉"/>    <button>上拉</button>    <button>切换</button>    <div class="divItem"></div>    <div class="divItem"></div></body></html>

1.2.3 淡入淡出(淡定)

$("div").fadeIn();
$("div").fadeOut();
$("div").fadeToggle();

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            //设置div的默认样式            $("div").css({                "display":"none",                /*"float":"left",*/                "margin-bottom":"20px",                "height":"200px",                "width":"300px",                "background":"gold"            });            $("input[type='button']").click(function () {                //让div以下拉的方式展示出来                //$(".divItem").slideDown(3000);                //两个参数的时候                //第一个参数是:动画执行的时长                //第二个参数是:动画执行完毕后要执行的函数                $(".divItem:first").slideDown(3000,function () {                });                //三个参数的时候                //第一个参数是:动画执行的时长                //第二个参数是:动画效果                //第三个参数是:动画执行完毕后要执行的函数                /*$(".divItem:first").slideDown(2000,"linear",function () {                });                //swing是一个先慢后快的效果                $(".divItem:last").slideDown(2000,"swing",function () {                });*/            });            $("button:first").click(function () {                $(".divItem").slideUp(3000);            });            $("button:eq(1)").click(function () {                $(".divItem").slideToggle();            });            //淡入淡出效果            $("button:eq(2)").click(function () {                //淡入                $(".divItem").fadeIn(3000);            });            $("button:eq(3)").click(function () {                //淡出                $(".divItem").fadeOut(3000);            });            $("button:eq(4)").click(function () {                //淡入淡出切换                $(".divItem").fadeToggle(3000);            });            $("button:eq(5)").click(function () {                //淡入淡出切换                $(".divItem").fadeTo(1000,0.5);            });        });    </script></head><body>    <!--<button>下拉</button>-->    <input type="button" value="下拉"/>    <button>上拉</button>    <button>上拉下拉切换</button>    <button>淡入</button>    <button>淡出</button>    <button>淡入淡出切换</button>    <button>设置不透明度</button>    <div class="divItem"></div>    <div class="divItem"></div></body></html>

1.2.4 自定义动画

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            //设置div的默认样式            $("div").css({                "display":"none",                /*"float":"left",*/                "margin-bottom":"20px",                "height":"200px",                "width":"300px",                "background":"gold"            });            $("input[type='button']").click(function () {                //让div以下拉的方式展示出来                //$(".divItem").slideDown(3000);                //两个参数的时候                //第一个参数是:动画执行的时长                //第二个参数是:动画执行完毕后要执行的函数                $(".divItem:first").slideDown(3000,function () {                });                //三个参数的时候                //第一个参数是:动画执行的时长                //第二个参数是:动画效果                //第三个参数是:动画执行完毕后要执行的函数                /*$(".divItem:first").slideDown(2000,"linear",function () {                });                //swing是一个先慢后快的效果                $(".divItem:last").slideDown(2000,"swing",function () {                });*/            });            $("button:first").click(function () {                $(".divItem").slideUp(3000);            });            $("button:eq(1)").click(function () {                $(".divItem").slideToggle();            });            //淡入淡出效果            $("button:eq(2)").click(function () {                //淡入                $(".divItem").fadeIn(3000);            });            $("button:eq(3)").click(function () {                //淡出                $(".divItem").fadeOut(3000);            });            $("button:eq(4)").click(function () {                //淡入淡出切换                $(".divItem").fadeToggle(3000);            });            $("button:eq(5)").click(function () {                //淡入淡出切换                $(".divItem").fadeTo(1000,0.5);            });            //自定义动画            $("button:eq(6)").click(function () {                $(".divItem").animate({                    "width":"500px",                    "height":"600px",                    "opacity":1                    /*"background":"green"*/                },2000);            });        });    </script></head><body>    <!--<button>下拉</button>-->    <input type="button" value="下拉"/>    <button>上拉</button>    <button>上拉下拉切换</button>    <button>淡入</button>    <button>淡出</button>    <button>淡入淡出切换</button>    <button>设置不透明度</button>    <button>自定义动画</button>    <div class="divItem"></div>    <div class="divItem"></div></body></html>

$("div").animate();
$("div").stop();
有两个参数:
  第一个参数是:表示是否清空动画队列,也就是后面的动画。默认值为false,如果为true,表示清空队列,也就是说,后面所有的动画都停止了。
  第二个参数是:表示是否立即执行完当前动画。默认是为false,如果为true,表示立即执行完当前的动画,然后,在执行后续动画。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            padding: 0;            margin: 0;        }        ul {            list-style: none;        }        .wrap {            width: 330px;            height: 30px;            margin: 100px auto 0;            background-image: url(imgs/bg.jpg);            padding-left: 10px;        }        .wrap li {            float: left;            width: 100px;            height: 30px;            margin-right: 10px;            position: relative;        }        .wrap a {            color: black;            text-decoration: none;            display: block;            width: 100px;            height: 30px;            text-align: center;            line-height: 30px;            background-image: url(imgs/libg.jpg);        }        .wrap li ul {            position: absolute;            display: none;        }    </style>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            //mouseenter事件是鼠标经过时触发的事件            $(".wrap li").mouseenter(function () {                //$(this)是将DOM的this对象转换成jquery对象                //children()方法:获取子元素                //参数为:jquery过滤器                $(this).children("ul").stop(false,true).slideDown(3000);            });            //mouseleave事件是鼠标离开时触发的事件            $(".wrap li").mouseleave(function () {                $(this).children("ul").stop(false,true).slideUp();            });        });    </script></head><body><div class="wrap">    <ul>        <li>            <a href="#">一级菜单1</a>            <ul>                <li><a href="#">二级菜单1</a></li>                <li><a href="#">二级菜单2</a></li>                <li><a href="#">二级菜单3</a></li>            </ul>        </li>        <li>            <a href="#">一级菜单1</a>            <ul>                <li><a href="#">二级菜单1</a></li>                <li><a href="#">二级菜单2</a></li>                <li><a href="#">二级菜单3</a></li>            </ul>        </li><li>        <a href="#">一级菜单1</a>        <ul>            <li><a href="#">二级菜单1</a></li>            <li><a href="#">二级菜单2</a></li>            <li><a href="#">二级菜单3</a></li>        </ul>    </li>    </ul></div></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {           $("#start").click(function () {               $("#box").animate({height:300},3000);               $("#box").animate({width:300},3000);               $("#box").animate({height:100},3000);               $("#box").animate({width:100},3000);           });           $("#stop").click(function () {               $("#box").stop();           });        });        function stop(clearQueue,gotoEnd) {            if(!!clearQueue){                console.log(clearQueue);            }else{                console.log(clearQueue);            }            /*var args=arguments.length;            if(args<=0){                //设置默认值 false            }*/        }        stop();    </script></head><body><p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p><div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"></div></body></html>

1.3 操作样式

$("div").css("background","pink"); //设置背景颜色值
$("div").addClass("color-red");//添加样式
$("div").removeClass("color-red");//移除样式
$("div").toggleClass("color-red");//切换样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <style type="text/css">        .divItem{            background: #000;            color:#fff;        }        .divItem1{            font-size:20px;        }    </style>    <script>        $(document).ready(function () {            //css            /*$("li").css("font-size","18px");            $("li").css({                "background":"yellow",                "color":"white"            });            var fontSize=$("li").css("font-size");            console.log(fontSize);*/            //给所有li元素添加样式            //给选定的元素添加类样式,注意:样式名字没有点。            $("li").addClass("divItem");            //给指定的元素删除某个样式            //有参数的时候,移除指定的样式。如果指定的样式该元素不存在,那么将不删除任何样式            //$("li").eq(2).removeClass("divItem");            //没有参数的话,移除所有的样式            //$("li").eq(2).removeClass();            //切换样式            /*$("#demo").click(function () {                $("li").eq(2).toggleClass("divItem1");            });*/            //判断有无样式            $("#hasBtn").click(function () {                //hasClass的返回值为true或者false                var hasDivItem1Class=$("li").eq(2).hasClass("divItem1");                //console.log(hasDivItem1Class);                if(hasDivItem1Class){                    //有某个样式                    $("li").eq(2).removeClass("divItem1");                }else{                    $("li").eq(2).addClass("divItem1");                }            });        });    </script></head><body><input type="button" value="切换样式" id="demo"/><input type="button" value="判断有没有样式" id="hasBtn"/><ul>    <li>元素很多1</li>    <li>元素很多2</li>    <li class="divItem1">元素很多3</li>    <li>元素很多4</li>    <li>元素很多5</li>    <li>元素很多6</li>    <li>元素很多7</li>    <li>元素很多8</li></ul></body></html>

tab栏案例:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;}        .wrapper{width:1000px; height: 475px; margin: 0 auto; margin-top: 100px;}        .tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; width: 320px;}        .tab li{ position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer;            border-top:4px solid #fff;}        .tab span{ position: absolute;right: 0;top:10px;background: #ddd;width: 1px;height: 14px;overflow: hidden; }        .products{ width: 1002px;border:1px solid #ddd;height: 476px;}        .products .main{float: left;display: none;}        .products .main.selected{display: block;}        .tab li.active{border-color: red; border-bottom: 0;}    </style>    <script type="text/javascript" src="../../jquery-1.11.1.min.js"></script>    <script type="text/javascript">        $(function () {            $(".tab>li").mouseenter(function () {                //给当前元素添加active这个样式                //给当前这个元素的所有兄弟元素移除active这个样式                $(this).addClass("active").siblings().removeClass("active");                //让下面的div内容,根据上面tab栏菜单展示相应内容                var index=$(this).index();                $(".main")                    .eq(index)                    .addClass("selected")                    .siblings(".main")                    .removeClass("selected");            });        });    </script></head><body>    <div class="wrapper">        <ul class="tab">            <li class="tab-item active">国际大牌<span></span></li>            <li class="tab-item">国妆名牌<span></span></li>            <li class="tab-item">清洁用品<span></span></li>            <li class="tab-item">男士精品</li>        </ul>        <div class="products">            <div class="main selected">                <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>            </div>            <div class="main">                <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>            </div>            <div class="main">                <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>            </div>            <div class="main">                <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>            </div>        </div>    </div></body></html>

1.4 常用DOM操作(属性,值,内容)

$("div").attr("name");//获取name属性值
$("div").removeAttr("name");//移除属性
$("input").val(function(i,v){});//设置input的值
.html .text

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        p{            background: gray;            height: 300px;        }    </style>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(function () {            //设置属性            $("input:eq(0)").click(function () {                $(this).attr("title","我是动态设置的属性");            });            //获取属性            $("input:eq(1)").click(function () {                var attr=$("input:eq(0)").attr("title");                console.log(attr);            });            //移除属性            $("input:eq(2)").click(function () {                $("input:eq(0)").removeAttr("title");            });            //设置值            $("input:eq(3)").click(function () {                $("#txt").val("我是动态设置的值");            });            //获取值            $("input:eq(4)").click(function () {                console.log($("#txt").val());            });            //设置html            $("input:eq(5)").click(function () {               //$("div").html("我是div的html内容");                $("div").html("<p>我是p元素</p>");            });            //获取html内容            $("input:eq(6)").click(function () {                alert($("div").html());            });            //设置文本内容            $("input:eq(7)").click(function () {                $("div").text("我是动态创建的文本内容");            });            //获取文本内容            $("input:eq(8)").click(function () {                alert($("div").text());            });        });    </script></head><body><input type="button" value="设置属性"/><input type="button" value="获取属性"/><input type="button" value="移除属性"/><input type="button" value="设置值"/><input type="button" value="获取值"/><input type="button" value="设置html内容"/><input type="button" value="获取html内容"/><input type="button" value="设置text内容"/><input type="button" value="获取text内容"/><div>    <input type="text" id="txt"/></div></body></html>

1.5 操作文档

1.5.1 内部插入节点

$("div").append(node);//在div内部的后面追加元素
node.appendTo("div");//把node追加到div
$("div").prepend(node);//在div内部的前面追加元素
node.prependTo($("div"));//把node追加到div内部的前面

1.5.2 外部插入节点

$("div").after(node);//在div后面添加兄弟节点node
$("div").before(node);//在div前面添加兄弟节点node
$("div").insertBefore(node);//把div插入到node前面
$("div").insertAfter(node);//把div追加到node前面

1.5.3 删除节点

$("div").remove();//删除选中的元素,"自杀"
$("div").empty();//清空子元素
$("div").html("");//清空子元素,推荐使用这个方法

1.5.4 复制节点

$("div").clone();//复制节点

1.5.5 包裹节点

$("div").wrap(node);//包裹单个包裹
$("div").wrapAll(node);//包裹 所有包裹在一个node中

1.5.6 替换节点

$("div").replaceWidth(node);//替换

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1.min.js"></script>    <script>        $(function () {            $("button:first").click(function () {               //追加节点                //$("div").append("<p>我是动态创建出来的p元素</p>");                $("div").append($("p"));            });            $("button:eq(1)").click(function () {                //把前面这个元素添加给后面$("div")元素                $("<p>我是动态创建出来的</p>").appendTo($("div"));            });            $("button:eq(2)").click(function () {                $("div").prepend("<p>我是动态创建出来的p元素</p>");            });            $("button:eq(3)").click(function () {                $("<p>我是p元素-prependTo进来的</p>").prependTo($("div"));            });            $("button:eq(4)").click(function () {                //往div后面添加元素,它们是兄弟关系                $("div").after("<p>我是div后面的元素</p>");            });            $("button:eq(5)").click(function () {                //往div前面添加元素,它们是兄弟关系                $("div").before("<p>我是div后面的元素</p>");            });            $("button:eq(6)").click(function () {                //把前面的元素放到后面div元素的前面,它们是兄弟关系                $("<p>我在那?</p>").insertBefore($("div"));            });            $("button:eq(7)").click(function () {                //把前面的元素放到后面div元素的前面,它们是兄弟关系                $("<p>我在那?</p>").insertAfter($("div"));            });            //删除节点元素            $("button:eq(8)").click(function () {                //删除节点                //$("div").remove();                //$(this).remove();            });            //清空节点元素            $("button:eq(9)").click(function () {                //$("div").empty();                $("div").html("");            });            //复制            $("button:eq(10)").click(function () {                $("div").append($("p").clone());            });            //包裹元素            $("button:eq(11)").click(function () {                $("span").wrap($(".divItem"));            });            //包裹所有节点            $("button:eq(12)").click(function () {                $("li").wrapAll($(".divItem"));            });            //替换节点            $("button:eq(13)").click(function () {                $("span").replaceWith($(".divItem"));            });        });    </script></head><body>    <button>append 追加节点</button>    <button>appendTo 追加节点</button>    <button>prepend 往内部的前面添加节点</button>    <button>prependTo 往内部的前面添加节点</button>    <button>after 往后面添加节点</button>    <button>before 往前面添加节点</button>    <button>insertBefore 往前面添加节点</button>    <button>insertAfter 往后面添加节点</button>    <br>    <button>remove 删除节点</button>    <button>empty 删除节点</button>    <button>复制节点</button>    <button>wrap 包裹节点</button>    <button>wrapAll 包裹所有节点</button>    <button>replaceWidth 替换节点</button>    <div>        <h1>我是标题h1</h1>    </div>    <p>我是div外面的元素,不是动态添加的</p>    <div class="divItem">我是一个大div</div>    <span>我是一个小span</span>    <ul>        <li>我是li</li>        <li>我是li</li>        <li>我是li</li>        <li>我是li</li>        <li>我是li</li>        <li>我是li</li>        <li>我是li</li>        <li>我是li</li>    </ul></body></html>

网站导航案例:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{margin:0;padding:0;}        ul{list-style: none;}        img{display: block; border:0;}        .wrapper{width: 752px;  border:1px solid #ccc;            padding: 10px 0 0 10px;            font-family: arial;            overflow: hidden;            margin:100px auto;        }        .wrapper li{            float: left;            margin:0 10px 10px 0;            width: 178px;            height: 125px;            overflow: hidden;            position: relative;        }        .wrapper li div,.wrapper li p{            width:178px;            height: 25px;            position: absolute;            font-size:14px;            text-align: center;            line-height: 25px;            color:white;            left:0;            bottom:-25px;            _bottom:-26px;        }        .wrapper li div{            background-color:#000;        }        .wrapper li p{            background: url(images/bg.png) no-repeat 5px 0;        }    </style>    <script type="text/javascript" src="../../jquery-1.11.1.min.js"></script>    <script type="text/javascript">        /*$(function(){            var div = $("<div></div>"),speed = 388,$p = $(".wrapper p");            $p.before(div);            $(".wrapper div").fadeTo(0,0.5);            $p.each(function(index,ele){                var y = index * 25;                $(ele).css("background-position","5px -" + y + "px");            });            $(".wrapper li").hover(function(){                $(this).children("div,p").stop().animate({"bottom":0},speed);            },function(){                $(this).children("div,p").stop().animate({"bottom":-26},speed);            });        });*/        $(document).ready(function () {            $(".wrapper li")                .append("<div></div><p>全栈,你值得拥有</p>")                .children("div")                .fadeTo(500,0.5)                .next("p")                .each(function (index,ele) {                    $(this).css("background-position","5px -"+(index*25)+"px");                })                .parent()                .mouseenter(function () {                    $(this).children("div,p").stop().animate({                        "bottom":0                    },400);                })                .mouseleave(function () {                    $(this).children("div,p").stop().animate({                        "bottom":"-25px"                    },400);                });        })    </script></head><body><div class="wrapper">    <ul>        <li><a href="###"><img src="images/01.jpg" alt=""/></a><p>百度一下,你就知道</p></li>        <li><a href="###"><img src="images/02.jpg" alt=""/></a><p>百度一下,你就知道</p></li>        <li><a href="###"><img src="images/03.jpg" alt=""/></a><p>百度一下,你就知道</p></li>        <li><a href="###"><img src="images/04.jpg" alt=""/></a><p>百度一下,你就知道</p></li>        <li><a href="###"><img src="images/05.jpg" alt=""/></a><p>百度一下,你就知道</p></li>        <li><a href="###"><img src="images/06.jpg" alt=""/></a><p>百度一下,你就知道</p></li>        <li><a href="###"><img src="images/07.jpg" alt=""/></a><p>百度一下,你就知道</p></li>        <li><a href="###"><img src="images/08.jpg" alt=""/></a><p>百度一下,你就知道</p></li>    </ul></div></body></html>

这里写图片描述