jQuery基础总结(二)

最新推荐文章于 2022-11-29 13:58:04 发布

等的人心好烦

最新推荐文章于 2022-11-29 13:58:04 发布

阅读量214

点赞数

分类专栏： jquery 文章标签： jquery 函数

本文链接：https://blog.csdn.net/yongchaocsdn/article/details/78631199

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

这里写图片描述

等的人心好烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础总结(二)

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 ()
复制链接

扫一扫