JQuery(一)

最新推荐文章于 2022-08-26 20:08:54 发布

「已注销」

最新推荐文章于 2022-08-26 20:08:54 发布

阅读量203

点赞数 1

分类专栏： # JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45419127/article/details/118678498

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery

JQuery：即javascript库。对原生的js代码进行封装，我们可以直接快速而高效的使用封装好的功能

常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等

官网地址：https://jquery.com/

jQuery的优点

轻量级。核心文件几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

体验jQuery

步骤

引入jQuery文件。
文档最末尾插入 script 标签书写体验代码。

jQuery入口函数

JQuery中的入口函数相当于Js中DOMContentLoaded属性。

// 第一种: 简单易用。
$(function () {   
   // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   //  此处是页面DOM加载完成的入口
});

jQuery中的顶级对象

$是jQuery的顶级对象，同时也是JQuery的别称。相当于原生JavaScript中的 window

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery中的顶级对象</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>

</body>
<script>
    $(function() {
        alert('Hello Word')
    })
    jQuery(function() {
        alert('Hello Jquery')
    })
</script>

</html>

在这里插入图片描述

DOM对象与jQuery对象

原生js获取的对象称为DOM对象
JQuery获取到的对象称为Jquery对象

Jquery对象的本质其实是$对DOM对象包装后产生的对象（以伪数组的方式存储）

DOM对象只能使用javascript原生的方法，而JQuery对象只能使用Jquery中的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象与JQuery对象</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // DOM对象
    let box = document.querySelector('.box');
    console.dir(box);

    // JQuery对象
    console.dir($(".box"));
</script>

</html>

在这里插入图片描述

DOM对象和JQuery对象转换

DOM对象与JQuery对象是可以相互转换的

DOM对象转换为JQuery对象

$(''div)

JQuery对象转换为DOM对象
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象与JQuery对象的相互转换</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    //DOM对象转换成JQuery对象
    let box = document.querySelector('.box');
    console.log($(box));

    // JQuery对象转换为DOM对象
    console.log($(box)[0]);
    console.log($(box).get(0))
</script>

</html>

在这里插入图片描述

jQuery中的选择器

jQuery中的基本选择器

$(‘选择器’)里面的选择器直接写css的选择器即可，但是需要加引号

在这里插入图片描述

JQuery中的层级选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery基本选择器与JQuery中级选择器</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <header>header</header>
    <ul>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
    </ul>
</body>
<script>
    $(function() {
        console.log($('header'));
        console.log($('ul li'));
    })
</script>

</html>

在这里插入图片描述

JQuery中的筛选选择器

筛选选择器顾名思义：就是在所有的选项中筛选符合条件的元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery中的筛选选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style: none;
            width: 600px;
            margin: 20px auto;
        }
        
        li {
            width: 100%;
            height: 20px;
            margin-bottom: 20px;
        }
    </style>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
<script>
    $(function() {
        $('ul li:first').css('background', 'red');
        $('ul li:last').css('background', 'green');
        $('ul li:eq(2)').css('background', 'blue');

        $('ol li:odd').css('background', 'black');
        $('ol li:even').css('background', 'purple');


    })
</script>

</html>

在这里插入图片描述

JQuery中的筛选方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery中的筛选方法</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>

    <div class="nav">
        <p></p>
        <div>
            <p></p>
        </div>
    </div>
</body>
<script>
    $(function() {
        console.log($('.son').parent());
        console.log($('.nav').children('p'));
        console.log($('.nav').find('p'));
    })
</script>

</html>

在这里插入图片描述

JQuery筛选方法之进阶

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery筛选方法之进阶</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <ul>
        <li>ul li</li>
        <li>ul li</li>
        <li class="item">ul li</li>
        <li>ul li</li>
        <li>ul li</li>
        <li>ul li</li>
    </ul>

    <ol>
        <li>ol li</li>
        <li>ol li</li>
        <li>ol li</li>
        <li>ol li</li>
        <li>ol li</li>
        <li>ol li</li>
    </ol>
    <div class="current"></div>
    <div></div>
</body>
<script>
    $(function() {
        // 查找其它兄弟元素
        $('ul .item').siblings('li').css('color', 'red');
        //查找其它兄弟元素
        $('ol li').eq(2).css('color', 'yellow');
        // 判断是否有某个类名
        console.log($('div').eq(0).hasClass('current'));
        console.log($('div').eq(1).hasClass('current'));
    })
</script>


</html>

在这里插入图片描述

JQuery中隐式迭代

