jQuery网页特效设计基础教程

目录

  1. 第一部分：初识jQuery

    jquery网页特效设计基础教程
    （图片来源网络，侵删）
    • 1 什么是jQuery？
    • 2 为什么要使用jQuery？
    • 3 如何引入jQuery？

  2. 第二部分：jQuery核心基础

    • 1 jQuery的入口函数 - $(document).ready()
    • 2 jQuery对象 vs. DOM对象
    • 3 jQuery选择器（重中之重）
    • 4 jQuery的链式操作

  3. 第三部分：jQuery特效与动画

    • 1 基础显隐效果
    • 2 滑动效果
    • 3 淡入淡出效果
    • 4 自定义动画 animate()

  4. 第四部分：DOM操作与事件处理

    • 1 内容操作
    • 2 属性与样式操作
    • 3 创建、添加、删除元素
    • 4 事件处理

  5. 第五部分：实战案例

    jquery网页特效设计基础教程
    （图片来源网络，侵删）
    • 1 案例一：导航栏下拉菜单
    • 2 案例二：图片轮播图
    • 3 案例三：Tab标签页切换

  6. 第六部分：最佳实践与进阶

    • 1 性能优化建议
    • 2 推荐学习资源

第一部分：初识jQuery

1 什么是jQuery？

jQuery 是一个快速、小型且功能丰富的 JavaScript 库，它通过 “写更少的代码，做更多的事情”（Write Less, Do More）的理念，极大地简化了 JavaScript 的 DOM 操作、事件处理、动画设计和 AJAX 交互。

你可以把它想象成 JavaScript 的一个“超级工具箱”，里面装满了已经帮你写好的、非常方便的工具函数。

2 为什么要使用jQuery？

  • 简洁的语法：用 jQuery 实现的功能，通常用原生 JavaScript 会写很多代码。
  • 跨浏览器兼容性：jQuery 帮你处理了不同浏览器之间的差异（IE 和 Chrome 的差异）,你无需担心兼容性问题。
  • 强大的选择器：轻松、精确地找到页面上的任何一个元素。
  • 丰富的动画效果：内置了多种简单易用的动画方法。
  • 庞大的插件生态：有无数成熟的插件（如轮播图、日历、弹窗等）可以直接使用。

3 如何引入jQuery？

最简单的方式就是通过 CDN（内容分发网络）引入，就像引入 CSS 文件一样，在 HTML 页面的 <head> 或 <body> 标签结束前,添加一行代码即可。

jquery网页特效设计基础教程
（图片来源网络，侵删）
<!-- 推荐放在 body 标签结束前，这样可以确保页面内容先加载，再执行脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

注意：在生产环境中，建议使用一个稳定的版本号（如 6.0），而不是 latest,以避免未来版本更新带来的潜在问题。

第二部分：jQuery核心基础

1 jQuery的入口函数

为了确保在 DOM 元素加载完毕后再执行 jQuery 代码，我们需要使用入口函数，这相当于原生 JavaScript 中的 window.onload,但更强大。

写法一（推荐）：

$(document).ready(function() {
    // 在这里写你的 jQuery 代码
    console.log("DOM 加载完毕，jQuery 可以开始工作了！");
});

简写（非常常用）：

$(function() {
    // 在这里写你的 jQuery 代码
    console.log("DOM 加载完毕，jQuery 可以开始工作了！");
});

2 jQuery对象 vs. DOM对象

这是初学者最容易混淆的地方。

  • DOM 对象：浏览器原生提供的 JavaScript 对象。document.getElementById('myDiv') 返回的就是一个 DOM 对象，它只能调用原生的 JavaScript 方法或属性。
  • jQuery 对象：使用 jQuery 包装后产生的对象。$('#myDiv') 返回的就是一个 jQuery 对象，它只能调用 jQuery 提供的方法或属性。

如何区分？ jQuery 对象通常是一个包含了 DOM 对象的数组，并且有一个标志性属性 length，你可以通过打印对象来观察，或者使用 instanceof 判断。

