jQuery学习 — 基础应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_67614925/article/details/125044870

本文介绍了jQuery的基础应用，包括其快速简洁的特性，以及如何引入jQuery库。详细讲解了jQuery的事件处理（如.on()），图片隐藏与显示的方法（如hide(), show(), toggle()），淡入淡出效果（fadeIn(), fadeOut(), fadeToggle()），滑动效果（slideUp(), slideDown(), slideToggle()）以及animate()和stop()方法。提供了丰富的实例代码供读者实践。" 102433117,8852734,Ubuntu环境部署报错libXrender.so.1解决方法,"['操作系统', 'Ubuntu', 'Java应用', '部署', '环境配置']

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

简介

jQuery（下载地址）是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

实例应用

根据jQuery下载文件保存的位置引入

<!-- 引入jQuery文件 -->
    <script src="./js/jquery-3.6.0.min.js"></script>

鼠标单击效果

<script>
    $(function (e) {
        // 单击图片隐藏
        $('img').click(function (e) {
            e.preventDefault();
            $('img').hide();
        });
    })
</script>

jQuery事件.on写法

<script>
    $(function (e) {
        // 官方标准写法 不会被覆盖
        $('img').on('click', function (e) {
            e.preventDefault();
            $('img').hide();
        });
        $('img').on('click', function (e) {
            e.preventDefault();
            alert(this);
        });
    })
</script>

鼠标单击按钮操作图片隐藏（hide方法）与显示（show方法）

<body>
    <button id="hidebtn">隐藏</button>
    <button id="showbtn">显示</button>
    <br><br>
    <img src="/html/img/03.jpg" alt="" width="300px">
</body>

<script>
    $(function (e) {
        // 两个按钮控制图片的显示与隐藏
        $('#hidebtn').click(function (e) {
            e.preventDefault();
            $('img').hide();
        });
        $('#showbtn').click(function (e) {
            e.preventDefault();
            $('img').show();
        });
    })
</script>

方法里面可以添加参数控制实现效果的时间，单位是毫秒

$('img').hide(1000 * 2);
$('img').show(1000 * 2);

方法后面还可以关联其他函数，并执行

<script>
    $(function (e) {
        // 隐藏与显示行为结束后 还会执行别的函数
        $('#hidebtn').click(function (e) {
            e.preventDefault();
            $('img').hide(1000 * 2, function (e) {
                alert('海贼王');
            });
        });
        $('#showbtn').click(function (e) {
            e.preventDefault();
            $('img').show(1000 * 2);
            alert('航海王');
        });
    })
</script>

使用toggle方法实现一个按钮控制隐藏和显示，同样可以设置实现时间和关联函数

<script>
    $(function (e) {
        // 一个按钮控制图片的显示与隐藏
        $('button').click(function (e) {
            e.preventDefault();
            // slow 控制显示隐藏速度为慢
            $('img').toggle(1000 * 2, function (e) {
                alert('海贼王');
            });
        });
    })
</script>

鼠标单击按钮操作图片淡入（fadeIn方法）、淡出（fadeOut方法）、淡入与淡出（fadeToggle方法），同样可以设置实现时间

<script>
    $(function (e) {
        // 控制图片的淡入与淡出
        $('#fadetoggle').click(function (e) {
            e.preventDefault();
            $('img').fadeToggle(1000)
        });
        $('#fadeIn').click(function (e) {
            e.preventDefault();
            $('img').fadeIn(1000)
        });
        $('#fadeOut').click(function (e) {
            e.preventDefault();
            $('img').fadeOut(1000)
        });
    })
</script>

fadeTo方法添加参数实现淡入淡出时间和透明度

<script>
    $(function (e) {
        // 控制图片的隐藏与显示的透明度
        $('#hide').click(function (e) {
            e.preventDefault();
            $('img').fadeTo(1000, 0.5)
        });
        $('#show').click(function (e) {
            e.preventDefault();
            $('img').fadeTo(1000, 1)
        });
    })
</script>

鼠标单击按钮操作图片向上隐藏（slideUp方法）、向下显示（slideDown方法）、向上隐藏与向下显示（slideToggle方法），同样可以设置实现时间

<script>
    $(function (e) {
        // 控制图片的向上与向下
        $('#upordown').click(function (e) {
            e.preventDefault();
            $('img').slideToggle(1000)
        });
        $('#up').click(function (e) {
            e.preventDefault();
            $('img').slideUp(1000)
        });
        $('#down').click(function (e) {
            e.preventDefault();
            $('img').slideDown(1000)
        });
    })
</script>

animate方法可以添加实现css样式

<script>
    $(function (e) {
        // 控制图片的移动与恢复 根据定位控制移动
        $('#up').click(function (e) {
            e.preventDefault();
            $('img').animate({
                left: '+=100px',
                top: '+=100px',
                width: '+=100px'
            });
        });
        $('#down').click(function (e) {
            e.preventDefault();
            $('img').animate({
                left: '100px',
                top: '100px',
                width: '100px'
            });
        });
        // 实现图片的宽度增加 左移 下移 右移 上移 宽度恢复
        $('#upordown').click(function (e) {
            e.preventDefault();
            $('img').animate({
                width: '+=300px'
            })
            $('img').animate({
                left: '+=300px'
            })
            $('img').animate({
                top: '+=300px'
            })
            $('img').animate({
                left: '-=300px'
            })
            $('img').animate({
                top: '-=300px'
            })
            $('img').animate({
                width: '-=300px'
            })
        });
    })
</script>

stop方法停止动画

<script>
    $(function (e) {
        $('#run').click(function (e) {
            e.preventDefault();
            $('img').slideUp(1000 * 3);
            $('img').slideDown(1000 * 3);
        });
        $('#stop').click(function (e) {
            e.preventDefault();
            // 停止当前动画效果 但是 不会影响 下一个动画效果 
            $('img').stop(true)
        });
    })
</script>