遍历内部DOM元素( 以伪数组的形式进行存储 )的过程便叫作隐式迭代

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐式迭代</title>
    <style>
        ul {
            list-style: none;
        }
        
        li {
            width: 500px;
            height: 20px;
            margin: 20px;
        }
    </style>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    $('ul li').css('background', 'red')
</script>

</html>

在这里插入图片描述

JQuery中的排他思想

排他思想：当前元素设置样式其余的兄弟元素清除样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery中的排他思想</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
<script>
    $('button').click(function() {
        $(this).css('background', 'red');
        $(this).siblings('button').css('background', '')
    })
</script>

</html>

在这里插入图片描述

案例之新浪列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            width: 600px;
            margin: 200px auto;
        }
        
        .nav>li {
            float: left;
            list-style: none;
            width: 150px;
            height: 40px;
            margin-right: 20px;
            border: 1px solid red;
            text-align: center;
            line-height: 40px;
        }
        
        a {
            text-decoration: none;
        }
        
        .nav ul {
            display: none;
            list-style: none;
            width: 150px;
            height: 40px;
            border-collapse: collapse;
            text-align: center;
            line-height: 40px;
        }
        
        .nav ul li {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            border: 1px solid red;
            border-top: none;
        }
        
        .nav ul li:hover {
            background-color: pink;
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
            </ul>
        </li>

    </ul>
</body>
<script>
    // 设置移入事件
    $('.nav>li').mouseover(function() {
        $(this).children('ul').show()
    })

    // 设置输出事件
    $('.nav>li').mouseout(function() {
        $(this).children('ul').hide()
    })
</script>

</html>

在这里插入图片描述

淘宝精品案例

思路如下

鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
需要获取当前li的索引号 $(this).index()
显示对应的图片可通过eq(index).show()
隐藏其它的图片 eq(index).siblings().hide()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴案例</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrap {
            width: 250px;
            height: 248px;
            margin: 100px auto;
            border: 1px solid pink;
            border-right: none;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(./images/abg\(1\).gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul id="left">
            <li>
                <a href="#">女鞋</a>
            </li>
            <li>
                <a href="#">雪地鞋</a>
            </li>
            <li>
                <a href="#">冬裙</a>
            </li>
            <li>
                <a href="#">毛大衣</a>
            </li>
            <li>
                <a href="#">毛衣</a>
            </li>
            <li>
                <a href="#">棉服</a>
            </li>
            <li>
                <a href="#">女裤</a>
            </li>
            <li>
                <a href="#">羽绒服</a>
            </li>
            <li>
                <a href="#">牛仔裤</a>
            </li>
        </ul>
        <div id="content">

            <div>
                <a href="#"><img src="./images/女靴.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/雪地靴" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/冬裙.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/毛衣.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/呢大衣.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/棉服.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/女裤.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/羽绒服.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/牛仔裤.jpg" alt=""></a>
            </div>
        </div>
</body>
<script>
    $(function() {
        // 设置鼠标移入事件
        $("#left>li").mousemove(function() {
            // 获取li的索引号
            var index = $(this).index();
            // 鼠标移入当前li 当前li所对应的图片显示
            $('#content div').eq(index).show()
                // 让其它的图片隐藏
            $('#content div').eq(index).siblings().hide()
        })
    })
</script>

</html>

在这里插入图片描述

jQuery设置样式

设置一组样式

$(this).css(''color'', ''red'');

** 设置多组样式**

$(this).css({ "color":"white","font-size":"20px"});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery设置一组样式</title>
    <script src="./jquery-3.6.0.js"></script>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 设置一组样式
    $('.box').css('backgroundColor', 'red')
        // 设置多组样式
    $('.box').css({
        "width": 400,
        'height': 400
    })
</script>

</html>

在这里插入图片描述

JQuery操作类样式

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery操作类样式</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            transition: all 0.5s;
        }

        .bg_red {
            background-color: red;
            transform: rotate(180deg);
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <button>添加类</button>
    <button>移除类</button>
    <button>切换类</button>
    <div class="box"></div>
</body>
<script>
    $(function () {
        // 添加类
        $('button').eq(0).click(function () {
            $('.box').addClass('bg_red')
        })
        // 移除类
        $('button').eq(1).click(function () {
            $('.box').removeClass('bg_red')
        })
        //切换类
        $('button').eq(2).click(function () {
            $('.box').toggleClass('bg_red')
        })
    })
</script>

</html>

在这里插入图片描述

JQuery之tab栏切换

思路

点击上部的li 添加current类其它li移除current类
点击的同时得到li的索引号
让下部相对应的索引号item显示其它的item隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .tab {
            width: 850px;
            margin: 20px auto;
        }
        
        .tab_list ul {
            overflow: hidden;
            list-style: none;
        }
        
        .tab_list ul li {
            float: left;
            cursor: pointer;
            width: 200px;
            height: 40px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
        }
        
        .bg {
            background-color: pink;
        }
        
        .tab_item .items {
            display: none;
            width: 808px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-bottom: 1px;
            background-color: red;
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li>选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
        </div>

        <div class="tab_item">
            <div class="items" style="display: block;">内容1</div>
            <div class="items">内容2</div>
            <div class="items">内容3</div>
            <div class="items">内容4</div>
        </div>
    </div>
</body>
<script>
    $(function() {
        $('.tab_list li').click(function() {
            $(this).addClass('bg').siblings().removeClass('bg');
            var index = $(this).index();
            console.log(index);
            $('.tab_item div').eq(index).show().siblings().hide()
        })
    })
</script>

</html>

在这里插入图片描述

JQuery类操作与JS className的区别

JavaScript className会覆盖原来的类名而JQuery中类操作不会覆盖原来的类名

jQuery效果

JQuery效果之显示隐藏

显示
在这里插入图片描述

隐藏

切换
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery效果之显示与隐藏</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 145px;
                height: 400px;
                background-color: purple;
            }
        </style>
    </head>

    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>显示与隐藏</button>
        <div class="box"></div>
        <script>
            $(function() {
                $('button').eq(0).click(function() {
                    $('.box').show(1000, function() {
                        console.log('显示')
                    })
                })

                $('button').eq(1).click(function() {
                    $('.box').hide(1000, function() {
                        console.log('隐藏')
                    })
                })

                $('button').eq(2).click(function() {
                    $('.box').toggle(1000, function() {
                        console.log('显示与隐藏')
                    })
                })

            })
        </script>
    </body>

</html>

在这里插入图片描述

JQuery效果之滑入滑出

下滑
在这里插入图片描述

上滑

切换
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery效果之淡入淡出</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        button {
            width: 33%;
            text-align: center;
        }
        
        .box {
            width: 100%;
            height: 800px;
            background-color: red;
        }
    </style>
</head>

<body>

    <button>隐藏</button>
    <button>显示</button>
    <button>切换</button>
    <div class="box"></div>
</body>
<script>
    $('button').eq(0).click(function() {
        $('.box').slideUp(1000)
    })
    $('button').eq(1).click(function() {
        $('.box').slideDown(1000)
    })
    $('button').eq(2).click(function() {
        $('.box').slideToggle(1000)
    })
</script>

</html>

在这里插入图片描述

JQuery之事件切换

JQuery为我们提供了一个新事件，相当于css中的hover

hover([over,]out)     // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之事件切换</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        button {
            width: 100%;
            text-align: center;
        }
        
        .box {
            width: 100%;
            height: 600px;
            background-color: green;
        }
    </style>
</head>

<body>
    <button>切换</button>
    <div class="box"></div>
</body>
<script>
    $('button').hover(function() {
        $('.box').slideToggle()
    })
</script>

</html>

在这里插入图片描述

JQuery之停止动画序列

动画一旦触发便会执行如果多次触发会造成多个动画排队执行

JQuery之停止动画

stop()：用于停止动画
stop():写到动画或者效果的前面相当于停止上一次的动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            width: 600px;
            margin: 200px auto;
        }
        
        .nav>li {
            float: left;
            list-style: none;
            width: 150px;
            height: 40px;
            margin-right: 20px;
            border: 1px solid red;
            text-align: center;
            line-height: 40px;
        }
        
        a {
            text-decoration: none;
        }
        
        .nav ul {
            display: none;
            list-style: none;
            width: 150px;
            height: 40px;
            border-collapse: collapse;
            text-align: center;
            line-height: 40px;
        }
        
        .nav ul li {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            border: 1px solid red;
            border-top: none;
        }
        
        .nav ul li:hover {
            background-color: pink;
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
            </ul>
        </li>

    </ul>
</body>
<script>
    //事件切换  stop:停止动画
    $(function() {
        $('.nav li').hover(function() {
            $(this).children('ul').stop().slideToggle()
        })
    })
</script>

</html>

在这里插入图片描述

JQuery效果之淡入淡出

淡入
在这里插入图片描述

淡出

在这里插入图片描述
切换

透明度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery效果之淡入淡出</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrap {
            display: flex;
        }
        
        button {
            flex: 25%;
            text-align: center;
        }
        
        .box {
            width: 100%;
            height: 800px;
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <button>淡入</button>
        <button>淡出</button>
        <button>切换</button>
        <button>透明度</button>
    </div>
    <div class="box"></div>
</body>
<script>
    $('button').eq(0).click(function() {
        $('.box').fadeIn(1000)
    })
    $('button').eq(1).click(function() {
        $('.box').fadeOut(1000)
    })
    $('button').eq(2).click(function() {
        $('.box').fadeToggle(1000)
    })
    $('button').eq(3).click(function() {
        $('.box').fadeTo(1000, 0.5)
    })
</script>

</html>

在这里插入图片描述

JQuery之突出显示的案例

鼠标经过当前li的时候其它li的透明度改为0.5
鼠标离开当前li的时候其它li的透明度改为1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之突出显示的案例</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #000;
        }
        
        ul {
            list-style: none;
        }
        
        .warp {
            overflow: hidden;
            width: 630px;
            height: 394px;
            padding: 10px;
            margin: 200px auto;
            border: 1px solid #fff;
            background-color: #000;
        }
        
        li {
            float: left;
            margin: 5px;
        }
        
        img {
            display: block;
            border: none;
        }
    </style>
</head>

<body>
    <div class="warp">
        <ul>
            <li>
                <a href="#"><img src="./images/01.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/02.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/03.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/04.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/05.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/06.jpg" alt=""></a>
            </li>
        </ul>
    </div>
</body>
<script>
    $('.warp li').hover(function() {

        $(this).siblings().stop().fadeTo(400, 0.5)
    }, function() {
        $(this).siblings().stop().fadeTo(400, 1)
    })
</script>

</html>

在这里插入图片描述

jQuery自定义动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之自定义动画</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        .box {
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button>动画</button>
    <div class="box"></div>
</body>
<script>
    $(function() {
        $('button').click(function() {
            $('div').animate({
                left: 800,
                top: 200,
                width: 600,
                opacity: 0.5,

            }, 500)
        })
    })
</script>

</html>

在这里插入图片描述

JQuery手风琴效果

鼠标经过当前li时

当前小li 宽度变为 224px 同时里面的小图片淡出大图片淡入
.其余兄弟小li宽度变为69px 小图片淡入大图片淡出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery手风琴效果</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        img {
            display: block;
        }
        
        .king {
            overflow: hidden;
            width: 852px;
            padding: 10px;
            margin: 100px auto;
            background: url(images/big.png) no-repeat;
        }
        
        .king ul {
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
            width: 224px;
        }
        
        .king li.current .samll {
            display: none;
        }
        
        .king li.current .big {
            display: block;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .samll {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#"><img src="./images/m_samll.jpg" alt="" class="samll "><img src="./images/m_big.png" alt="" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="./images/t_samll.jpg" alt="" class="samll"><img src="./images/t_big.png" alt="" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="./images/c_samll.jpg" alt="" class="samll"><img src="./images/c_big.png" alt="" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="./images/w_samll.jpg" alt="" class="samll"><img src="./images/w_big.png" alt="" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="./images/t_samll.jpg" alt="" class="samll"><img src="./images/t_big.png" alt="" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="./images/z-samll.jpg" alt="" class="samll"><img src="./images/z_big.png" alt="" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="./images/h_samll.jpg" alt="" class="samll"><img src="./images/h_big.png" alt="" class="big"></a>
            </li>
        </ul>
    </div>
</body>
<script>
    $(function() {
        $('.king li').mouseenter(function() {
            // 当前li的宽度变为224px 同时里面的小图片淡出  大图片淡入
            $(this).stop().animate({
                width: 224
            }).find('.samll').stop().fadeOut().siblings('.big').stop().fadeIn();

            //其余的兄弟li的宽度变为69px 小图片淡入 大图片淡出
            $(this).siblings('li').stop().animate({
                width: 69
            }).find('.samll').stop().fadeIn().siblings('.big').stop().fadeOut()
        })
    })
</script>

</html>

在这里插入图片描述

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery(一)

jQueryJQuery：即javascript库。对原生的js代码进行封装，我们可以直接快速而高效的使用封装好的功能常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等官网地址：https://jquery.com/jQuery的优点轻量级。核心文件几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器链式编程、隐式迭代。对事件、样式、动画支持，大大简化了DOM操作。支持插件扩
复制链接

扫一扫