jQuery

发表于 更新于 分类于 > > 本文字数： 8.9k 阅读时长 ≈ 30 分钟

什么是 jQuery？

  • jQuery 是一个快速、小巧而且功能丰富的 JavaScript 库。它使得 HTML 文档遍历和操作、事件处理、动画和 Ajax 等 Web 开发中常见的任务变得更加简单。通过简洁的 API，它使得多浏览器的兼容性问题得以简化，因为 jQuery 会自动处理这些兼容性问题。jQuery 提供的方法使得开发者可以轻松地访问和操作 DOM 元素，创建动态内容和增强用户交互体验。
  • jQuery 的核心特点包括：
    1. 链式语法（Chaining）：允许我们在单个语句中链接多个函数调用，从而简化代码。
    2. DOM 选择器：使用类似 CSS 的选择器来选取 DOM 元素，并对它们执行操作。
    3. 事件处理：提供简化的方法来处理用户事件，如点击、鼠标移动等。
    4. 动画和效果：内建多种动画函数，可以实现元素淡入淡出、滑动、隐藏显示等效果。
    5. Ajax：提供简化的Ajax函数，便于进行异步 HTTP（Ajax）请求。
    6. 插件：拥有大量社区开发的插件，可以扩展其功能以适应更多场景。
  • jQuery 自 2006 年推出以来，由于其简洁性和跨浏览器的特性，一度成为最流行的 JavaScript 库。然而，随着现代 Web 开发中原生 JavaScript（也称为vanilla JS）能力的增强，以及新兴的前端框架（如React、Vue和Angular）的流行，jQuery 的使用已经不如以前普遍。尽管如此，jQuery 仍然是许多现有网站和应用的重要组成部分，并且它对初学者理解和学习JavaScript DOM 操作仍有参考价值。

引入方式

  1. 从CDN下载

    • 最常见的方式是，通过内容分发网络（CDN）链接到 jQuery 库。你可以从 Google、Microsoft、CDNJS 等 CDN 服务获取最新的 jQuery 版本。例如：
      • jQuery CDN
        1
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      • Google CDN
        1
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      • Microsoft CDN
        1
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
      • CDNJS CDN
        1
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    • 只需将以上代码中的一行添加到你的 HTML 文档的 <head> 或 <body> 结束标签之前，即可使用 jQuery。

  2. 下载到本地

    另一种方式是从 jQuery 官网下载jQuery文件到本地服务器。这意味着你将拥有 jQuery 文件的一个本地副本，并通过本地路径来链接它。

    1
    <script src="path/to/your/local/jquery.min.js"></script>

    此方法的好处是你不会依赖外部 CDN 的可用性和速度，但你需要自己维护文件的更新。

  3. 使用包管理工具

    • 如果你正在使用现代的 Web 开发工具链，可能会使用到如 npm 或 yarn 这样的包管理工具。你可以使用这些工具将jQuery 作为依赖项安装到你的项目中。
    • 使用 npm：
      1
      npm install jquery
    • 使用 yarn：
      1
      yarn add jquery
    • 然后，你可以在你的 JavaScript 文件中通过 require 或 import 语句来引入jQuery：
      1
      2
      3
      4
      5
      // 使用CommonJS模式
      const $ = require('jquery');

      // 使用ES6模块
      import $ from 'jquery';
    • 选择哪种方式取决于你的项目需求和个人喜好。CDN 方式由于其简单性和对初学者的友好性，通常是快速开始的首选。而本地下载或包管理工具适合于需要更精细控制资源和依赖管理的大型项目。

  • jQuery 不同版本之间的区别

    • jQuery 提供了不同版本以适配不同的开发需求和场景。这些版本包括未压缩（Uncompressed）、压缩（Minified）、精简（Slim）以及精简且压缩（Slim Minified）。下面是这些版本之间的区别：
      1. Uncompressed（未压缩）:
        • 这个版本的jQuery包含了完整的代码，包括所有的注释、空格和完整的变量名。
        • 它适用于开发环境，因为它的代码是完全可读的，便于调试和学习。
      2. Minified（压缩）:
        • 压缩版本通过删除所有的注释、不必要的空格以及缩短变量名来减少文件大小，从而加快页面加载速度。
        • 它适用于生产环境，因为用户不需要阅读代码，且更小的文件可以提高网站性能。
      3. Slim（精简）:
        • 精简版本的jQuery移除了一些不常用的功能，如Ajax和动画效果，这可以进一步减小文件的大小。
        • 如果你的项目不需要使用到这些去掉的功能，那么使用精简版本就很合适。
      4. Slim Minified（精简且压缩）:
        • 这个版本结合了精简和压缩的优点。它移除了不常用的功能，同时进行了代码压缩。
        • 它提供了最小的文件尺寸，适合那些需要这些移除特性的项目，并且关注于加载性能的生产环境。
    • 每个版本都有相对应的 CDN 链接。通常，你会在开发时使用 Uncompressed 版本，以便于调试，然后在网站上线时切换到Minified 或 Slim Minified 版本以优化加载时间。使用 CDN 的好处是可以利用CDN的缓存和分发优势，可能还能减少服务器的带宽使用，提高访问速度。

