jQuery实战：小米首页交互效果解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54200067/article/details/121930710

本文介绍了如何使用jQuery实现小米首页的下载APP、购物车下拉、扫码登录等交互效果，并回顾了jQuery的基本使用。同时，讨论了DOM获取节点的四种方法，包括getElementById、getElementByName、getElementByClass和getElementByTagName，并提醒了操作DOM节点需要注意的时机问题。文章最后鼓励读者提问和交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

文章目录

这里将之前用JS写的效果换成了jQuery，目前还是一些简单的使用，且都是用的刚讲过的知识点，详见jQuery基本使用，算是对他的一个回顾，由于布局不一，但是大体用法相通，这里附上主要代码

下载APP和购物车下拉效果

 $('.download').on({
        mouseenter: function () {
            $(".downloadbox").stop().slideDown();
        },
        mouseleave: function () {
            $(".downloadbox").stop().slideUp();
        }
    })

在这里插入图片描述

$('.buy').on({
        mouseenter: function () {
            // $(".shoppingcart").css("display", "block");
            $(".cart").stop().slideDown();
        },
        mouseleave: function () {
            //  $(".cart").css("display", "none");
            $(".cart").stop().slideUp();
        }
    })

在这里插入图片描述

下拉菜单效果

$(".xiaomi").on({
        mouseenter: function () {
            $(".typephone").css({
                "height": "300px",
                "borderTop": "1px solid #ccc"
            });
            $(".typephone").fadeIn();
        },
        mouseleave: function () {
            $(".typephone").css({
                "height": "0px",
                "borderTop": "none"
            });
            $(".typephone").fadeOut();
        }
    });

在这里插入图片描述

扫码登录

var flag = 0;
    $('.Qrcode').on({
        mouseenter: function () {
            $('.saoma').css('transition', 'all .3s');
            $('.saoma').css('display', 'block');
        },
        mouseleave: function () {
            $('.saoma').css('transition', 'all .3s');
            $('.saoma').css('display', 'none');
        },
        click: function () {
            if (flag == 0) {
                $('.findsaoma').css('transition', 'all 0.3s');
                $('.findsaoma').css('display', 'block');
                flag = 1;
            } else {
                $('.findsaoma').css('transition', 'all 0.3s');
                $('.findsaoma').css('display', 'none');
                flag = 0;
            }
        }
    })

在这里插入图片描述

面试题

一、

在这里插入图片描述

二、DOM获取节点

获取节点的四种方法:

getElementById()–通过id属性值获取元素对象
getElementByName()–通过name属性值获取元素对象数组
getElementByClass()–通过class属性值获取元素对象数组
getElementByTagName()–通过元素名/标签名获取元素对象数
后三个获取的是数组,所以需要通过数组下标取值
注意:操作dom节点是在等节点初始化完毕后,才会执行
处理方式:
把script标签移到html末尾即可
使用onload事件来处理JS,等待html加载完毕再加载onload事件里的JS

本期到这里就结束了，感谢阅读！有问题留言，及时回复