美文网首页
jQuery-DOM操作2

jQuery-DOM操作2

作者: charlotte2018 | 来源:发表于2017-11-16 16:37 被阅读14次

    01-样式操作（css方法）.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            //样式操作方法1(设置样式)：  css(json);
//            $("div").css({"width":100,"height":100,"background-color":"pink"});

            //样式操作方法2(设置样式)：  css(属性，值);
            $("div").css("background-color","red");

            //样式操作方法2(获取样式)：  css(属性);
            //获取的时候如果有很多，那么获取jquery对象中的第一个
            alert($("div").css("width"));

        })
    </script>
</head>
<body>
<div></div>
<div style="width: 200px;height:300px;background: yellow"></div>
<div style="width: 200px;height:300px;background: yellow"></div>
<div style="width: 200px;height:300px;background: yellow"></div>
</body>
</html>

    02-类操作（添加删除切换判断）.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .current {
            background-color: red;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                //添加类
                $("div").addClass("current");
                //判断类
                alert($("div").hasClass("current"));//has是have的单三
            });

            $("button").eq(1).click(function () {
                //删除类
                $("div").removeClass("current");
                //判断类
                alert($("div").hasClass("current"));//has是have的单三
            });
            //alert($("div").hasClass("current"));//jquery对象中有一个带有类名的也是true，所有都不带才是false；
        })
    </script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>
</body>
</html>

    03-切换背景.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .current {
            background-color: green;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                //需求：点击按钮 ，切换背景
//                if($("div").hasClass("current")){
//                    //如果有类名，那么删除
//                    $("div").removeClass("current")
//                }else{
//                    //如果没有类名，那么添加
//                    $("div").addClass("current")
//                }
                //切换类（toggleCLass）
                $("div").toggleClass("current");
            });
        })
    </script>
</head>
<body>
<button>切换</button>
<div></div>
</body>
</html>

    04-动画之显示和隐藏.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {
//                //显示动画用法1:   show();   不加参数
                $("div").show();  //通过这个方法实现的：display: block;

//                //显示动画用法2:   show(2000);   毫秒值
//                $("div").show(2000);  //通过这个方法实现的：display: block;
//                //通过控制  宽高透明度和display

                //显示动画用法3:   show(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").show("slow");
//                $("div").show("fast");
//                $("div").show("normal");

                //显示动画用法4:   show(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").show(5000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            //隐藏动画
            $("button:eq(1)").click(function () {
//                //显示动画用法1:   hide();   不加参数
                $("div").hide();  //通过这个方法实现的：display: none;

//                //显示动画用法2:   hide(2000);   毫秒值
//                $("div").hide(2000);  //通过这个方法实现的：display: none;
//                //通过控制  宽高透明度和display

                //显示动画用法3:   hide(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").hide("slow");
//                $("div").hide("fast");
//                $("div").hide("normal");

                //显示动画用法4:   hide(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").hide(2000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            $("button:eq(2)").click(function () {
                //显示隐藏切换
                //同样有四种用法
                $("div").toggle(2000);
            })
        })
    </script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>

</body>
</html>

    05-动画之滑入和滑出.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {
//                //滑入动画用法1:   slideDown();   不加参数
                $("div").slideDown();

//                //滑入动画用法2:   slideDown(2000);   毫秒值
//                $("div").slideDown(2000);
//                //通过控制  高和display

                //滑入动画用法3:   slideDown(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").slideDown("slow");
//                $("div").slideDown("fast");
//                $("div").slideDown("normal");

                //滑入动画用法4:   slideDown(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").slideDown(5000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {
//                //滑出动画用法1:   slideUp();   不加参数
//                $("div").slideUp();

//                //滑出动画用法2:   slideUp(2000);   毫秒值
//                $("div").slideUp(2000);  //通过这个方法实现的：display: none;
//                //通过控制  高和display

                //滑出动画用法3:   slideUp(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").slideUp("slow");
//                $("div").slideUp("fast");
//                $("div").slideUp("normal");

                //滑出动画用法1:   slideUp(毫秒值，回调函数[显示完毕执行什么]);
                $("div").slideUp(2000,function () {
                    alert("动画执行完毕！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换
                //同样有四种用法
                $("div").slideToggle(1000);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>

</body>
</html>

    06-动画之淡入和淡出.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            /*opacity: 1;*/
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {
//                //淡入动画用法1:   fadeIn();   不加参数
                $("div").fadeIn();

//                //淡入动画用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通过控制  透明度和display

                //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {
//                //滑出动画用法1:   fadeOut();   不加参数
//                $("div").fadeOut();

//                //滑出动画用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
//                //通过控制  透明度和display

                //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换
                //同样有四种用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //同样有四种用法
                $("div").fadeTo(1000,0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>

</body>
</html>

    07-自定义动画.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
                var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};

                //自定义动画
                $("div").animate(json,1000, function () {
                    $("div").animate(json2,1000, function () {
                        alert("动画执行完毕！");
                    });
                });


//                //自定义动画
//                $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
//                $("div").animate({"height":0},2000);
//                $("div").animate({"opacity":0},2000);

            })
        })
    </script>
</head>
<body>
<button>动画</button>
<div></div>
</body>
</html>

    08-停止动画.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {
                $("div").slideDown(2000);
            })

            //滑出动画
            $("button:eq(1)").click(function () {
                $("div").slideUp(2000);
            })

            $("button:eq(2)").click(function () {
                $("div").stop();   //都不写，默认两个都是false;

                // 第一个参数表示后续动画是否要执行
                //（true:后续动画不执行  ;false:后续动画会执行）
                // 第二个参数表示当前动画是否执行完
                //（true:立即执行完成当前动画  ;false:立即停止当前动画）

                //四种情况：情况1：true,true
                //（后续动画不执行，立即执行完成当前动画）
//                $("div").stop(true,true);

                //四种情况：情况2：false,true
                //（后续动画会执行，立即执行完成当前动画）
//                $("div").stop(false,true);

                //四种情况：情况3：true,false
                //（后续动画不执行，立即停止当前动画`）
//                $("div").stop(true,false);

                //四种情况：情况4：true,false
                //（后续动画会执行，立即停止当前动画`）
//                $("div").stop(false,false);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>停止</button>
<div></div>

</body>
</html>

    09-下拉菜单案例（children+this）

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(imgs/bg.jpg);
        }

        .wrap li{
            background-image: url(imgs/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
            var jqli = $(".wrap>ul>li");

            //绑定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //绑定事件(移开隐藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
    <div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

    10-右下角的弹出广告（slideDown+slideUp+fadeIn+fadeOut）

    <!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(imgs/ad.jpg);
            display: none;
        }

        .ad span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(imgs/h.jpg);
            cursor: pointer;
        }
    </style>
    <script src="../jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //需求：然广告ad部分，先滑入，在滑出，在淡入。然后绑定事件，点击span弹出
            //步骤：
            $(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {
                $(this).parent().fadeOut(1000);
            });

//            $(".ad").slideDown(1000, function () {
//                $(".ad").slideUp(1000, function () {
//                    $(".ad").fadeIn(1000, function () {
//                        $(".ad").children("span").click(function () {
//                            $(this).parent().fadeOut(1000, function () {
//                                alert("执行完毕！");
//                            });
//                        });
//                    });
//                });
//            })
        })
    </script>