选择器

  1. 元素选择器

    选择所有指定类型的DOM元素。

    1
    $('p') // 选择所有<p>元素

  2. id 选择器

    选择具有指定 id 的单个元素。

    1
    $('#my-id') // 选择id为'my-id'的元素

  3. class 选择器

    选择所有具有指定类的元素。

    1
    $('.my-class') // 选择所有class是'my-class'的元素

  4. 群组选择器

    通过逗号分隔，选择所有指定的元素。

    1
    $('div, p, span') // 选择所有<div>、<p>和<span>元素

  5. 属性选择器

    选择具有某个特定属性的元素。

    1
    2
    3
    4
    $('[href]') // 选择所有带有href属性的元素
    $('[href="#"]') // 选择所有href属性值等于"#"的元素
    $('[href!="#"]') // 选择所有href属性值不等于"#"的元素
    $('[href$=".jpg"]') // 选择href属性以".jpg"结尾的所有元素

  6. 后代选择器

    选择指定元素的所有后代元素。

    1
    $('div p') // 选择<div>元素内部的所有<p>元素

  7. 子元素选择器

    选择指定元素的直接子元素。

    1
    $('ul > li') // 选择所有<ul>直接子元素的<li>元素

  8. 伪类选择器

    • 选择第一个、最后一个或指定索引的元素。

      1
      2
      3
      $('li:first') // 选择第一个<li>元素
      $('li:last') // 选择最后一个<li>元素
      $('li:eq(2)') // 选择第三个<li>元素（索引从0开始）

    • 排除匹配的元素。

      1
      $('div:not(.my-class)') // 选择不包含'my-class'类的所有<div>元素

    • 选择包含指定文本的元素。

      1
      $('div:contains("Hello")') // 选择所有包含文本"Hello"的<div>元素

  9. 父子关系选择器

    • .find(selector)：此方法用于查找当前jQuery对象集合中每个元素的后代元素。

      1
      $('#myId').find('.myClass') // 查找ID为'myId'的元素内所有具有'class'类的后代元素

    • .children(selector)：与 .find() 类似，但仅限于直接子元素。

      1
      $('#myId').children('div') // 查找ID为'myId'的元素的所有直接子div元素

    • .parent(selector)：查找当前元素的直接父元素，可选地过滤为匹配选择器的元素。

      1
      $('.myClass').parent('div') // 查找类名为'myClass'的元素的直接父级div元素

  10. 兄弟元素选择器

    • .siblings(selector)：找到与指定选择器匹配的所有兄弟元素。

      1
      $('#myId').siblings('.myClass') // 查找ID为'myId'的元素的所有兄弟元素，这些兄弟元素具有'class'类

    • .next(selector)：找到紧邻的下一个兄弟元素，可选地过滤为匹配选择器的元素。

      1
      $('#myId').next('.myClass') // 查找ID为'myId'的元素的下一个兄弟元素，该元素必须具有'class'类

    • .prev(selector)：找到紧邻的上一个兄弟元素，可选地过滤为匹配选择器的元素。

      1
      $('#myId').prev('.myClass') // 查找ID为'myId'的元素的上一个兄弟元素，该元素必须具有'class'类

文档处理

  1. 添加元素

    • .append() - 在选定元素的内部末尾插入内容。
    • .prepend() - 在选定元素的内部开头插入内容。
    • .after() - 在选定元素之后插入内容。
    • .before() - 在选定元素之前插入内容。
    • 示例
      1
      2
      $('#container').append('<p>这是新添加的段落</p>');
      $('.item').after('<li class="item">新项目</li>');

  2. 删除元素

    • .remove() - 删除选定的元素及其子元素。
    • .empty() - 清空选定元素的所有子元素。
    • 示例
      1
      2
      $('.special').remove(); // 删除所有class为special的元素
      $('#container').empty(); // 清空id为container的元素内部的所有内容

  3. 修改元素

    • .html() - 获取或设置选定元素的HTML内容。
    • .text() - 获取或设置选定元素的文本内容。
    • .attr() - 获取或设置选定元素的属性。
    • .css() - 获取或设置选定元素的样式。
    • 示例
      1
      2
      3
      $('.item').text('更新文本'); // 设置所有class为item的元素的文本内容
      $('input[type="text"]').attr('value', '新值'); // 设置input元素的value属性
      $('div').css('background-color', 'lightblue'); // 设置div的背景颜色

  4. 复制元素

    • .clone() - 复制选定的元素。
    • 示例
      1
      2
      var clonedItem = $('.item').first().clone();
      $('.list').append(clonedItem); // 将复制的元素添加到列表的末尾

  5. 替换元素

    • .replaceWith() - 用新内容替换选定的元素。
    • 示例
      1
      $('.special').replaceWith('<div>替换的新元素</div>');

  6. 包装元素

    • .wrap() - 将每个选定的元素包裹在指定的HTML结构中。
    • 示例
      1
      $('.item').wrap('<div class="wrapper"></div>');

  7. 操作类

    • .addClass() - 给选定的元素添加类。
    • .removeClass() - 删除选定元素的一个或多个类。
    • .toggleClass() - 切换选定元素的类。
    • 示例
      1
      2
      3
      $('.item').addClass('active');
      $('.special').removeClass('special');
      $('#my-div').toggleClass('highlight');

