2021-08-09 jQuery基础整理 41-45

最新推荐文章于 2022-02-27 15:12:35 发布

blackkerword

最新推荐文章于 2022-02-27 15:12:35 发布

阅读量68

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/blackkerword/article/details/119539487

版权

41. 无限循环滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    div{
        width: 600px;
        height: 160px;
        border: 1px solid #000;
        margin: 100px auto;
        overflow: hidden;
    }
    ul{
        list-style: none;
        width: 1800px;
        height: 160px;
        background: #000;
    }
    ul>li{
        float: left;
    }
    img{
        width: 300px;
        height: 160px;
    }
</style>
<script>
    $(function () {
        //定义变量保存偏移位
        var offset = 0;

        //1. 让图片滚动起来
        var timer;
        function autoPlay(){
            timer = setInterval(function () {
                offset += -10;
                if(offset<=-1200){
                    offset = 0;
                }
                $("ul").css("marginLeft",offset);
            },50)
        }
        autoPlay();
        //2. 监听li的移入和移出事件
        $("li").hover(function () {
            //停止滚动
            clearInterval(timer);
            //给非当前选中添加蒙版
            $(this).siblings().fadeTo(100,0.5);
            //去除当前选中蒙版
            $(this).fadeTo(100,1);
        },function () {
            autoPlay();
            //去除所有蒙版
            $("li").fadeTo(100,1);
        })
    });
</script>
<body>
    <div>
        <ul>
            <li><img src="https://img1.baidu.com/it/u=253337507,2981296721&fm=26&fmt=auto&gp=0.jpg" alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg" alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=4268324981,3384091170&fm=26&fmt=auto&gp=0.jpg" alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=1977046168,368269341&fm=26&fmt=auto&gp=0.jpg" alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=253337507,2981296721&fm=26&fmt=auto&gp=0.jpg" alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

42. jQuery添加节点相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
</style>
<script>
    $(function () {
        /*
        内部插入
            append(content|fn) : 会将元素添加到指定元素内部的最后
            appendTo(content)
            prepend(content|fn) : 会将元素添加到指定元素内部的最前面
            prependTo(content)
        外部插入
            after(content|fn) : 会将元素添加到指定元素外部的后面
            before(content|fn) : 会将元素添加到指定元素外部的前面
            insertAfter(content)
            insertBefore(content)
         */
        $("button").click(function () {
            //创建一个节点
            var $li = $("<li>新增的li</li>");
            //添加节点
            //$("ul").append($li);
            //$("ul").prepend($li);

            //$("ul").after($li);
            $("ul").before($li);

        })
    });
</script>
<body>
    <button>添加节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
</body>
</html>

43. jQuery删除节点相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
</style>
<script>
    $(function () {
        /*
        删除
            detach([expr])  empty() : 删除指定元素的内容和子元素，指定元素自身不会被删除
            remove([expr]) : 删除指定元素
         */
        $("button").click(function () {
            //$("div").remove();
            //$("div").empty();
            $("li").detach(".item");
        })
    });
</script>
<body>
    <button>删除节点</button>
    <ul>
        <li class="item">我是第1个li</li>
        <li>我是第2个li</li>
        <li class="item">我是第3个li</li>
        <li>我是第4个li</li>
        <li class="item">我是第5个li</li>
    </ul>
    <div>我是div
        <p>我是段落</p>
    </div>
</body>
</html>

44. jQuery替换节点相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
</style>
<script>
    $(function () {
        /*
        替换
        replaceWith(content|fn) : 替换所有匹配的元素为指定的元素
        replaceAll(selector)
         */
        $("button").click(function () {
            //新建一个元素
            var h6 = $("<h6>我是标题6</h6>");
            //替换元素
            //$("h1").replaceWith(h6);
            h6.replaceAll("h1");
        })
    });
</script>
<body>
    <button>替换节点</button>
    <h1>我是标题</h1>
    <h1>我是标题</h1>
    <p>我是段落</p>
</body>
</html>

45. jQuery复制节点相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
</style>
<script>
    $(function () {
        /*
        复制
        clone([Even[,deepEven]])
        如果传入的是false就是浅复制
        如果传入的是true就是深复制
        浅复制只会复制元素，不会复制事件
        深复制即会复制元素，也会复制事件
         */
        $("button").eq(0).click(function () {
            //浅复制一个元素
            var li =  $("li:first").clone(false);
            //将复制的元素添加到ul中
            $("ul").append(li);
        })
        $("button").eq(1).click(function () {
            //深复制一个元素
            var li =  $("li:first").clone(true);
            //将复制的元素添加到ul中
            $("ul").append(li);
        })
        $("li").click(function () {
            alert("aaa")
        })
    });
</script>
<body>
    <button>浅复制节点</button>
    <button>深复制节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
</body>
</html>

blackkerword

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-09 jQuery基础整理 41-45

41. 无限循环滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery</title></head><script src="public/jquery-1.9.1.min.js"></script><style> *{ margin: 0p
复制链接

扫一扫