最重要的区别：它们的方法不能混用！ DOM对象 不能使用 jQuery 的方法（如 .hide()），jQuery对象 也不能使用 DOM 的方法（如 style.display）。

相互转换：

  • DOM 对象 -> jQuery 对象：用 包装。

    var domEl = document.getElementById('myDiv');
var $jqEl = $(domEl); // 现在可以调用 jQuery 方法了
$jqEl.hide();

  • jQuery 对象 -> DOM 对象：

    1. 使用索引 [0] 或 .get(0)。
      var $jqEl = $('#myDiv');
var domEl = $jqEl[0]; // 或者 var domEl = $jqEl.get(0);
domEl.style.display = 'none'; // 现在可以调用 DOM 方法了
    2. 使用 .each() 遍历（当选择器匹配多个元素时）。

3 jQuery选择器（重中之重）

jQuery 的选择器非常强大，语法几乎和 CSS 选择器一模一样。

选择器 语法 描述 示例
基本选择器
ID选择器 $('#id') 根据元素的 ID 选择 $('#header')
类选择器 $('.class') 根据元素的 class 选择 $('.active')
元素选择器 $('element') 根据标签名选择 $('p')
通配符选择器 选择所有元素
组合选择器 $('selector1, selector2') 将多个选择器结果合并 $('div, p, .myClass')
层次选择器
后代选择器 $('ancestor descendant') 选择指定元素内的所有后代元素 $('div span')
子选择器 $('parent > child') 选择指定元素内的所有直接子元素 $('ul > li')
相邻兄弟选择器 $('prev + next') 选择紧接在 prev 元素之后的 next 元素 $('h1 + p')
通用兄弟选择器 $('prev ~ siblings') 选择 prev 元素之后的所有兄弟元素 $('#title ~ div')
过滤选择器
first $('li:first') 选择第一个元素 $('li:first')
last $('li:last') 选择最后一个元素 $('li:last')
eq(index) $('li:eq(2)') 选择索引等于 index 的元素（索引从0开始） $('li:eq(2)')
odd / even $('li:odd') / $('li:even') 选择索引为奇数/偶数的元素 $('tr:odd') (常用于隔行变色)
contains(text) $('div:contains("Hello")') 选择包含指定文本的元素 $('p:contains("jQuery")')

4 jQuery的链式操作

这是 jQuery 非常优雅的一个特性，当一个 jQuery 对象的方法执行完毕后，它会返回这个 jQuery 对象本身，因此你可以立即在它后面调用另一个 jQuery 方法。

例子： 传统的写法：

$('p').css('color', 'red');
$('p').show();
$('p').addClass('highlight');

链式操作写法：

$('p').css('color', 'red').show().addClass('highlight');

这行代码同时完成了三个操作,代码简洁高效。

第三部分：jQuery特效与动画

1 基础显隐效果

方法 描述 示例
.hide() 隐藏元素（可设置速度和回调） $('#box').hide();
.show() 显示元素（可设置速度和回调） $('#box').show();
.toggle() 切换元素的显示和隐藏状态 $('#box').toggle();

速度参数：可以是 "slow" (600ms), "fast" (200ms), 或者一个数字（单位毫秒）。 回调函数：在动画执行完毕后触发。

// 慢速隐藏，并在隐藏完成后弹出提示
$('#box').hide('slow', function() {
    alert('元素已隐藏！');
});

2 滑动效果

方法 描述 示例
.slideDown() 向下滑动显示元素 $('#menu').slideDown();
.slideUp() 向上滑动隐藏元素 $('#menu').slideUp();
.slideToggle() 切换元素的滑动显示和隐藏 $('#menu').slideToggle();

3 淡入淡出效果

方法 描述 示例
.fadeIn() 淡入显示元素 $('#msg').fadeIn();
.fadeOut() 淡出隐藏元素 $('#msg').fadeOut();
.fadeToggle() 切换元素的淡入和淡出 $('#msg').fadeToggle();
.fadeTo(speed, opacity) 将元素调整到指定的透明度 $('#msg').fadeTo(1000, 0.5); // 1秒内调整到50%透明度