筛选

  1. filter()

    根据指定的选择器筛选元素。只有与选择器匹配的元素会被保留。

    1
    $('.item').filter('.special').css('color', 'blue'); // 只为class为special的item元素设置颜色

  2. not()

    根据指定的选择器排除元素。与选择器匹配的元素会被移除。

    1
    $('.item').not('.special').css('color', 'grey'); // 为非special的item元素设置颜色

  3. has()

    筛选出包含指定选择器匹配元素的父元素。

    1
    $('div').has('p').addClass('has-paragraph'); // 为包含<p>标签的div添加class

  4. eq()

    选择指定索引位置的元素。

    1
    $('.item').eq(2).css('color', 'green'); // 只改变第三个item元素的颜色

  5. first() 和 last()

    first() 选择第一个匹配的元素，而 last() 选择最后一个匹配的元素。

    1
    2
    $('.item').first().css('font-weight', 'bold'); // 加粗第一个item元素
    $('.item').last().css('font-weight', 'bold'); // 加粗最后一个item元素

  6. slice()

    该方法选取一个匹配的元素的子集，根据给定的起始和结束索引。

    1
    $('.item').slice(1, 3).css('text-decoration', 'underline'); // 为第二个和第三个item元素添加下划线

  7. children() 和 find()

    children() 方法只考虑儿子级别的后代，而 find() 可以匹配所有后代级别。

    1
    2
    $('#container').children('.item').css('color', 'purple'); // 改变直接子元素item的颜色
    $('#container').find('.item').css('color', 'purple'); // 改变所有后代的item元素的颜色

  8. closest()

    该方法用于从元素本身开始，在其祖先元素中匹配给定的选择器，直到找到一个匹配的元素。

    1
    $('.item').closest('div').addClass('highlight'); // 给每个item元素最近的div父元素添加highlight类

  9. parents() 和 parent()

    parents() 方法可以得到任何匹配元素集合中每个元素的祖先元素，而 parent() 仅仅是匹配的元素集合的直接父元素。

    1
    2
    $('.item').parents().css('background-color', 'lightgrey'); // 为所有item祖先元素设置背景色
    $('.item').parent().css('background-color', 'lightgrey'); // 为item直接父元素设置背景色

  10. even()

    选择匹配元素集合中索引值为偶数的元素（注意计数是从0开始的，所以实际上它选择的是第1个、第3个、第5个元素等）。

    1
    $('li').even().css('background-color', 'grey'); // 将列表中的偶数项背景设置为灰色

  11. odd()

    选择匹配元素集合中索引值为奇数的元素（从0开始计算，所以选择的是第2个、第4个、第6个元素等）。

    1
    $('li').odd().css('background-color', 'lightgrey'); // 将列表中的奇数项背景设置为浅灰色

  12. :visible

    选择所有可见的元素。元素的 display 属性为 none 或者其宽度和高度都显式设置为 0（不包含边框）时，元素会被认为是不可见的。

    1
    2
    3
    $('div:visible').click(function () {
        console.log('可见的div被点击了');
    });

  13. :hidden

    选择所有不可见的元素。这是 :visible 选择器的完全相反的选择器。注意隐藏的表单元素和 window、document 依然认为是 :visible 的。

    1
    $('div:hidden').show(); // 显示所有隐藏的div元素

事件

  1. on() 和 off()

    这是 jQuery 推荐的方法来附加和移除事件监听器。on() 方法可以用来绑定几乎所有类型的事件，包括自定义事件，而且可以在选择器上实现事件委托。

    1
    2
    3
    4
    5
    6
    7
    // 绑定事件
    $('#myElement').on('click', function () {
        // 处理点击事件的代码
    });

    // 移除事件
    $('#myElement').off('click');

    事件委托是一种技术，让你能够在父元素上绑定事件监听器，来监听子元素的事件。这种方法特别适用于处理动态添加到DOM中的元素的事件，因为即使子元素在事件绑定后才被添加，事件依然会被触发。如果你使用了事件委托，可以这样做：

    1
    2
    3
    4
    5
    6
    7
    // 使用事件委托绑定事件
    $('#myElement').on('click', '.myChild', function () {
        // 处理点击子元素的代码
    });

    // 解绑特定的委托事件
    $('#myElement').off('click', '.myChild');

  2. bind() 和 unbind()

    这些是 jQuery 较早的方法，用于附加和移除事件处理器。从 jQuery 1.7 开始，推荐使用 on() 和 off() 代替 bind() 和unbind()。

    1
    2
    3
    4
    5
    6
    7
    // 绑定事件
    $('#myElement').bind('click', function () {
        // 处理点击事件的代码
    });

    // 移除事件
    $('#myElement').unbind('click');

  3. one()

    one() 方法用于绑定一个一次性的事件监听器。这意味着一旦事件触发一次后，事件监听器就会自动移除。

    1
    2
    3
    4
    // 绑定一次性点击事件
    $('#myElement').one('click', function () {
        // 代码只会执行一次
    });

  4. delegate() 和 undelegate()

    delegate() 方法用于附加一个或多个事件处理器，并且可以实现事件委托。它的工作原理和在 on() 中使用事件委托类似，但从 jQuery 1.7 开始，推荐使用 on()。

    1
    2
    3
    4
    5
    6
    7
    // 使用事件委托绑定点击事件
    $('#myElement').delegate('.myChild', 'click', function () {
        // 处理点击子元素的代码
    });

    // 解绑事件委托
    $('#myElement').undelegate('.myChild', 'click');

    undelegate() 方法用于移除通过 delegate() 方法添加的事件处理器。在 jQuery 版本 1.7 之前，delegate() 和 undelegate() 经常被用来实现事件委托。

    1
    2
    3
    4
    5
    // 移除先前通过delegate()添加的特定事件处理器
    $('#myElement').undelegate('.myChild', 'click');

    // 移除先前通过delegate()添加的所有事件处理器
    $('#myElement').undelegate();

  5. hover()

    hover() 方法是一个特殊的事件绑定方法，它是 mouseenter 和 mouseleave 事件的简写形式。这个方法接收两个函数作为参数：一个是当鼠标进入元素时触发的函数，另一个是当鼠标离开元素时触发的函数。

    1
    2
    3
    4
    5
    6
    7
    8
    $('#myElement').hover(
        function () {
            // 鼠标进入元素时执行的代码
        },
        function () {
            // 鼠标离开元素时执行的代码
        }
    );

  6. mouseover()

    mouseover() 方法绑定一个事件处理器到 mouseover 事件。mouseover 事件在鼠标指针进入元素或其子元素时触发，这与 mouseenter 不同，后者仅在鼠标指针进入元素时触发。

    1
    2
    3
    $('#myElement').mouseover(function () {
        // 当鼠标指针进入元素或其子元素时执行的代码
    });

  7. mouseenter() 和 mouseleave()

    当鼠标指针进入元素时，触发一个事件。

    1
    2
    3
    $('#myElement').mouseenter(function () {
        // 处理鼠标进入事件的代码
    });

    当鼠标指针离开元素时，触发一个事件。

    1
    2
    3
    $('#myElement').mouseleave(function () {
        // 处理鼠标离开事件的代码
    });

  8. click() 和 dblclick()

    当用户点击元素时，触发一个事件。

    1
    2
    3
    $('#myElement').click(function () {
        // 处理点击事件的代码
    });

    当用户对元素双击时，触发一个事件。

    1
    2
    3
    $('#myElement').dblclick(function () {
        // 处理双击事件的代码
    });

  9. focus() 和 blur()

    当元素获得焦点时，触发一个事件。

    1
    2
    3
    $('#myInput').focus(function () {
        // 处理获得焦点事件的代码
    });

    当元素失去焦点时，触发一个事件。

    1
    2
    3
    $('#myInput').blur(function () {
        // 处理失去焦点事件的代码
    });

  10. change()

    当元素的值改变时（常用于 <input>, <select>, 和 <textarea>），触发一个事件。

    1
    2
    3
    $('#mySelect').change(function () {
        // 处理值改变事件的代码
    });

  11. submit()

    当表单被提交时，触发一个事件。

    1
    2
    3
    $('#myForm').submit(function () {
        // 处理表单提交事件的代码
    });

  12. keydown(), keypress(), keyup()

    当用户在键盘上按下、按住和释放键时，触发事件。

    1
    2
    3
    $(document).keydown(function (event) {
        // 处理按键按下事件的代码
    });

