您的位置: 首页  >  IT文章  >  前端 JQ操作

前端 JQ操作

分类: IT文章 • 2023-11-07 19:24:55

jq创建文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq创建文档</title>
    <style>
        .box {
             200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <h1>生成一个box</h1>
    <!--<div class="box"></div>-->
    <!--<div class="box"></div>-->
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let randomNum = (min, max) => {
        return parseInt(Math.random() * (max - min + 1) + min)
    };

    let getRandomColor = () => {
        r = randomNum(0, 255);
        g = randomNum(0, 255);
        b = randomNum(0, 255);
        return 'rgba(' + r + ', ' + g + ', ' + b + ')';
    };

    $('h1').click(function () {
        // 点击一下，生成一个box

        // 1）创建一个标签节点
        let box = $('<div class="box"></div>');

        // 2）设置标签节点（样式、内容、事件）
        box.css('background', getRandomColor()).click(function () {
            console.log($(this).css('background-color'))
        });

        // 3）将标签节点添加到页面指定位置
        $('body').append(box);
    })
</script>
</html>

jq的文档操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档操作</title>
</head>
<body>
    <b class="b1">加粗</b>
    <p class="p1">
        <span>原内容</span>
    </p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 父在最后加子
    $('.p1').append($('.b1'));
    // 父在最前加子
    // $('.p1').prepend($('.b1'));

    // 产生一个副本(本体就不参与操作)，添加到父的最前
    // $('.b1').clone().prependTo($('.p1'));

    // 添加后兄弟
    // $('.p1').after($('.b1'));
    // 添加前兄弟
    // $('.p1').before($('.b1'));

    $('.b1').click(function () {
        alert(1)
    });
    // 清空内部内容与子标签
    // $('.p1').empty();

    // 不保留事件等的删除自身
    // let $b1 = $('.b1').remove();
    // 保留事件等的删除自身
    let $b1 = $('.b1').detach();
    $('.p1').append($b1);

</script>
</html>

jq文档关系

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq的文档关系</title>
</head>
<body>
    <div class="wrap">
        <p class="p0">0</p>
        <p class="p1">1</p>
        <p class="t">
            <a href="">2</a>
            <a href="">2</a>
        </p>
        <p class="p3">3</p>
        <p class="p4">4</p>
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 1）从一个含有多个js对象的jq对象中取出只装有一个js对象的jq对象
    // $('p')是三个p，只想拿第2个p
    // console.log($('p'));
    // console.log($('p').eq(1));
    // console.log($('p.t'));

    let $p = $('p.t');
    console.log($p.children());
    console.log($p.parent());
    console.log($p.parents());
    console.log($p.next());
    console.log($p.nextAll());
    console.log($p.prev());
    console.log($p.prevAll());
    console.log($p.siblings());
</script>
</html>

jq轮播图案例：包含定时器知识点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>布局案例</title>
    <link rel="stylesheet" href="css/reset.css">

    <style>
        .scroll-view {
             1226px;
            height: 460px;
            background-color: orange;
            margin: 50px auto 0;

            position: relative;
        }

        .scroll-menu {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
             234px;
            padding: 20px 0;
        }
        .scroll-menu a {
            display: block;
            /*height: 42px;*/
            line-height: 42px;
            color: white;
            /*padding-left: 30px;*/
            text-indent: 30px;
        }
        .scroll-menu a span {
            /*参考的不是a，是ul*/
            position: absolute;
            right: 20px;
        }
        .scroll-menu a:hover {
            background-color: red;
        }

        .scroll-menu-blank {
             calc(1226px - 234px);
            height: 460px;
            background-color: red;
            /*参考的是ul*/
            position: absolute;
            top: 0;
            left: 234px;
            display: none;
        }

        .scroll-menu li:hover ~ .scroll-menu-blank {
            display: block;
        }
        .scroll-menu-blank:hover {
            display: block;
        }
    </style>

    <style>
        .scroll-view {
             1226px;
            position: relative;
        }
        .scroll-scroll {
             1226px;
            height: 460px;
            position: absolute;
        }
        .scroll-img li {
            position: absolute;
        }
        .scroll-img a {
            display: block;
        }
        .scroll-img a img {
             100%;
        }
    </style>
    <style>
        .scroll-btn div {
            position: absolute;
             40px;
            height: 70px;
            font-size: 30px;
            line-height: 70px;
            text-align: center;
            color: rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
        .scroll-btn div:hover {
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
        }
        .scroll-btn-left {
            top: calc(50% - 35px);
            left: 234px;
        }
        .scroll-btn-right {
            top: calc(50% - 35px);
            right: 0;
        }
    </style>
    <style>
        .scroll-point {
             120px;
            height: 40px;
            /*background-color: orangered;*/
            position: absolute;
            right: 10px;
            bottom: 0;
        }
        .scroll-point li {
            float: left;
             10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid rgba(0, 0, 0, 0.6);
            margin-right: 10px;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.3);
        }
        .scroll-point li:hover {
            background-color: white;
        }
    </style>
    <style>
        .scroll-menu, .scroll-btn div, .scroll-point {
            z-index: 2;
        }
        .scroll-img li {
            opacity: 0;
            /*transition: .5s;*/
        }
        .scroll-img li.active {
            opacity: 1;
            z-index: 1;
        }
        .scroll-point li.active {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="scroll-view">
        <!--轮播图-->
        <div class="scroll-scroll">
            <ul class="scroll-img">
                <li class="active">
                    <a href="https://www.baidu.com">
                        <img src="img/001.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/002.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/003.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/004.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/005.png" alt="">
                    </a>
                </li>
            </ul>
            <div class="scroll-btn">
                <div class="scroll-btn-left">&lt;</div>
                <div class="scroll-btn-right">&gt;</div>
            </div>
            <ul class="scroll-point">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <!--菜单栏-->
        <ul class="scroll-menu">
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <div class="scroll-menu-blank">

            </div>
        </ul>
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let currentIndex = 0;

    // 上一张
    $('.scroll-btn-left').click(function () {
        console.log('上一张');
        currentIndex--;
        if (currentIndex < 0) currentIndex = 4;
        $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');

    });

    // 下一张
    $('.scroll-btn-right').click(function () {
        console.log('下一张');
        currentIndex++;
        if (currentIndex >= 5) currentIndex = 0;
        $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
    });

    // 第几张
    $('.scroll-point li').click(function () {
        index = $(this).index();
        console.log('第%d张', index);
        currentIndex = index;
        $(this).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(index).addClass('active').siblings().removeClass('active');
    })

</script>
<script>
    // console.log(currentIndex);
    // 一次性定时器：setTimeout(fn, 时间)
    /*
    setTimeout(function () {
        currentIndex++;
        if (currentIndex >= 5) currentIndex = 0;
        $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
    }, 1000);
    */

    // 持续性定时器
    let timer = null;
    function startScroll() {
        timer = setInterval(function () {
            currentIndex++;
            if (currentIndex >= 5) currentIndex = 0;
            $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
            $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        }, 3500);
    }

    startScroll();

    // 清除定时器
    // clearInterval(timer);
    // clearTimeout(timer);
    function stopScroll() {
        clearInterval(timer);
    }

    // 悬浮停止轮播
    $('.scroll-view').mouseover(function () {
        stopScroll();
    });

    // 移开重新轮播
    $('.scroll-view').mouseout(function () {
        startScroll();
    });

</script>
</html>

jq菜单切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .menu {
             1226px;
            margin: 0 auto;
        }
        .menu-title {
             100%;
            /*height: 40px;*/
            background-color: #ccc;
        }
        .menu-title:after {
            content: '';
            display: block;
            clear: both;
        }
        .menu-title .l {
            float: left;
        }
        .menu-title .r {
            float: right;
        }
        .menu-title .r li {
            float: left;
            margin-right: 20px;
            /*line-height: 40px;*/
            cursor: pointer;
            padding-top: 10px;
        }
        .menu-title .r li:hover, .menu-title .r li.active {
            color: orangered;
            border-bottom: 2px solid orangered;
        }

        .menu-context {
             100%;
            /*height: 220px;*/
            background-color: pink;
        }
        .menu-context:after {
            content: '';
            display: block;
            clear: both;
        }
        .menu-context li {
             50%;
            float: left;
            height: 220px;
            border-radius: 50%;
            background-color: cyan;
        }
        .menu-context li a {
            display: block;
            font: bold 60px/220px '微软雅黑';
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul class="menu-title">
            <li class="l">
                <h1>电子产品</h1>
            </li>
            <li class="r">
                <ul>
                    <li class="active">
                        <span>电视</span>
                    </li>
                    <li>
                        <span>手机</span>
                    </li>
                    <li>
                        <span>电脑</span>
                    </li>
                </ul>
            </li>
        </ul>
        <ul class="menu-context">
            <li>
                <a href="https://www.baidu.com">电视1</a>
            </li>
            <li>
                <a href="https://www.baidu.com">电视2</a>
            </li> 
        </ul>
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    data = [
        [
            {
                ctx: '电视1',
                url: 'https://www.baidu.com'
            },
            {
                ctx: '电视2',
                url: 'https://www.baidu.com'
            },
        ],
        [
            {
                ctx: '手机1',
                url: 'https://www.sina.com.cn'
            },
            {
                ctx: '手机2',
                url: 'https://www.sina.com.cn'
            },
        ],
        []
    ];


    $('.menu-title .r li').mouseover(function () {
        $(this).addClass('active').siblings().removeClass('active');
        let index = $(this).index();
        let ul_data = data[index];
        let as = $('.menu-context li a');
        // console.log(ul_data);
        // console.log(as)
        // a个数与数据中字典的个数一致，依次赋值
        for (let i = 0; i < ul_data.length; i++) {
            as.eq(i).attr('href', ul_data[i].url).text(ul_data[i].ctx);
        }
    })
</script>
</html>

相关推荐