4 自定义动画 animate()

这是最强大的动画方法,可以创建自定义的动画效果。

语法：

.animate( properties, [duration], [easing], [complete] )
  • properties: 一个对象，定义了要变化的 CSS 属性及其最终值。
  • duration: (可选) 动画持续时间。
  • easing: (可选) 缓动函数，如 "swing" (默认) 或 "linear"。
  • complete: (可选) 动画完成后的回调函数。

示例：

// 点击按钮，让方块移动到 (500, 300) 的位置，并且宽度和高度都变为 300px
$('#moveBtn').click(function() {
    $('#box').animate({
        left: 500,
        top: 300,
        width: 300,
        height: 300,
        opacity: 0.5
    }, 2000, 'swing', function() {
        alert('动画完成！');
    });
});

注意：使用 animate() 时，被动画的元素必须设置 position 属性（如 relative, absolute, fixed）。

第四部分：DOM操作与事件处理

1 内容操作

方法 描述
.html() 获取/设置元素的 HTML 内容
.text() 获取/设置元素的纯文本内容
.val() 获取/设置表单元素的值 
// 获取
var content = $('#div1').html(); 
// 设置
$('#div1').html('<p>新的HTML内容</p>');
// 获取输入框的值
var username = $('#username').val();
// 设置输入框的值
$('#username').val('请输入用户名');

2 属性与样式操作

方法 描述
.attr() 获取/设置元素的属性（如 id, src, href）
.removeAttr() 移除元素的属性
.prop() 获取/设置元素的 DOM 属性（如 checked, selected）
.css() 获取/设置元素的 CSS 样式 
// 操作属性
$('#img1').attr('src', 'new-image.jpg');
// 操作样式
$('#div1').css('color', 'blue');
// 批量设置样式
$('#div1').css({
    'background-color': 'yellow',
    'font-size': '20px',
    'border': '1px solid black'
});

3 创建、添加、删除元素

方法 描述
创建
$('<p>Hello</p>') 使用字符串创建一个新的 jQuery 对象
添加
.append() 在元素内部末尾
.prepend() 在元素内部开头
.after() 在元素后面添加兄弟内容
.before() 在元素前面添加兄弟内容
删除
.remove() 从 DOM 中移除元素（可带过滤器）
.empty() 清空元素的所有子节点

4 事件处理

jQuery 提供了非常简洁的事件绑定方法。

方法 描述
.click() 点击事件
.hover() 鼠标悬停事件（一个函数处理进入和离开）
.mouseenter() / .mouseleave() 鼠标进入 / 离开事件
.on() 通用事件绑定方法（推荐），可以绑定所有事件，并支持事件委托

基本用法：

// 点击事件
$('#btn').click(function() {
    alert('按钮被点击了！');
});
// hover 事件
$('#box').hover(
    function() { // 鼠标进入时执行
        $(this).css('background-color', 'lightblue');
    },
    function() { // 鼠标离开时执行
        $(this).css('background-color', 'white');
    }
);

.on() 方法（更强大、更灵活）：

// 基本绑定
$('#btn').on('click', function() {
    alert('使用 on 绑定点击事件');
});
// 事件委托：给未来动态添加的元素也绑定事件
// 将点击事件绑定到父元素 ul 上，但只处理 li 元素的点击
$('ul').on('click', 'li', function() {
    $(this).css('color', 'red');
});

第五部分：实战案例

1 案例一：导航栏下拉菜单

目标：鼠标移到“产品”菜单上,显示下拉子菜单。

HTML:

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li>
        <a href="#">产品</a>
        <ul class="sub-nav">
            <li><a href="#">产品A</a></li>
            <li><a href="#">产品B</a></li>
            <li><a href="#">产品C</a></li>
        </ul>
    </li>
    <li><a href="#">关于我们</a></li>
</ul>

CSS:

.sub-nav {
    display: none; /* 默认隐藏 */
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    background-color: #f1f1f1;
}
.nav li {
    position: relative;
    display: inline-block;
}

jQuery:

$(document).ready(function() {
    // 鼠标移入 "产品" li 时，显示子菜单
    $('.nav li').hover(
        function() {
            $(this).find('.sub-nav').slideDown('fast');
        },
        function() {
            $(this).find('.sub-nav').slideUp('fast');
        }
    );
});

2 案例二：图片轮播图

目标：实现一个自动播放、可点击切换的图片轮播图。

HTML:

<div class="slider">
    <div class="slider-wrapper">
        <img src="img1.jpg" alt="Image 1" class="slide active">
        <img src="img2.jpg" alt="Image 2" class="slide">
        <img src="img3.jpg" alt="Image 3" class="slide">
    </div>
    <button class="prev">&lt;</button>
    <button class="next">&gt;</button>
</div>

CSS:

.slide { display: none; }
.slide.active { display: block; }

jQuery:

$(document).ready(function() {
    let currentIndex = 0;
    const slides = $('.slide');
    const totalSlides = slides.length;
    function showSlide(index) {
        slides.removeClass('active'); // 隐藏所有图片
        $(slides[index]).addClass('active'); // 显示当前图片
    }
    function nextSlide() {
        currentIndex = (currentIndex + 1) % totalSlides;
        showSlide(currentIndex);
    }
    // 自动播放
    setInterval(nextSlide, 3000);
    // 点击“下一张”按钮
    $('.next').click(function() {
        nextSlide();
    });
    // 点击“上一张”按钮
    $('.prev').click(function() {
        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
        showSlide(currentIndex);
    });
});

3 案例三：Tab标签页切换

目标：点击不同的标签,切换显示对应的内容面板。

HTML:

<div class="tabs">
    <ul class="tab-headers">
        <li class="active">新闻</li>
        <li>体育</li>
        <li>娱乐</li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">这里是新闻内容...</div>
        <div class="tab-pane">这里是体育内容...</div>
        <div class="tab-pane">这里是娱乐内容...</div>
    </div>
</div>

CSS:

.tab-pane { display: none; }
.tab-pane.active { display: block; }

jQuery:

$(document).ready(function() {
    $('.tab-headers li').click(function() {
        // 1. 移除所有标签页的 active 类
        $('.tab-headers li').removeClass('active');
        $('.tab-pane').removeClass('active');
        // 2. 给当前点击的标签页添加 active 类
        $(this).addClass('active');
        // 3. 找到对应的内容面板并显示
        // 使用 index() 获取当前点击元素的索引，然后用这个索引来选择对应的内容面板
        const index = $(this).index();
        $('.tab-pane').eq(index).addClass('active');
    });
});

第六部分：最佳实践与进阶

1 性能优化建议

  1. 缓存 jQuery 对象：避免重复查询 DOM,将选择器结果存入变量。

    // 不推荐
$('#myDiv').css('color', 'red');
$('#myDiv').show();
// 推荐
var $myDiv = $('#myDiv');
$myDiv.css('color', 'red').show();

  2. 使用 ID 选择器：ID 选择器是最快的，因为浏览器可以直接通过 getElementById 定位元素。

  3. 链式操作：如前所述，它能让代码更简洁,也可能有轻微的性能提升。

  4. 事件委托：对于动态添加的元素或大量子元素的事件绑定，使用 .on() 进行事件委托,而不是为每个子元素单独绑定事件。

  5. 版本选择：开发时使用未压缩版（便于调试），生产环境使用压缩版（文件小，加载快）。

2 推荐学习资源

恭喜你完成了这份基础教程！现在你已经掌握了 jQuery 的核心知识，包括选择器、动画、DOM 操作和事件处理，从现在开始，大胆地去尝试和实践，将这些知识应用到你的项目中,你会发现网页特效的开发变得前所未有的简单和有趣。

熟能生巧，多写代码，多看优秀案例，你的 jQuery 技巧一定会越来越娴熟！