效果

  • 基本显示和隐藏

    • show()：显示匹配元素。
    • hide()：隐藏匹配元素。
    • toggle()：切换匹配元素的显示状态。
    • 示例
      1
      2
      3
      $('#myElement').show(); // 显示元素
      $('#myElement').hide(); // 隐藏元素
      $('#myElement').toggle(); // 切换元素的显示状态

  • 淡入淡出效果

    • fadeIn()：逐渐改变元素的不透明度以显示元素。
    • fadeOut()：逐渐改变元素的不透明度以隐藏元素。
    • fadeToggle()：逐渐切换元素的不透明度。
    • fadeTo()：逐渐改变元素的不透明度到指定的值。
    • 示例
      1
      2
      3
      4
      $('#myElement').fadeIn(); // 淡入显示元素
      $('#myElement').fadeOut(); // 淡出隐藏元素
      $('#myElement').fadeToggle(); // 切换元素的淡入/淡出效果
      $('#myElement').fadeTo('slow', 0.5); // 将元素的不透明度渐变到50%

  • 滑动效果

    • slideDown()：以滑动动作显示元素。
    • slideUp()：以滑动动作隐藏元素。
    • slideToggle()：切换元素的滑动显示和隐藏。
    • 示例
      1
      2
      3
      $('#myElement').slideDown(); // 滑动显示元素
      $('#myElement').slideUp(); // 滑动隐藏元素
      $('#myElement').slideToggle(); // 切换元素的滑动显示/隐藏

  • 自定义动画

    • animate()：执行自定义动画，可以指定多个属性的变化。
      1
      2
      3
      4
      $('#myElement').animate({
          opacity: 0.5,
          height: 'toggle'
      }, 2000); // 自定义动画，2秒内改变透明度和高度

  • 延迟执行

    • delay()：延迟执行后续列表中的函数。
      1
      2
      // 链式调用，先滑动隐藏元素，然后延迟1秒，最后淡入显示元素
      $('#myElement').slideUp(500).delay(1000).fadeIn(400);

  • 停止动画

    • stop()：停止当前正在执行的动画。
      1
      $('#myElement').stop(); // 停止元素上所有当前正在运行的动画

  • 动画队列控制

    • queue()：显示或操作一个元素上的动画队列。
    • dequeue()：执行队列中的下一个动画。
    • clearQueue()：清除队列中所有未执行的动画。
    • 示例
      1
      2
      3
      4
      5
      $('#myElement').queue(function (next) {
          // 添加一个新动画到队列
          $(this).css('color', 'red');
          next();
      }).dequeue(); // 开始执行队列

