jQuery动画效果：show()与hide()方法详解

该资源是一份关于jQuery的详细课件，主要讲解了如何使用jQuery中的show()和hide()方法来实现动画效果。示例代码展示了如何在点击链接时显示图片，并在图片被点击后隐藏图片。 jQuery是一个广泛使用的JavaScript库，它的出现极大地简化了网页的动态效果和DOM操作。jQuery由John Resig于2005年创建，因其简洁的语法和强大的功能而受到开发者喜爱。jQuery的核心特性包括选择器（类似于CSS）、链式调用、样式支持、动画效果、事件处理和Ajax交互等。 1. jQuery入门 - `$(document).ready()`函数用于确保页面加载完成后才执行其中的代码，另一种写法是`$(function() {...})`，两者功能相同。 - 链式调用是jQuery的一个关键特性，允许连续调用多个方法，每个方法返回的都是jQuery对象，以便继续调用其他方法。 2. jQuery事件处理 - 示例代码展示了`.click()`方法用于绑定点击事件。当用户点击指定元素时，内部的函数将被执行。 - 在事件处理函数内部，`this`通常指向触发事件的DOM元素。要将其转换为jQuery对象以便使用jQuery方法，可以使用`$(this)`。 3. 控制jQuery对象 - 使用`$("#id")`选择器可以根据ID获取DOM元素，转换为jQuery对象。 - `.val()`方法用于获取或设置表单元素的值，如文本框的文本。 - `.click()`方法不仅可以添加点击事件，还可以与其他方法结合，例如在事件触发时改变元素的CSS样式或执行其他操作。 4. 动画效果 - `show()`和`hide()`方法用于显示和隐藏元素，可以接受一个参数表示动画持续的时间，单位为毫秒。在示例中，图片在3秒内显示或隐藏。 - 还可以在`show()`方法中提供回调函数，当动画完成时执行。例如，`show(3000, function() {...})`会在图片显示完毕后执行提供的函数。 5. 更进一步 - jQuery还提供了`fadeIn()`和`fadeOut()`方法实现淡入淡出效果，以及`slideToggle()`进行滑动显示和隐藏。 - jQuery的`.animate()`方法则可以自定义复杂的动画效果，允许改变CSS属性如宽度、高度、透明度等。 - jQuery的事件绑定还包括`.bind()`, `.live()`, `.delegate()`, `.on()`等，可以根据需求选择合适的绑定方式。 通过学习这个课件，开发者能够掌握基本的jQuery动画效果和事件处理，为进一步探索jQuery的高级功能和插件开发奠定基础。jQuery的易用性和丰富的功能使得它成为了现代Web开发中的必备工具之一。