</head>

<body>

    <div class="ani">我是内容</div>
    <div class="ad">
        <span></span>
    </div>


</body>
</html>

    11-节点的操作之创建JQ对象.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul></ul>


<script src="jquery-1.11.1.js"></script>
<script>


    //创建节点1:      $("标签")             :类比于js中的document.createElement("li");
    console.log($("<li class='aaa'>我是li标签</li>"));


    //创建节点2:      $("ul").html("");     :类比innerHTML属性。因为此属性，识别标签。
    $("ul").html("<li>我是html方法穿件出来的li标签</li>")




</script>
</body>
</html>

    12-节点的操作之添加节点.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").click(function () {
                //创建一个新的jquery对象li
                var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");
//                append();    在盒子的最末尾添加一个元素。
                //在盒子末尾添加
//                $("ul").append(jqNewLi);    //把新创建的li塞进ul中
//                jqNewLi.appendTo($("ul")); //把新创建的li塞进ul中

                //在盒子最前面添加
//                $("ul").prepend(jqNewLi);
//                jqNewLi.prependTo($("ul"));


                //下面两个方法是操作兄弟元素的。放在兄弟元素之后或者之前
                //after();
                $("li").after(jqNewLi);

                //before();
//                $("li").before(jqNewLi);

            })
        });
    </script>
</head>
<body>
    <button>添加li</button>

    <ul>
        <li>我是土著li</li>
    </ul>

</body>
</html>

    12-节点的操作之添加节点.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").click(function () {
                //创建一个新的jquery对象li
                var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");
//                append();    在盒子的最末尾添加一个元素。
                //在盒子末尾添加
//                $("ul").append(jqNewLi);    //把新创建的li塞进ul中
//                jqNewLi.appendTo($("ul")); //把新创建的li塞进ul中

                //在盒子最前面添加
//                $("ul").prepend(jqNewLi);
//                jqNewLi.prependTo($("ul"));


                //下面两个方法是操作兄弟元素的。放在兄弟元素之后或者之前
                //after();
                $("li").after(jqNewLi);

                //before();
//                $("li").before(jqNewLi);

            })
        });
    </script>
</head>
<body>
    <button>添加li</button>

    <ul>
        <li>我是土著li</li>
    </ul>

</body>
</html>

    13-节点的操作之删除和清空节点.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").eq(0).click(function () {
                //清空li所在的ul
                //方法1：.html("");
//                $("ul").html("");

                //方法1：.empty();
                $("ul").empty();
            })


            $("button").eq(1).click(function () {
                //删除指定的li。  ---  自杀！
                $("li:eq(0)").remove();
            })
        });
    </script>
</head>
<body>
    <button>清空li</button>
    <button>删除第一个li</button>

    <ul>
        <li>我是土著li1</li>
        <li>我是土著li2</li>
        <li>我是土著li3</li>
        <li>我是土著li4</li>
    </ul>

</body>
</html>

    14-节点的操作之复制节点.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").eq(0).click(function () {
                //复制节点：  clone();
                var newUl  = $(".box ul").clone();
                $(".box").append(newUl);
            })
        });
    </script>
</head>
<body>
    <button>复制节点</button>

    <div class="box">
        <ul>
            <li>我是土著li1</li>
            <li>我是土著li2</li>
            <li>我是土著li3</li>
            <li>我是土著li4</li>
        </ul>
    </div>
</body>
</html>

    相关文章

      网友评论

          本文标题：jQuery-DOM操作2

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|jQuery-DOM操作2|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！