属性

  1. .attr(): 获取或设置元素的属性值。
    • 获取属性：$('selector').attr('attributeName') 返回指定元素的属性值。
    • 设置属性：$('selector').attr('attributeName', 'value') 将指定元素的属性值设置为提供的值。
    • 示例：
      1
      2
      3
      4
      5
      6
      // 获取图片的src属性
      var imgSrc = $('img').attr('src');
      console.log(imgSrc); // 输出图片的源链接

      // 设置图片的src属性
      $('img').attr('src', 'newImage.jpg');
  2. .removeAttr(): 移除元素的属性。
    • 用法：$('selector').removeAttr('attributeName') 会从选中的元素中移除指定的属性。
    • 示例：
      1
      2
      // 移除链接的title属性
      $('a').removeAttr('title');
  3. .prop(): 获取或设置元素的属性值，主要用于处理DOM属性，如 checked, selected, disabled 等。
    • 获取属性：$('selector').prop('propertyName') 返回指定元素的属性值。
    • 设置属性：$('selector').prop('propertyName', value) 将指定元素的属性值设置为提供的值。
    • 示例：
      1
      2
      3
      4
      5
      6
      // 检查复选框是否选中
      var isChecked = $('#myCheckbox').prop('checked');
      console.log(isChecked); // 输出true或false

      // 设置复选框为选中状态
      $('#myCheckbox').prop('checked', true);
  4. .data(): 获取或设置元素上存储的数据值（对应HTML5 data-* 属性）。
    • 获取数据：$('selector').data('key') 返回对应数据的值。
    • 设置数据：$('selector').data('key', value) 设置一个与指定元素相关联的数据值。
    • 示例：
      1
      2
      3
      4
      5
      6
      // 获取元素的data-id存储值
      var itemId = $('#myItem').data('id');
      console.log(itemId); // 输出该元素data-id的值

      // 设置元素的data-id存储值
      $('#myItem').data('id', 1234);
  5. .val(): 获取或设置表单元素的 value 属性。
    • 获取值：$('selector').val() 获取表单元素的当前值。
    • 设置值：$('selector').val('newValue') 设置表单元素的值。
    • 示例：
      1
      2
      3
      4
      5
      6
      // 获取文本输入框的值
      var searchText = $('#searchInput').val();
      console.log(searchText);

      // 设置文本输入框的值
      $('#searchInput').val('新的搜索词');
  6. .addClass(), .removeClass(), .toggleClass(): 这些方法用于操作元素的class属性。
    • 添加类：$('selector').addClass('className') 给选中的元素添加一个或多个类。
    • 移除类：$('selector').removeClass('className') 从选中的元素移除一个或多个类。
    • 切换类：$('selector').toggleClass('className') 对选中的元素进行类的切换，如果存在则移除，不存在则添加。
    • 示例：
      1
      2
      3
      4
      5
      6
      7
      8
      // 为元素添加类
      $('#myDiv').addClass('active');

      // 从元素移除类
      $('#myDiv').removeClass('active');

      // 切换元素的类
      $('#myDiv').toggleClass('active');
  7. .css(): 获取或设置元素的样式属性。
    • 获取样式：$('selector').css('propertyName') 返回指定元素的样式值。
    • 设置样式：$('selector').css('propertyName', 'value') 设置指定元素的样式值。
    • 示例：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      // 获取元素的宽度样式
      var width = $('#myDiv').css('width');
      console.log(width); // 输出元素的宽度

      // 设置单个样式属性
      // 设置一个元素的颜色为红色
      $('#myElement').css('color', 'red');

      // 设置多个样式属性
      // 设置元素的宽度和颜色样式
      $('#myDiv').css({
          'width': '100px',
          'color': 'red'
      });

      // 使用函数来动态设置样式
      // 根据当前样式动态更新元素的字体大小
      $('#myElement').css('font-size', function (index, currentSize) {
          return parseFloat(currentSize) * 1.2 + 'px'; // 增加20%的字体大小
      });
      .css() 方法是按照CSS属性的JavaScript表示来命名的，这意味着如果CSS属性名中包含连字符（例如 font-size），在JavaScript中应使用驼峰式命名（fontSize）：
      1
      2
      // 用驼峰命名法设置font-size属性
      $('#myElement').css('fontSize', '16px');
      .css() 方法通常用于动态地更改元素的样式，无论是作为用户交互的响应，还是根据页面状态的更改。这使得页面可以实现丰富的动态效果和响应式设计。

jQuery 与 JS 对象的转换

  • 简介

    • 在 JavaScript 和 jQuery 中，经常需要在原生的 JavaScript 对象和 jQuery 对象之间进行转换。原生的 JavaScript 对象和jQuery 对象不是同一种东西，但它们可以互相转换以便在不同场景下使用。
    • 理解这两种对象之间的转换是非常有用的，特别是当你的项目中同时使用原生 JavaScript 和 jQuery 时。

  • 从 jQuery 对象转换为 JavaScript 对象

    • 当你使用 jQuery 选择器选择元素时，你获取的是一个 jQuery 对象。要从这个 jQuery 对象获取原生的 JavaScript 对象，你可以使用下标或 .get() 方法。
    • 例如，如果你有一个 jQuery 对象：
      1
      var $myElement = $('#myElement'); // jQuery对象

      在 JavaScript 中，通常以 $ 开头的变量表示这是一个 jQuery 对象，这是一种约定俗成的命名方式，但并不是必须的。

    • 要获取对应的原生 JavaScript 对象，可以这样做：
      1
      var myElement = $myElement[0]; // 使用下标获取第一个DOM元素
      或者：
      1
      var myElement = $myElement.get(0); // 使用.get()方法获取第一个DOM元素

      .get() 方法可以不带参数调用，这样会返回一个包含所有选中 DOM 元素的普通数组。

  • 从 JavaScript 对象转换为 jQuery 对象

    • 如果你已经有了一个原生的 JavaScript DOM 元素对象，可以通过将它传递给 jQuery 函数，来将它转换成一个 jQuery对象。
    • 例如，如果你有一个原生的DOM元素：
      1
      var myElement = document.getElementById('myElement'); // 原生JavaScript对象
    • 要将它转换为一个 jQuery 对象，可以这样做：
      1
      var $myElement = $(myElement); // 现在是jQuery对象
    • 一旦你有了一个jQuery对象，你就可以使用jQuery提供的所有方法了，例如 .css(), .animate(), .click() 等等。

  • 为什么要进行转换？

    • jQuery 对象转为 JavaScript 对象：你可能需要这样做，因为某些原生 DOM API（比如 addEventListener 或者setAttribute 等）不适用于 jQuery 对象，而只能在原生的 JavaScript 对象上使用。
    • JavaScript 对象转为 jQuery 对象：这样可以让你利用 jQuery 所提供的便利方法和功能，比如简洁的选择器、链式调用以及丰富的 DOM 操作 API。

