HTML基础-06 jQuery点击函数的使用

本节：

1.点击小图标，更换大图的图片

2.点击导航栏，隐藏的内容会出现。

1.点击小图标，更换大图的图片

1.div

1.在head开头引入jQuery链接 
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- 引入jQuery -->

2.在页面执行内容
 <div style="position: relative;width: 1000px;height: 600px;">
        <!-- 父相对 -->
     //一开始大大图标
        <img id="img" src="./7.jpg" style="width: 100%;height: 100%;" />
//隐藏了的小图标btn
        <div class="btngroups">
            <div imgurl="./7.jpg" class="btn">1</div>
            <!-- imgurl只是一个变量 -->
            <div imgurl="./9.jpg" class="btn">2</div>
            <div imgurl="./12.jpg" class="btn">3</div>
            <div imgurl="./8.jpg" class="btn">4</div>
        </div>

    </div>

2.script

3.点击小图标自动换图片的点击函数
 <script>
        $(function () {
            $(".btn").mouseenter(function () {
                let abc = $(this).attr("imgurl")
                //改变大图标的路径
                $("#img").attr("src", abc)//attr改变里面的内容，第一个改变的属性，第二个改变的内容
            })
        })
    </script>

方法2：上面的就多了个赋值
    <script>
        $(function () {
                $(".btn").click(function () {
                    // this相当于指针，会根据鼠标自动跳
                    $("#img").attr("src", $(this).attr("imgurl")  );
                    // attr  

                               })
        })
    </script>

2.点击导航栏，隐藏的内容会出现。

1.页面内容

<div class="outter" style="position: relative;display: flex;">
    <div class="nav">小米手机</div>
    <div class="nav">Redmi 红米</div>
    <div class="nav">电视</div>
    <div class="items">
<!-- items是出现的内容 -->
    </div>
</div>

2.script点击事件

<script>
    $(function () {
        $(".nav").mouseenter(function(){
            // 鼠标滑动导航触发
            $(".items").css("display","block")
        })
       
        $(".outter").mouseleave(function(){
            // 鼠标离开范围才触发：display，不显示
            $(".items").css("display","none")
        })
    })
</script>

例子2：点击之后，隐藏的内容会出现
1.页面内容

<div class="pro">
            <div>Section 3</div>
            <div class="pro1">
             <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat</div>
            </div>
        </div>

2.script内容

<script>
        $(function () {
            $(".pro").click(function () {
                // this相当于指针，会根据鼠标自动跳
                $(".pro1", this).css("display", "block")
            })

            $(".pro").mouseleave(function () {
                $(".pro1", this).css("display", "none")

            })
        })
    </script>