目录导航的展开与关闭效果

  • 简介
    要在 jQuery 中实现目录导航的展开和关闭效果，我们通常会使用 .slideDown(), .slideUp() 或 .slideToggle() 动画方法。这些方法允许你创建一个平滑的过渡效果来显示和隐藏页面元素，从而实现一个可折叠的菜单功能。
  • HTML 结构示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <ul id="menu">
        <li>
            <a href="#">项目1</a>
            <ul class="submenu">
                <li><a href="#">子项目1</a></li>
                <li><a href="#">子项目2</a></li>
                <li><a href="#">子项目3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">项目2</a>
            <ul class="submenu">
                <li><a href="#">子项目1</a></li>
                <li><a href="#">子项目2</a></li>
            </ul>
        </li>
        <!-- 更多项目... -->
    </ul>
  • CSS 样式示例
    1
    2
    3
    4
    .submenu {
        display: none;
        /* 默认隐藏所有子菜单 */
    }
  • jQuery 脚本示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $(document).ready(function () {
        $('#menu > li > a').click(function (e) {
            e.preventDefault(); // 阻止链接的默认行为
            var $submenu = $(this).next('.submenu');

            if ($submenu.is(':visible')) {
                $submenu.slideUp(); // 如果子菜单已经展开，就关闭它
            } else {
                $('.submenu').slideUp(); // 先关闭所有其他的子菜单
                $submenu.slideDown(); // 展开当前点击的子菜单
            }
        });
    });
  • 在这个示例中，我们首先确保页面加载完成后才运行Javascript代码。然后为ID为 menu 的元素下的每个直接子 a 元素添加点击事件处理程序。当某个链接被点击时，我们检查其对应的 .submenu 是否可见。如果可见，我们就使用 .slideUp() 方法来关闭它；如果不可见，我们首先关闭所有其他子菜单，然后使用 .slideDown() 方法展开当前子菜单。这样就能实现点击切换菜单项的功能。
  • .slideToggle() 方法也可以实现类似的效果，但通常在不需要关闭其他子菜单的情况下使用
    1
    2
    3
    4
    5
    6
    $(document).ready(function () {
        $('#menu > li > a').click(function (e) {
            e.preventDefault();
            $(this).next('.submenu').slideToggle(); // 简单地切换当前点击的子菜单
        });
    });
  • 综合示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>可折叠导航菜单</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f7f7f7;
                    margin: 0;
                    padding: 20px;
                }

                #menu {
                    list-style-type: none;
                    padding: 0;
                }

                #menu>li {
                    background-color: #ffffff;
                    padding: 15px;
                    margin-bottom: 1px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                    transition: background-color 0.3s;
                    border-radius: 5px;
                }

                #menu>li:hover {
                    background-color: #f9f9f9;
                }

                .submenu {
                    display: none;
                    list-style-type: none;
                    padding-left: 15px;
                    margin-top: 0;
                    margin-bottom: 1px;
                    background-color: #f2f2f2;
                    border-radius: 5px;
                }

                .submenu li {
                    padding: 10px;
                    background-color: transparent;
                    cursor: pointer;
                    transition: background-color 0.3s;
                }

                .submenu li:hover {
                    background-color: #e2e2e2;
                }

                .submenu li a {
                    text-decoration: none;
                    color: black;
                    display: block;
                }

                .submenu li a:hover {
                    text-decoration: none;
                }
            </style>
            <!-- 引入jQuery库 -->
            <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
            <script>
                $(document).ready(function () {
                    $('#menu > li > a').click(function (e) {
                        e.preventDefault();
                        // 获取下一个兄弟元素（子菜单ul.submenu）
                        var $submenu = $(this).next('.submenu');

                        // 先关闭所有其他子菜单，再切换当前子菜单的显示状态
                        $('.submenu').not($submenu).slideUp();
                        $submenu.slideToggle();
                    });
                });
            </script>
        </head>
        <body>
            <ul id="menu">
                <li><a href="#">项目1</a>
                    <ul class="submenu">
                        <li><a href="#">子项目1</a></li>
                        <li><a href="#">子项目2</a></li>
                        <li><a href="#">子项目3</a></li>
                    </ul>
                </li>
                <li><a href="#">项目2</a>
                    <ul class="submenu">
                        <li><a href="#">子项目1</a></li>
                        <li><a href="#">子项目2</a></li>
                    </ul>
                </li>
                <!-- 更多项目... -->
            </ul>
        </body>
    </html>

列表选项移动

通过选择列表中的一个或多个选项并点击按钮来在两个列表之间移动这些选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表选项移动 - jQuery示例</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f7f7f7;
                margin: 0;
                padding: 20px;
            }

            .flex-container {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 20px;
            }

            select {
                width: 160px;
                height: 200px;
                border: 1px solid #ccc;
                border-radius: 4px;
                overflow-y: auto;
                background-color: white;
            }

            .button-container {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin: 0 10px;
            }

            .button-container input[type="button"] {
                width: 40px;
                padding: 10px;
                margin-bottom: 5px;
                border: 1px solid #ccc;
                border-radius: 4px;
                background-color: #f0f0f0;
                cursor: pointer;
                transition: background-color 0.2s ease-in-out;
            }

            .button-container input[type="button"]:hover {
                background-color: #e0e0e0;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            $(document).ready(function () {
                // 当点击向右移动按钮时
                $('#toRight').click(function () {
                    // 从左边列表中选中的每个选项，把它追加到右边的列表中
                    $('#list1 option:selected').appendTo('#list2');
                });

                // 当点击向左移动按钮时
                $('#toLeft').click(function () {
                    // 从右边列表中选中的每个选项，把它追加到左边的列表中
                    $('#list2 option:selected').appendTo('#list1');
                });
            });
        </script>
    </head>
    <body>
        <div class="flex-container">
            <select id="list1" multiple="multiple">
                <option value="1">选项 1</option>
                <option value="2">选项 2</option>
                <option value="3">选项 3</option>
            </select>

            <div class="button-container">
                <input type="button" id="toRight" value="&gt;&gt;" />
                <input type="button" id="toLeft" value="&lt;&lt;" />
            </div>

            <select id="list2" multiple="multiple">
                <option value="4">选项 4</option>
                <option value="5">选项 5</option>
                <option value="6">选项 6</option>
            </select>
        </div>
    </body>
</html>
  • appendTo(): 该方法将匹配的元素集合插入到目标元素的末尾。简单来说，它是将一组元素移动到另一个元素内部。

全选/全不选/反选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Checkbox全选/全不选/反选示例</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                padding: 20px;
                background-color: #f7f7f7;
            }

            .button-group {
                margin-bottom: 20px;
            }

            button {
                padding: 10px 15px;
                margin-right: 10px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                outline: none;
            }

            button:hover {
                opacity: 0.8;
            }

            .checkbox-group {
                margin-bottom: 10px;
            }

            .checkbox-group label {
                display: block;
                margin-bottom: 5px;
                cursor: pointer;
            }

            .checkbox-group input[type="checkbox"] {
                margin-right: 5px;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            $(document).ready(function () {
                // 全选的实现
                $('#select_all').click(function () {
                    $('.like').prop('checked', true);
                });

                // 全不选的实现
                $('#unselect_all').click(function () {
                    $('.like').prop('checked', false);
                });

                // 反选的实现
                $('#toggle_selection').click(function () {
                    $('.like').each(function () {
                        $(this).prop('checked', !$(this).prop('checked'));
                    });
                });
            });
        </script>
    </head>
    <body>
        <!-- 操作按钮 -->
        <div class="button-group">
            <button id="select_all">全选</button>
            <button id="unselect_all">全不选</button>
            <button id="toggle_selection">反选</button>
        </div>

        <!-- 复选框列表 -->
        <div class="checkbox-group">
            <label><input type="checkbox" class="like"> 体育</label>
            <label><input type="checkbox" class="like"> 音乐</label>
            <label><input type="checkbox" class="like"> 逛街</label>
            <label><input type="checkbox" class="like"> 美食</label>
            <label><input type="checkbox" class="like"> 睡觉</label>
            <label><input type="checkbox" class="like"> 学习</label>
            <label><input type="checkbox" class="like"> 健身</label>
        </div>
    </body>
</html>
  • .prop(): 该方法用于设置或返回被选元素的属性和值。当用于设置属性时，该方法为匹配元素的集合设置一个或多个属性/值对。当 .prop() 用于返回属性值时，它返回第一个匹配元素的值。
  • each(): 该方法用来遍历 jQuery 对象集合中的每个元素，为每个匹配元素执行一个函数。它是一个通用的迭代方法，你可以用它来遍历一组元素、数组或对象的属性。

选项卡和自动轮播

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单的选项卡和自动轮播示例</title>
        <style>
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: 0;
                padding: 20px;
                background-color: #f4f4f4;
            }

            .box {
                position: relative;
                max-width: 600px;
                margin: auto;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                border-radius: 8px;
                overflow: hidden;
                background: #fff;
            }

            .tabs {
                list-style-type: none;
                padding: 0;
                margin: 0;
                background: #333;
                overflow: hidden;
            }

            .tabs li {
                float: left;
                margin-right: 5px;
                padding: 10px 20px;
                cursor: pointer;
                background-color: #555;
                color: #fff;
                transition: background-color 0.3s ease;
            }

            .tabs .active {
                background-color: #f90;
                font-weight: bold;
                transition: background-color 0.3s ease;
            }

            .tab-content {
                display: none;
                padding: 20px;
                border-top: none;
                height: auto;
                /* Adjust height as needed */
            }

            .tab-content.active {
                display: block;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            $(document).ready(function () {
                // 必要的变量
                var timer;
                var tabIndex = 0;
                var $tabs = $('.tab');
                var $contents = $('.tab-content');

                // 切换选项卡的函数
                function switchTab(index) {
                    $tabs.removeClass('active').eq(index).addClass('active');
                    $contents.removeClass('active').eq(index).addClass('active');
                }

                // 自动轮播的函数
                function autoPlay() {
                    timer = setInterval(function () {
                        tabIndex = (tabIndex + 1) % $tabs.length;
                        switchTab(tabIndex);
                    }, 2000);
                }

                // 选项卡的点击切换事件
                $tabs.click(function () {
                    tabIndex = $(this).index();
                    switchTab(tabIndex);
                });

                // 鼠标移入.box时清除定时器
                $('.box').mouseenter(function () {
                    clearInterval(timer);
                });

                // 鼠标移出.box时重新开始自动轮播
                $('.box').mouseleave(function () {
                    autoPlay();
                });

                // 初始化自动轮播
                autoPlay();
            });
        </script>
    </head>
    <body>
        <div class="box">
            <ul class="tabs">
                <li class="tab active">体育</li>
                <li class="tab">财经</li>
                <li class="tab">科技</li>
                <li class="tab">军事</li>
            </ul>
            <div class="tab-content active">扬体育文化，传体育精神 成都成华小学走进省体育博物馆参观学习</div>
            <div class="tab-content">卡顿、崩溃？四大行回应！有人10分钟净赚280元</div>
            <div class="tab-content">岭南股份：已与腾讯签订战略合作协议，推动AI等人工智能在文旅行业的应用与落地</div>
            <div class="tab-content">旭日初升，看战机起飞！</div>
        </div>
    </body>
</html>
  • removeClass(className): 这个函数用来从选定的元素中移除一个或多个类名。如果不传递任何参数，则会移除元素上所有的类。
  • addClass(className): 这个函数用来给选定的元素添加一个或多个类名。如果添加的类名已经存在于元素的类列表中，则不会重复添加。

商品展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>手机品牌列表</title>
        <style>
            body {
                font-family: 'Arial', sans-serif;
                margin: 0;
                padding: 20px;
                background-color: #f4f4f4;
            }

            #brands {
                max-width: 300px;
                margin: 0 auto;
                background: #fff;
                padding: 20px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                border-radius: 8px;
            }

            .brands-list {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

            .brands-list li {
                padding: 8px 0;
                border-bottom: 1px solid #ececec;
            }

            #toggle-brands {
                display: block;
                width: 100%;
                text-align: center;
                padding: 10px 0;
                background-color: #007bff;
                color: white;
                border: none;
                border-radius: 4px;
                margin-top: 10px;
                font-size: 16px;
                transition: background-color 0.3s;
            }

            #toggle-brands:hover {
                background-color: #0056b3;
            }

            #more-brands {
                display: none;
                /* 隐藏额外品牌列表 */
            }
        </style>
    </head>
    <body>
        <div id="brands">
            <ul class="brands-list">
                <li>Apple</li>
                <li>Samsung</li>
                <li>Huawei</li>
                <li>Xiaomi</li>
                <div id="more-brands">
                    <li>OnePlus</li>
                    <li>Google</li>
                    <li>Oppo</li>
                    <li>Vivo</li>
                    <!-- 更多品牌... -->
                </div>
            </ul>
            <button id="toggle-brands">更多品牌 ↓</button>
        </div>

        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#toggle-brands').click(function () {
                    $('#more-brands').slideToggle('slow', function () {
                        if ($('#more-brands').is(':visible')) {
                            $('#toggle-brands').text('收起 ↑');
                        } else {
                            $('#toggle-brands').text('更多品牌 ↓');
                        }
                    });
                });
            });
        </script>
    </body>
</html>
  • slideToggle() 函数是一个用于动画显示和隐藏匹配元素的函数。当您对一个元素调用 slideToggle() 时，如果它是可见的，它会执行滑动动画直到元素隐藏，如果它是隐藏的，它会执行滑动动画直到元素可见。

轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带鼠标悬停功能的轮播图</title>
        <style>
            body {
                background: #212121;
            }

            .slider-wrapper {
                width: 600px;
                height: 400px;
                margin: 30px auto;
                overflow: hidden;
                position: relative;
            }

            .slides-container {
                position: relative;
                width: 100%;
                height: 100%;
            }

            .slide {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .slide img {
                width: 100%;
                height: 100%;
            }

            .active {
                display: block;
            }

            .arrow {
                cursor: pointer;
                position: absolute;
                top: 50%;
                width: auto;
                padding: 16px;
                margin-top: -22px;
                color: white;
                font-weight: bold;
                font-size: 18px;
                transition: 0.6s ease;
                border-radius: 0 3px 3px 0;
                user-select: none;
                display: none;
                /* 默认隐藏 */
            }

            .slider-wrapper:hover .arrow {
                display: block;
                /* 鼠标悬停时显示 */
            }

            .prev {
                left: 0;
                border-radius: 3px 0 0 3px;
            }

            .next {
                right: 0;
                border-radius: 0 3px 3px 0;
            }

            .indicator {
                text-align: center;
                position: absolute;
                width: 100%;
                bottom: 10px;
            }

            .dot {
                cursor: pointer;
                height: 15px;
                width: 15px;
                margin: 0 2px;
                background-color: #bbb;
                border-radius: 50%;
                display: inline-block;
                transition: background-color 0.6s ease;
            }

            .dot.active,
            .dot:hover {
                background-color: #717171;
            }
        </style>
        <!-- 引入jQuery库 -->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            $(document).ready(function () {
                var $slides = $('.slide');
                var currentIndex = 0;
                var slideCount = $slides.length;
                var $indicators = $('.dot');
                var slideInterval;

                function switchSlide(newIndex) {
                    $slides.removeClass('active').eq(newIndex).addClass('active');
                    $indicators.removeClass('active').eq(newIndex).addClass('active');
                    currentIndex = newIndex;
                }

                function startSlider() {
                    slideInterval = setInterval(function () {
                        var newIndex = (currentIndex + 1) % slideCount;
                        switchSlide(newIndex);
                    }, 3000);
                }

                function stopSlider() {
                    clearInterval(slideInterval);
                }

                // 初始显示第一张图片并开始自动轮播
                switchSlide(currentIndex);
                startSlider();

                // 鼠标悬停时停止自动轮播
                $('.slider-wrapper').mouseenter(stopSlider).mouseleave(startSlider);

                // 点击箭头切换
                $('.next').click(function () {
                    var newIndex = (currentIndex + 1) % slideCount;
                    switchSlide(newIndex);
                });
                $('.prev').click(function () {
                    var newIndex = (currentIndex - 1 + slideCount) % slideCount;
                    switchSlide(newIndex);
                });

                // 点击指示点切换
                $indicators.click(function () {
                    var newIndex = $(this).index();
                    switchSlide(newIndex);
                });
            });
        </script>
    </head>
    <body>
        <div class="slider-wrapper">
            <div class="slides-container">
                <div class="slide active"><img src="images/03.jpg" alt="Image 03"></div>
                <div class="slide"><img src="images/01.jpg" alt="Image 01"></div>
                <div class="slide"><img src="images/02.jpg" alt="Image 02"></div>

                <a class="prev arrow">&#10094;</a>
                <a class="next arrow">&#10095;</a>
            </div>
            <div class="indicator">
                <span class="dot active"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>
        </div>
    </body>
</html>
本文结束 感谢您的阅读
正在加载今日诗词....